BootstrapVue Modal

Our BootstrapVue modals are lightweight and multi-purpose popups that are built with HTML, CSS, and JavaScript. The three primary sections of a BootstrapVue modal are header, body, and footer. Modals are positioned over everything else in the document and remove scroll from the <body> so that modal content scrolls instead. Use BootstrapVue’s JavaScript modal plugin to add dialogues to your site for lightboxes, user notifications, or completely custom content.


Keep reading our Bootstrap Modal examples and learn how to use it.

Example

<div>
  <b-button v-b-modal.modal-1 variant="primary">Launch demo modal</b-button>

  <b-modal id="modal-1" title="New message to undefined">
    <p class="my-4">...</p>
  </b-modal>
</div>

Variations

<b-row>
  <b-col md="4">
    <base-button type="primary" block class="mb-3" @click="modals.classic = true">Default</base-button>
  </b-col>

  <b-col md="4">
    <base-button type="warning" block class="mb-3" @click="modals.notice = true">Notification</base-button>
  </b-col>

  <b-col md="4">
    <base-button type="default" block class="mb-3" @click="modals.form = true">Form</base-button>
  </b-col>
</b-row>

<!--Classic modal-->
<modal :show.sync="modals.classic">
  <h6 slot="header" class="modal-title">Type your modal title</h6>

  <p>Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the
    blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language
    ocean.</p>
  <p>A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a
    paradisematic country, in which roasted parts of sentences fly into your mouth.</p>


  <template slot="footer">
    <base-button type="primary">Save changes</base-button>
    <base-button type="link" class="ml-auto" @click="modals.classic = false">Close</base-button>
  </template>

</modal>

<!--Notice modal-->
<modal :show.sync="modals.notice"
       modal-classes="modal-danger"
       modal-content-classes="bg-gradient-danger">
  <h6 slot="header" class="modal-title">Your attention is required</h6>

  <div class="py-3 text-center">
    <i class="ni ni-bell-55 ni-3x"></i>
    <h4 class="heading mt-4">You should read this!</h4>
    <p>A small river named Duden flows by their place and supplies it with the necessary regelialia.</p>
  </div>


  <template slot="footer">
    <base-button type="white">Ok, Got it</base-button>
    <base-button type="link" class="text-white ml-auto" @click="modals.notice = false">Close</base-button>
  </template>

</modal>

<!--Form modal-->
<modal :show.sync="modals.form"
       size="sm"
       body-classes="p-0">
  <card type="secondary"
        header-classes="bg-transparent pb-5"
        body-classes="px-lg-5 py-lg-5"
        class="border-0 mb-0">
    <template slot="header">
      <div class="text-muted text-center mt-2 mb-3">
        <small>Sign in with</small>
      </div>
      <div class="btn-wrapper text-center">
        <base-button type="neutral" icon>
          <span class="btn-inner--icon"><img src="img/icons/common/github.svg"></span>
          <span class="btn-inner--text">Github</span>
        </base-button>
        <base-button type="neutral" icon>
          <span class="btn-inner--icon"><img src="img/icons/common/google.svg"></span>
          <span class="btn-inner--text">Google</span>
        </base-button>
      </div>
    </template>

    <template>
      <div class="text-center text-muted mb-4">
        <small>Or sign in with credentials</small>
      </div>
      <b-form role="form">
        <base-input alternative
                    v-model="formModal.email"
                    class="mb-3"
                    placeholder="Email"
                    prepend-icon="ni ni-email-83">
        </base-input>
        <base-input alternative
                    v-model="formModal.password"
                    type="password"
                    placeholder="Password"
                    prepend-icon="ni ni-lock-circle-open">
        </base-input>
        <b-form-checkbox v-model="formModal.remember">
          Remember me
        </b-form-checkbox>
        <div class="text-center">
          <base-button type="primary" class="my-4">Sign In</base-button>
        </div>
      </b-form>
    </template>
  </card>

</modal>

Modal props

PROP NAME TYPE DEFAULT DESCRIPTION
show Boolean N/A  
showClose Boolean true  
type String N/A Modal type (notice/mini/””)
modalClasses Object / String N/A Modal dialog css classes
size String N/A Modal size
modalContentClasses Object / String N/A Modal dialog content css classes
gradient String N/A Modal gradient type (danger, primary etc)
headerClasses Object / String N/A Modal Header css classes
bodyClasses Object / String N/A Modal Body css classes
footerClasses Object / String N/A Modal Footer css classes
animationDuration Number 500 Modal transition duration

Modal events

NAME DESCRIPTION PARAMS
close triggers when modal closes the updated value

Modal slots

SLOT DESCRIPTION
default Default content for modal
header Modal header content
footer Modal footer content
close-button Content for modal close button

If you want to see more examples and properties please check the official BootstrapVue Documentation.