(I found a related inquiry here, however, my current skill level does not allow me to implement it with Bootstrap just yet)
My goal is to create a section on the webpage between the "header" and "footer" (referred to as "body"), which should include:
a fixed section at the top, like BS4 "row",
variable content made up of multiple BS "rows", aligned vertically in the middle of the remaining body space
Is it possible to achieve this responsively without using JavaScript, solely relying on Bootstrap 4 CSS?
I have attempted the following:
<body>
<div id="root" class="container">
<div style="height: 100%;">
<div><h1>HEADER</h1></div><hr>
<div style="min-height: 60%;">
<div class="h100">
<div>some badge</div><br>
<div>
<div class="row justify-content-between">
<div class="col-3">Item #2</div>
<div class="col-3 text-right">
<div>some stats</div>
</div>
</div>
<div class="">
<div class="row justify-content-center">
<div class="col text-center"><h3>THIS SHOULD BE IN THE MIDDLE OF A BLANK SPACE</h3></div>
</div>
<div class="row justify-content-center">
<div class="col-4 text-right"><button class="btn btn-link">it's just below and left</button></div>
<div class="col-4 text-left"><button class="btn btn-link">it's just below and right</button></div>
</div>
</div>
</div>
</div>
</div><hr>
<div class="footer">FOOTER</div>
</div>
</div>
</body>
(https://jsfiddle.net/f93mhdbr/) However, when I add "d-flex" to the "body" div or any of its children, the previous layout based on "row"/"col" gets messed up! (see https://jsfiddle.net/f93mhdbr/2/)
This might be because Bootstrap itself uses Flexbox for columns and rows, but is there any alternative solution available?
I will continue working on refining this question, I acknowledge its lack of detail, but currently, I am struggling to figure it all out...
UPDATE: included links to examples I was attempting to replicate