Bootstrap - Offcanvas Part 2: Positioning Offcanvas

Offcanvas components can be positioned on any side of the viewport: left, right, top, or bottom.

Example 1: Left (Default) Offcanvas

<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasLeft">

  <div class="offcanvas-header">

    <h5>Left Offcanvas</h5>

    <button class="btn-close" data-bs-dismiss="offcanvas"></button>

  </div>

</div>

Example 2: Right Offcanvas

<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasRight">

  <div class="offcanvas-header">

    <h5>Right Offcanvas</h5>

    <button class="btn-close" data-bs-dismiss="offcanvas"></button>

  </div>

</div>

Example 3: Top Offcanvas

<div class="offcanvas offcanvas-top" tabindex="-1" id="offcanvasTop">

  <div class="offcanvas-header">

    <h5>Top Offcanvas</h5>

    <button class="btn-close" data-bs-dismiss="offcanvas"></button>

  </div>

</div>

Explanation:

Positioning is controlled by the classes offcanvas-start, offcanvas-end, offcanvas-top, and offcanvas-bottom. This flexibility allows developers to design layouts that fit their use cases.