How to Create Equal Height Columns in Bootstrap ?
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"> w3wiki </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:
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="Beginner-heading text-success"> w3wiki </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:
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="Beginner-heading text-success"> w3wiki </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: