How to Create Equal Height Columns in Bootstrap ?

Last Updated : 03 Oct, 2023

This article will demonstrate how to create equal-height columns in Bootstrap. We will use different approaches to achieve equal heights using the bootstrap classes and methods.

Table of Content

Using Bootstrap and Flexbox
Using Bootstrap Grids
Using Bootstrap Table

Approach 1: Using Bootstrap and Flexbox

In this approach, we are using the Bootstrap and Flexbox approaches for creating equal-height columns in Bootstrap. We have used different classes like ‘d-flex’, ‘flex-wrap‘, ‘flex-column‘ etc in the columns. This assures that each column in the flex container has equal height columns.

Example: This example uses the flex-box approach to create an equal-height column.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0"> 
    <link rel="stylesheet" 
          href= 
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"> 
    <title>Equal Height Columns</title> 
</head> 
  
<body> 
    <div class="container"> 
        <header class="text-center mt-5"> 
            <h1 class="site-title text-success"> 
                GeeksforGeeks 
            </h1> 
            <p class="site-description"> 
                Approach 1: Using Bootstrap and Flexbox 
            </p> 
        </header> 
        <div class="row equal-height-row  
                    d-flex flex-wrap"> 
            <div class="col-md-4 bg-warning  
                        rounded p-4 d-flex  
                        flex-column  
                        justify-content-between"> 
                <div> 
                    <h2 class="column-title"> 
                        C++ 
                    </h2> 
                    <p> 
                        C++ is a widely used programming 
                        language known for its versatility 
                        and performance. It's commonly 
                        used for system software, 
                        game development, and more. 
                    </p> 
                </div> 
            </div> 
            <div class="col-md-4 bg-success rounded  
                        p-4 d-flex flex-column  
                        justify-content-between"> 
                <div> 
                    <h2 class="column-title"> 
                        ReactJS 
                    </h2> 
                    <p> 
                        ReactJS is a powerful JavaScript 
                        library for building interactive 
                        user interfaces. It's maintained 
                        by Facebook and used by 
                        countless developers worldwide.</p> 
                </div> 
            </div> 
            <div class="col-md-4 bg-info rounded  
                        p-4 d-flex flex-column  
                        justify-content-between"> 
                <div> 
                    <h2 class="column-title"> 
                        Python 
                    </h2> 
                    <p> 
                        Python is a beginner-friendly and 
                        versatile programming language. It's 
                        widely used in web development, data 
                        analysis, machine learning, and more. 
                    </p> 
                </div> 
            </div> 
        </div> 
    </div> 
</body> 
  
</html>

Note: To verify whether the height is the same or not. We can follow the below steps one by one:

Firstly, Inspect the column by right-clicking and choosing the option “Inspect“.
In the “Elements” panel, we can see the overall HTML structure.
We need to select the column in “Elements“.
We need to find the “Height” property in the “Computed” or in “Styles” which will be the calculated height of the column.

Output:

Screenshot-2023-08-24-at-13-55-51-Equal-Height-Columns

Approach 2: Using Bootstrap Grids

In this approach, we are using Bootstrap classes such as ‘container‘, ‘row‘, and ‘col‘. Also, the columns are arranged in the grid layout, with the equal-width columns. Using these classes we are making the columns of equal height rather than having CSS rules.

Example: This example uses the Bootstrap Grids approach to create an equal-height column.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0"> 
    <link rel="stylesheet" 
          href= 
"https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> 
    <title>Equal Height Columns with Bootstrap Grid</title> 
</head> 
  
<body> 
    <div class="container mt-5"> 
        <div class="text-center"> 
            <h1 class="geeks-heading text-success"> 
                GeeksforGeeks 
            </h1> 
            <h3 class="approach-heading"> 
                Approach 2: Using Bootstrap Grids 
            </h3> 
        </div> 
        <div class="row equal-height-row"> 
            <div class="col equal-height-col bg-primary"> 
                <h2>Column 1</h2> 
                <p>This is some sample content for column 1.</p> 
            </div> 
            <div class="col equal-height-col bg-success"> 
                <h2>Column 2</h2> 
                <p>This is some sample content for column 2.</p> 
            </div> 
            <div class="col equal-height-col bg-warning"> 
                <h2>Column 3</h2> 
                <p>This is some sample content for column 3.</p> 
            </div> 
            <div class="col equal-height-col bg-info"> 
                <h2>Column 4</h2> 
                <p>This is some sample content for column 4.</p> 
            </div> 
        </div> 
    </div> 
</body> 
  
</html>

Output:

Screenshot-2023-08-24-at-14-03-31-Equal-Height-Columns-with-Bootstrap-Grid

Approach 3: Using Bootstrap Table

In this approach, we are using the Bootstrap classes like ‘table‘, ‘table-responsive‘, ‘row‘, and ‘col‘ to create the layout. This approach assures that the equal-height column by applying the normal behavior with the table elements. This approach uses Bootstrap Table classes to maintain equal heights without the need for additional CSS rules.

Example: This example uses the Bootstrap Table approach to create an equal-height column.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0"> 
    <link rel="stylesheet" 
          href= 
"https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"> 
    <title>Equal Height Columns with Bootstrap Table Approach</title> 
</head> 
  
<body> 
    <div class="container mt-5"> 
        <div class="text-center"> 
            <h1 class="geeks-heading text-success"> 
                GeeksforGeeks 
            </h1> 
            <h3 class="approach-heading"> 
                Approach 3: Using Bootstrap Table 
            </h3> 
        </div> 
        <div class="table equal-height-row"> 
            <div class="row"> 
                <div class="col equal-height-col bg-primary"> 
                    <h2>Column 1</h2> 
                    <p>This is some sample content for column 1.</p> 
                </div> 
                <div class="col equal-height-col bg-success"> 
                    <h2>Column 2</h2> 
                    <p> 
                        This is some sample content for column 2. 
                    </p> 
                </div> 
                <div class="col equal-height-col bg-warning"> 
                    <h2>Column 3</h2> 
                    <p> 
                        This is some sample content for column 3. 
                    </p> 
                </div> 
                <div class="col equal-height-col bg-info"> 
                    <h2>Column 4</h2> 
                    <p> 
                        This is some sample content for column 4. 
                    </p> 
                </div> 
                <div class="col equal-height-col bg-danger"> 
                    <h2>Column 5</h2> 
                    <p> 
                        This is some sample content for column 5. 
                    </p> 
                </div> 
            </div> 
        </div> 
    </div> 
</body> 
  
</html>

Output:

Screenshot-2023-08-24-at-14-00-18-Equal-Height-Columns-with-Bootstrap-Table-Approach

Suggest improvement

How to create five equal columns in Bootstrap ?

Share your thoughts in the comments

How to Create Equal Height Columns in Bootstrap ?

Table of Content

Approach 1: Using Bootstrap and Flexbox

HTML

Approach 2: Using Bootstrap Grids

HTML

Approach 3: Using Bootstrap Table

HTML

Please Login to comment...

Similar Reads

What kind of Experience do you want to share?