WS WhereIsStuff
Tutorial Guides
Log In
Sign Up

Advertisement

Google Ad Slot: content-top

Bootstrap 5 Offcanvas

~1 min read · Bootstrap
On this page
❮ Previous Next ❯

The offcanvas component in Bootstrap 5 provides a way to toggle hidden content into view, similar to a modal or sidebar, without covering the entire screen. It's often used for navigation menus, sidebars, or additional content panels.

Basic  Offcanvas:

To create an offcanvas component, use the following structure:

Offcanvas Title

Some placeholder text for the offcanvas content.

Example
Offcanvas Title

Some placeholder text for the offcanvas content.

Try it yourself

Position Offcanvas:

To create an offcanvas component, use the following structure.

Offcanvas Left
Content for offcanvas on the left.
Offcanvas Right
Content for offcanvas on the right.
Offcanvas Top
Content for offcanvas at the top.
Offcanvas Bottom
Content for offcanvas at the bottom.
Example
Offcanvas Left
Content for offcanvas on the left.
Offcanvas Right
Content for offcanvas on the right.
Offcanvas Top
Content for offcanvas at the top.
Offcanvas Bottom
Content for offcanvas at the bottom.
Try it yourself

Key Attributes

data-bs-toggle="offcanvas": Indicates that the button triggers an offcanvas component.

data-bs-target="#id": Specifies the ID of the offcanvas element to open.

aria-controls: Matches the ID of the offcanvas component for accessibility.

.offcanvas-start: Places the offcanvas to the left (default).

.offcanvas-end: Places the offcanvas to the right.

.offcanvas-top: Places the offcanvas at the top.

.offcanvas-bottom: Places the offcanvas at the bottom.


❮ Previous Next ❯