About Lesson
Offcanvas from Different Sides
Available Positions:
- .offcanvas-start → Left Side
- .offcanvas-end → Right Side
- .offcanvas-top → Top Side
- .offcanvas-bottom → Bottom Side
Example: Offcanvas from All Sides
1. Offcanvas top:
HTML
<button class="btn btn-primary" data-bs-toggle="offcanvas" data-bs-target="#offcanvasTop">Top</button>
<!-- Offcanvas from Top -->
<div class="offcanvas offcanvas-top" id="offcanvasTop">
<div class="offcanvas-header">
<h5 class="offcanvas-title">Offcanvas Top</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
</div>
<div class="offcanvas-body">Content for top offcanvas.</div>
</div>
2. Offcanvas right:
HTML
<button class="btn btn-success" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight">Right</button>
<!-- Offcanvas from Right -->
<div class="offcanvas offcanvas-end" id="offcanvasRight">
<div class="offcanvas-header">
<h5 class="offcanvas-title">Offcanvas Right</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
</div>
<div class="offcanvas-body">Content for right offcanvas.</div>
</div>
3. Offcanvas bottom:
HTML
<button class="btn btn-warning" data-bs-toggle="offcanvas" data-bs-target="#offcanvasBottom">Bottom</button>
<!-- Offcanvas from Bottom -->
<div class="offcanvas offcanvas-bottom" id="offcanvasBottom">
<div class="offcanvas-header">
<h5 class="offcanvas-title">Offcanvas Bottom</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
</div>
<div class="offcanvas-body">Content for bottom offcanvas.</div>
</div>
4. Offcanvas Left (Default):
HTML
<button class="btn btn-primary" data-bs-toggle="offcanvas" data-bs-target="#offcanvasLeft">Left</button>
<!-- Offcanvas from left-->
<div class="offcanvas offcanvas-start" id="offcanvasLeft">
<div class="offcanvas-header">
<h5 class="offcanvas-title">Offcanvas Left</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas"></button>
</div>
<div class="offcanvas-body">Content for Left offcanvas.</div>
</div>