Bootstrap vue remove padding from modal body

Question

How can I remove modal body padding? Im using BoostrapVue

 <b-modal
  v-model="show"
  title="Modal Variants">

  <b-container fluid>
  </b-container>

  <div slot="modal-footer" class="w-100">
    <b-button size="sm" class="float-right" variant="primary" @click="show=false">Close</b-button>
  </div>
</b-modal>

Answer 1

You can provide your own class to remove the body padding via the body-class property (or use the bootstrap p-0 class).

new Vue({
  el: '#app',
  mounted () {
    this.$refs.modal.show()
  }
})

<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css" />
<script src="//unpkg.com/@babel/polyfill@latest/dist/polyfill.min.js"></script>
<script src="//unpkg.com/vue@latest/dist/vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.min.js"></script>

<div id='app'>
  <div>
    <b-modal ref="modal" id="modal1" title="BootstrapVue" body-class="p-0">
      <container fluid>
        content
      </container>
      <div slot="modal-footer">
        <b-button size="sm" class="float-right" variant="primary">Close</b-button>
      </div>
    </b-modal>
  </div>
</div>