Offcanvas

About

Offcanvas is a sidebar component that can be toggled via JavaScript to appear from the left, right, or bottom edge of the viewport.

<a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasExample">Link with href</a>
<button class="btn btn-primary" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample">Button with data-bs-target</button>

<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample">
    <div class="offcanvas-header">
        <h5 class="offcanvas-title">Offcanvas</h5>
        <button class="btn-close text-reset" data-bs-dismiss="offcanvas"></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>
</div>

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-bottom places offcanvas on the bottom of the viewport

<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExampleStart">
    ...
</div>

<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasExampleEnd">
    ...
</div>

<div class="offcanvas offcanvas-bottom" tabindex="-1" id="offcanvasExampleBottom">
    ...
</div>