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:
Contact Us