Back to Bootstrap HubPractice BootstrapInterview Bootstrap

Nearby lessons

29 of 39
BS5 ToastBS5 ScrollspyBS5 OffcanvasBS5 UtilitiesBS5 Dark Mode

📂 BS5 Offcanvas

📌 What Is Bootstrap 5 Offcanvas?

Offcanvas is a panel that slides in from an edge (sidebar, cart, filters). Use .offcanvas with a position class, an id, and .offcanvas-header / .offcanvas-body. Trigger: data-bs-toggle="offcanvas" and data-bs-target="#offcanvasId". Requires Bootstrap’s JavaScript.

📂 Offcanvas Structure (.offcanvas, .offcanvas-header, .offcanvas-body)

.offcanvas – panel wrapper. .offcanvas-header – top bar with .offcanvas-title and .btn-close (data-bs-dismiss="offcanvas"). .offcanvas-body – main content. Give the offcanvas an id for the trigger.

Example02
Loading editor…

📍 Position (.offcanvas-start, .offcanvas-end, .offcanvas-top, .offcanvas-bottom)

.offcanvas-start – slides from the left. .offcanvas-end – from the right. .offcanvas-top – from the top. .offcanvas-bottom – from the bottom. Add one to the same element as .offcanvas.

Example03
Loading editor…

✅ Offcanvas Best Practices

  • Use data-bs-toggle="offcanvas" and data-bs-target="#id" on the trigger.
  • Use .offcanvas-start or .offcanvas-end for side panels.
  • Close button: .btn-close with data-bs-dismiss="offcanvas".

🧠 Test Your Knowledge

3 Questions
Progress: 0 / 3