Bootstrap 5 Modal

A modal is a pop-up window that appears on top of the current page to display content without redirecting or loading a new page. Bootstrap 5 provides a simple way to create modals using its built-in components.

Basic Modal

<div class="modal" id="myModal">
 <div class="modal-dialog">
  <div class="modal-content">

    <!-- Modal Header -->
    <div class="modal-header">
      <h4 class="modal-title">Modal Heading</h4>
      <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
    </div>
  
    <!-- Modal body -->
    <div class="modal-body">
      Modal body...
    </div>
  
    <!-- Modal footer -->
    <div class="modal-footer">
      <button type="button" class="btn btn-danger" data-bs-dismiss="modal">Close</button>
    </div>
  
  </div>
 </div>
</div>

Modal Size

In Bootstrap 5, you can adjust the modal size using specific classes on the .modal-dialog element. By default, modals are "medium" in size.

• .modal-sm small modal.
• .modal-lg large modal.
• .modal-xl extra large modal.
• .modal-fullscreen whole width and height of the page.

<div class="modal-dialog modal-sm">

<div class="modal-dialog modal-lg">

<div class="modal-dialog modal-xl">

<div class="modal-dialog modal-fullscreen">

Animation in Modal

The .fade class in Bootstrap 5 adds a smooth fading animation when opening and closing a modal.

<div class="modal fade">

Centered Modal

By default, modals appear at the top of the page. If you want to center a modal vertically, you need to add the class .modal-dialog-centered to the .modal-dialog element.

<div class="modal-dialog modal-dialog-centered">

Scrolling Modal

By default, whole page scrolls when modal content overflows.

<div class="modal-dialog">

Use .modal-dialog-scrollable to make only the modal body scrollable. Only the modal body scrolls while the header and footer stay fixed.

<div class="modal-dialog modal-dialog-scrollable">