Bootstrap 5 Cards

Bootstrap 5 cards

In Bootstrap 5, a card is a box with a border and padding around its content. It offers options for content, colors, footers, headers, etc.

1. Basic Cards

• The .card class is used to build a basic card and the .card-body class is used to specify the content of the card:

<div class="container mt-3">

  <h2>Basic Card</h2>

  <div class="card">

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

  </div>

</div>


2. Header and Footer

• A heading and a footer are added to the card via the .card-header and .card-footer classes, respectively:

<div class="container mt-3">

  <h2>Card Header and Footer</h2>

  <div class="card">

    <div class="card-header">Header</div>

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

    <div class="card-footer">Footer</div>

  </div>

</div>

3. Titles, Text, and Links

• Use .card-title to add card titles to any heading element. The .card-text class is used to remove bottom margins for an element if it is the last child (or the only one) inside .card-body. The .card-link class adds blue color to any link and a hover effect:

<div class="container mt-3">

  <h2>Card titles, text, and links</h2>

  <p>.</p>

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

</div>