Bootstrap 5 Cards

Bootstrap 5 Cards Guide

A card in Bootstrap 5 is a flexible and extensible content container that can include images, text, links, headers, footers, and buttons. Cards replace traditional panels, wells, and thumbnails from older versions of Bootstrap.

---

1. Basic Bootstrap 5 Card

A simple card with a title and text:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bootstrap 5 Cards</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
</head>
<body>

<div class="container mt-5">
    <h2>Basic Card</h2>
    <div class="card">
        <div class="card-body">
            <h5 class="card-title">Card Title</h5>
            <p class="card-text">This is a simple Bootstrap 5 card.</p>
        </div>
    </div>
</div>

</body>
</html>

---

2. Card with Header & Footer

You can add headers and footers using .card-header and .card-footer.

<div class="card">
    <div class="card-header">Card Header</div>
    <div class="card-body">
        <h5 class="card-title">Card Title</h5>
        <p class="card-text">Some text inside the card.</p>
    </div>
    <div class="card-footer">Card Footer</div>
</div>

---

3. Card with Image

You can include an image using .card-img-top or .card-img-bottom.

<div class="card">
    <img src="https://via.placeholder.com/300x150" class="card-img-top" alt="Card Image">
    <div class="card-body">
        <h5 class="card-title">Card with Image</h5>
        <p class="card-text">This card has an image at the top.</p>
    </div>
</div>

---

4. Card with Button & Links

Use .btn inside the .card-body to add buttons.

<div class="card">
    <div class="card-body">
        <h5 class="card-title">Card with Button</h5>
        <p class="card-text">This card has a button below.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
    </div>
</div>

---

5. Horizontal Card (Image on the Left)

Use .d-flex to create a horizontal card.

<div class="card d-flex flex-row">
    <img src="https://via.placeholder.com/150" class="card-img-left" alt="Card Image">
    <div class="card-body">
        <h5 class="card-title">Horizontal Card</h5>
        <p class="card-text">This card has an image on the left.</p>
    </div>
</div>

---

6. Card with Background Colors

Bootstrap cards support different background colors.

<div class="card text-white bg-primary mb-3">
    <div class="card-body">
        <h5 class="card-title">Primary Card</h5>
        <p class="card-text">This is a primary-colored card.</p>
    </div>
</div>

Available colors:

• bg-primary
• bg-secondary
• bg-success
• bg-danger
• bg-warning
• bg-info
• bg-light
• bg-dark

---

7. Card Groups (Multiple Cards Side by Side)

Use .card-group to align multiple cards together.

<div class="card-group">
    <div class="card">
        <img src="https://via.placeholder.com/150" class="card-img-top" alt="Image">
        <div class="card-body">
            <h5 class="card-title">Card 1</h5>
            <p class="card-text">Description for card 1.</p>
        </div>
    </div>
    <div class="card">
        <img src="https://via.placeholder.com/150" class="card-img-top" alt="Image">
        <div class="card-body">
            <h5 class="card-title">Card 2</h5>
            <p class="card-text">Description for card 2.</p>
        </div>
    </div>
</div>

---

8. Card Deck (Equal Height Cards)

Use .row and .col to create a responsive card deck.

<div class="row row-cols-1 row-cols-md-3 g-4">
    <div class="col">
        <div class="card">
            <img src="https://via.placeholder.com/150" class="card-img-top" alt="Image">
            <div class="card-body">
                <h5 class="card-title">Card 1</h5>
                <p class="card-text">Some text.</p>
            </div>
        </div>
    </div>
    <div class="col">
        <div class="card">
            <img src="https://via.placeholder.com/150" class="card-img-top" alt="Image">
            <div class="card-body">
                <h5 class="card-title">Card 2</h5>
                <p class="card-text">Some text.</p>
            </div>
        </div>
    </div>
    <div class="col">
        <div class="card">
            <img src="https://via.placeholder.com/150" class="card-img-top" alt="Image">
            <div class="card-body">
                <h5 class="card-title">Card 3</h5>
                <p class="card-text">Some text.</p>
            </div>
        </div>
    </div>
</div>

---

9. Card with Overlay (Image Background with Text on Top)

Use .card-img-overlay to place text over an image.

<div class="card text-white">
    <img src="https://via.placeholder.com/500x250" class="card-img" alt="Background">
    <div class="card-img-overlay">
        <h5 class="card-title">Overlay Card</h5>
        <p class="card-text">Text over an image.</p>
    </div>
</div>

---

10. Card with Collapse (Expandable Card)

Use data-bs-toggle="collapse" to create an expandable card.

<button class="btn btn-info" data-bs-toggle="collapse" data-bs-target="#collapsibleCard">Toggle Card</button>

<div id="collapsibleCard" class="collapse">
    <div class="card card-body mt-3">
        This card can be expanded or collapsed.
    </div>
</div>

---

Conclusion

Bootstrap 5 Cards are powerful, flexible components for displaying content. You can: ✔ Use headers, footers, and images
✔ Style cards with colors and layouts
✔ Create responsive card decks and groups
✔ Overlay text on images and add collapsible sections

Let me know if you need more customization or examples!

Share on Facebook Share on Twitter Share on Google Plus

About It E Research

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.