Bootstrap Modal

Bootstrap 5 Modal Plugin

The Modal Plugin

The Modal plugin is a versatile dialog box or popup window that is displayed on top of the current page. It’s used for alerts, user notifications, forms, or custom content.

Modals are a common way to focus the user’s attention on a specific task or piece of information without navigating away from the current page.

	Tip: Bootstrap’s JavaScript components, including Modal, are available in bootstrap.bundle.min.js (which includes Popper.js, a dependency for tooltips/popovers, but often bundled for convenience) or individual files (e.g., modal.js). For most users, bootstrap.bundle.min.js is recommended.

How To Create a Modal

The following example shows how to create a basic modal, triggered by a button:

<!-- Button to trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
  Open Modal
</button>

<!-- The Modal -->
<div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">

      <!-- Modal Header -->
      <div class="modal-header">
        <h5 class="modal-title" id="myModalLabel">Modal Header</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>

      <!-- Modal Body -->
      <div class="modal-body">
        <p>Some text in the modal body...</p>
        <p>This modal demonstrates the basic structure. You can put any HTML content here, like forms, images, or videos.</p>
      </div>

      <!-- Modal Footer -->
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>

    </div>
  </div>
</div>

<!--
  Practical Application: Use modals for login/registration forms, confirmation dialogs, image galleries, or important alerts.
  Accessibility Note: `tabindex="-1"`, `aria-labelledby`, and `aria-hidden="true"` are important for accessibility. The `btn-close` also has an `aria-label`.
-->

Example Explained

The Trigger (Button/Link):

• Use a button or link to trigger the modal.
• data-bs-toggle="modal": This attribute tells Bootstrap to treat this element as a modal trigger.
• data-bs-target="#myModal": This attribute points to the id of the modal <div> to be opened.

The Modal Structure (Main <div>):

• The parent <div> of the modal must have an id that matches the data-bs-target value (e.g., id="myModal").
• .modal class: Identifies the <div> as a modal and applies base styling.
• .fade class: Adds a fade-in and fade-out transition effect. Remove this if you don’t want the animation.
• tabindex="-1": Allows the modal to be focused and supports keyboard dismissal (Esc key).
• aria-labelledby="myModalLabel": Connects the modal to its title (identified by id="myModalLabel") for screen readers.
• aria-hidden="true": Initially hides the modal from assistive technologies. Bootstrap manages this attribute during show/hide.
• .modal-dialog class: Sets the proper width, margin, and positioning of the modal. Can be further customized with sizing classes.

The Modal Content (.modal-content):

• The <div> with class .modal-content styles the modal’s appearance (border, background-color, shadow, etc.). Inside this, you typically add a header, body, and footer.
• .modal-header: Defines the style for the modal’s header. It usually contains a title (.modal-title) and a close button.
• The close button (<button type="button" class="btn-close" ...>) uses data-bs-dismiss="modal" to close the modal and aria-label="Close" for accessibility.
• .modal-body: Defines the style for the main content area of the modal. You can place any HTML markup here.
• .modal-footer: Defines the style for the modal’s footer. This area is typically used for action buttons (e.g., Save, Close) and is right-aligned by default.

Common Obstacle: Modals not appearing or not closing. Double-check that data-bs-target on the trigger matches the id of the modal, and that data-bs-dismiss="modal" is correctly placed on close buttons.

Modal Sizes

Change the size of the modal by adding an optional sizing class to the <div> element with class .modal-dialog:

• .modal-sm for small modals.
• .modal-lg for large modals.
• .modal-xl for extra large modals.

If no sizing class is applied, the modal will have a default medium size.

Example for a large modal:

<div class="modal-dialog modal-lg">
  <!-- Modal content -->
</div>

Fullscreen Modals:

Bootstrap 5 also supports fullscreen modals that cover the entire viewport. Use classes like .modal-fullscreen (always fullscreen), .modal-fullscreen-sm-down (fullscreen below sm breakpoint), .modal-fullscreen-md-down, etc.

Example for a modal that is fullscreen on small devices and below:

<div class="modal-dialog modal-fullscreen-sm-down">
  <!-- Modal content -->
</div>

<!-- Resource: Explore more modal options and behaviors in the official documentation: https://getbootstrap.com/docs/5.3/components/modal/ -->

Complete Bootstrap Modal Reference

For a complete reference of all modal options (like backdrop, keyboard, focus), methods (like show, hide, toggle, dispose), and events (like show.bs.modal, hidden.bs.modal), please refer to the official Bootstrap 5 Modal documentation.