CSS Twitter Bootstrap – Equal Height Columns for Fluid Grid Layout

In this article, we’ll cover how to use CSS Twitter Bootstrap creates a fluid grid layout and implements equal-height columns.

Read more: CSS Tutorial

What is CSS Twitter Bootstrap?

CSS Twitter Bootstrap is an open-source front-end framework that provides a set of widely used HTML and CSS styles, as well as components and tools for adaptive and responsive design. It helps developers quickly build modern websites and applications.

Flowing Grid Layout

Twitter One of Bootstrap’s core components is the grid. The grid is a responsive layout system that divides a web page into 12 equal-width columns. Developers can create a different number of columns within each row as needed.

A fluid grid layout means that the column widths within the grid automatically adjust to the screen size. This means the layout looks optimal on both large screens and mobile phones.

Implementing Equal-Height Columns

In some cases, it’s desirable for columns within a grid to automatically adjust to the same height for a consistent appearance. While Bootstrap doesn’t directly support equal-height columns, we can achieve this using some CSS techniques.

Using Flexbox for Layout

Flexbox is a new CSS3 feature that provides a flexible layout method that makes it easy to create equal-height columns. Simply add a flex property to the grid container and set it to 1 to make all columns automatically adjust to the same height.

<div class="row d-flex"> 
<div class="col"> 
<!-- content --> 
</div> 
<div class="col"> 
<!-- content --> 
</div> 
<div class="col"> 
<!-- content --> 
</div> 
</div> 

Using jQuery Plugins

In addition to Flexbox layout, we can also use some jQuery plugins to achieve the effect of equal-height columns. For example, jquery-match-height is a commonly used plug-in that can automatically adjust multiple elements to the same height.

First, import jQuery and the jquery-match-height plugin script file:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.matchHeight/0.7.2/jquery.matchHeight-min.js"></script> 

Then, add the same class name to the columns that need to be equal in height, such as equal-height:

<div class="row"> 
<div class="col equal-height"> 
<!-- content --> 
</div> 
<div class="col equal-height"> 
<!-- content --> 
</div> 
<div class="col equal-height"> 
<!-- content --> 
</div> 
</div> 

Finally, use the matchHeight() method to apply the plugin:

$(document).ready(function() { 
$('.equal-height').matchHeight(); 
}); 

With this method, every element with the same class name will automatically adjust to the same height.

Using Pseudo-Elements

Another way to achieve equal-height columns is with CSS pseudo-elements. We can add a background color as a pseudo-element to the child element of the grid container and set the height property to achieve the same height effect.

<div class="row"> 
<div class="col"> 
<div class="column-content"> 
<!-- content --> 
</div> 
</div> 
<div class="col"> 
<div class="column-content"> 
<!-- content --> 
</div> 
</div> 
<div class="col"> 
<div class="column-content"> 
<!-- content --> 
</div> 
</div> 
</div> 

.column-content:before { 
content: ""; 
display: inline-block; 
height: 100%; 
vertical-align: middle; 
}

.column-content:after {
content: "";
display: inline-block;
height: 100%;
vertical-align: middle;
}

.column-content {
background-color: #f1f1f1;
padding: 15px;
}

By adding a pseudo-element to the wrapping div and setting its height to 100%, and then using the vertical alignment property to always center the content vertically, we can achieve the effect of equal-height columns.

Summary

In this article, we learned how to use Twitter Bootstrap CSS to create a fluid grid layout and achieve equal-height columns. We also introduced methods for using Flexbox layout, jQuery plugins, and CSS pseudo-elements. We hope these tips will help you better apply the Bootstrap grid system to build beautiful and functional pages and applications.