bootstrap-vue change the position of


By default <b-modal> shows on top of the page. When attribute centered is added to the tag. It is centered.

However, I would like to show the modal with a certain amount of gap under the top of the page.
The Modal is shown when the home page is opened.


<template> <b-modal ref="thisModalRef" :modal-class="my-modal" size="lg" hide-header hide-footer no-close-on-backdrop hide-header-close> //... </b-modal> </template> <script> export default { data () { return { mymodal: ['mymodal'] } }, methods: { hideModal () { this.$refs.thisModalRef.hide() }, showModal () { this.$refs.thisModalRef.show() } } } </script> <style scoped> .mymodal > div { position: absolute; top: 300px; right: 100px; background-color: yellow; } </style>


<template> <div> // omitted <AppModal ref="modalRef"></AppModal> </div> </template> <script> import AppModal from './AppModal' export default { components: { AppModal }, data () { return { msg: 'Welcome to Your Vue.js App' } }, methods: { showModal: function () { this.$refs.modalRef.showModal() } }, mounted () { this.showModal() } } </script> <style scoped> // ommitted </style>

html source related to modal

<div id="__BVID__16___BV_modal_outer_"> <div id="__BVID__16" role="dialog" class="modal fade show d-block mymodal" style="padding-right: 15px;"> <div class="modal-dialog modal-lg"> <div tabindex="-1" role="document" aria-describedby="__BVID__16___BV_modal_body_" class="modal-content"> <!----> <div id="__BVID__16___BV_modal_body_" class="modal-body"> // ommitted </div> <!----> </div> </div> </div> <div id="__BVID__16___BV_modal_backdrop_" class="modal-backdrop fade show"></div> </div>

As you can see, mymodal class is correctly applied. But the div .modal-dialog does not have the css properties I give it.

the real css properties found in dev tools

.modal-dialog { position: relative; width: auto; margin: 0.5rem; pointer-events: none; }

I tried adding a custom class to <b-modal> and style it. Nothing worked. Please help.


If you want to put the modal into the specific position, below is my solutuon:


add specific class to <b-modal> by its props=modal-class

</li> <li>

then add your styles into myclass > div

</li> </ol>

You can look into the github (line#:176), Bootstrap-vue will place one div.modal-content(including header/body/foot) into one div with class="modal-dialog" which is the direct child of root.

That is why above solution use the css selector = .myclass > div.

If you look into the dom tree: the structure of one bootstrap-vue modal will be:

one root div (myclass will be added into here) -> one div with modal-dialog -> one div with modal-content -> header/body/footer

Below is one sample: (<em>I put different background-color for modal-dialog, modal-content.</em>)

<pre class="snippet-code-js lang-js prettyprint-override">app = new Vue({ //not vue, it is Vue el: "#app", data: { myclass: ['myclass'] }, methods: { showModal: function(){ this.$refs.myModalRef.show() } } }) <pre class="snippet-code-css lang-css prettyprint-override">.myclass > div { position:absolute !important; top: -10px !important; left: -10px !important; background-color:yellow !important; } .myclass > .modal-dialog > .modal-content { background-color:red !important; } <pre class="snippet-code-html lang-html prettyprint-override"><!-- Add this to <head> --> <link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css"/> <link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css"/> <!-- Add this after vue.js --> <script src="https://unpkg.com/vue@2.5.16/dist/vue.js"></script> <script src="//unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script> <script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script> <div id="app"> <b-button @click="showModal"> Open Modal </b-button> <b-modal ref="myModalRef" :modal-class="myclass" size="lg"> <h2>Test</h2> </b-modal> </div>

Maybe you could try with something like margin-top: 100px.


I think it's because the @media breakpoint of Bootstrap. Then, in <style> you just override it.

@media (min-width: 576px) { .modal-dialog { margin: .5rem auto; } }



  • bootstrap-vue change the position of
  • Xdebug (Vagrant) not working with SublimeText 3
  • Run job on ASP.NET website service start in IIS
  • Calling python scripts from inside python
  • Slow Update after Truncate
  • span contenteditable width won't work
  • Cannot determine the module for class X in X.ts! Add X to the NgModule to fix it error in ionic2
  • google map and api shows different results
  • How to extract details from the xml files using java?
  • Static analysis of header inclusion in C++
  • When scaling and drawing an image to canvas in iOS Safari, width is correct but height is squished
  • how to transform dataframe that contains list in every row of each column
  • Using one probability set to generate another [duplicate]
  • CABasicAnimation creates empty default value copy of CALayer
  • How exactly do you use json_decode to pass a javascript array to php?
  • SELECT on JSONField with Django
  • Check 'Manager can update membership list' in AD
  • PowerShell script to pass SecureString to Plink as account and sudo passwords
  • Bison does not appear to recognize C string literals appropriately
  • Authorize Attribute Authentication with Postman in Web Api
  • System.Drawing.DrawString() weird wrapping of long string
  • AWS RDS Parameter Group not changing MySQL encoding
  • Swift manually rotate view controller
  • Copy and paste data from multiple workbooks to a worksheet in another Workbook
  • 'Edit' function for forum posts and such
  • How to create subsets of a single set of elements with XSLT?
  • Multiplying polynomials/simplifying like terms
  • how to run a different select statement based on condition in Hive SQL
  • openpyxl - adding new rows in excel file with merged cell existing
  • How to write seo friendly url's using htaccess?
  • using maven pom while creating jar:test-jar some times it says JAR will be empty - no content was ma
  • Conflicting declaration using constexpr and auto in C++11
  • Using Service Component Runtime
  • Create/delete users from text file using Bash script
  • Time Complexity of Fibonacci Algorithm [duplicate]
  • How to check if object is null in Java?