Bootstrap Columns - Equal Height

Bootstrap provides different classes to define columns in a row, which can vary in their width based on the classes used to define them.

However, we may sometimes come across a situation where we need to make all the columns of a row equal in height.

We can easily achieve that by defining the height and width to 100% on the contents of each of those columns as shown below.

<div class="container">
    <div class="row">
        <div class="col-md-3 col-sm-6">
            <div class="equal-height">
                <p>lorem ipsum</p>
                <p>lorem ipsum</p>
                <p>lorem ipsum</p>
            </div>
        </div>
        <div class="col-md-3 col-sm-6">
            <div class="equal-height">
                <p>lorem ipsum</p>
            </div>
        </div>
        <div class="col-md-3 col-sm-6">
            <div class="equal-height">
                <p>lorem ipsum</p>
                <p>lorem ipsum</p>
            </div>
        </div>
    </div>
</div>

Here, the class equal-height can be used to define the height and width of the <div> elements that contain the content in each column.

.equal-height {
    height: 100%;
    width: 100%;
    border: 1px solid blue;
}

How does it look on the application?

Without using the class defined for equal height.

Using the class defined above for equal height.

Conclusion

Now, we know how to make the bootstrap columns equal in height.