Bootstrap 5 Offcanvas

Bootstrap 5 offcanvas is used to make hidden sidebars within the project for navigation.

Steps to make offcanvas:

Step1: To show and hide offcanvas element, use<button> and <a> element.
Step2: Use link <a> with href attribute and <button> with the data-bs-target attribute.In both cases,use the data-bs-toggle="offcanvas".Please keep in mind that href and data-bs-target contains the offcanvas container id preceded by hash character(#).
Step3: Assign.offcanvas followed by one of the (.offcanvas-start,.offcanvas-end,.offcanvas-top,.offcanvas-bottom )to the offcanvas container and also assign unique id to offcanvas container.
Step4: Assign .offcanvas-header Offcanvas header container and place offcanvas header title and assign .offcanvas-title and also place <button> and assign data attribute data-bs-dismiss="offcanvas" and assign btn-close.text-reset element.
Step5: Write offcanvas content inside .offcanvas-body container.

Source Code

    <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
  Button with data-bs-target
</button>
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
  <div class="offcanvas-header">
    <h5 class="offcanvas-title" id="offcanvasExampleLabel">Bootstrap Offcanvas Component</h5>
    <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
  </div>
  <div class="offcanvas-body">
    <div>
      <img src="https://picsum.photos/200/300" alt="This is an external image" class="img-fluid rounded-circle" style="width: 100px; height: 100px;" />
    </div>
    <ul class="nav flex-column">
      <li class="nav-item">
        <a class="nav-link active" aria-current="page" href="#">Home</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">About</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Contact</a>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Gallery</a>
      </li>
    </ul>
    <div class="dropdown mt-3">
      <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown">
        Tutorials
      </button>
      <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        <li><a class="dropdown-item" href="#">Learn HTML</a></li>
        <li><a class="dropdown-item" href="#">Learn CSS</a></li>
        <li><a class="dropdown-item" href="#">Learn Bootstrap</a></li>
      </ul>
    </div>
  </div>
</div>

Try it yourself

Note:Follow the above mention process to make bootstrap offcanvas component.

Online Test / Quiz

Question set 1

Web Tutorials

Html Tutorial HTML

Css Tutorial CSS

Bootstrap 5 Tutorial BOOTSTRAP 5

Bootstrap 4 Tutorial BOOTSTRAP 4

Materialize CSS Tutorial MATERIALIZE CSS