How to automatically adjust row height in Bootstrap?

Question

I'm learning Bootstrap and I'm trying to figure out how to automatically adjust a rows height given this conditions:

• There are 3 rows within a container-fluid
• row1 must adjust to the height of its content
• row3 must adjust to the height of its content and be at the bottom of the viewport
• row2 should adjust its height to the space between row1 and row3 to fill the container-fluid

html, body, .container-fluid {
  height: 100%;
  background: lightyellow;
}

.col {
  border: solid 1px #6c757d;
}

.content-1 {
  height: 50px;
  background-color: lightcoral;
}

.content-2 {
  height: 200px;
    background-color: lightgreen;
}

.content-3 {
  height: 25px;
  background-color: lightblue;
}

<div class="container-fluid">
  <div class="row">
    <div class="col">
      <div class="content-1">
      ROW 1 -> Height of its content
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col">
      <div class="content-2">
      ROW 2 -> Height between row1 and row3 automatically adjusted
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col">
      <div class="content-3">
      ROW 3 -> Height of its content
      </div>
    </div>
  </div>
</div>

JSFiddle demo

What would be the best approach to do so?. Thank you in advance!

Answer 1

You're looking for the flexbox utility classes. d-flex is for display:flex, and flex-grow-1 will make the 2nd child div fill the remaining height. Use flex-column as you want a vertical layout.

<div class="container-fluid d-flex flex-column">
  <div class="row">
    <div class="col">
      <div class="content-1">
      ROW 1 -> Height of its content
      </div>
    </div>
  </div>
  <div class="row flex-fill">
    <div class="col d-flex flex-column">
      <div class="content-2 h-100">
      ROW 2 -> Height between row1 and row3 automatically adjusted
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col">
      <div class="content-3">
      ROW 3 -> Height of its content
      </div>
    </div>
  </div>
</div>

https://www.codeply.com/go/IIVJqGJ2qG

Note: The fixed heights set in the custom CSS have been removed to allow the header/footer to be the height of their content, and the content row to fill the remaining height.

---

Related:
Bootstrap 4: How to make the row stretch remaining height?
Bootstrap - Fill fluid container between header and footer