Prev Next

BS5 Cards

Bootstrap 5 Cards are versatile containers that can include text, images, lists, links, and more. They are highly customizable and come with various layout options.

Key Topics

Basic Cards

Use the .card class to create a card with a header, body, and footer.

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

Explanation: The .card class creates the container, and elements like .card-header, .card-body, and .card-footer provide structure.

Card with Images

Add images to cards using the .card-img-top or .card-img-bottom classes.

<div class="card">
    <img src="https://via.placeholder.com/150" class="card-img-top" alt="...">
    <div class="card-body">
        <p class="card-text">Card with an image on top.</p>
    </div>
</div>

Explanation: Images can be placed at the top or bottom of a card using .card-img-top or .card-img-bottom.

Card with Buttons

Add buttons to cards by including .btn elements within the .card-body.

<div class="card">
    <div class="card-body">
        <h5 class="card-title">Card Title</h5>
        <p class="card-text">Card with action buttons.</p>
        <a href="#" class="btn btn-primary">Go Somewhere</a>
    </div>
</div>

Explanation: Place buttons inside the .card-body to create actionable cards.

Complete Card Example

Below is a complete example demonstrating multiple card layouts.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bootstrap 5 Cards Demo</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
    <div class="container my-4">
        <h2>Bootstrap Cards</h2>

        <h3>Basic Card</h3>
        <div class="card">
            <div class="card-header">Header</div>
            <div class="card-body">
                <h5 class="card-title">Card Title</h5>
                <p class="card-text">Some quick example text.</p>
            </div>
            <div class="card-footer text-muted">Footer</div>
        </div>

        <h3>Card with Image</h3>
        <div class="card">
            <img src="https://via.placeholder.com/150" class="card-img-top" alt="...">
            <div class="card-body">
                <p class="card-text">Card with an image on top.</p>
            </div>
        </div>

        <h3>Card with Buttons</h3>
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">Card Title</h5>
                <p class="card-text">Card with action buttons.</p>
                <a href="#" class="btn btn-primary">Go Somewhere</a>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Explanation: This example demonstrates basic cards, cards with images, and actionable cards with buttons.

Key Takeaways

  • Use .card for a flexible content container.
  • Include images using .card-img-top or .card-img-bottom.
  • Add buttons or links for actionable cards.
Prev Next