Offcanvas & Toasts header small text goes here...

Offcanvas

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.

Default
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>

Toasts

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
<!-- 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>
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.
Notification 11 mins ago
Hello, world! This is a toast message.
App Settings
Header Fixed
Header Inverse
Sidebar Fixed
Admin Design (5)
Language Version (7)
Frontend Design (5)
Documentation Reset Local Storage