Bootstrap 5 TutorialLesson 30Free preview
BS5 Offcanvas
This lesson is part of Bootstrap · All levels
Summary
Offcanvas is a sliding panel that is hidden outside the screen and appears when requested, often used for side menus on mobile devices. These components are similar to collapses but transitioning inward from the edge: left, right, up, or down. Pack the content with .offcanvas and activate it via data-bs-toggle="offcanvas".
Key points
- .offcanvas is a panel with .offcanvas-header and .offcanvas-body for its contents.
- Data-bs-toggle="offcanvas" with data-bs-target opening the panel.
- Panel position: .offcanvas-start, .offcanvas-end, .offcanvas-top, .offcanvas-bottom.
- Data-bs-dismiss="offcanvas" closed the panel.
- The class .show marks the panel is open.
Full lesson
Code examples and quizzes
Full lessons, code examples, and quizzes are available to subscribers. 5 questions.