Why Aren't My Bootstrap 4 Columns the Same Height

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/

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;
}

Bootstrap 4 columns are not reaching 100% height

Remove the height from our-research_container.

.our-research__container {         
     border: 1px solid blue;
     flex: 1;
     display: flex;
     flex-direction: column;
}

How to achieve equal spacing in same height columns bootstrap?

A coleague helped me achieve the best solution, so I will post what sworked in case someone faces the same issue:

<div class="d-row d-flex gap-2 justify-content-center" style="margin-bottom: 100px">
        <div class="col-md-3">
            <img src="https://i.ibb.co/Ky415Wt/imageonline-co-placeholder-image-2.jpg" alt="" class="img-fluid">
        </div>
        <div class="col-md-3">
            <img src="https://i.ibb.co/Ky415Wt/imageonline-co-placeholder-image-2.jpg" alt="" class="img-fluid">
        </div>
        <div class="col-md-6">
            <img src="https://i.ibb.co/r5LDwny/imageonline-co-placeholder-image-3.jpg" alt="" class="img-fluid">
        </div>
    </div>

Bootstrap set column height and spacing

You are almost good as the column are already equal height but the content inside is not filling all the spaces. You can adjust the code like below

Note the use of the classes h-100 (height:100%) flex-fill (flex:1 1 auto) and mt-auto (margin-top:auto)

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/><div class="container">  <div class="row">    <!--BLOCK-->    <div class="col-12 col-md-6 col-lg-3 mb-5">      <a class="no-underline" href="/">        <div class="d-flex flex-column bg-warning h-100">          <img src="https://picsum.photos/200" />          <div class="col-12 d-flex flex-column pt-3 flex-fill">            <h3>Title</h3>            <p>Lorem ipsum dolor </p>            <div class="align-self-center mb-3 mt-auto">              <button class="btn btn-success">View More</button>            </div>          </div>        </div>      </a>    </div>    <!--BLOCK ends-->    <div class="col-12 col-md-6 col-lg-3 mb-5">      <a class="no-underline" href="/">        <div class="d-flex flex-column bg-warning h-100">          <img src="https://picsum.photos/200" />          <div class="col-12 d-flex flex-column pt-3 flex-fill">            <h3>Lorem ipsum dolor sit amet</h3>            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>            <div class="align-self-center mb-3 mt-auto">              <button class="btn btn-success">View More</button>            </div>          </div>        </div>      </a>    </div>        <div class="col-12 col-md-6 col-lg-3 mb-5">      <a class="no-underline" href="/">        <div class="d-flex flex-column bg-warning h-100">          <img src="https://picsum.photos/200" />          <div class="col-12 d-flex flex-column pt-3 flex-fill">            <h3>Title</h3>            <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>            <div class="align-self-center mb-3 mt-auto">              <button class="btn btn-success">View More</button>            </div>          </div>        </div>      </a>    </div>        <div class="col-12 col-md-6 col-lg-3 mb-5">      <a class="no-underline" href="/">        <div class="d-flex flex-column bg-warning h-100">          <img src="https://picsum.photos/200" />          <div class="col-12 d-flex flex-column pt-3 flex-fill">            <h3>Title</h3>            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>            <div class="align-self-center mb-3 mt-auto">              <button class="btn btn-success">View More</button>            </div>          </div>        </div>      </a>    </div>      </div></div>