Offcanvas

XS

Portrait Phones
<576px

SM

Landscape Phones
≥576px to <768px

MD

Tablets
≥768px to <992px

LG

Laptops
≥992px to <1200px

XL

Desktops
≥1200px

Offcanvas

.sometext

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad eos doloremque, deserunt quia reprehenderit rerum veniam rem deleniti ea? Possimus natus eaque magnam illum reprehenderit, sequi et quisquam hic quasi est vel accusamus ab quos, quis libero aspernatur? Aliquam, optio officia recusandae eos dolorum enim praesentium quo suscipit aspernatur debitis fugit facere dignissimos odio autem nobis, corrupti nostrum animi, quis eum quam voluptate omnis qui rerum. Commodi nemo, totam sequi itaque delectus ullam nisi sint debitis sed rem eum, rerum dolore deleniti voluptas. Maxime praesentium minima quibusdam hic, molestiae dignissimos aut debitis, omnis a, repellendus voluptatum unde ex quod. Corrupti sunt ratione asperiores placeat est distinctio quisquam iure vero doloribus qui optio sint, sapiente aperiam natus magnam eum molestiae perspiciatis id mollitia harum delectus recusandae in. Delectus aspernatur perferendis provident aliquid quidem neque? Earum rerum dignissimos beatae cupiditate! Aliquid quam quod adipisci laboriosam, vitae consequatur ea ab! Aliquid deleniti possimus quod minus. Corporis nulla reiciendis mollitia minus. Possimus nostrum expedita nam nisi quas qui cum nihil tenetur voluptate laboriosam quos id suscipit quibusdam, obcaecati assumenda beatae ipsam nemo fugiat mollitia fugit vel, unde perspiciatis saepe deserunt. Eos deleniti dolores odit molestiae animi, aspernatur libero deserunt ab totam iste fugiat vero nesciunt. Magni odio temporibus veritatis, numquam dolorem itaque quod in explicabo voluptas doloribus quibusdam nulla reiciendis ipsum deleniti quas dolorum architecto cum, beatae voluptates quisquam veniam harum. Unde cum veritatis saepe tenetur eius molestiae blanditiis neque optio explicabo sequi ipsa placeat non beatae nisi quisquam delectus, cupiditate, perspiciatis sit, ab esse facere molestias culpa? Iste cumque autem, tempora sapiente quidem dignissimos natus est adipisci, quisquam eum dolorem esse, amet omnis itaque ab eveniet! Nam veritatis reprehenderit labore. Excepturi a quos consequuntur deserunt eveniet, consequatur incidunt voluptas accusamus facilis. Sit earum, nemo incidunt inventore maxime debitis temporibus distinctio dignissimos, quas nesciunt fuga consequuntur harum error sint unde labore quo quaerat. Cum tempora adipisci nemo voluptatum quae delectus incidunt consectetur aliquam quo, libero dolore nam rerum natus tempore quia maiores perspiciatis esse, quisquam saepe enim distinctio. Possimus harum dolor quas dicta iure laudantium tenetur itaque ullam esse. Amet laudantium ea sit, excepturi magni in quae repellendus provident exercitationem laboriosam pariatur quas veniam ad aut distinctio dolores ex tenetur corrupti facere molestiae dolorum consequuntur! Corporis quibusdam dolorum pariatur sunt mollitia officiis molestias modi eligendi eius. Quasi minima iste reiciendis deserunt sunt dicta non maiores adipisci laudantium nobis nesciunt, vero iusto expedita eum itaque quas molestiae? Odio consequuntur accusamus ea ipsa non numquam voluptatem molestiae, expedita deleniti quae reprehenderit. Incidunt autem nam voluptas natus, rem a architecto non odit, unde totam nesciunt animi dignissimos dolorum fugit eos molestiae explicabo similique laborum sequi aliquid, porro ad at repellendus. Voluptatibus impedit exercitationem sed quasi dolorum! Nam, voluptatum. Alias possimus id totam illo excepturi voluptatibus facere sint, repudiandae et in. Ducimus ut optio libero explicabo obcaecati? Vitae delectus numquam accusantium repellat nemo quo velit ut nobis voluptas? Ut, unde? Culpa doloribus a harum reprehenderit esse non modi accusantium architecto recusandae. Harum minus eum sapiente odit, quidem vitae?

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

Note

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.

  • .offcanvas hides content (default)
  • .offcanvas.show shows content
    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.

Placement

There’s no default placement for offcanvas components, so you must add one of the modifier classes 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 [bottom]

.offcanvas-bottom
Offcanvas bottom
...
Offcanvas
<a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasExample" role="button" aria-controls="offcanvasExample">
Link with href
</a>
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
Button with data-bs-target
</button>
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<div>
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
</div>
<div class="dropdown mt-3">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown">
Dropdown button
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li>
<a class="dropdown-item" href="#">
Action
</a>
</li>
<li>
<a class="dropdown-item" href="#">
Another action
</a>
</li>
<li>
<a class="dropdown-item" href="#">
Something else here
</a>
</li>
</ul>
</div>
</div>
</div>

Offcanvas [top]

.offcanvas-top
Offcanvas top
...

Backdrop

data-bs-scroll="true" & data-bs-backdrop="false"
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.