How to Create Cards in Bootstrap ?

Last Updated : 04 Mar, 2024

Think of a card as a small container that can hold different types of things, like pictures, text, and buttons. It’s like a mini box where you can put all kinds of stuff. People use these cards to show information or pictures in a nice and organized way, kind of like how you might arrange things neatly in a box to show them off to your friends.

In simple words, cards in Bootstrap are like little boxes where you can put different things to make them look good and easy to understand.

Table of Content

Using the .card class directly
Utilizing card-group, card-deck, card-columns classes

Using the .card class directly

This is the most basic approach. You create a card by applying the .card class to a div element and then nesting content within it.

Example: The below code implements the .card class to create a card using Bootstrap.

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/bootstrap@5.3.3/dist/css/bootstrap.min.css"
        integrity=
"sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
        crossorigin="anonymous">
    <title>Bootstrap Card</title>
</head>
 
<body>
    <div class="card">
        <img class="card-img-top w-25" alt="..." src=
"https://media.geeksforgeeks.org/gfg-gg-logo.svg">
        <div class="card-body">
            <h5 class="card-title">GFG Portal</h5>
            <p class="card-text">
                Some quick example text to build on the card title 
                and make up the bulk of the card's
                content.
            </p>
            <a href="#" class="btn btn-success">Go to Portal</a>
        </div>
    </div>
 
    <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
        integrity=
"sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
        crossorigin="anonymous">
    </script>
</body>
 
</html>

Output:

cardOP

Utilizing card-group, card-deck, card-columns classes

Bootstrap provides predefined layouts for grouping cards together, such as .card-group, .card-deck, and .card-columns. These layouts help in displaying multiple cards in a grid-like fashion.

Example: The below code will explain how you can group multiple cards together.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap CSS CDN -->
    <link rel="stylesheet" href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
        integrity=
"sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
    crossorigin="anonymous">
    <title>Bootstrap Card</title>
</head>
 
<body>
 
 
    <div class="card-group">
        <!-- Cards go here -->
        <div class="card">
            <img class="card-img-top w-25 mx-3 my-3" alt="..." src=
"https://media.geeksforgeeks.org/wp-content/uploads/20231004184219/gfglogo0.jpg">
            <div class="card-body">
                <h5 class="card-title">GFG Portal</h5>
                <p class="card-text">Description card-group</p>
                <a href="#" class="btn btn-success">Go to Portal</a>
            </div>
        </div>
 
        <div class="card">
            <img class="card-img-top w-25 mx-3 my-3" alt="..." src=
"https://media.geeksforgeeks.org/wp-content/uploads/20231004184219/gfglogo0.jpg">
            <div class="card-body">
                <h5 class="card-title">GFG Portal</h5>
                <p class="card-text">Description card-group</p>
                <a href="#" class="btn btn-success">Go to Portal</a>
            </div>
        </div>
 
        <div class="card">
            <img class="card-img-top w-25 mx-3 my-3" alt="..." src=
"https://media.geeksforgeeks.org/wp-content/uploads/20231004184219/gfglogo0.jpg">
            <div class="card-body">
                <h5 class="card-title">GFG Portal</h5>
                <p class="card-text">Description card-group</p>
                <a href="#" class="btn btn-success">Go to Portal</a>
            </div>
        </div>
 
        <div class="card">
            <img class="card-img-top w-25 mx-3 my-3" alt="..." src=
"https://media.geeksforgeeks.org/wp-content/uploads/20231004184219/gfglogo0.jpg">
            <div class="card-body">
                <h5 class="card-title">GFG Portal</h5>
                <p class="card-text">Description card-group</p>
                <a href="#" class="btn btn-success">Go to Portal</a>
            </div>
        </div>
    </div>
 
    <div class="card-deck">
        <!-- Cards go here -->
        <div class="card">
            <img class="card-img-top w-25" alt="..." src=
"https://media.geeksforgeeks.org/wp-content/uploads/20231004184219/gfglogo0.jpg">
            <div class="card-body">
                <h5 class="card-title">GFG Portal</h5>
                <p class="card-text">Description card-deck</p>
                <a href="#" class="btn btn-success">Go to Portal</a>
            </div>
        </div>
        <div class="card">
            <img class="card-img-top w-25" alt="..." src=
"https://media.geeksforgeeks.org/wp-content/uploads/20231004184219/gfglogo0.jpg">
            <div class="card-body">
                <h5 class="card-title">GFG Portal</h5>
                <p class="card-text">Description card-deck</p>
                <a href="#" class="btn btn-success">Go to Portal</a>
            </div>
        </div>
    </div>
 
    <div class="card-columns">
        <!-- Cards go here -->
        <div class="card">
            <img class="card-img-top w-25" alt="..." src=
"https://media.geeksforgeeks.org/wp-content/uploads/20231004184219/gfglogo0.jpg">
            <div class="card-body">
                <h5 class="card-title">GFG Portal</h5>
                <p class="card-text">Description card-columns</p>
                <a href="#" class="btn btn-success">Go to Portal</a>
            </div>
        </div>
        <div class="card">
            <img class="card-img-top w-25" alt="..." src=
"https://media.geeksforgeeks.org/wp-content/uploads/20231004184219/gfglogo0.jpg">
            <div class="card-body">
                <h5 class="card-title">GFG Portal</h5>
                <p class="card-text">Description card-columns</p>
                <a href="#" class="btn btn-success">Go to Portal</a>
            </div>
        </div>
    </div>
    <!-- Bootstrap JavaScript CDN -->
    <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
    integrity=
"sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
    crossorigin="anonymous">
    </script>
</body>
 
</html>