Theme Settings
Theme
Header
Sidebar
Left Sidebar Bg Image
Scheme
Layout
Table Designs
Fonts
Input
Buttons Styles
Buy Now

Modals

Basic Modal

Use the prop no-fade on the component to disable animation. Vertically center your modal in the viewport by setting the centered prop. Hide the modal's backdrop via setting the hide-backdrop prop.

Modal Themes

Use class modal-class="modal-{color}" with your to change theme of modal

Modal Sizes

Modals have three optional sizes, available via the prop size . These sizes kick in at certain breakpoints to avoid horizontal scrollbars on narrower viewports. Valid optional sizes are xs,sm, lg and xl .

Form & Scrolling Modals

Variants

Control the header, footer, and body background and text variants by setting the header-bg-variant, header-text-variant, body-bg-variant, body-text-variant, footer-bg-variant, and footer-text-variant props.

Using v-model property

v-model property is always automatically synced with visible state and you can show/hide using v-model.

Prevent closing

To prevent from closing (for example when validation fails). you can call the .preventDefault() method of the event object passed to your ok (OK button),cancel (Cancel button), close (modal header close button) and hide event handlers.

Submitted Names:

Teresa
Disabling built-in footer buttons

You can disable the Cancel and OK buttons individually by setting the cancel-disabled and ok-disabled props, respectively, to true . Set the prop to false to re-enable the button.

Confirm message box

BootstrapVue provides a few built in Message Box methods on the exposed this.$bvModal object. These methods provide a way to generate simple OK and Confirm style modal messages, from anywhere in your app without having to explicitly place a component in your pages.

First modal return value:

Second modal return value:

Footer button size

Fancy smaller or larger buttons in the default footer? Simply set the button-size prop to 'sm' for small buttons, or 'lg' for larger buttons.

Multiple modal support

To disable stacking for a specific modal, just set the prop no-stacking on the component. This will hide the modal before another modal is shown.

Open first modal
Modal Method

You can access modal using ref attribute and then call the show(), hide() or toggle() methods.

Agastya Admin ©

First modal return value:

Second modal return value: