-
BS Grid Basic
-
BS Typography
-
BS Tables
-
BS Images
-
BS Jumbotron
-
BS Alerts
-
BS Forms
-
BS Floating Labels
-
BS Form Validation
-
BS Buttons
-
BS Button Groups
-
BS Badges
-
BS Progress Bars
-
BS Spinnier
-
BS Pagination
-
BS List Groups
-
BS Cards
-
BS Dropdowns
-
BS Collapse
-
BS Navs
-
BS Navbar
-
BS Carousel
-
BS Modal
-
BS Tooltip
-
BS Panels
-
BS Popover
-
BS Toast
-
BS Scrollspy
-
BS OffCanvas
-
BS Utilities
-
BS Flex
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 :
