Offcanvas
Offcanvas examples
Add data-bs-toggle="offcanvas" and set data-bs-target attributes to initialize offcanvas trigger
You can add .offcanvas-{start|end|top|bottom} class to .offcanvas element to set the position
Set data-bs-backdrop attribute with true|false value to toggle the backdrop
Set data-bs-scroll attribute with true|false value to enable or disable body scrolling while offcanvas is open
Set data-bs-backdrop="static" to prevent closing the offcanvas when clicking outside of it
Basic offcanvas
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
Offcanvas start
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
Offcanvas end
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
Offcanvas top
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
Offcanvas bottom
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
Offcanvas with backdrop
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
Offcanvas without backdrop
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
Offcanvas with body scrolling
Try scrolling the rest of the page to see this option in action.
Backdrop with scrolling
Try scrolling the rest of the page to see this option in action.