Bootstrap 4 Tutorial
BS4 Introduction BS4 Getting Started BS4 Containers BS4 Typography BS4 Grid Basics BS4 Tables BS4 Images BS4 Jumbotron BS4 Buttons BS4 Button Groups BS4 Spinners BS4 Alerts BS4 Dropdowns BS4 Collapse BS4 Navs BS4 Navbars BS4 Pagination BS4 Breadcrumbs BS4 Badges BS4 Progress Bars BS4 List Groups BS4 Cards BS4 Forms BS4 Inputs BS4 Input Groups BS4 Custom Forms BS4 Carousel BS4 Modal BS4 Tooltips BS4 Popovers BS4 Toast BS4 Scrollspy BS4 Media Objects BS4 Filters BS4 Utilities Bootstrap 3 vs. Bootstrap 4
Bootstrap 4 Grid
BS4 Grid System BS4 Grid XSmall BS4 Grid Small BS4 Grid Medium BS4 Grid Large BS4 Grid XLarge
Bootstrap 4 Reference
JS Alert JS Carousel JS Collapse JS Dropdown JS Modal JS Popover JS Tab JS Toasts JS Tooltip

Bootstrap 4 JS Modal

Modal CSS Classes

Modal are used to add dialogs to your site for lightboxes, user notifications, or completely custom content.

Class Description
.modal Creates a modal
.modal-content Styles the modal properly with border, background-color, etc. Use this class to add the modal's header, body, and footer
.modal-dialog-centered Centers the modal vertically and horizontally within the page
.modal-dialog-scrollable Adds a scrollbar inside the modal
.modal-header Defines the style for the header of the modal
.modal-body Defines the style for the body of the modal
.modal-footer Defines the style for the footer in the modal. Note: This area is right-aligned by default. To change this, add the justify-content-start or justify-content-center together with the .modal-footer class
.modal-sm Specifies a small modal
.modal-lg Specifies a large modal
.fade Adds an animation/transition effect which fades the modal in and out

For a tutorial about modals, visit our Bootstrap 4 Modal Tutorial.


Usage

The modal plugin toggles your hidden content on demand, via data attributes or JavaScript.

It also adds .modal-open to the <body> to override default scrolling behavior and generates a .modal-backdrop to provide a click area for dismissing shown modals when clicking outside the modal.


Activate the Modal Via data-* Attributes

Set data-toggle="modal" on a controller element, like a button, along with a data-target="#myModal".

For <a> elements, omit data-target, and use href="#myModal" instead:

Run code

Activate Via JavaScript

Call a modal with id myModal with a single line of JavaScript:

Run code

Modal Options

Options can be passed via data attributes or JavaScript.

For data attributes, append the option name to data-, as in data-backdrop="".

Name Type Default Description Example
backdrop boolean or the string 'static' true Includes a modal-backdrop element. Alternatively, specify static for a backdrop which doesn't close the modal on click. Demo
keyboard boolean true Closes the modal when escape key is pressed
focus boolean true Puts the focus on the modal when initialized.
show boolean true Shows the modal when initialized.

Modal Methods

The following table lists all available modal methods:

Method Description
$().modal(options) Activates the content as a modal. See options above for valid values
$().modal("toggle") Toggles the modal
$().modal("show") Opens the modal
$().modal("hide") Hides the modal

Modal Events

The following table lists all available modal events:

Event Description Example
show.bs.modal This event fires immediately when the show instance method is called. If caused by a click, the clicked element is available as the relatedTarget property of the event. Demo
shown.bs.modal This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete). If caused by a click, the clicked element is available as the relatedTarget property of the event. Demo
hide.bs.modal This event is fired immediately when the hide instance method has been called. Demo
hidden.bs.modal This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete). Demo