Bootstrap 4 row fill remaining height

by

Use the Bootstrap 4.1 flex-grow-1 class…

https://codeply.com/go/Iyjsd8djnz

html,body{height:100%;}

.bg-purple {
  background: rgb(48,0,50);
}
.bg-gray {
  background: rgb(74,74,74);
}
.bg-blue {
  background: rgb(50,101,196);
}
.bg-red {
  background: rgb(196,50,53);
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="container-fluid h-100">
  <div class="row justify-content-center h-100">
    <div class="col-4 bg-red">
      <div class="h-100 d-flex flex-column">
        <div class="row justify-content-center bg-purple">
          <div class="text-white">
            <div style="height:150px">ROW 1 - fixed height</div>
          </div>
        </div>
        <div class="row justify-content-center bg-blue flex-grow-1">
          <div class="text-white">ROW 2 - grow remaining height</div>
        </div>
      </div>
    </div>
    <div class="col-8 bg-gray"></div>
  </div>
</div>

Update 4.3.1: Another example using the vh-100 utility class

https://codeply.com/go/h3bZbM6eSS

.bg-purple {
  background: rgb(48,0,50);
}
.bg-gray {
  background: rgb(74,74,74);
}
.bg-blue {
  background: rgb(50,101,196);
}
.bg-red {
  background: rgb(196,50,53);
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="container-fluid">
  <div class="row justify-content-center min-vh-100">
    <div class="col-4 bg-red">
      <div class="d-flex flex-column h-100">
        <div class="row justify-content-center bg-purple">
          <div class="text-white">
            <div style="height:150px">ROW 1 - fixed height</div>
          </div>
        </div>
        <div class="row justify-content-center bg-blue flex-grow-1">
          <div class="text-white">ROW 2 - grow remaining height</div>
        </div>
      </div>
    </div>
    <div class="col-8 bg-gray"></div>
  </div>
</div>

Related: How to make the row stretch remaining height

More Related Contents:

  1. My Website is Mirror-flipped on iPhone Devices
  2. Which way to implement this picture in HTML CSS code and bootstrap
  3. Trying to work on responsiveness of login form
  4. Bootstrap row with columns of different height
  5. Grid properties not working on elements inside grid container
  6. Bootstrap 4: Multilevel Dropdown Inside Navigation
  7. Animate/Shrink NavBar on scroll using Bootstrap
  8. One tall div next to two shorter divs on Desktop and stacked on Mobile with Bootstrap 4
  9. How to center nav-items in Bootstrap? [duplicate]
  10. Create a responsive navbar sidebar “drawer” in Bootstrap?
  11. Bootstrap 4 Cards of same height in columns
  12. How to make Bootstrap 4 cards the same height in card-columns?
  13. Bootstrap – align button to the bottom of card
  14. Bootstrap 4 – Sticky footer – Dynamic footer height
  15. Bootstrap 4 – Responsive cards in card-columns
  16. Align the form to the center in Bootstrap 4 [duplicate]
  17. How to center cards in bootstrap 4?
  18. Linethrough/strikethrough a whole HTML table row
  19. Add spacing between vertically stacked columns in Bootstrap 4
  20. Bootstrap navbar link color won’t change
  21. Empty vertical space between columns in Bootstrap 4
  22. Bootstrap navbar: nothing is displayed on smaller devices
  23. Why are some of my CSS rules not working?
  24. Equal width columns in CSS Grid
  25. Items that span all columns/rows using CSS grid layout
  26. How to make CSS Grid items take up remaining space?
  27. Missalignment with inline-block (other elements pushed down)
  28. Why aren’t my bootstrap 4 columns the same height?
  29. CSS float-right not working in Bootstrap 4 Navbar [duplicate]
  30. How to make Bootstrap cards the same height in card-columns?

Leave a Comment