Bootstrap 5 Modal

Dialog boxes and popup windows for user interactions

💬 What is Bootstrap Modal?

Bootstrap modal is a dialog box that appears on top of the page content. It's perfect for displaying important information, forms, confirmations, or media without navigating away from the current page, creating focused user interactions.


<!-- Button trigger -->
<button data-bs-toggle="modal" data-bs-target="#myModal">
  Open Modal
</button>

<!-- Modal -->
<div class="modal" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <!-- Modal content here -->
    </div>
  </div>
</div>

Basic Modal

The modal content area can contain any HTML elements, including text, images, forms, or multimedia. This flexibility makes modals versatile for various use cases like detailed product views, login forms, terms of service agreements, or image galleries. Content should be organized logically with clear headings and actionable buttons. Modals keep users engaged on the current page while presenting supplementary information or functionality. For SEO, ensure modal content is accessible to search engine crawlers by either making it visible in the DOM or providing alternative access methods. Properly implemented modals can reduce bounce rates by keeping users on-page during interactions.

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

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal Title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <p>This is the modal content. You can add any HTML here.</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">Save changes</button>
      </div>
    </div>
  </div>
</div>

Output:

🔹 Modal Sizes

Modal sizes control dialog width using modifier classes on the .modal-dialog container for different content needs. Use .modal-sm for compact 300px modals ideal for simple confirmations or alerts. The default 500px modal works well for standard content. Apply .modal-lg for 800px modals suitable for forms or detailed content. For extensive content like documentation or media galleries, use .modal-xl at 1140px. Choosing appropriate sizes based on content complexity improves user experience by preventing unnecessary scrolling or cramped layouts. Responsive modal sizing ensures content remains accessible across all devices, contributing to positive user engagement signals that impact SEO rankings.

<!-- Small Modal -->
<div class="modal fade" id="smallModal">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Small Modal</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">Small modal content</div>
    </div>
  </div>
</div>

<!-- Large Modal -->
<div class="modal fade" id="largeModal">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Large Modal</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">Large modal content</div>
    </div>
  </div>
</div>

🔹 Centered Modal

Centered modals use the .modal-dialog-centered class to vertically align the dialog within the viewport. This creates a balanced, professional appearance that draws attention to the modal content, especially effective for important announcements, error messages, or confirmation dialogs. The modal remains centered regardless of page scroll position or viewport height. Centered alignment improves visual hierarchy and ensures the modal doesn't feel disconnected from the page context. This positioning is particularly important on mobile devices where screen real estate is limited. Well-positioned modals enhance user experience by making important interactions more prominent and accessible.

<div class="modal fade" id="centeredModal">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Centered Modal</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        This modal is vertically centered in the viewport.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

🔹 Scrollable Modal

Scrollable modals enable content scrolling within the modal body while keeping header and footer elements fixed. Add the .modal-dialog-scrollable class to create this behavior, which is ideal for lengthy content like terms of service agreements, detailed documentation, or multi-step forms. The modal maintains a fixed maximum height while allowing the body content to scroll independently. This ensures action buttons remain visible and accessible regardless of content length. Scrollable modals improve user experience for content-heavy dialogs by preventing the modal from extending beyond the viewport. This approach maintains context and reduces user frustration with overly long modal windows.

<div class="modal fade" id="scrollableModal">
  <div class="modal-dialog modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Scrollable Modal</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <p>Long content here...</p>
        <p>More content...</p>
        <p>Even more content...</p>
        <!-- Add more paragraphs to see scrolling -->
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

🔹 Fullscreen Modal

Fullscreen modals occupy the entire viewport using the .modal-fullscreen class or responsive variants. Classes like .modal-fullscreen-sm-down make modals fullscreen only on smaller devices while maintaining standard sizes on desktop. This approach is perfect for complex forms, image galleries, video players, or data-intensive interfaces that benefit from maximum screen real estate. Fullscreen modals create immersive experiences that minimize distractions from the underlying page. Responsive variants ensure optimal viewing across different devices, adapting to screen sizes appropriately. This flexibility improves mobile user experience significantly, which is crucial for SEO as mobile usability directly impacts search rankings.

<!-- Always fullscreen -->
<div class="modal fade" id="fullscreenModal">
  <div class="modal-dialog modal-fullscreen">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Fullscreen Modal</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        This modal takes up the entire screen.
      </div>
    </div>
  </div>
</div>

<!-- Fullscreen below md breakpoint -->
<div class="modal fade" id="responsiveModal">
  <div class="modal-dialog modal-fullscreen-md-down">
    <div class="modal-content">
      <!-- content -->
    </div>
  </div>
</div>

🔹 Modal with Form

Modals serve as excellent containers for forms, keeping users on the same page while collecting information. Place form elements within the modal body and action buttons in the footer for a clean, focused interface. This pattern works well for login forms, registration, contact forms, surveys, or any data entry task. Implement proper client-side validation with clear error messaging to improve user experience. Modal forms reduce context switching and maintain user engagement by preventing page navigation during form completion. For SEO, ensure form content is accessible and consider implementing progressive enhancement so form functionality works without JavaScript when possible.

<div class="modal fade" id="formModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Contact Form</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <form>
          <div class="mb-3">
            <label for="name" class="form-label">Name</label>
            <input type="text" class="form-control" id="name">
          </div>
          <div class="mb-3">
            <label for="email" class="form-label">Email</label>
            <input type="email" class="form-control" id="email">
          </div>
          <div class="mb-3">
            <label for="message" class="form-label">Message</label>
            <textarea class="form-control" id="message" rows="3"></textarea>
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-primary">Submit</button>
      </div>
    </div>
  </div>
</div>

🔹 Static Backdrop

Static backdrop modals prevent accidental closure by requiring explicit user interaction with the modal content. Add data-bs-backdrop="static" and data-bs-keyboard="false" attributes to disable closing when clicking outside or pressing the Escape key. This forces users to engage with the modal's content or use the provided close button. Static backdrops are essential for important confirmations, required form submissions, critical warnings, or terms of service agreements that users must acknowledge. This pattern ensures users don't accidentally dismiss important information, improving completion rates for critical actions and reducing user errors that might negatively impact conversion metrics.

<button type="button" class="btn btn-warning" data-bs-toggle="modal" data-bs-target="#staticModal">
  Static Modal
</button>

<div class="modal fade" id="staticModal" data-bs-backdrop="static" data-bs-keyboard="false">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Static Backdrop</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        This modal won't close when clicking outside.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-bs-dismiss="modal">Understood</button>
      </div>
    </div>
  </div>
</div>