Bootstrap cards provide a flexible and extensible content container. It includes options for headers, footers, content, contextual background colors, and display options. Bootstrap 4 Card is a bordered box with some padding around its content.

Basic Card

A basic card is created with the .card class, and content inside the card is created using .card-body class

Contextual Classes

To change the background color of card, use contextual classes (.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark and .bg-light.

<div class="card bg-primary">
  <div class="card-body">Primary card</div>
</div>

<div class="card bg-success">
  <div class="card-body">Basic card</div>
</div>

<div class="card bg-info">
  <div class="card-body">Info card</div>
</div>

<div class="card bg-warning">
  <div class="card-body">Warning card</div>
</div>

<div class="card bg-danger">
  <div class="card-body">Danger card</div>
</div>

<div class="card bg-secondary">
  <div class="card-body">Secondary card</div>
</div>

<div class="card bg-dark text-white">
  <div class="card-body">Dark card</div>
</div>

<div class="card bg-light">
  <div class="card-body">Light card</div>
</div>

Header and Footer

The .card-header class adds a heading to the card and the .card-footer class adds a footer to the card.

<div class="card">
  <div class="card-header">Header</div>
  <div class="card-body">Content</div> 
  <div class="card-footer">Footer</div>
</div>

Titles, text, and links

Use .card-title to add card titles to any heading element. The .card-text class is used to remove bottom margins for a <p> element if it is the last child in the card. The .card-link class adds a blue color to any link, and a hover effect.

<div class="card">
  <div class="card-body">
    <h4 class="card-title">Card title</h4>
    <p class="card-text">Some example text. Some example text.</p>
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

Card Images

Add .card-image-top or .card-image-bottom to an <img> to place it at the top or at the bottom inside the card.

Card Image Overlays

Turn an image into a card background, use .card-img-overlay to add text on top of the image.

<div class="card" style="width:500px">
  <img class="card-img-top" src="../images/panda.jpg" alt="Card image">
  <div class="card-img-overlay">
    <h4 class="card-title">John Doe</h4>
    <p class="card-text">Some example text.</p>
    <a href="#" class="btn btn-primary">See Profile</a>
  </div>
</div>