Skip to content

Bootstrap Modals Explained — Dialog and Overlay Components

DodaTech Updated 2026-06-28 1 min read

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

Bootstrap modals are dialog boxes overlaying the page content, with configurable sizes, scrolling, vertical centering, static backdrop, and programmatic JavaScript controls.

What You'll Learn

  • Modal structure (header, body, footer)
  • Static backdrop option
  • Scrollable and centered modals
  • Modal sizes (sm, lg, xl)
  • Modal events and JavaScript API

Why It Matters

Modals are essential for confirmations, forms, and detail views without page navigation. Bootstrap modals handle focus trapping, keyboard dismissal, and Accessibility.

<div class="container mt-4">
  <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
    Launch demo modal
  </button>
  <button type="button" class="btn btn-success" data-bs-toggle="modal" data-bs-target="#largeModal">
    Large modal
  </button>
  <button type="button" class="btn btn-info" data-bs-toggle="modal" data-bs-target="#scrollableModal">
    Scrollable modal
  </button>
</div>

<!-- Basic 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">
        <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        Modal body content goes here.
      </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>

<!-- Large Centered Modal -->
<div class="modal fade" id="largeModal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog modal-lg modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Large Centered Modal</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">...</div>
    </div>
  </div>
</div>

Expected output: Three trigger buttons open modals with different configurations: basic, large-centered, and scrollable.

← Previous Bootstrap Navbar Explained — Navigation Components Next → Bootstrap Accordion Explained — Collapsible Content Sections

Built by the developers of DodaTech

Doda Browser, DodaZIP & Durga Antivirus Pro

Home Browse Bootstrap