# Vue Bootstrap Modal Component > Learn how to use CoreUI’s Vue Modal component with Bootstrap styles for flexible, framework-consistent UI. ## Examples ### Modal components Below is a static modal example (meaning its `position` and `display` have been overridden). Included are the modal header, modal body (required for `padding`), and modal footer (optional). We ask that you include modal headers with actions whenever possible, or provide another explicit action. ```html ``` ### Live demo Toggle a working modal demo by clicking the button below. It will slide down and fade in from the top of the page. ```html ``` ### Static backdrop If you set `backdrop` property to `static`, your modal will behave as though the backdrop is static, meaning it will not close when clicking outside it. Click the button below to try it. ```html ``` ### Scrolling long content When modals become too long for the user's viewport or device, they scroll independent of the page itself. Try the demo below to see what we mean. ```html ``` You can also create a scrollable modal that allows scroll the modal body by adding `scrollable` prop. ```html ``` ### Vertically centered Add `alignment="center` to `` to vertically center the modal. ```html ``` ```html ``` ### Tooltips and popovers `` and `` can be placed within modals as needed. When modals are closed, any tooltips and popovers within are also automaticallyed. ```html ``` ### Toggle between modals Toggle between multiple modals with some clever placement of the `visible` props. **Please note multiple modals cannot be opened at the same time** — this method simply toggles between two separate modals. ```html ``` ### Change animation The variable `$modal-fade-transform` determines the transform state of React Modal component before the modal fade-in animation, whereas the variable `$modal-show-transform` determines the transform state of Modal component after the modal fade-in animation. If you want a zoom-in animation, for example, set `$modal-fade-transform: scale(.8)`. ### Remove animation For modals that simply appear rather than fade into view, set `transition` to `false`. ```vue ... ``` ### Accessibility Be sure to add `aria-labelledby="..."`, referencing the modal title, to `` Additionally, you may give a description of your modal dialog with `aria-describedby` on ``. Note that you don’t need to add `role="dialog` since we already add it. ## Optional sizes Modals have three optional sizes, available via modifier classes to be placed on a ``. These sizes kick in at certain breakpoints to avoid horizontal scrollbars on narrower viewports.
Size Property size Modal max-width
Small 'sm' 300px
Default None 500px
Large 'lg' 800px
Extra large 'xl' 1140px
```html ``` ## Fullscreen Modal Another override is the option to pop up a modal that covers the user viewport, available via property `fullscreen`.
Property fullscreen Availability
true Always
'sm' Below 576px
'md' Below 768px
'lg' Below 992px
'xl' Below 1200px
'xxl' Below 1400px
```html ```