Bootstrap Cards

Overview

Cards are flexible content containers with multiple variants and options.

Basic Card

<div class="card" style="width: 18rem;">
    <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">Some quick example text.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
    </div>
</div>

Card with Image

<div class="card" style="width: 18rem;">
    <img src="..." class="card-img-top" alt="...">
    <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">Some quick example text.</p>
        <a href="#" class="btn btn-primary">Button</a>
    </div>
</div>

Card Header and Footer

<div class="card">
    <div class="card-header">
        Featured
    </div>
    <div class="card-body">
        <h5 class="card-title">Special title</h5>
        <p class="card-text">With supporting text below.</p>
        <a href="#" class="btn btn-primary">Go somewhere</a>
    </div>
    <div class="card-footer text-muted">
        2 days ago
    </div>
</div>

Card Groups

<div class="card-group">
    <div class="card">
        <div class="card-body">
            <h5 class="card-title">Card 1</h5>
            <p class="card-text">Content</p>
        </div>
    </div>
    <div class="card">
        <div class="card-body">
            <h5 class="card-title">Card 2</h5>
            <p class="card-text">Content</p>
        </div>
    </div>
</div>

Next Steps

Next: Bootstrap Dropdowns →