Bootstrap - Offcanvas Part 4: Customizing Offcanvas

Bootstrap allows you to customize the look and behaviour of the Offcanvas component using classes and JavaScript.

Example 1: Custom Width

<div class="offcanvas offcanvas-start" style="width: 300px;" id="customWidth">

  <div class="offcanvas-header">

    <h5>Custom Width</h5>

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

  </div>

</div>

Example 2: Offcanvas Backdrop

Disable the backdrop for a non-obtrusive experience:

<button class="btn btn-secondary" data-bs-toggle="offcanvas" data-bs-target="#offcanvasBackdrop" data-bs-backdrop="false">No Backdrop</button>

Example 3: Scrolling Enabled

Allow scrolling in the background while the offcanvas is open:

<button class="btn btn-secondary" data-bs-toggle="offcanvas" data-bs-target="#offcanvasScroll" data-bs-scroll="true">Enable Scroll</button>

Explanation:

Customization enables developers to tailor the offcanvas behaviour and style to specific application requirements.