Offcanvas & Toasts header small text goes here...
Below is an offcanvas example that is shown by default (via .show on .offcanvas).
Offcanvas includes support for a header with a close button and an optional body class for some initial padding.
Offcanvas
Content for the offcanvas goes here. You can place just about any Bootstrap component or custom elements here.
<!-- toggler -->
<a class="btn btn-primary" data-bs-toggle="offcanvas" href="#offcanvasExample">
Toggle
</a>
<!-- html -->
<div class="offcanvas offcanvas-start" id="offcanvasExample" data-bs-backdrop="false" data-bs-scroll="true">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasLabel">Offcanvas</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"></button>
</div>
<div class="offcanvas-body">
...
</div>
</div>
<!-- placement end -->
<div class="offcanvas offcanvas-end">
...
</div>
<!-- placement bottom -->
<div class="offcanvas offcanvas-bottom">
...
</div>
To encourage extensible and predictable toasts, we recommend a header and body.
Toast headers use display: flex, allowing easy alignment of content thanks to our margin and flexbox utilities.
Default
Hello, world! This is a toast message.
<!-- toggler -->
<button type="button" class="btn btn-primary" id="liveToastBtn">Show live toast</button>
<!-- html -->
<div class="toast show" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<div class="bg-blue rounded w-25px h-25px d-flex align-items-center justify-content-center text-white">
<i class="fa fa-bell"></i>
</div>
<strong class="me-auto ms-2">Bootstrap</strong>
<small>11 mins ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">
Hello, world! This is a toast message.
</div>
</div>
<script>
$(document).on('click','#liveToastBtn', function(e) {
e.preventDefault();
$('#liveToast').toast('show');
$(this).blur();
});
</script>