Bootstrap Modals — Dialog and Overlay Components

DodaTech Updated 2026-06-28 5 min read

In this tutorial, you will learn about Bootstrap Modals. We cover key concepts, practical examples, and best practices to help you master this topic.

Bootstrap modals display content in a dialog overlay on top of the current page, with optional backdrop, keyboard dismissal, and size variants from small to fullscreen.

What You'll Learn

You will learn how to create modals with header, body, and footer, trigger them with buttons, use different modal sizes, configure dismissal options, and handle modal events.

Why It Matters

Modals focus user attention on specific tasks. DodaTech uses modals for confirmations, form dialogs, image previews, and alert messages throughout its applications.

Real-World Use

Durga Antivirus Pro uses a modal for scan result details, a modal for license activation, and a confirmation modal before deleting quarantined files.

flowchart LR
    A[Cards] --> B[Modals]
    B --> C[Basic Modal]
    B --> D[Size Variants]
    B --> E[Options]
    B --> F[Events]
    C --> G[Trigger Button]
    C --> H[Header/Body/Footer]
    style B fill:#7952b3,stroke:#563d7c,color:#fff
    style G fill:#22c55e,stroke:#16a34a,color:#fff

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

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal Title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        This is the modal body content. It can contain text, forms, images, or any HTML.
      </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>

Expected output: Clicking the button opens a centered modal overlay with a header, body, footer, and close button.

<!-- Small modal -->
<div class="modal fade" id="smallModal" tabindex="-1">
  <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">Compact modal for quick actions.</div>
    </div>
  </div>
</div>

<!-- Large modal -->
<div class="modal fade" id="largeModal" tabindex="-1">
  <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 for forms or detailed content.</div>
    </div>
  </div>
</div>

<!-- Extra large modal -->
<div class="modal fade" id="xlModal" tabindex="-1">
  <div class="modal-dialog modal-xl">
    <div class="modal-content">
      <div class="modal-header"><h5 class="modal-title">Extra Large Modal</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button></div>
      <div class="modal-body">XL modal for data tables or large forms.</div>
    </div>
  </div>
</div>

<!-- Fullscreen modal -->
<div class="modal fade" id="fullscreenModal" tabindex="-1">
  <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">Fullscreen modal fills the entire viewport.</div>
    </div>
  </div>
</div>

<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#smallModal">Small</button>
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#largeModal">Large</button>
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#xlModal">XL</button>
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#fullscreenModal">Fullscreen</button>

Expected output: Four buttons open modals of different sizes from small to fullscreen.

Scrolling Long Content

<div class="modal fade" id="scrollModal" tabindex="-1">
  <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>Lorem ipsum dolor sit amet... (repeated long content)</p>
        <p>Only the modal body scrolls, not the entire page behind the modal.</p>
      </div>
      <div class="modal-footer">
        <button class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

Expected output: A modal where only the body section scrolls while the header and footer stay fixed.

<div class="modal fade" id="centeredModal" tabindex="-1">
  <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 class="btn btn-primary" data-bs-dismiss="modal">OK</button>
      </div>
    </div>
  </div>
</div>

Expected output: The modal appears in the vertical center of the screen instead of the top.

Static Backdrop

<div class="modal fade" id="staticBackdrop" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header"><h5 class="modal-title">Important</h5></div>
      <div class="modal-body">This modal does not close when clicking outside or pressing Escape.</div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" data-bs-dismiss="modal">I understand</button>
      </div>
    </div>
  </div>
</div>

Expected output: A modal that only closes when the user clicks the explicit close button.

Toggle Between Modals

<div class="modal fade" id="firstModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header"><h5 class="modal-title">First Modal</h5>
        <button class="btn-close" data-bs-dismiss="modal"></button></div>
      <div class="modal-body">Switch to the second modal:</div>
      <div class="modal-footer">
        <button class="btn btn-primary" data-bs-target="#secondModal" data-bs-toggle="modal">Next</button>
      </div>
    </div>
  </div>
</div>

Expected output: Clicking Next closes the first modal and opens the second modal seamlessly.

Common Mistakes

1. Missing tabindex="-1" on Modals

Modals need tabindex="-1" for keyboard focus management. Without it, focus does not move into the modal properly.

2. Multiple Modals Open Simultaneously

Bootstrap does not support multiple open modals. Close the first before opening a second.

3. Removing the Backdrop Option

The backdrop is transparent black by default. Setting data-bs-backdrop="false" removes it, which can confuse users.

4. Not Using aria-hidden="true"

Modals must have aria-hidden="true" when closed so screen readers ignore them. Bootstrap manages this automatically when using the fade class.

Static modals load content when the page loads. For dynamic content, use Bootstrap's JavaScript API to update modal body content before calling .show().

Practice Questions

What data attribute triggers a modal? data-bs-toggle="modal" on the trigger element and data-bs-target="#modalId" pointing to the modal's id.
How do you make a modal fullscreen? Add modal-fullscreen class to the modal-dialog element.
How do you prevent a modal from closing when clicking outside? Add data-bs-backdrop="static" and data-bs-keyboard="false" to the modal.
What class makes only the modal body scrollable? modal-dialog-scrollable on the modal-dialog div.
How do you vertically center a modal? Add modal-dialog-centered to the modal-dialog element.

Challenge

Build a confirmation dialog modal for deleting a file. The modal should have a static backdrop, a danger-themed header, the filename displayed, Cancel and Delete buttons, and keyboard dismissal disabled.

FAQ

Can modals contain forms?

Yes. Modals can contain any HTML, including forms. Ensure the form has its own submit handling within the modal.

How do I close a modal with JavaScript?

Use bootstrap.Modal.getOrCreateInstance(myModal).hide() or data-bs-dismiss='modal' on a button.

Can I use modals with remote content?

Bootstrap 5 removed remote content loading. Use JavaScript to fetch content and update modal body dynamically.

Do modals work on mobile?

Yes. Modals are fully responsive and work on mobile with touch-based scrolling and dismissal.

Can I have multiple modals nested?

Nesting modals is not supported. Stack modals by closing one before opening another.

Mini Project

Build a user profile edit page with an Edit button that opens a modal containing a form (name, email, bio fields). The modal should be large, vertically centered, and have save/cancel buttons.

What's Next

Explore Carousel for image sliders. Then learn Accordion for collapsible content panels.

← Previous Bootstrap Cards — Flexible Content Containers Next → Bootstrap Carousel — Image Sliders and Slideshows

Built by the developers of DodaTech

Doda Browser, DodaZIP & Durga Antivirus Pro

Home Browse Bootstrap