0

(There's a similar question here, but I am too much of a noob yet to translate this onto Bootstrap)

What I want is to have an area on the page between "header" and "footer" (let's call it "body"), which may have a

  • some fixed section, like BS4 "row", put on the top,

  • some variable content, consisting of several BS "rows", AND aligned vertically on the middle of what is left of the body (or of the body itself)

Can it be done in a responsive manner, and without JS (using only Bootstrap 4 CSS) ?

I've tried some stuff: 

  <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/) but as long as I add "d-flex" onto "body" div, or any of it's children, all the previous "row"/"col"-based layout turns into horrible mess ! (see https://jsfiddle.net/f93mhdbr/2/)

I suspect this is due to Bootstrap itself using Flexbox for column and rows, but maybe any solution exists?

I will try to work on improving this question, I know it's very poor, but I right now I am too much in a despair to work it all out...

UPDATE: added links to whatever I was trying to reproduce

Community
  • 1
  • 1
62mkv
  • 1,444
  • 1
  • 16
  • 28

1 Answers1

1

You need to use the flex property to achieve it. Using flex-grow here will make your variable element to grow and fill the remaining height of its container, if there is any. Then all is left to do is set align-items-center on the element to align it on the x-axis.

Here is the Fiddle

Please note I added background-colors so it's easier for you to see how much space each element uses, or use an inspector.

You can set any fixed height for the header, footer and content-top. The height of content and content-remaining will adapt responsively, because they have the property flex-grow: 1 set on them. Here's an example.

To explain further, because the container wrap has a min-height: 100-vh, the content element will grow to fill the entire viewport relative to the rest of the flexible items inside the wrap container. The same logic applies to content-remaining, the only difference is that its parent is the content element and not the wrap container.

As last, I added the IE fix for the min-height property on flex-items. It's a known bug and a quick and reliable fix is to wrap it in a separate flex container.

Hopefully this was helpful to you, if you have any questions left please comment on this answer.

Cooleronie
  • 1,225
  • 1
  • 9
  • 9
  • 1
    it seems like I didn't articulate it strong enough - what I was trying to achieve was to have *several BS4 rows* aligned as a whole (vertically centered) inside of a "flex" container. However the more I think on this, the more it seems obvious that this is impossible, because "rows" themselves are based on flexbox, and it feels as though you cannot have embedded flexboxes. But I don't have the expertise to answer for sure. And thanks a lot for the effort !! – 62mkv Jan 24 '17 at 06:40