1
I don’t know much about responsiveness but I still wanted to create one of those layouts that look "normal" on the PC, but the smartphone has a hidden side menu, visible by clicking a link on a fixed bar at the top. Researching a little I found the Jumbotron bootstrap.
I made some changes to it so that this Jumbotron was 100% wide, forcing the side menu below it:
<div class="container">
<div class="jumbotron">
<h1>Hello, world!</h1>
<p>This is an example to show the potential of an offcanvas layout pattern in Bootstrap. Try some responsive-range viewport sizes to see it in action.</p>
</div>
<div class="row row-offcanvas row-offcanvas-right">
I just took the Jumbotron out of the offcanvas
But this got weird when seen by the smartphone simulator of Chrome Developer Tools, precisely because the side menu was down there.
At first I thought it was just the case of "pull up" and put a margin-top: -76.6% in the #sidebar to "stick" the fixed bar. Not only this very specific value smelled like gambiarra, but also made the menu disappear from the "normal" view, on the PC.
Also, the default width of this menu is too narrow for my taste, I wanted it to cover 100% of the lagura (and the height) of the screen, whatever it is.
But I tried to adjust the Grid of #sidebar, increasing the col-md-3 for, maybe, col-md-12, but changed nothing; Even removing it and col-6 that precedes, the sidebar was only slightly larger.
I didn’t get around to it at the time, but in my head, I think I’d just add a helper d-flex h-100 that would solve the problem.
How would I adjust? Detail this Jumbotorn is the da version 4 bootstrap.