Is there a way to change the size of specific bootstrap offcanvas elements without affecting all of them? I am aware that I can modify the SASS variable ($offcanvas-horizontal-width: 400px) to change the size of all offcanvas elements.
What I would like is to have different CSS classes that I can apply to individual offcanvas elements, similar to how you can use .modal-xl with modals. For example, something like .offcanvas-size-l and .offcanvas-size-xl.
It's important that the offcanvas remains responsive and does not exceed 100vw on narrower screens, using max-width and media queries.
Simply specifying a width is not enough, as Bootstrap also uses corresponding negative margins which can push the offcanvas out of view. There are multiple values that need to be adjusted for this to work correctly.
Since I compile Bootstrap myself using Sass, I have more flexibility to insert or edit parts of the Sass functions before and after the CSS code. Has anyone successfully implemented this?
I do not need the new 'responsive-offcanvas' function (offcanvas-xl) introduced in version 5.2, as it serves a different purpose.
Here is an example code snippet taken directly from the Bootstrap page, where I have added 'offcanvas-size-xl' class:
<button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#staticBackdrop" aria-controls="staticBackdrop">
Toggle static offcanvas
</button>
<div class="offcanvas offcanvas-start offcanvas-size-xl" data-bs-backdrop="static" tabindex="-1" id="staticBackdrop" aria-labelledby="staticBackdropLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="staticBackdropLabel">Offcanvas</h5>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<div>
I will not close if you click outside of me.
</div>
</div>
</div>