Offcanvas
Default Buttons#
You can use a link with the href
attribute, or a button with the
data-bs-target attribute.
In both cases, the
data-bs-toggle="offcanvas"
is required.
Offcanvas
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
<div class="button-list">
<a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasExample" role="button" aria-controls="offcanvasExample">
Link with href
</a>
<button class="btn btn-secondary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
Button with data-bs-target
</button>
</div>
<!-- default offcanvas -->
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title mt-0" id="offcanvasExampleLabel">Offcanvas</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<p>
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
</p>
<div class="dropdown mt-3">
<button class="btn btn-primary dropdown-toggle" type="button" id="defaultDropdownMenuButton" data-bs-toggle="dropdown">
Dropdown button
</button>
<ul class="dropdown-menu" aria-labelledby="defaultDropdownMenuButton">
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
</ul>
</div>
</div>
</div>
Static Backdrop #
Scrolling the
<body> element is
disabled when an offcanvas and its
backdrop are visible. Use the
data-bs-scroll attribute to
toggle
<body> scrolling and
data-bs-backdrop to toggle
the backdrop.
Colored with scrolling
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
Offcanvas with backdrop
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
Backdroped with scrolling
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
<div class="button-list">
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasScrolling" aria-controls="offcanvasScrolling">Enable Body Scrolling</button>
<button class="btn btn-secondary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBackdrop" aria-controls="offcanvasWithBackdrop">Enable Backdrop (Default)</button>
<button class="btn btn-success" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasWithBothOptions" aria-controls="offcanvasWithBothOptions">Enable Both Scrolling & Backdrop</button>
</div>
<!-- scrolling offcanvas -->
<div class="offcanvas offcanvas-start" data-bs-scroll="true" data-bs-backdrop="false" tabindex="-1" id="offcanvasScrolling" aria-labelledby="offcanvasScrollingLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title mt-0" id="offcanvasScrollingLabel">Colored with scrolling</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<p>
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
</p>
<div class="dropdown mt-3">
<button class="btn btn-primary dropdown-toggle" type="button" id="scrollingDropdownMenuButton" data-bs-toggle="dropdown">
Dropdown button
</button>
<ul class="dropdown-menu" aria-labelledby="scrollingDropdownMenuButton">
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
</ul>
</div>
</div>
</div>
<!-- backdrop offcanvas -->
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasWithBackdrop" aria-labelledby="offcanvasWithBackdropLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title mt-0" id="offcanvasWithBackdropLabel">Offcanvas with backdrop</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<p>
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
</p>
<div class="dropdown mt-3">
<button class="btn btn-primary dropdown-toggle" type="button" id="backdropDropdownMenuButton" data-bs-toggle="dropdown">
Dropdown button
</button>
<ul class="dropdown-menu" aria-labelledby="backdropDropdownMenuButton">
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
</ul>
</div>
</div>
</div>
<!-- both scrolling & backdrop offcanvas -->
<div class="offcanvas offcanvas-start" data-bs-scroll="true" tabindex="-1" id="offcanvasWithBothOptions" aria-labelledby="offcanvasWithBothOptionsLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title mt-0" id="offcanvasWithBothOptionsLabel">Backdroped with scrolling</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<p>
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
</p>
<div class="dropdown mt-3">
<button class="btn btn-primary dropdown-toggle" type="button" id="scrollingBackdropDropdownMenuButton" data-bs-toggle="dropdown">
Dropdown button
</button>
<ul class="dropdown-menu" aria-labelledby="scrollingBackdropDropdownMenuButton">
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
</ul>
</div>
</div>
</div>
Offcanvas Position #
Try the top, right, bottom and left examples out below.
-
.offcanvas-topplaces offcanvas on the top of the viewport -
.offcanvas-endplaces offcanvas on the right of the viewport -
.offcanvas-bottomplaces offcanvas on the bottom of the viewport -
.offcanvas-startplaces offcanvas on the left of the viewport
Offcanvas
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
Offcanvas
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
Offcanvas
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
Offcanvas
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
<div class="button-list">
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#leftOffcanvas" aria-controls="leftOffcanvas">Left Offcanvas</button>
<button class="btn btn-secondary" type="button" data-bs-toggle="offcanvas" data-bs-target="#rightOffcanvas" aria-controls="rightOffcanvas">Right Offcanvas</button>
<button class="btn btn-success" type="button" data-bs-toggle="offcanvas" data-bs-target="#topOffcanvas" aria-controls="topOffcanvas">Top Offcanvas</button>
<button class="btn btn-info" type="button" data-bs-toggle="offcanvas" data-bs-target="#bottomOffcanvas" aria-controls="bottomOffcanvas">Bottom Offcanvas</button>
</div>
<!-- left offcanvas -->
<div class="offcanvas offcanvas-start" tabindex="-1" id="leftOffcanvas" aria-labelledby="leftOffcanvasLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title mt-0" id="leftOffcanvasLabel">Offcanvas</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<p>
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
</p>
<div class="dropdown mt-3">
<button class="btn btn-primary dropdown-toggle" type="button" id="leftDropdownMenuButton" data-bs-toggle="dropdown">
Dropdown button
</button>
<ul class="dropdown-menu" aria-labelledby="leftDropdownMenuButton">
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
</ul>
</div>
</div>
</div>
<!-- right offcanvas -->
<div class="offcanvas offcanvas-end" tabindex="-1" id="rightOffcanvas" aria-labelledby="rightOffcanvasLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title mt-0" id="rightOffcanvasLabel">Offcanvas</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<p>
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
</p>
<div class="dropdown mt-3">
<button class="btn btn-primary dropdown-toggle" type="button" id="rightDropdownMenuButton" data-bs-toggle="dropdown">
Dropdown button
</button>
<ul class="dropdown-menu" aria-labelledby="rightDropdownMenuButton">
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
</ul>
</div>
</div>
</div>
<!-- top offcanvas -->
<div class="offcanvas offcanvas-top" tabindex="-1" id="topOffcanvas" aria-labelledby="topOffcanvasLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title mt-0" id="topOffcanvasLabel">Offcanvas</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<p>
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
</p>
<div class="dropdown mt-3">
<button class="btn btn-primary dropdown-toggle" type="button" id="topDropdownMenuButton" data-bs-toggle="dropdown">
Dropdown button
</button>
<ul class="dropdown-menu" aria-labelledby="topDropdownMenuButton">
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
</ul>
</div>
</div>
</div>
<!-- bottom offcanvas -->
<div class="offcanvas offcanvas-bottom" tabindex="-1" id="bottomOffcanvas" aria-labelledby="bottomOffcanvasLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title mt-0" id="bottomOffcanvasLabel">Offcanvas</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<p>
Some text as placeholder. In real life you can have the elements you have chosen. Like, text, images, lists, etc.
</p>
<div class="dropdown mt-3">
<button class="btn btn-primary dropdown-toggle" type="button" id="bottomDropdownMenuButton" data-bs-toggle="dropdown">
Dropdown button
</button>
<ul class="dropdown-menu" aria-labelledby="bottomDropdownMenuButton">
<li><a class="dropdown-item" href="javascript:void(0);">Action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Another action</a></li>
<li><a class="dropdown-item" href="javascript:void(0);">Something else here</a></li>
</ul>
</div>
</div>
</div>