Bootstrap Cards

Bootstrap Cards are the single most adaptable and widely used component in modern web design. They provide a flexible, extensible content container that surrounds your data with a soft border, subtle background, and perfectly calculated padding.

1. The Basic Card

To construct a card, you first need an outer wrapper defined by the .card class. Inside of that wrapper, you place your text inside a .card-body block so that it receives the appropriate internal padding.

<!-- Applying the outer boundary container -->
<div class="card" style="width: 18rem;">
    <!-- Generating the padding zone -->
    <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6>
        <p class="card-text">Standard body text describing the object.</p>
        <a href="#" class="card-link">Action Link</a>
    </div>
</div>

2. Adding Images

Cards are heavily utilized for e-commerce products or blog post thumbnails. You can seamlessly inject an image across the top (or bottom) of the card, and Bootstrap will perfectly round the image corners to match the outer card boundary!

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

<div class="card" style="width: 18rem;">
    <!-- Mount .card-img-top above the body! -->
    <img src="..." class="card-img-top" alt="...">
    
    <div class="card-body">
        <h5 class="card-title">...</h5>
    </div>
</div>

3. Headers and Footers

You can add distinctly segmented blocks at the absolute top or bottom of the structural frame utilizing .card-header and .card-footer. These blocks carry a darker, highlighted background color, separating them visually from the main `card-body`.

<div class="card">
    <!-- Distinct structural separation -->
    <div class="card-header">Featured</div>
    
    <div class="card-body">
        ...
    </div>
    
    <div class="card-footer text-muted">2 days ago</div>
</div>

4. Embedding List Groups

Remember that `.list-group-flush` class we just learned? Here is the exact reason it is so powerful! A flush list group perfectly deletes its borders, allowing it to fuse flawlessly down into the middle of any card.

<div class="card" style="width: 18rem;">
    <div class="card-header">Featured</div>
    <!-- Flush list array injected natively into the middle of the card -->
    <ul class="list-group list-group-flush">
        <li class="list-group-item">An item</li>
        <li class="list-group-item">A second item</li>
    </ul>
</div>