Nearby lessons
29 of 39📂 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.
📍 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.
✅ 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 QuestionsProgress: 0 / 3
Keep Going!BS5 Utilities