How to use Grid Classes In Bootstrap
In this approach, we are using Bootstrap’s grid system by wrapping the cards in a col-md-6 class, which creates a single column on medium-sized screens and above. The justify-content-center class aligns the column horizontally in the center of the row.
Example: The below example uses bootstrap grid classes to display three Bootstrap cards in a column.
<!DOCTYPE html>
<html>
<head>
<title>Example 1</title>
<link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<h1 class="text-center mb-4">
Using Grid Classes
</h1>
<h2 class="text-center mb-4">
Aligning cards in a single column
</h2>
<div class="row justify-content-center">
<div class="col-md-6">
<div class="card mb-3 border-primary">
<div class="card-body">
<h5 class="card-title text-primary">
JavaScript
</h5>
<p class="card-text">
JavaScript is a versatile programming
language used for web development.
</p>
</div>
</div>
<div class="card mb-3 border-danger">
<div class="card-body">
<h5 class="card-title text-danger">
Python
</h5>
<p class="card-text">
Python is known for its simplicity and
readability, widely used in data
science and AI.
</p>
</div>
</div>
<div class="card mb-3 border-warning">
<div class="card-body">
<h5 class="card-title text-warning">
Java
</h5>
<p class="card-text">
Java is a robust, object-oriented
programming language used for building
enterprise-scale applications.
</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Output:
How to Display Three Bootstrap Cards in a Column ?
In Bootstrap, aligning the three cards in a column is important to create a vertical layout for displaying content on smaller screen devices or to make the web page responsive and compatible for all devices.
Use the below approaches to display three Bootstrap cards in a column:
Table of Content
- Using Grid Classes
- Using FlexBox Classes
Contact Us