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.
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/[email protected]/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:
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:
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:
Similar Reads
How to create five equal columns in Bootstrap ?
In Bootstrap, creating five equal columns means dividing a row into five evenly spaced columns. This can be achieved using the Flexbox-based grid system in Bootstrap 4+. Simply add five col elements inside a row, and Flexbox automatically distributes them equally. Approach: Download the latest Boots
2 min read
How to Create Equal Height Columns in CSS ?
Equal Height Columns in CSS refer to ensuring that multiple columns in a layout have the same height, regardless of the content inside each column. This can be achieved using modern CSS techniques like Flexbox, CSS Grid, or the Table display property. Table of Content Using FlexUsing GridUsing Table
3 min read
How to create unequal columns in Bootstrap ?
Bootstrap is a responsive framework created by Twitter. It is used to create responsive sites. It has a pre-defined class and design. In Bootstrap, we can add pre-defined classes into the code without writing code. We also have a predefined ".col" class to create columns. Grid Layout System: The who
2 min read
How to Create a Multi-Column Footer in Bootstrap ?
Bootstrap offers a range of classes that can be employed to design web pages and apply diverse styles. Footers are a crucial element of web design, as they provide users with valuable information and navigation options. With Bootstrap, creating a multi-column footer that is visually appealing and re
3 min read
How to set one column control over height in Bootstrap ?
Creating an HTML document using Bootstrap and make more than one column. The task is to set the control to a column over the height using Bootstrap. The way to do this is by utilizing another div interior in the left column. The inward div ought to be position: absolute. Example: C/C++ Code <!DOC
2 min read
How to Create a Four-Column Layout with Bootstrap ?
In Bootstrap, creating a column layout is important for organizing content into a structured grid system. A four-column layout allows for efficient arrangement of content, such as displaying courses, products, or services, with flexibility in responsiveness for various screen sizes. Below are the ap
2 min read
How to create full width container in bootstrap5?
Bootstrap containers are content holders that are used to align, add margins and padding to your content. Bootstrap has three different container classes, namely: .container .container-fluid .container-{breakpoint} Width of a container varies in accordance with its class. We can create a full width
1 min read
How to make a Row with 7 Equal Columns in Bootstrap ?
Bootstrap is the styling framework to make the web application more attractive. To create a row with 7 equal columns in Bootstrap, you can use the grid system by dividing the row into 12 columns and assigning each column a class such as col-1 for each of the 7 columns. This way, each column will occ
2 min read
How to make Bootstrap Columns all the same Height ?
In this article, we are going to implement Columns Using React JS and Bootstrap while developing software we need to create columns of the same height that's why in this article we are going to implement multiple columns of the same height using React JS and Bootstrap. PrerequisitesReact JS Bootstra
3 min read
How to create full width container using bootstrap?
Bootstrap offers two types of containers: fixed-width containers and full-width, fluid containers. The container-fluid class is used to create a full-width container that spans the entire width of the viewport, adjusting dynamically as the viewport size changes. Container Types in BootstrapFixed-Wid
3 min read