Bootstrap 4 Cards

Cards are flexible content containers that include options for headers, footers, content, colors, images, and more. They are one of the most powerful components in Bootstrap 4.

Basic Card

The .card class is used to construct a basic card, while the .card-body class is used for the content inside the card.

<div class="card">
  <div class="card-body">
    This is a basic card.
  </div>
</div>

Header and Footer

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

Contextual Cards

Use contextual background colors for cards:

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

<div class="card bg-success text-white">
  <div class="card-body">Success Card</div>
</div>

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

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

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

Titles, Text, and Links

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

Card Images

<div class="card">
  <img src="image.jpg" class="card-img-top" alt="...">
  <div class="card-body">Image with content</div>
</div>

Stretched Link

Make a link cover the entire card:

<a href="#" class="stretched-link">Read More</a>

Card Image Overlays

<div class="card bg-dark text-white">
  <img src="image.jpg" class="card-img" alt="...">
  <div class="card-img-overlay">
    <h5 class="card-title">Overlay Title</h5>
    <p class="card-text">Overlay text</p>
  </div>
</div>

Card Columns

Display cards in a masonry layout:

<div class="card-columns">
  <div class="card">Card 1</div>
  <div class="card">Card 2</div>
  <div class="card">Card 3</div>
</div>

Card Deck

Group cards with equal width and height:

<div class="card-deck">
  <div class="card">Card 1
    More content
    Some more content</div>
  <div class="card">Card 2</div>
  <div class="card">Card 3</div>
</div>

Card Group

Use card-group to align cards together:

<div class="card-group">
  <div class="card">Card A</div>
  <div class="card">Card B</div>
</div>

Conclusion

Bootstrap 4 simplifies styling with built-in components like form inputs, media objects, carousels, color utilities, spinners, and cards. These features are essential for building user-friendly and visually engaging websites.

In our next blog, we’ll explore more exciting Bootstrap 4 features, including Bootstrap Navs, Input Groups, and more advanced layout techniques to enhance navigation and input customization.

Request more information

Bootstrap 4 Cards