How to Make Bootstrap 4 Columns Have a Height of 100%

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>    .container {        background: green;    }
    .col-md-3 {           background: pink;    }    .col-md-9 {        background: yellow;       }    .col-md-4 {        background: red;    }</style>
<div class="container">   header    <div class="row">        <div class="col-md-3">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has </div>        <div class="col-md-9">            <div class="row h-100">                <div class="col-md-4">col2 - 1</div>                <div class="col-md-4">col2 - 2</div>                <div class="col-md-4">col2 - 3</div>            </div>            col2        </div>    </div></div>

100% height on Bootstrap 4 columns (no scrollbar on browser)

I would suggest to not to use !important too often, it makes specificity unpredictable,

Here is my solution, just check following CSS IDs and classes:

#types {
    overflow-y: auto !important;
    height: 58vh;
}

.h-100 {
    height: 73vh !important;
}

Please let me know if it works!!!

How can I make Bootstrap columns all the same height?

LATEST SOLUTION (2022)

Solution 4 using Bootstrap 4 or 5

Bootstrap 4 and 5 use Flexbox by default, so there is no need for extra CSS.

Demo

<div class="container">
    <div class="row ">
        <div class="col-md-4" style="background-color: red">
          some content
        </div>
        <div class="col-md-4" style="background-color: yellow">
          catz
          <img width="100" height="100" src="https://placekitten.com/100/100/">
        </div>
        <div class="col-md-4" style="background-color: green">
          some more content
        </div>
    </div>
</div>

Solution 1 using negative margins (doesn't break responsiveness)

Demo

.row{
    overflow: hidden; 
}

[class*="col-"]{
    margin-bottom: -99999px;
    padding-bottom: 99999px;
}

Solution 2 using table

Demo

.row {
    display: table;
}

[class*="col-"] {
    float: none;
    display: table-cell;
    vertical-align: top;
}

Solution 3 using flex added August 2015. Comments posted before this don't apply to this solution.

Demo

.row {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display:         flex;
  flex-wrap: wrap;
}
.row > [class*='col-'] {
  display: flex;
  flex-direction: column;
}

Make row occupy full height in Bootstrap 4

You should use flex-grow:1; as explained in the other answer: Bootstrap 4: How to make the row stretch remaining height?

The problem is that body should be height:100%; not min-height...

<main class="container-fluid d-flex h-100 flex-column">
  <div class="row">
      <div class="col-sm-6">
          Hello,
      </div>
      <div class="col-sm-6">
          World!
      </div>
  </div>
  <div class="row flex-grow-1" id="second-row">
      <div class="col-sm-8 portlet-container portlet-dropzone">
          <textarea></textarea>
      </div>
      <div class="col-sm-4 portlet-container portlet-dropzone">
          <textarea></textarea>
      </div>
  </div>
</main>

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

How to make bootstrap column height to 100% row height?

You can solve that using display table.

Here is the updated JSFiddle that solves your problem.

CSS

.body {
    display: table;
    background-color: green;
}

.left-side {
    background-color: blue;
    float: none;
    display: table-cell;
    border: 1px solid;
}

.right-side {
    background-color: red;
    float: none;
    display: table-cell;
    border: 1px solid;
}

HTML

<div class="row body">
        <div class="col-xs-9 left-side">
            <p>sdfsdf</p>
            <p>sdfsdf</p>
            <p>sdfsdf</p>
            <p>sdfsdf</p>
            <p>sdfsdf</p>
            <p>sdfsdf</p>
        </div>
        <div class="col-xs-3 right-side">
            asdfdf
        </div>
    </div>

How can I make Bootstrap 4 columns all the same height?

You just have to use class="row-eq-height" with your class="row" to get equal height columns for previous bootstrap versions.

but with bootstrap 4 this comes natively.

check this link --http://getbootstrap.com.vn/examples/equal-height-columns/

---

Related Topics