How to Display Three Bootstrap Cards in a Column ?

Last Updated : 16 Apr, 2024

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

Using Grid 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/[email protected]/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:

Screenshot-2024-04-08-at-16-18-57-Example-1

Using FlexBox Classes

In this approach, we are using Flexbox classes to arrange three Bootstrap cards vertically within a single column. There are multiple flexbox classes used to align cards in a single column.

Example: The below example uses Bootstrap FlexBox Classes to display three Bootstrap cards in a column.

HTML