CODEWITHSUNDEEP
cssflexboxtwitter-bootstrap-4
62mkv
62mkv

Reputation: 1542

Is it possible to put "row"-s inside "d-flex" in Bootstrap 4?

(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

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

Upvotes: 0

Views: 5698

Answers (1)

Cooleronie
Cooleronie

Reputation: 1315

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.

Upvotes: 1

Related Questions