How to use Grid Classes In Bootstrap

Using FlexBox Classes

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.

HTML

<!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