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:
Prerequisites
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: