Bootstrap - Offcanvas Part 3: Adding Content to Offcanvas

You can include any type of content, such as text, images, or interactive elements, in the offcanvas body.

Example 1: Navigation Menu

<div class="offcanvas offcanvas-start" id="offcanvasMenu">

  <div class="offcanvas-header">

    <h5>Menu</h5>

    <button class="btn-close" data-bs-dismiss="offcanvas"></button>

  </div>

  <div class="offcanvas-body">

    <ul class="list-group">

      <li class="list-group-item"><a href="#">Home</a></li>

      <li class="list-group-item"><a href="#">About</a></li>

      <li class="list-group-item"><a href="#">Contact</a></li>

    </ul>

  </div>

</div>

Example 2: Login Form

<div class="offcanvas offcanvas-end" id="offcanvasLogin">

  <div class="offcanvas-header">

    <h5>Login</h5>

    <button class="btn-close" data-bs-dismiss="offcanvas"></button>

  </div>

  <div class="offcanvas-body">

    <form>

      <div class="mb-3">

        <label for="email" class="form-label">Email</label>

        <input type="email" class="form-control" id="email">

      </div>

      <div class="mb-3">

        <label for="password" class="form-label">Password</label>

        <input type="password" class="form-control" id="password">

      </div>

      <button type="submit" class="btn btn-primary">Login</button>

    </form>

  </div>

</div>

Explanation:

Offcanvas components support all HTML content. Developers can use this for navigation, forms, or any additional UI elements.