Bootstrap 5 off-canvas components can slide in from any edge — including top and bottom. This page covers 4 top/bottom off-canvas patterns — cookie banner, search overlay, filter drawer and notification tray.
Quick Setup
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
Key Classes Reference
| Class | What It Does |
|---|---|
.offcanvas-top | Slides down from top |
.offcanvas-bottom | Slides up from bottom |
.offcanvas-start | Slides from left |
.offcanvas-end | Slides from right |
.rounded-top | Rounded top corners on bottom panels |
height:auto | Auto height based on content |
max-height:300px | Limit panel height |
1. Bootstrap 5 Cookie Banner (Off-Canvas Bottom)
GDPR-style cookie consent banner that slides up from the bottom using offcanvas-bottom.
2. Bootstrap 5 Search Overlay (Off-Canvas Top)
Full-width search bar that slides down from the top when triggered.
3. Bootstrap 5 Mobile Filter Drawer (Off-Canvas Bottom)
Filter panel that slides up from the bottom on mobile — common in product listing pages.
4. Bootstrap 5 Notification Tray (Off-Canvas Bottom)
Slide-up notification center with unread badges and notification list.
Frequently Asked Questions
Use offcanvas-top class on the offcanvas element: <div class='offcanvas offcanvas-top'>. Control the height with CSS — Bootstrap defaults to 30vh but you can override: style='height:auto;max-height:200px'. Trigger with the standard data-bs-toggle and data-bs-target attributes.
Use offcanvas-bottom class: <div class='offcanvas offcanvas-bottom'>. Set height with inline style or CSS: .offcanvas-bottom { height: auto; max-height: 60vh; }. Add rounded-top for a bottom sheet appearance with rounded top corners.
Use offcanvas-bottom with height:auto to create a banner that sticks to the bottom. Set data-bs-backdrop='false' and data-bs-scroll='true' to allow page interaction without dimming. Show it on page load using JavaScript: new bootstrap.Offcanvas(el).show().
Off-canvas slides in from an edge (top, bottom, left, right) and is positioned at the edge of the viewport. Modal appears centered in the viewport with a backdrop overlay. Off-canvas is better for panels, drawers, search overlays and cookie banners. Modal is better for dialogs and confirmations.
Need a Full Bootstrap 5 Admin Dashboard?
Get a complete Angular 21 + Bootstrap 5 dashboard with 50+ components — built by the same team behind BootstrapPlanet.
Browse Templates →Use code FIRST30 for 30% off your first purchase.