#### Offcanvas

##### Demo

Use the buttons below to show and hide an offcanvas element via JavaScript that toggles the `.show` class on an element with the `.offcanvas` class.

Link with href

##### Offcanvas

Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.

##### Placement

Offcanvas Diffrent Placement Example: Top, Right & Bottom

##### Offcanvas top

...

##### Offcanvas Right

...

##### Offcanvas Bottom

...

##### Responsive

Responsive offcanvas classes are available across for each breakpoint.

Resize your browser to show the responsive offcanvas toggle.

##### Responsive offcanvas

This is content within an `.offcanvas-lg`.

Responsive offcanvas classes are available across for each breakpoint.

- `.offcanvas`,
- `.offcanvas-sm`,
- `.offcanvas-md`,
- `.offcanvas-lg`,
- `.offcanvas-xl`,
- `.offcanvas-xxl`

##### Backdrop

Scrolling the `<body>` element is disabled when an offcanvas and its backdrop are visible. Use the `data-bs-scroll` attribute to toggle `<body>` scrolling and `data-bs-backdrop` to toggle the backdrop.

##### Colored with scrolling

Try scrolling the rest of the page to see this option in action.

##### Offcanvas with backdrop

.....

##### Backdroped with scrolling

Try scrolling the rest of the page to see this option in action.

##### Settings

###### Choose Layouts

Light Mode
Dark Mode
RTL Mode
Dark RTL Mode