How to make grid items the same height using bootstrap 4

13 September, 2018 | 1 min read

Today I was trying to make my blog items the same height and I remembered this easy and very useful snippet to make them the same size, so here it is:

This snippet:

<div class="row">
    <div class="col-6 d-flex flex-column">
        <h3>Hey you</h3>
        <p class="mt-auto">This random text</p>    
    </div>
    <div class="col-6 d-flex flex-column">
            <h3>Hey you</h3>
            <p class="mt-auto">This random text is greateer than the other text so it wont align</p>    
    </div>
</div>

Explanation:

  1. Adding .d-flex (display:flex) and .flex-column in the item/card will tell that this is a flex and also the direction a flex-direction:column
  2. Adding mt-auto to the LAST element in the item will move it to the available space in the bottom of the div so it will make that all of them use the same height assigning margin-top:auto; to the element.

Using css will be something like:

.column{
    display:flex;
    flex-direction: column;
}
/** only descriptive name */
.last-element-in-item{
    margin-top: auto;
}

Hope it makes sense if not let me know in the comments, have a wonderful day you all!

Jayson