Bootstrap 4 - Fluid Height Layout

user_687554 0
Viewed 14965

I have a website that is using Bootstrap 4. I'm trying to create a layout that takes up the full height of the screen. I thought the new "flex" grid approach in Bootstrap 4 was supposed to support this. Perhaps I'm doing it incorrectly? At this time, the height of my app only fills as much as is needed by the content. At this time, as shown in this Bootply, the entire height of the available area isn't filled. My code looks like this:

<div class="container-fluid">
  <div class="row" style="border-bottom:1px solid #000;">
    <div class="col-12">
      <ul class="list-inline">
        <li class="list-inline-item"><i class="fa fa-star"></i></li>
        <li class="list-inline-item"><h2>My Name</h2></li>
      </ul>
    </div>
  </div>

  <div class="row">
    <div class="col-3">
      <div class="row">
        <div class="col-3" style="background-color:#fff;">
          <div class="text-center">
            <i class="fa fa-users"></i>
            <div>Users</div>
          </div>

          <div class="text-center" style="color:orange;">
            <i class="fa fa-files-o"></i>
            <div>Files</div>
          </div>

          <div class="text-center">
            <i class="fa fa-cubes"></i>
            <div>Containers</div>
          </div>

          <hr>

          <div class="text-center">
            <i class="fa fa-comments"></i>
            <div>Feedback</div>
          </div>      

          <div class="text-center">
            <i class="fa fa-question-circle"></i>
            <div>Help</div>
          </div>
        </div>

        <div class="col-9" style="background-color:#eee;">
          <div>item 1</div>
          <div>item 2</div>
          <div>item 3</div>
        </div>
      </div>
    </div>    

    <div class="col-9" style="background-color:#ddd;">
      [main content goes here]
    </div>
  </div>
</div>

How do I use the entire height of the screen while leveraging the flex grid in Bootstrap 4?

Thank you!

twitter-bootstrap-4 flexbox css html
2 Answers

I thought the new "flex" grid approach in Bootstrap 4 was supposed to support this.

It does, and here is a start, where we first need to give the container a height, so I added this rule:

.container-fluid {
  height: 100vh;
}

Then I added the classes d-flex flex-column to the <div class="container-fluid"> element, making them column items so we can use flex-grow to stretch them so they fill their parent's height.

And finally, added col to the 2nd/last <div class="row"> element, and with that, it get flex-grow: 1, to fill the space left.

The 2nd/last row also has an inner row, having a col-3 element, which also need to be setup similar, though as I don't know how these should wrap etc., I left those for you to set up yourself. When you do, a great tip is to give different background colors, or borders, to ancestors/siblings, and you will see how they behave.

Update bootply

Stack snippet

.container-fluid {
  height: 100vh;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container-fluid d-flex flex-column">
  <div class="row" style="border-bottom:1px solid #000;">
    <div class="col-12">
      <ul class="list-inline">
        <li class="list-inline-item"><i class="fa fa-star"></i></li>
        <li class="list-inline-item"><h2>My Name</h2></li>
      </ul>
    </div>
  </div>
  
  <div class="row col">
    <div class="col-3 ">
      <div class="row">
        <div class="col-3" style="background-color:#fff;">
          <div class="text-center">
            <i class="fa fa-users"></i>
            <div>Users</div>
          </div>
      
          <div class="text-center" style="color:orange;">
            <i class="fa fa-files-o"></i>
            <div>Files</div>
          </div>
        
          <div class="text-center">
            <i class="fa fa-cubes"></i>
            <div>Containers</div>
          </div>

          <hr>

          <div class="text-center">
            <i class="fa fa-comments"></i>
            <div>Feedback</div>
          </div>      
      
          <div class="text-center">
            <i class="fa fa-question-circle"></i>
            <div>Help</div>
          </div>
        </div>
    
        <div class="col-9" style="background-color:#eee;">
          <div>item 1</div>
          <div>item 2</div>
          <div>item 3</div>
        </div>
      </div>
    </div>    
    
    <div class="col-9" style="background-color:#ddd;">
      [main content goes here]
    </div>
  </div>
</div>

user_28278230

This worked for me:

<div class="container-fluid d-flex flex-column" style="height:100vh; padding:0px; background-image:url('images/header_bg_1.jpg'); background-size:cover; ">

I set the height to 100vh and added the flex classes.

user_92084490
Related