Bootstrap 5 Offcanvas Placement

Bootstrap 5 Offcanvas Placement has four directions from which the carousel can pop out which are left(default), top, bottom, and right. There are helper classes provided that can help us set the direction of the offcanvas. 

Bootstrap 5 Offcanvas Placement Classes:

• offcanvas-[start/top/right/bottom]: This is the placement helper class. The start is the default position where the position is left, top, right, and bottom.

Syntax:

<div class="offcanvas offcanvas-[start/top/right/bottom]" id="...">
 <div class="offcanvas-header">
 <h1 class="offcanvas-title">
 ....
 </h1> 
 </div>
 <div class="offcanvas-body">
 ....
 </div>
</div>

Example 1: The example below demonstrates the default left placed offcanvas and the right placed offcanvas.

Output:

Example 2: The example below demonstrates the default top-placed offcanvas and the bottom-placed offcanvas.

Output:

Reference: https://getbootstrap.com/docs/5.0/components/offcanvas/#placement