Utilizor
HomeBootstrap 5 BasicsBS5 Cards

BBS5 Cards

Learn how to create cards in Bootstrap 5.

BS5 Cards

A card in Bootstrap 5 is a bordered box with some padding around its content. It includes options for headers, footers, content, colors, etc.

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

Header and Footer

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

Card Images

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

Examples

Basic Card

html/css

A simple card with padding.

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

Card with Header and Footer

html/css

Card with structured sections.

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

Card with Image

html/css

A standard profile-style card with an image.

<div class="card" style="width:400px">
  <img 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>

Test Your Knowledge

1. Which class creates a basic card?

2. Where should the .card-body class be placed?