How to use the .card class directly In Bootstrap

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

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.w3wiki.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:

Bootstrap-card Example Output

How to Create Cards in Bootstrap ?

Bootstrap cards, use the .card class. Customize content with headings, paragraphs, images, and buttons. Utilize contextual background colors and additional classes for styling and alignment. Cards offer flexible content containers with options for headers, footers, and powerful display settings.

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