Skip to main content

Modal in Bootstrap 5

Bootstrap Modal​

Bootstrap Modal is a popup window that is displayed on top of the current page.

It is used to display additional content or to prompt the user for input.

As an example:

Editor

Loading...

In this example:

  • The data-bs-toggle="modal" and data-bs-target="#myModal" attributes are used to indicate that the button is used to open the modal with ID myModal.
  • The modal is created using a div element with class modal fade and an ID matching the data-bs-target attribute of the button.
  • The tabindex="-1" attribute is used to make the modal keyboard-accessible.
  • Inside the modal div, there are three main sections: modal-header, modal-body, and modal-footer.
  • The modal-header contains the title and a close button with class btn-close and attribute data-bs-dismiss="modal" to close the modal when clicked.
  • The modal-body contains the content of the modal.
  • The modal-footer contains any buttons or actions the user can take, such as closing or saving changes.

Bootstrap Modal comes in different sizes - small, large and extra-large.

You can set the size of the modal using the modal-dialog class.

As an example:

<!-- Small modal -->
<div
     class="modal fade"
     id="smallModal"
     tabindex="-1"
     role="dialog"
     aria-labelledby="smallModalLabel"
     aria-hidden="true"
>
     <div class="modal-dialog modal-sm">
          <div class="modal-content">
               <!-- Modal content here -->
          </div>
     </div>
</div>

<!-- Large modal -->
<div
     class="modal fade"
     id="largeModal"
     tabindex="-1"
     role="dialog"
     aria-labelledby="largeModalLabel"
     aria-hidden="true"
>
     <div class="modal-dialog modal-lg">
          <div class="modal-content">
               <!-- Modal content here -->
          </div>
     </div>
</div>

<!-- Extra-large modal -->
<div
     class="modal fade"
     id="extraLargeModal"
     tabindex="-1"
     role="dialog"
     aria-labelledby="extraLargeModalLabel"
     aria-hidden="true"
>
     <div class="modal-dialog modal-xl">
          <div class="modal-content">
               <!-- Modal content here -->
          </div>
     </div>
</div>

In the above example:

  • modal-sm class is used to make the modal small, modal-lg is used to make the modal large, and modal-xl is used to make the modal extra-large.

Centered Modal​

To create a centered Bootstrap Modal, you can add the modal-dialog-centered class to the modal-dialog div inside the modal.

As an example:

Editor

Loading...

In this example:

  • The modal-dialog-centered class is added to the modal-dialog div to center the modal vertically and horizontally on the page.

Scrolling Modal​

To create a scrolling Bootstrap modal, you can add the modal-dialog-scrollable class to the modal-dialog div inside the modal.

As an example:

Editor

Loading...