Learn how to use cards in Bootstrap

In this tutorial, you'll learn how to use Bootstrap's versatile card component. We'll build a card from scratch, adding everything from images and text to headers and footers. You'll also see how to easily customize its appearance with Bootstrap's utility classes.

Step 1: Introduction to Bootstrap Cards

Bootstrap cards are flexible content containers. They include options for headers, footers, a wide variety of content, contextual background colors, and powerful display options. Let's start by creating the basic structure.

Step 2: Creating the Basic Card

First, we need a container element. We'll use a <div> and give it the class card to transform it into a Bootstrap card component.

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

Step 3: Controlling Card Width

By default, a card will expand to take up the full width of its parent container. Since our card doesn't have a specific parent container, it would stretch across the entire browser width.

Let's constrain its size. We can use Bootstrap's sizing utilities to set the width. We'll add the w-50 class to make the card take up 50% of the available width.

<div class="card w-50">
</div>

Step 4: Adding the Card Body

The main content of a card should be placed inside a <div> with the class card-body. This class adds the necessary padding around the content.

Inside the card-body, we can add our text. For this example, we'll place some placeholder text inside a <p> tag with the class card-text.

<div class="card w-50">
  <div class="card-body">
    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</p>
  </div>
</div>

Step 5: Adding an Image

Cards often feature an image. Let's add one to the top. Place an <img> tag right inside the main card <div>, before the card-body. To ensure the image's corners match the card's rounded corners, add the class card-img-top.

<div class="card w-50">
  <img src="https://placehold.co/400x250" class="card-img-top" />
  <div class="card-body">
    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</p>
  </div>
</div>

Note: You can also place an image at the bottom of the card by using the card-img-bottom class instead.

Step 6: Adding a Title and Subtitle

To give our card more structure, let's add a title and a subtitle within the card-body. We'll use an <h5> tag with the class card-title for the title and an <h6> with the class card-subtitle for the subtitle.

<div class="card w-50">
  <img src="https://placehold.co/400x250" class="card-img-top" />
  <div class="card-body">
    <h5 class="card-title">Castles</h5>
    <h6 class="card-subtitle">So pretty!</h6>
    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</p>
  </div>
</div>

Step 7: Adding a Header and Footer

Cards can also have a header and a footer. Let's add these outside of the card-body.

We'll add a <div> with the class card-header at the top of our card (before the image) and another <div> with the class card-footer at the bottom. These classes apply special styling, including a border and a slightly different background shade to distinguish them from the body.

<div class="card w-50">
  <div class="card-header">Header</div>
  <img src="https://placehold.co/400x250" class="card-img-top" />
  <div class="card-body">
    <h5 class="card-title">Castles</h5>
    <h6 class="card-subtitle">So pretty!</h6>
    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</p>
  </div>
  <div class="card-footer">Footer</div>
</div>

Step 8: Customizing the Card Color

Finally, let's change the color of our card. We can use Bootstrap's background color helper classes. By adding a class like text-bg-warning to the main <div class="card">, we can change both the background color and ensure the text color adjusts for readability.

<div class="card w-50 text-bg-warning">
  <div class="card-header">Header</div>
  <img src="https://placehold.co/400x250" class="card-img-top" />
  <div class="card-body">
    <h5 class="card-title">Castles</h5>
    <h6 class="card-subtitle">So pretty!</h6>
    <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</p>
  </div>
  <div class="card-footer">Footer</div>
</div>

Notice how the header and footer still have a slightly different shade, maintaining the visual separation from the card body.

Final Code

Here is the complete HTML for the card we've built.

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <!-- Bootstrap CSS -->
    <link
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN"
      crossorigin="anonymous"
    />

    <title>Bootstrap Cards</title>
  </head>
  <body class="m-3">

    <div class="card w-50 text-bg-warning">
      <div class="card-header">Header</div>
      <img src="https://placehold.co/400x250" class="card-img-top" alt="A scenic castle by the water">
      <div class="card-body">
        <h5 class="card-title">Castles</h5>
        <h6 class="card-subtitle mb-2">So pretty!</h6>
        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</p>
      </div>
      <div class="card-footer">Footer</div>
    </div>

    <script
      src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL"
      crossorigin="anonymous"
    ></script>
  </body>
</html>