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

Ask any question about Bootstrap here... and get an instant response.

Post this Question & Answer:

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

Asked on Jun 06, 2025

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.

Ask any question about Bootstrap here... and get an instant response.

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

Asked on Jun 06, 2025

Answer

The Q&A Network