Created by: leettaylor
Offcanvas can be wrapped in an
.offcanvas-expand{-sm|-md|-lg|-xl|-xxl}
class to determine when it's content collapses behind a button. In combination with other utilities, you can easily choose when to show or hide particular elements.For Offcanvas that never collapse, wrap the Offcanvas with the
.offcanvas-expand
class. For Offcanvas that always collapse, don't wrap with any.offcanvas-expand
class.
Usage
<div class="offcanvas-expand-md">
<button class="btn btn-primary d-md-none" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasCollapse" aria-controls="offcanvasCollapse">
Show Offcanvas
</button>
<div id="offcanvasCollapse" class="offcanvas offcanvas-end" aria-labelledby="offcanvasTitle">
<div class="offcanvas-header">
<h2 class="offcanvas-title" id="offcanvasTitle">Title</h2>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<ul>
<li>One</li>
<li>Two</li>
</ul>
</div>
</div>
</div>
Almost identical to how it works with the Navbar that uses Offcanvas and expands to a normal navbar.