Bootstrap 5·Bootstrap from grid to dashboard

Modals and offcanvas

Open dialogs and side panels with accessible focus behaviour.

Beginner 14 min read Lesson 8 of 300 Challenge included

What you will be able to do

Use data-bs-toggle and data-bs-target to open a modal.
Give the dialog an accessible name with aria-labelledby.
Use offcanvas-start or offcanvas-end for side panels.
Return focus to the trigger after closing.

In plain English

Bootstrap modals trap focus, close on Escape and restore focus when closed. Use them for short, focused tasks. Offcanvas is better for navigation or filters that should not block the whole page.

modal.htmlHTML

<button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#confirm">Delete</button>
<div class="modal fade" id="confirm" tabindex="-1" aria-labelledby="confirm-title" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h2 class="modal-title fs-5" id="confirm-title">Delete lesson?</h2>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">This cannot be undone.</div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-danger">Delete</button>
      </div>
    </div>
  </div>
</div>

Your turn

Add an offcanvas filter panel

Medium

Create a button that opens an offcanvas panel from the start with one checkbox filter.

HTML · starter

<button data-bs-toggle="offcanvas">

Check your understanding before moving on.

Knowledge checkQuestion 1

Which attribute dismisses a Bootstrap modal with a close button?

Select an answer to continue

Study tools

Make it yours.

Keep a private note for this lesson, then turn the key ideas into flashcards you can revisit.

Sign in to save notes and flashcards.Both are private to your account and stay with your progress.

Finished reading?

Lock in what you just learned.

Mark this lesson complete to save your place and move one step closer to the certificate.

Next: Utilities and responsive rules

Lesson 8 of 300 · 0% of course