Bs5 Offcanvas in Bootstrap
Sure! Here’s a detailed overview of Bootstrap 5 Offcanvas — a sidebar or panel that slides in and out of view.
? Bootstrap 5 Offcanvas
Offcanvas components create hidden sidebars that slide in from the left, right, top, or bottom. Great for menus, notifications, or extra content on small screens.
1. Basic Offcanvas Example
<!-- Button trigger --><button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample"> Toggle Offcanvas</button><!-- Offcanvas --><div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel"> <div class="offcanvas-header"> <h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas Title</h5> <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button> </div> <div class="offcanvas-body"> <p>Some content for the offcanvas sidebar goes here.</p> </div></div>2. Explanation
Trigger Button: Uses
data-bs-toggle="offcanvas"anddata-bs-target="#offcanvasExample"to toggle the sidebar.Offcanvas container:
.offcanvaswith position class like.offcanvas-start(from left).Header:
.offcanvas-headerwith title and close button (.btn-close).Body:
.offcanvas-bodyfor the main content.
3. Offcanvas Positions
| Class | Position |
|---|---|
.offcanvas-start | Slides in from the left |
.offcanvas-end | Slides in from the right |
.offcanvas-top | Slides down from the top |
.offcanvas-bottom | Slides up from the bottom |
4. Offcanvas with Scrollable Body
Add .offcanvas-scroll class if you want the body to be scrollable independently:
<div class="offcanvas offcanvas-start offcanvas-scroll" tabindex="-1" id="offcanvasExample"> ...</div>5. Responsive Offcanvas
Show offcanvas only on specific breakpoints with classes like:
.offcanvas-md— active from medium screens and below.offcanvas-lg— active from large screens and below
Example:
<div class="offcanvas offcanvas-md offcanvas-end" tabindex="-1" id="offcanvasResponsive"> ...</div>6. JavaScript Control
You can show or hide offcanvas programmatically:
var offcanvasElement = document.getElementById('offcanvasExample');var offcanvas = new bootstrap.Offcanvas(offcanvasElement);offcanvas.show(); // Show offcanvasoffcanvas.hide(); // Hide offcanvas7. Complete Example
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>Bootstrap 5 Offcanvas Example</title> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.5.0/dist/css/bootstrap.min.css" rel="stylesheet" /></head><body><button class="btn btn-primary m-3" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample"> Open Offcanvas</button><div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel"> <div class="offcanvas-header"> <h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas Title</h5> <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button> </div> <div class="offcanvas-body"> <p>This is the offcanvas content area.</p> <p>You can place anything here — links, forms, or other components.</p> </div></div><script src="https://cdn.jsdelivr.net/npm/bootstrap@5.5.0/dist/js/bootstrap.bundle.min.js"></script></body></html>If you'd like, I can help you build a sidebar menu, notifications panel, or anything else with Offcanvas! Just say the word.
