How to Create Content Cards using Bootstrap

A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. Cards replaced panels, wells, and thumbnails from earlier bootstrap versions.

By default, cards have no margin. So, use spacing utilities as needed. Cards have no fixed width, so the fill the full width of its parent element.

Cards can contain images, text, title, content body, linked buttons, list groups, headers & footers and much more.

To create a card, add .card class to <div> element. For example,

<div class="card">
 
</div>

1. Body

The building block of a card is the .card-body. Use it whenever you need a padded section within a card.

<div class="card">
 <div class="card-body">
 This is some text within a card body.
 </div>
</div>

2. Text

To add text, use class .card-text that can also be styled with the standard HTML tags.

<p class="card-text">Some quick text to build on the card.</p>

3. Titles and Subtitles

Card titles are used by adding .card-title to a <h*> tag. Subtitles are used by adding a .card-subtitle to a <h*> tag. If the .card-title and the .card-subtitle items are placed in a .card-body item, the card title and subtitle are aligned nicely.

<h3 class="card-title">Card title</h3>
 <h4 class="card-subtitle mb-2 text-muted">Card subtitle</h4>

4. Links

Links are added and placed next to each other by adding .card-link to an <a> tag.

<a href="#" class="card-link">Card link</a>
 <a href="#" class="card-link">Another link</a>

5. Images

To place an image to the top of the card, use .card-img-top class.

<img src="/..." class="card-img-top" alt="...">

6. List Groups

You can create lists of content in a card with a flush list group.

<div class="card" style="width: 18rem;">
 <ul class="list-group list-group-flush">
 <li class="list-group-item">Cras justo odio</li>
 <li class="list-group-item">Dapibus ac facilisis in</li>
 <li class="list-group-item">Vestibulum at eros</li>
 </ul>
</div>

7. Header and Footer

You can add header and footer within a card using .card-header class.