Two off-canvas positions — drawer-left and drawer-right — slide in as panels triggered by toggle buttons. Ideal for mobile navigation, login forms, and cart sidebars.
Trigger Buttons
<button data-bs-toggle="offcanvas" data-bs-target="#drawer-left"
style="background:transparent;border:none;cursor:pointer;color:inherit">
<i class="fa-solid fa-bars"></i>
</button>CSS Variables
| Variable | Default | Controls |
|---|---|---|
--offcanvas-width | 400px | Width |
--offcanvas-bg | var(--body-bg) | Background |
--offcanvas-color | var(--body-color) | Text colour |
Tip: Drawers are hidden by default — no layout cost for assigning them on all pages.