offCanvas
Bootstrap’s Offcanvas component is a sidebar-style interface used to create hidden overlays sliding in from the edges of the screen. It’s typically used for off-screen navigation menus or information panels. The component can be configured to appear from any side of the viewport – top, bottom, left, or right.
Implementing Offcanvas on All Sides
Setup: To use the Offcanvas component, you need a trigger (like a button) to open the Offcanvas and the Offcanvas element itself. Here’s how to set it up on all sides of the screen.
Example 1: Offcanvas from Left
<!– Button trigger for left offcanvas –>
<button class=”btn btn-primary” type=”button” data-bs-toggle=”offcanvas” data-bs-target=”#offcanvasLeft” aria-controls=”offcanvasLeft”>
Toggle left offcanvas
</button>
<!– Offcanvas Element from Left –>
<div class=”offcanvas offcanvas-start” tabindex=”-1″ id=”offcanvasLeft” aria-labelledby=”offcanvasLeftLabel”>
<div class=”offcanvas-header”>
<h5 id=”offcanvasLeftLabel”>Offcanvas Left</h5>
<button type=”button” class=”btn-close text-reset” data-bs-dismiss=”offcanvas” aria-label=”Close”></button>
</div>
<div class=”offcanvas-body”>
<!– Content for left offcanvas –>
</div>
</div>
Example 2: Offcanvas from Right
<!– Button trigger for right offcanvas –>
<button class=”btn btn-secondary” type=”button” data-bs-toggle=”offcanvas” data-bs-target=”#offcanvasRight” aria-controls=”offcanvasRight”>
Toggle right offcanvas
</button>
<!– Offcanvas Element from Right –>
<div class=”offcanvas offcanvas-end” tabindex=”-1″ id=”offcanvasRight” aria-labelledby=”offcanvasRightLabel”>
<div class=”offcanvas-header”>
<h5 id=”offcanvasRightLabel”>Offcanvas Right</h5>
<button type=”button” class=”btn-close text-reset” data-bs-dismiss=”offcanvas” aria-label=”Close”></button>
</div>
<div class=”offcanvas-body”>
<!– Content for right offcanvas –>
</div>
</div>
Example 3: Offcanvas from Top
<!– Button trigger for top offcanvas –>
<button class=”btn btn-success” type=”button” data-bs-toggle=”offcanvas” data-bs-target=”#offcanvasTop” aria-controls=”offcanvasTop”>
Toggle top offcanvas
</button>
<!– Offcanvas Element from Top –>
<div class=”offcanvas offcanvas-top” tabindex=”-1″ id=”offcanvasTop” aria-labelledby=”offcanvasTopLabel”>
<div class=”offcanvas-header”>
<h5 id=”offcanvasTopLabel”>Offcanvas Top</h5>
<button type=”button” class=”btn-close text-reset” data-bs-dismiss=”offcanvas” aria-label=”Close”></button>
</div>
<div class=”offcanvas-body”>
<!– Content for top offcanvas –>
</div>
</div>
Example 4: Offcanvas from Bottom
<!– Button trigger for bottom offcanvas –>
<button class=”btn btn-danger” type=”button” data-bs-toggle=”offcanvas” data-bs-target=”#offcanvasBottom” aria-controls=”offcanvasBottom”>
Toggle bottom offcanvas
</button>
<!– Offcanvas Element from Bottom –>
<div class=”offcanvas offcanvas-bottom” tabindex=”-1″ id=”offcanvasBottom” aria-labelledby=”offcanvasBottomLabel”>
<div class=”offcanvas-header”>
<h5 id=”offcanvasBottomLabel”>Offcanvas Bottom</h5>
<button type=”button” class=”btn-close text-reset” data-bs-dismiss=”offcanvas” aria-label=”Close”></button>
</div>
<div class=”offcanvas-body”>
<!– Content for bottom offcanvas –>
</div>
</div>
Explanation:
– In each example, an Offcanvas component is triggered to slide in from different sides of the viewport: left (`offcanvas-start`), right (`offcanvas-end`), top (`offcanvas-top`), or bottom (`offcanvas-bottom`).
– The trigger button uses `data-bs-toggle=”offcanvas”` and `data-bs-target=”#offcanvasSide”` to link to the Offcanvas element.
– Each Offcanvas element has a close button (`btn-close`) and a body area where the content is placed.
The Offcanvas component in Bootstrap is a versatile tool for creating sidebars and hidden panels. By allowing the component to appear from any side of the screen, it provides flexibility in design and enhances the user experience, especially for mobile-first or responsive designs. Whether used for navigation menus, info panels, or additional content, Offcanvas adds a modern, interactive element to web pages.
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.
