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 Modal

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

Modal is displayed on top of the current page.


How to Create a Modal

The following example shows how to create a basic modal:

Run code

Example explained:

The data-toggle="modal" attribute of the <button> is used to open the modal window.

The data-target="" attribute of the <button> specifies the ID of the modal that you want to load on the page.

The .modal class simply identifying the content of the <div> as a modal window.

The .fade class cause the content to fade in and out.

The role="dialog" attribute improves accessibility for people using screen readers.

The .modal-dialog sets the proper width and margin of the modal window.

The .modal-content styles the modal (border, background-color, etc.).

The .modal-header defines header of the modal window.

The .modal-body defines body of the modal window.

The .modal-footer defines footer of the modal window.

The .close sets style for the close button of the modal window.

The data-dismiss="modal" is used to close the modal window.



Modal Sizes

Modals have three optional sizes, available via modifier classes to be placed on a .modal-dialog.

  • .modal-xl
  • .modal-lg
  • .modal-sm
Run code

Default modal without modifier class constitutes the “medium” size modal.


Scrolling Long Content

When modals become too long for the user's viewport, they scroll independent of the page itself. See the examples below to understand it:

Run code

You can also create a scrollable modal that allows scroll the modal body by adding .modal-dialog-scrollable to .modal-dialog.

Run code

Vertically Centered Modal

Add .modal-dialog-centered to .modal-dialog to vertically center the modal.

Run code

Forms in Modals

You can place any content inside modal. The following example shows how to create a login form in modal.

Run code

Varying Modal Content

If you have a bunch of buttons that all trigger the same modal with slightly different contents, use event.relatedTarget and HTML data-* attributes to vary the contents of the modal depending on which button was clicked.

Run code

Embedding YouTube Videos

Embedding YouTube videos in modals requires additional JavaScript/jQuery.

In this example we have 4 buttons (with "data-video" attribute) that all trigger the same modal with different videos.

Run code

Remove Animation

For modals that simply appear rather than fade in to view, remove the .fade class from your modal markup.

Run code

Change backdrop Color

When modal is open it generates a .modal-backdrop to provide a click area for dismissing shown modals when clicking outside the modal. If you want to have a different color for "backdrop" consider the following example.

Run code

Complete Bootstrap 4 Modal Reference

For a complete reference of all modal options, methods and events, visit our Bootstrap 4 JS Modal Reference.