How do I open an offcanvas from the end with a partially visible backdrop?

Asked on Jun 19, 2025

1 Answer

To open an offcanvas from the end with a partially visible backdrop in Bootstrap 5, you can customize the offcanvas component using classes and styles. Here's a simple example to achieve this effect.

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

        <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasEnd" aria-labelledby="offcanvasEndLabel">
            <div class="offcanvas-header">
                <h5 class="offcanvas-title" id="offcanvasEndLabel">Offcanvas</h5>
                <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
            </div>
            <div class="offcanvas-body">
                Content goes here.
            </div>
        </div>

        <style>
            .offcanvas-backdrop.show {
                opacity: 0.5; /* Adjust the backdrop opacity */
            }
        </style>
        <!-- END COPY / PASTE -->

Additional Comment:

The `offcanvas-end` class positions the offcanvas to slide in from the right.
The `offcanvas-backdrop.show` style adjusts the backdrop opacity to make it partially visible.
Ensure you have included Bootstrap's CSS and JS files in your project for the components to function properly.

✅ Answered with Bootstrap 5 best practices.

← Back to All Questions