Bootstrap Off-canvas
Off-canvas is a sliding panel that appears from any side of the screen (left, right, top, bottom). It is mainly used for:
• Side menus
• Notifications
• Additional content in a small area
Basic Setup
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Bootstrap Offcanvas Example</title>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css” rel=”stylesheet”>
</head>
<body>
<!– OFFCANVAS EXAMPLES WILL GO HERE –>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js”></script>
</body>
</html>
Four(4) Examples of Off-Canvas
Off-Canvas from Left
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Bootstrap Offcanvas Example</title>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css” rel=”stylesheet”>
</head>
<body>
<!– Button –>
<button class=”btn btn-primary” type=”button” data-bs-toggle=”offcanvas” data-bs-target=”#offcanvasLeft”>
Toggle Left Offcanvas
</button>
<!– Offcanvas –>
<div class=”offcanvas offcanvas-start” tabindex=”-1″ id=”offcanvasLeft”>
<div class=”offcanvas-header”>
<h5>Offcanvas Left</h5>
<button type=”button” class=”btn-close” data-bs-dismiss=”offcanvas”></button>
</div>
<div class=”offcanvas-body”>
This is left Offcanvas content.
</div>
</div>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js”></script>
</body>
</html>
Output:
Off-Canvas from Right
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Bootstrap Offcanvas Example</title>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css” rel=”stylesheet”>
</head>
<body>
<button class=”btn btn-secondary” type=”button” data-bs-toggle=”offcanvas” data-bs-target=”#offcanvasRight”>
Toggle Right Offcanvas
</button>
<div class=”offcanvas offcanvas-end” tabindex=”-1″ id=”offcanvasRight”>
<div class=”offcanvas-header”>
<h5>Offcanvas Right</h5>
<button type=”button” class=”btn-close” data-bs-dismiss=”offcanvas”></button>
</div>
<div class=”offcanvas-body”>
This is right Offcanvas content.
</div>
</div>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js”></script>
</body>
</html>
Output:
Off-Canvas from Top
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Bootstrap Offcanvas Example</title>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css” rel=”stylesheet”>
</head>
<body>
<button class=”btn btn-success” type=”button” data-bs-toggle=”offcanvas” data-bs-target=”#offcanvasTop”>
Toggle Top Offcanvas
</button>
<div class=”offcanvas offcanvas-top” tabindex=”-1″ id=”offcanvasTop”>
<div class=”offcanvas-header”>
<h5>Offcanvas Top</h5>
<button type=”button” class=”btn-close” data-bs-dismiss=”offcanvas”></button>
</div>
<div class=”offcanvas-body”>
This is top Offcanvas content.
</div>
</div>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js”></script>
</body>
</html>
Output:
Off-Canvas from Bottom
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Bootstrap Offcanvas Example</title>
<link href=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css” rel=”stylesheet”>
</head>
<body>
<button class=”btn btn-danger” type=”button” data-bs-toggle=”offcanvas” data-bs-target=”#offcanvasBottom”>
Toggle Bottom Offcanvas
</button>
<div class=”offcanvas offcanvas-bottom” tabindex=”-1″ id=”offcanvasBottom”>
<div class=”offcanvas-header”>
<h5>Offcanvas Bottom</h5>
<button type=”button” class=”btn-close” data-bs-dismiss=”offcanvas”></button>
</div>
<div class=”offcanvas-body”>
This is bottom Offcanvas content.
</div>
</div>
<script src=”https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js”></script>
</body>
</html>
Output:
Explanation:
• data-bs-toggle=”offcanvas” = tells Bootstrap to open an offcanvas
• data-bs-target=”#offcanvasID” = connects button to the panel
• offcanvas-start/end/top/bottom = decides direction of panel
• btn-close = button to close the panel
Conclusion
The Bootstrap Offcanvas component lets you add sliding panels from any side of the screen. You can use it for mobile menus, sidebars, or important alerts. It enhances the user experience by keeping the main screen clean and utilizing space efficiently.
Practice Scenarios
1: Create a Left Offcanvas Navigation Menu
Expected Output:
2: Show Alert Message from Bottom
Expected Output:
YouTube Reference :
Bootstrap Offcanvas is a component that allows hidden content, such as navigation menus or sidebars, to be revealed with a sliding motion.
Yes, this Bootstrap training is completely free. You can access all tutorials and learn Bootstrap at your own pace without any charges.
Use Bootstrap’s .offcanvas classes along with responsive utilities like .offcanvas-lg to ensure it adapts to different screen sizes.
Yes, we offer Bootstrap OffCanvas tutorial in Hindi to help Hindi-speaking students understand the concepts easily. Whether you’re a beginner or intermediate, this course is tailored to your needs.
Examples include:
- Offcanvas navigation menus.
- Sidebar content.
- Hidden forms and filters.
Yes, Bootstrap Offcanvas includes built-in animations, and you can enhance these further with custom CSS or JavaScript.
Customize Offcanvas components by overriding Bootstrap’s default styles with your own CSS
Key attributes include:
data-bs-toggle="offcanvas"to toggle the component.data-bs-targetto specify the target Offcanvas element.
Yes, Bootstrap Offcanvas is designed to be mobile-friendly and works seamlessly on smaller screens.
While versatile, Bootstrap Offcanvas may require additional customization for complex layouts or specific designs.
