Bootstrap 5 Modals

Bootstrap 5 Modals

Bootstrap 5 modals are a dialog box/popup window that displays information or takes information from the user.

Steps to create a Bootstrap 5 modals:

• Assign a modal container to .modal and data attribute data-bs-backdrop="static"
• Assign .modal-dialog to the immediate child of the modal container.
• Assign .modal-content to the immediate child of element(<div>) having .modal-dialog.
• Please keep in mind that .modal-content an element consists of a modal header, body, and footer.
• Modal header container consists of .modal-header.Model title is defined by .modal-title.Put the close button inside the modal header and assign .btn-close and add a data attribute data-bs-dismiss="modal" to the button.
• Put all the content inside the modal body having .modal-body
• The model footer is defined by the .modal-footer and it has consist of a close button and other links.
• In the end, assign the modal id to the external button’s data attribute data-bs-target="#modalId".Add another data attribute data-bs-toggle="modal" to the button.

Source Code

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
  Launch static backdrop modal
</button>
<!-- Modal -->
<div class="modal" id="staticBackdrop" data-bs-backdrop="static">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p>This is model body content.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Understood</button>
      </div>
    </div>
  </div>
</div>

Bootstrap 5 Modal Animation

To create modal animation, use .fade class to the modal container that contains class .modal.

Source Code

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop">
  Launch static backdrop modal
</button>
<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p>This is model body content.</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Understood</button>
      </div>
    </div>
  </div>
</div>

Modal With Scrollbar

To create a scrollable modal, add .modal-dialog-scrollable to the .modal-dialog.

Source Code

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#staticBackdrop2">
  Launch static backdrop modal with scrollbar
</button>
<!-- Modal -->
<div class="modal fade" id="staticBackdrop2" data-bs-backdrop="static">
  <div class="modal-dialog modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Lorem ipsum dolor sit amet consectetur adipisicing, elit. Iste natus amet veritatis earum saepe dicta ducimus
        similique quis quas vel rem alias id sint,voluptates officiis est blanditiis eaque repudiandae nesciunt nam optio labore
        dolore, modi reiciendis.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Understood</button>
      </div>
    </div>
  </div>
</div>

To read more about the Bootstrap 5 modal, click here.