Bootstrap4 Cards

Simple Card

We can create a simple card using Bootstrap4's .card and .card-body classes, as shown in the example below:

Example

<div class="card">
  <div class="card-body">Simple Card</div>
</div>

Bootstrap4 cards are similar to panels, thumbnail images, and wells in Bootstrap 3.

Header and Footer

The .card-header class is used to create the header style for the card, and the .card-footer class is used to create the footer style for the card:

Example

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

Multiple Colored Cards

Bootstrap 4 provides multiple background color classes for cards: .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark, and .bg-light.

Example

<div class="container">
  <h2>Multiple Colored Cards</h2>
  <div class="card">
    <div class="card-body">Basic card</div>
  </div>
  <br>
  <div class="card bg-primary text-white">
    <div class="card-body">Primary card</div>
  </div>
  <br>
  <div class="card bg-success text-white">
    <div class="card-body">Success card</div>
  </div>
  <br>
  <div class="card bg-info text-white">
    <div class="card-body">Info card</div>
  </div>
  <br>
  <div class="card bg-warning text-white">
    <div class="card-body">Warning card</div>
  </div>
  <br>
  <div class="card bg-danger text-white">
    <div class="card-body">Danger card</div>
  </div>
  <br>
  <div class="card bg-secondary text-white">
    <div class="card-body">Secondary card</div>
  </div>
  <br>
  <div class="card bg-dark text-white">
    <div class="card-body">Dark card</div>
  </div>
  <br>
  <div class="card bg-light text-dark">
    <div class="card-body">Light card</div>
  </div>
</div>

Title, Text, and Link

We can use the .card-title class to set the title of the card on the header element. The .card-text class is used to set the content of the card body. The .card-link class is used to set the color for links.

Example

<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>

Image Card

We can add .card-img-top (image above text) or .card-img-bottom (image below text) to <img> to set up image cards:

Example

<div class="card" style="width:400px">
  <img class="card-img-top" src="img.jpg" alt="Card image">
  <div class="card-body">
    <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>

<img decoding="async" class="card-img-top" src="img_avatar1.png" alt="Card image">
<div class="card-body">
  <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>

If you want to set the image as a background, you can use the `.card-img-overlay` class:

## Example

<div class="card" style="width:500px">
  <img decoding="async" class="card-img-top" src="img_avatar1.png" 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>