Skip to main content
Bootstrap
CHAPTER 13 Beginner

Bootstrap Modals and Popups

Updated: May 18, 2026
5 min read

# CHAPTER 13

Bootstrap Modals and Popups

1. Chapter Introduction

Modals are overlay dialogs that appear on top of the current page — perfect for confirmations, login forms, image lightboxes, and settings panels. Bootstrap's modal and offcanvas components handle all this with just HTML data attributes and zero custom JavaScript for basic use.

2. Learning Objectives

  • Build modals with triggers, headers, bodies, and footers.
  • Control modal sizes (sm, lg, xl, fullscreen).
  • Create scrollable and centered modals.
  • Build side drawer panels with offcanvas.
  • Build a login modal.

3. Basic Modal

html
123456789101112131415161718192021222324252627282930 
<!-- Trigger button -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
  Open Modal
</button>

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

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

      <!-- Body -->
      <div class="modal-body">
        <p>Modal body text goes here. You can put any HTML content here.</p>
      </div>

      <!-- 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>

4. Modal Sizes

html
123456789101112131415161718 
<!-- Small modal -->
<div class="modal-dialog modal-sm">...</div>

<!-- Default (no class needed) -->
<div class="modal-dialog">...</div>

<!-- Large -->
<div class="modal-dialog modal-lg">...</div>

<!-- Extra large -->
<div class="modal-dialog modal-xl">...</div>

<!-- Fullscreen -->
<div class="modal-dialog modal-fullscreen">...</div>

<!-- Fullscreen on mobile only, dialog on larger screens -->
<div class="modal-dialog modal-fullscreen-sm-down">...</div>
<div class="modal-dialog modal-fullscreen-md-down">...</div>

5. Centered and Scrollable Modals

html
12345678 
<!-- Vertically centered -->
<div class="modal-dialog modal-dialog-centered">...</div>

<!-- Scrollable (when content is longer than viewport) -->
<div class="modal-dialog modal-dialog-scrollable">...</div>

<!-- Centered AND scrollable -->
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable modal-lg">...</div>

6. Confirmation Modal

html
123456789101112131415161718192021 
<button class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#deleteModal">
  🗑️ Delete Account
</button>

<div class="modal fade" id="deleteModal" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered modal-sm">
    <div class="modal-content">
      <div class="modal-header border-0">
        <h5 class="modal-title text-danger">⚠️ Confirm Deletion</h5>
        <button class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body text-center">
        <p>Are you sure you want to delete your account? This action <strong>cannot be undone</strong>.</p>
      </div>
      <div class="modal-footer border-0 justify-content-center">
        <button class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
        <button class="btn btn-danger">Yes, Delete</button>
      </div>
    </div>
  </div>
</div>

7. Offcanvas (Side Drawer)

html
123456789101112131415161718192021222324 
<!-- Trigger -->
<button class="btn btn-primary" data-bs-toggle="offcanvas" data-bs-target="#sideDrawer">
  Open Sidebar
</button>

<!-- Offcanvas panel (slides from left) -->
<div class="offcanvas offcanvas-start" tabindex="-1" id="sideDrawer">
  <div class="offcanvas-header bg-primary text-white">
    <h5 class="offcanvas-title">Navigation</h5>
    <button class="btn-close btn-close-white" data-bs-dismiss="offcanvas"></button>
  </div>
  <div class="offcanvas-body">
    <nav class="nav flex-column">
      <a class="nav-link" href="#">🏠 Home</a>
      <a class="nav-link" href="#">📊 Dashboard</a>
      <a class="nav-link" href="#">👥 Users</a>
      <a class="nav-link" href="#">⚙️ Settings</a>
    </nav>
  </div>
</div>

<!-- Offcanvas from right: offcanvas-end -->
<!-- Offcanvas from top: offcanvas-top -->
<!-- Offcanvas from bottom: offcanvas-bottom -->

8. Mini Project: Login Modal

html
12345678910111213141516171819202122232425262728293031323334353637383940 
<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#loginModal">
  🔐 Sign In
</button>

<div class="modal fade" id="loginModal" tabindex="-1">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content border-0 shadow">
      <div class="modal-body p-5">
        <div class="text-center mb-4">
          <h2 class="fw-bold">Welcome Back</h2>
          <p class="text-muted">Sign in to your account</p>
        </div>
        <form>
          <div class="form-floating mb-3">
            <input type="email" class="form-control" id="loginEmail" placeholder="Email" />
            <label for="loginEmail">Email address</label>
          </div>
          <div class="form-floating mb-3">
            <input type="password" class="form-control" id="loginPass" placeholder="Password" />
            <label for="loginPass">Password</label>
          </div>
          <div class="d-flex justify-content-between align-items-center mb-4">
            <div class="form-check">
              <input class="form-check-input" type="checkbox" id="rememberMe" />
              <label class="form-check-label small" for="rememberMe">Remember me</label>
            </div>
            <a href="#" class="small text-primary">Forgot password?</a>
          </div>
          <div class="d-grid gap-2">
            <button type="submit" class="btn btn-primary btn-lg">Sign In</button>
            <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">Cancel</button>
          </div>
        </form>
        <p class="text-center mt-4 mb-0 text-muted small">
          Don&#039;t have an account? <a href="#">Create one →</a>
        </p>
      </div>
    </div>
  </div>
</div>

9. Common Mistakes

  • data-bs-target mismatch: The #id in data-bs-target must exactly match the modal's id. A missing # or typo means the modal won't open.
  • Missing tabindex="-1" on modal: This is required for accessibility — it removes the modal from the tab order until it is open.

10. MCQs

Question 1

What attribute opens a modal on button click?

Question 2

What class animates modal fade in?

Question 3

Modal dialog centered vertically?

Question 4

Extra large modal size class?

Question 5

Fullscreen mobile modal?

Question 6

What class dismisses a modal from a button?

Question 7

Offcanvas from right side?

Question 8

What does modal-dialog-scrollable do?

Question 9

tabindex="-1" on a modal?

Question 10

Offcanvas from top?

11. Interview Questions

  • Q: How does Bootstrap open a modal without custom JavaScript?
  • Q: What is the difference between a Modal and an Offcanvas?

12. Summary

Bootstrap modals are the most powerful interactive component — zero JavaScript needed for basic use, just data attributes. Modal sizes from small to fullscreen, centered/scrollable variants, and the offcanvas side drawer cover every overlay pattern in modern web UI.

13. Next Chapter Recommendation

In Chapter 14: Bootstrap Carousel and Media Components, we build image sliders, gallery displays, and video embeds for rich media content.

Finish this Chapter

Save your progress on your learning path and prepare for coding interview challenges.

Previous Chapter Bootstrap Alerts and Badges
Next Chapter Bootstrap Carousel and Media Components

Discussion

Join the discussion

Log in or create a free account to participate.

Sort: ·

Explore More

📖 Related Tutorials 6

❓ Related Quizzes 1