How can I create a full-height offcanvas that doesn’t scroll the body?

Asked on Jun 17, 2025

1 Answer

To create a full-height offcanvas in Bootstrap 5 that prevents the body from scrolling, you can use the `offcanvas` component with specific classes and attributes. Here's a simple example:

<!-- BEGIN COPY / PASTE -->
        <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample">
            Toggle Offcanvas
        </button>

        <div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
            <div class="offcanvas-header">
                <h5 class="offcanvas-title" id="offcanvasExampleLabel">Offcanvas</h5>
                <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
            </div>
            <div class="offcanvas-body">
                <p>This is a full-height offcanvas example.</p>
            </div>
        </div>
        <!-- END COPY / PASTE -->

Additional Comment:

The `offcanvas-start` class positions the offcanvas to the left. You can change it to `offcanvas-end`, `offcanvas-top`, or `offcanvas-bottom` for different positions.
The `data-bs-toggle` and `data-bs-target` attributes on the button control the offcanvas visibility.
The body will not scroll when the offcanvas is open due to Bootstrap's default behavior.
Ensure you have included Bootstrap's JavaScript for the offcanvas component to function properly.

✅ Answered with Bootstrap 5 best practices.

← Back to All Questions