Bootstrap 5 offcanvas inside container

Asked May 15 '23 at 05:50

Active May 15 '23 at 16:13

Viewed 190 times

I am trying to use Bootstrap 5 offcanvas in a responsive design. When using mobile everything works because the offcanvas is relative to the viewport. However when using larger screens, I am using container as the main div (not container-fluid) and in this case the offcanvas shows from the edge of the viewport instead of from inside the container.

How can I force the offcanvas element to start from inside the container and not the start of the viewport?

<div class="container" style="border:1px solid grey;height:100vh">
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample" aria-controls="offcanvasExample"> Open menu </button>
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasExample" aria-labelledby="offcanvasExampleLabel">
    <div class="offcanvas-header">
        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body">
        <div> Menu </div>
    </div>
</div>

edited May 15 '23 at 16:13

asked May 15 '23 at 05:50

user1480192

Please post the relevant code – Carol Skelly May 15 '23 at 12:59
@user1480192 It is working fine. I tested the code – Developer May 15 '23 at 16:58
It is not working fine. If you open it on a wide desktop you will see that the canvas enters from the edge of the screen and not from the edge of the container – user1480192 May 16 '23 at 03:20

Bootstrap 5 offcanvas inside container

0 Answers0