Tutorial

Sign Up

log In

Bootstrap
Bootstrap 5 Offcanvas

❮ Previous

Next ❯

The offcanvas component in Bootstrap 5 provides a way to toggle hidden content into view, similar to a modal or sidebar, without covering the entire screen. It's often used for navigation menus, sidebars, or additional content panels.

Basic  Offcanvas:

To create an offcanvas component, use the following structure:

Offcanvas Title

Some placeholder text for the offcanvas content.

Example
<button class="btn btn-primary" 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" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<p>Some placeholder text for the offcanvas content.</p>
</div>
</div>

Try it yourself

Position Offcanvas:

To create an offcanvas component, use the following structure.

Offcanvas Left
Content for offcanvas on the left.
Offcanvas Right
Content for offcanvas on the right.
Offcanvas Top
Content for offcanvas at the top.
Offcanvas Bottom
Content for offcanvas at the bottom.
Example
<div class="container mt-5">
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasStart" aria-controls="offcanvasStart">Open Left</button>
<button class="btn btn-secondary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasEnd" aria-controls="offcanvasEnd">Open Right</button>
<button class="btn btn-success" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasTop" aria-controls="offcanvasTop">Open Top</button>
<button class="btn btn-danger" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasBottom" aria-controls="offcanvasBottom">Open Bottom</button>
</div>

<!-- Offcanvas Start -->
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasStart" aria-labelledby="offcanvasStartLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasStartLabel">Offcanvas Left</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
Content for offcanvas on the left.
</div>
</div>

<!-- Offcanvas End -->
<div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasEnd" aria-labelledby="offcanvasEndLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasEndLabel">Offcanvas Right</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
Content for offcanvas on the right.
</div>
</div>

<!-- Offcanvas Top -->
<div class="offcanvas offcanvas-top" tabindex="-1" id="offcanvasTop" aria-labelledby="offcanvasTopLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasTopLabel">Offcanvas Top</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
Content for offcanvas at the top.
</div>
</div>

<!-- Offcanvas Bottom -->
<div class="offcanvas offcanvas-bottom" tabindex="-1" id="offcanvasBottom" aria-labelledby="offcanvasBottomLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasBottomLabel">Offcanvas Bottom</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
Content for offcanvas at the bottom.
</div>
</div>

Try it yourself

Key Attributes

data-bs-toggle="offcanvas": Indicates that the button triggers an offcanvas component.

data-bs-target="#id": Specifies the ID of the offcanvas element to open.

aria-controls: Matches the ID of the offcanvas component for accessibility.

.offcanvas-start: Places the offcanvas to the left (default).

.offcanvas-end: Places the offcanvas to the right.

.offcanvas-top: Places the offcanvas at the top.

.offcanvas-bottom: Places the offcanvas at the bottom.


❮ Previous

Next ❯
Whereisstuff is simple learing platform for beginer to advance level to improve there skills in technologies.we will provide all material free of cost.you can write a code in runkit workspace and we provide some extrac features also, you agree to have read and accepted our terms of use, cookie and privacy policy.
© Copyright 2024 www.whereisstuff.com. All rights reserved. Developed by whereisstuff Tech.