Responsive offcanvas placement

[mef]

Prerequisites

• [X] I have searched for duplicate or closed feature requests
• [X] I have read the contributing guidelines

Proposal

Allow one offcanvas component to have different placements based on the screen dimensions.

Solution

Introduce a set of offcanvas-placement classes including breakpoints: .offcanvas-{breakpoint}-{position}, so that one offcanvas would have a different placement based on the current viewport size.

Demo

For example, a <div class="offcanvas offcanvas-bottom offcanvas-md-end"> would be displayed at the bottom on small devices, and to the right as soon as the viewport's size would be medium.

Solution in a smartphone screen:

Same offcanvas in a laptop screen:

Motivation and context

In current Bootstrap 5.3, the available placements of offcanvas are sub-optimal in some screen sizes, in the sense that:

• .offcanvas-end covers completely the underneath content in a mobile screen layout, whereas .offcanvas-bottom would leave part of it visible.
• .offcanvas-bottom cuts too much vertical content in a laptop's landscape layout - compared to what would be left visible with .offcanvas-end.

Current .offcanvas-end on a smartphone screen:

Current .offcanvas-bottom on a mid-size laptop screen:

[btwitsdevanshu]

if we can blur the background of offcanvas placement then it would be more eyecatching.

[Arvind-Suthar]

The content inside the offcanvas will call for scrolling in it on smaller screens, using overlay with scrolling is poor web design