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
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.
<!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 =
< 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:
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.
<!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 =
< 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:
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.
<!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 =
< 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: