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

Link with href

##### Offcanvas

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

##### List

- Nemo enim ipsam voluptatem quia aspernatur
- Neque porro quisquam est, qui dolorem
- Quis autem vel eum iure qui in ea

- At vero eos et accusamus et iusto odio dignissimos
- Et harum quidem rerum facilis
- Temporibus autem quibusdam et aut officiis

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

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

##### List

- Nemo enim ipsam voluptatem quia aspernatur
- Neque porro quisquam est, qui dolorem
- Quis autem vel eum iure qui in ea

- At vero eos et accusamus et iusto odio dignissimos
- Et harum quidem rerum facilis
- Temporibus autem quibusdam et aut officiis

##### Offcanvas with backdrop

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

##### List

- Nemo enim ipsam voluptatem quia aspernatur
- Neque porro quisquam est, qui dolorem
- Quis autem vel eum iure qui in ea

- At vero eos et accusamus et iusto odio dignissimos
- Et harum quidem rerum facilis
- Temporibus autem quibusdam et aut officiis

##### Backdroped with scrolling

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

##### List

- Nemo enim ipsam voluptatem quia aspernatur
- Neque porro quisquam est, qui dolorem
- Quis autem vel eum iure qui in ea

- At vero eos et accusamus et iusto odio dignissimos
- Et harum quidem rerum facilis
- Temporibus autem quibusdam et aut officiis

#### Offcanvas Placement

- `.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

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

##### List

- Nemo enim ipsam voluptatem quia aspernatur
- Neque porro quisquam est, qui dolorem
- Quis autem vel eum iure qui in ea

##### Offcanvas right

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

##### List

- Nemo enim ipsam voluptatem quia aspernatur
- Neque porro quisquam est, qui dolorem
- Quis autem vel eum iure qui in ea

##### Offcanvas bottom

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

##### List

- Nemo enim ipsam voluptatem quia aspernatur
- Neque porro quisquam est, qui dolorem
- Quis autem vel eum iure qui in ea

##### Offcanvas Left

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

##### List

- Nemo enim ipsam voluptatem quia aspernatur
- Neque porro quisquam est, qui dolorem
- Quis autem vel eum iure qui in ea