---- Activator (button) --------
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample"
aria-controls="offcanvasExample">
Open Offcanvas
</button>
---- Offcanvas Component --------
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<div>
Some text as placeholder. In real life you can have the elements you have chosen. Like, text,
images, lists,
etc.
</div>
<div class="dropdown mt-3">
<button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown">
Dropdown Button
</button>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item active" href="#">Another action</a></li>
<li><a class="dropdown-item" href="#">A third action</a></li>
</ul>
</div>
</div>
</div>
Custom CSS is required to style the background and text with custom colors.
.custom-background-color {
background-color: #0C2340 !important;
}
.custom-text-color {
color: #FFFFFF !important;
}
This will reset the page. Are you sure?