Bootstrap 4 Cards

Welcome to The Coding College! Cards are one of the most versatile and essential components in Bootstrap 4. They allow you to organize content in a neat, visually appealing layout. Cards can contain headers, footers, images, buttons, and custom content, making them perfect for profiles, articles, products, and much more.

In this guide, we’ll dive deep into how to create, style, and customize cards using Bootstrap 4.

What Is a Card in Bootstrap 4?

A card in Bootstrap 4 is a flexible and extensible content container. Cards come with various pre-designed styles that support headers, footers, images, lists, and more.

Basic Card Example

To create a basic card, use the .card class. The card’s content is wrapped inside .card-body.

Example:

<div class="card" style="width: 18rem;">  
  <div class="card-body">  
    <h5 class="card-title">Card Title</h5>  
    <p class="card-text">This is a simple card with a title and some text.</p>  
    <a href="#" class="btn btn-primary">Go Somewhere</a>  
  </div>  
</div>

Explanation:

  • .card: The main card container.
  • .card-body: A wrapper for the content inside the card.
  • .card-title: Used for the card title.
  • .card-text: For the text content.

Adding Images to Cards

Bootstrap 4 provides the .card-img-top class to add an image at the top of the card.

Example:

<div class="card" style="width: 18rem;">  
  <img src="https://via.placeholder.com/150" class="card-img-top" alt="Card Image">  
  <div class="card-body">  
    <h5 class="card-title">Card Title</h5>  
    <p class="card-text">This card contains an image at the top.</p>  
    <a href="#" class="btn btn-primary">Learn More</a>  
  </div>  
</div>

Cards with Headers and Footers

Add headers and footers to your cards using the .card-header and .card-footer classes.

Example:

<div class="card" style="width: 18rem;">  
  <div class="card-header">Card Header</div>  
  <div class="card-body">  
    <h5 class="card-title">Card Title</h5>  
    <p class="card-text">This card includes a header and footer.</p>  
  </div>  
  <div class="card-footer">Card Footer</div>  
</div>

Card Layouts

Bootstrap 4 allows you to group multiple cards into a grid or stack them for responsive layouts.

Card Group

The .card-group class groups multiple cards into a single row.

<div class="card-group">  
  <div class="card">  
    <img src="https://via.placeholder.com/150" class="card-img-top" alt="Image">  
    <div class="card-body">  
      <h5 class="card-title">Card 1</h5>  
      <p class="card-text">This is the first card.</p>  
    </div>  
  </div>  
  <div class="card">  
    <img src="https://via.placeholder.com/150" class="card-img-top" alt="Image">  
    <div class="card-body">  
      <h5 class="card-title">Card 2</h5>  
      <p class="card-text">This is the second card.</p>  
    </div>  
  </div>  
</div>

Card Deck

Use the .card-deck class to create cards with equal heights and responsive spacing.

<div class="card-deck">  
  <div class="card">  
    <img src="https://via.placeholder.com/150" class="card-img-top" alt="Image">  
    <div class="card-body">  
      <h5 class="card-title">Card 1</h5>  
      <p class="card-text">This is the first card in a deck.</p>  
    </div>  
  </div>  
  <div class="card">  
    <img src="https://via.placeholder.com/150" class="card-img-top" alt="Image">  
    <div class="card-body">  
      <h5 class="card-title">Card 2</h5>  
      <p class="card-text">This is the second card in a deck.</p>  
    </div>  
  </div>  
</div>

Cards with List Groups

You can integrate list groups into cards using the .list-group and .list-group-item classes.

Example:

<div class="card" style="width: 18rem;">  
  <div class="card-header">Card with List Group</div>  
  <ul class="list-group list-group-flush">  
    <li class="list-group-item">Item 1</li>  
    <li class="list-group-item">Item 2</li>  
    <li class="list-group-item">Item 3</li>  
  </ul>  
  <div class="card-body">  
    <a href="#" class="btn btn-primary">Go Somewhere</a>  
  </div>  
</div>

Card Colors

Bootstrap 4 provides contextual color classes to change the background color of cards. Use classes like .bg-primary, .bg-danger, .bg-success, etc.

Example:

<div class="card text-white bg-primary mb-3" style="max-width: 18rem;">  
  <div class="card-header">Primary Card</div>  
  <div class="card-body">  
    <h5 class="card-title">Primary Card Title</h5>  
    <p class="card-text">This is a primary-colored card.</p>  
  </div>  
</div>

Card Alignment

Use utility classes like .text-center, .text-left, or .text-right to align text inside the card.

Example:

<div class="card" style="width: 18rem;">  
  <div class="card-body text-center">  
    <h5 class="card-title">Centered Card</h5>  
    <p class="card-text">The text in this card is center-aligned.</p>  
  </div>  
</div>

Practical Example: Complete Card Layout

Here’s a full example of a card layout using various components:

<!DOCTYPE html>  
<html lang="en">  
<head>  
  <meta charset="UTF-8">  
  <meta name="viewport" content="width=device-width, initial-scale=1.0">  
  <title>Bootstrap 4 Cards</title>  
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">  
</head>  
<body>  
  <div class="container my-5">  
    <h1 class="text-center text-primary">Bootstrap 4 Cards</h1>  

    <!-- Basic Card -->  
    <div class="card mb-3" style="width: 18rem;">  
      <img src="https://via.placeholder.com/150" class="card-img-top" alt="Image">  
      <div class="card-body">  
        <h5 class="card-title">Card Title</h5>  
        <p class="card-text">This is a simple card with an image, title, and text.</p>  
        <a href="#" class="btn btn-primary">Go Somewhere</a>  
      </div>  
    </div>  

    <!-- Card with List Group -->  
    <div class="card mb-3" style="width: 18rem;">  
      <div class="card-header">Card Header</div>  
      <ul class="list-group list-group-flush">  
        <li class="list-group-item">List Item 1</li>  
        <li class="list-group-item">List Item 2</li>  
        <li class="list-group-item">List Item 3</li>  
      </ul>  
    </div>  

    <!-- Card Deck -->  
    <div class="card-deck">  
      <div class="card">  
        <img src="https://via.placeholder.com/150" class="card-img-top" alt="Image">  
        <div class="card-body">  
          <h5 class="card-title">Card 1</h5>  
          <p class="card-text">This is the first card in a deck.</p>  
        </div>  
      </div>  
      <div class="card">  
        <img src="https://via.placeholder.com/150" class="card-img-top" alt="Image">  
        <div class="card-body">  
          <h5 class="card-title">Card 2</h5>  
          <p class="card-text">This is the second card in a deck.</p>  
        </div>  
      </div>  
    </div>  

  </div>  
</body>  
</html>

Conclusion

Bootstrap 4 Cards provide a powerful and flexible way to organize and display content. With options for images, headers, footers, contextual colors, and layout groups, you can easily create dynamic and visually appealing designs.

For more tutorials and resources, visit The Coding College and start building amazing projects today!

Leave a Comment