#### Offcanvas

You can use a link with the `href` attribute, or a button with the `data-bs-target` attribute. In both cases, the `data-bs-toggle="offcanvas"` is required.

##### Offcanvas

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

#### Offcanvas 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

- Maecenas tempus, tellus eget rhoncus, sem quam semper.
- Cum sociis natoque penatibus ridiculus mus.
- Aenean vulputate eleifend tellus aenean leo ligula eleifend condimentum enim.

##### Backdroped with scrolling

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

#### Offcanvas Placement

Try the right and bottom examples out below.

- `.offcanvas-start` places offcanvas on the left of the viewport (shown above)
- `.offcanvas-end` places offcanvas on the right of the viewport
- `.offcanvas-top` places offcanvas on the top of the viewport
- `.offcanvas-bottom` places offcanvas on the bottom of the viewport

##### Offcanvas top

- Maecenas tempus, tellus eget rhoncus, sem quam semper.
- Cum sociis natoque penatibus ridiculus mus.
- Aenean vulputate eleifend tellus aenean leo ligula eleifend condimentum enim.

##### Offcanvas right

- Maecenas tempus, tellus eget rhoncus, sem quam semper.
- Cum sociis natoque penatibus ridiculus mus.
- Aenean vulputate eleifend tellus aenean leo ligula eleifend condimentum enim.

##### Offcanvas bottom

- Maecenas tempus, tellus eget rhoncus, sem quam semper.
- Cum sociis natoque penatibus ridiculus mus.
- Aenean vulputate eleifend tellus aenean leo ligula eleifend condimentum enim.

##### Offcanvas Left

- Maecenas tempus, tellus eget rhoncus, sem quam semper.
- Cum sociis natoque penatibus ridiculus mus.
- Aenean vulputate eleifend tellus aenean leo ligula eleifend condimentum enim.