Skip to content
Related Articles

Related Articles

Bootstrap | Cards

Improve Article
Save Article
  • Difficulty Level : Medium
  • Last Updated : 13 May, 2022
Improve Article
Save Article

A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. 

It replaces the use of panels, wells and thumbnails. As all of it can be used in a single container called card.

Basic Card: The building block of a card is the card-body and with card

Example:

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Card</title>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
    <script src=
    </script>
    <script src=
    </script>
    <script src=
    </script>
</head>
<body>
    <div class="container">
        <h2 style="color:green;">GeeksforGeeks</h2>
        <div class="card">
            <div class="card-body">
                A computer science portal for geeks
            </div>
        </div>
    </div>
</body>
</html>


Output: 

Header and Footer: The card-header provides a header to the cards and card-footer provides a footer to the cards.

Example:

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Card</title>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
    <script src=
    </script>
    <script src=
    </script>
    <script src=
    </script>
</head>
<body>
    <div class="container">
        <h1 style="color:green">GeeksforGeeks</h1>
        <div class="card">
            <div class="card-header">Header</div>
            <div class="card-body">Content</div>
            <div class="card-footer">Footer</div>
        </div>
    </div>
</body>
</html>


Output: 

Card Title and Links: The card-title is used to give a title to the card and card-link is used to provide link to the card if required in it. 

Example:

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Card</title>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
    <script src=
    </script>
    <script src=
    </script>
    <script src=
    </script>
</head>
<body>
    <div class="container">
        <h1 style="color:green">GeeksforGeeks</h1>
        <div class="card">
            <div class="card-body">
                <h4 class="card-title">Card title</h4>
                <p class="card-text">
                    Some example text. Some example text.
                </p>
 
 
                <a href="#" class="card-link">Card link</a>
                <a href="#" class="card-link">Another link</a>
            </div>
        </div>
    </div>
</body>
</html>


Output: 

Card Images :The images to the card are inserted with card-img-top and with card-img-bottomwith the help of these two and img tag is used with it to input the image. 

Example:

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Card</title>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
    <script src=
    </script>
    <script src=
    </script>
    <script src=
    </script>
</head>
<body>
    <div class="container">
        <h1 style="color:green">GeeksforGeeks</h1>
        <div class="card" style="width:200px">
            <img class="card-img-top" src=
                alt="Card image" style="width:100%">
            <div class="card-body">
                <h4 class="card-title">Developer Guy</h4>
                <p class="card-text">
                    Developer Guy love to develop
                    front-end and back-end
                </p>
 
 
                <a href="#" class="btn btn-primary">
                    See Profile
                </a>
            </div>
        </div>
    </div>
</body>
</html>


Output:

Example of Bottom-Image: 

Example:

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Card</title>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
    <script src=
    </script>
    <script src=
    </script>
    <script src=
    </script>
</head>
<body>
    <div class="container">
        <h1 style="color:green">GeeksforGeeks</h1>
        <div class="card" style="width:200px">
            <div class="card-body">
                <h4 class="card-title">Developer Guy</h4>
                <p class="card-text">
                    Developer Guy love to develop
                    front-end and back-end
                </p>
 
 
                <a href="#" class="btn btn-primary">
                    See Profile
                </a>
            </div>
            <img class="card-img-bottom" src=
                alt="Card image" style="width:100%">
        </div>
    </div>
</body>
</html>


Output:

Image Overlays: In this we have to just use an extra class call the card-img-overlay in the same line of code which you have used for card images. 

Example:

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Card</title>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
    <script src=
    </script>
    <script src=
    </script>
    <script src=
    </script>
</head>
<body>
    <div class="container">
        <h1 style="color:green">GeeksforGeeks</h1>
        <div class="card" style="width:300px">
            <img class="card-img-bottom" src=
                alt="Card image" style="width:100%">
            <div class="card-img-overlay">
                <div class="card-body">
                    <h4 class="card-title">Developer Guy</h4>
                    <p class="card-text" style="color:red;">
                        Developer Guy love to develop
                        front-end and back-end </p>
 
 
                    <a href="#" class="btn btn-primary">
                        See Profile</a>
                </div>
            </div>
        </div>
    </div>
</body>
</html>


Output:

Example for Card-Group:

Example:

HTML




<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap Card</title>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
    <script src=
    </script>
    <script src=
    </script>
    <script src=
    </script>
</head>
<body>
    <div class="container">
        <h1 style="color:green">GeeksforGeeks</h1>
        <div class="card-deck">
            <div class="card-text-white bg-primary">
                <div class="card-body">
                    <h4 class="card-title">PRIMARY</h4>
                </div>
            </div>
            <div class="card-text-white bg-success">
                <div class="card-body">
                    <h4 class="card-title">SUCCESS</h4>
                </div>
            </div>
            <div class="card-text-white bg-danger">
                <div class="card-body">
                    <h4 class="card-title">DANGER</h4>
                </div>
            </div>
        </div>
    </div>
</body>
</html>


Output:

List groups: It creates a list of content in a card. 

Example:

HTML




<html lang="en">
<head>
    <title>Bootstrap Card</title>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
    <script src=
    </script>
    <script src=
    </script>
    <script src=
    </script>
</head>
<body>
    <div class="container">
        <h1 style="color:green">GeeksforGeeks</h1>
        <div class="card">
            <ul class="list-group list-group-flush">
                <li class="list-group-item">Bootstrap</li>
                <li class="list-group-item">HTML</li>
                <li class="list-group-item">JavaScript</li>
            </ul>
        </div>
    </div>
</body>
</html>


Output:

Kitchen sink: It is name given to the type of card which consist everything thing in it, it’s a mix and match of multiple content to make your desired card 

Example:

HTML




<html lang="en">
<head>
    <title>Bootstrap Card</title>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
    <script src=
    </script>
    <script src=
    </script>
    <script src=
    </script>
</head>
<body>
    <div class="container">
        <h1 style="color:green">GeeksforGeeks</h1>
        <div class="card">
            <ul class="list-group list-group-flush">
                <li class="list-group-item">Bootstrap</li>
                <li class="list-group-item">HTML</li>
                <li class="list-group-item">JavaScript</li>
            </ul>
            <div class="card-block">
                <a href="" class="class-link">Cart</a>
                <a href="" class="class-link">Add Item</a>
            </div>
        </div>
    </div>
</body>
</html>


Output:

Navigation: It adds navigation bar to the cards. 

Example:

HTML




<html lang="en">
<head>
    <title>Bootstrap Card</title>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
    <script src=
    </script>
    <script src=
    </script>
    <script src=
    </script>
</head>
<body>
    <div class="container">
        <h1 style="color:green">GeeksforGeeks</h1>
        <div class="card-text-center">
            <div class="card-header">
                <ul class="nav nav-tabs card-header-tabs">
                    <li class="nav-item">
                        <a class="nav-link active" href="#">
                            Active</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link " href="#">
                            link</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link disabled" href="#">
                            Disabled</a>
                    </li>
                </ul>
            </div>
            <div class="card-block">
                <h4 class="card-title">Title</h4>
                <p class="card-text">This the th test area</p>
 
 
                <a href="#" btn-btn-primary>Click me</a>
            </div>
        </div>
    </div>
</body>
</html>


Output:

Another Example in Pills Form: 

Example:

HTML




<html lang="en">
<head>
    <title>Bootstrap Card</title>
    <meta charset="utf-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
    <script src=
    </script>
    <script src=
    </script>
    <script src=
    </script>
</head>
<body>
    <div class="container">
        <h1 style="color:green">GeeksforGeeks</h1>
        <div class="card-text-center">
            <div class="card-header">
                <ul class="nav nav-pills card-header-tabs">
                    <li class="nav-item">
                        <a class="nav-link active" href="#">
                            Active</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link " href="#">
                            link</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link disabled" href="#">
                            Disabled</a>
                    </li>
                </ul>
            </div>
            <div class="card-block">
                <h4 class="card-title">Title</h4>
                <p class="card-text">This the th test area</p>
 
 
                <a href="#" btn-btn-primary>Click me</a>
            </div>
        </div>
    </div>
</body>
</html>


Output:

Supported Browser:

  • Google Chrome
  • Microsoft Edge
  • Firefox
  • Opera
  • Safari

My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!