title: bootstrap-vue change the position of <b-modal>
body: <p>By default <code>&lt;b-modal&gt;</code> shows on top of the page. When attribute <code>centered</code> is added to the tag. It is centered.</p>
  
  <p>However, I would like to show the modal with a certain amount of gap under the top of the page.<br>
  The Modal is shown when the home page is opened.  </p>
  
  <p><strong>AppModal.vue</strong>  </p>
  
  <pre><code>&lt;template&gt;
  &lt;b-modal ref="thisModalRef" :modal-class="my-modal" size="lg" hide-header hide-footer no-close-on-backdrop hide-header-close&gt;
      //...
  &lt;/b-modal&gt;
  &lt;/template&gt;
  &lt;script&gt;
  export default {
    data () {
      return {
        mymodal: ['mymodal']
      }
    },
    methods: {
      hideModal () {
        this.$refs.thisModalRef.hide()
      },
      showModal () {
        this.$refs.thisModalRef.show()
      }
    }
  }
  &lt;/script&gt;
  
  &lt;style scoped&gt;
    .mymodal &gt; div {
      position: absolute;
      top: 300px;
      right: 100px;
      background-color: yellow;
    }
  &lt;/style&gt;
  </code></pre>
  
  <p><strong>AppHome.vue</strong>  </p>
  
  <pre><code>&lt;template&gt;
    &lt;div&gt;
      // omitted
      &lt;AppModal ref="modalRef"&gt;&lt;/AppModal&gt;
    &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  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()
    }
  }
  &lt;/script&gt;
  
  &lt;style scoped&gt;
  // ommitted
  &lt;/style&gt;
  </code></pre>
  
  <p><strong>html source related to modal</strong>  </p>
  
  <pre><code>&lt;div id="__BVID__16___BV_modal_outer_"&gt;
     &lt;div id="__BVID__16" role="dialog" class="modal fade show d-block mymodal" style="padding-right: 15px;"&gt;
        &lt;div class="modal-dialog modal-lg"&gt;
           &lt;div tabindex="-1" role="document" aria-describedby="__BVID__16___BV_modal_body_" class="modal-content"&gt;
              &lt;!----&gt;
              &lt;div id="__BVID__16___BV_modal_body_" class="modal-body"&gt;
                 // ommitted
              &lt;/div&gt;
              &lt;!----&gt;
           &lt;/div&gt;
        &lt;/div&gt;
     &lt;/div&gt;
     &lt;div id="__BVID__16___BV_modal_backdrop_" class="modal-backdrop fade show"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>As you can see, <code>mymodal</code> class is correctly applied. But the div <code>.modal-dialog</code> does not have the css properties I give it.  </p>
  
  <p><strong>the real css properties found in dev tools</strong>  </p>
  
  <pre><code>.modal-dialog {
      position: relative;
      width: auto;
      margin: 0.5rem;
      pointer-events: none;
  }
  </code></pre>
  
  <p>I tried adding a custom class to <code>&lt;b-modal&gt;</code> and style it. Nothing worked.
  Please help.</p>