Bootstrap 5 Card styles

A card is a bordered box with some padding around its content. It includes options for headers, footers, content, colors, etc. Cards include their own variant classes for quickly changing the background color and border color of a card.

Bootstrap 5 Card styles:

• Background and color: The background-color sets the background color of an element. It can manipulate the colors of the text as well as the background with ease. Example: bg-primary, bg-danger.
• Borders: Border used to quickly style the width, and color of the border and border-radius of an element.
• Mixins utilities: In this property, we include the card header and footer with the border and background colors. we can also change the color of the text.

Syntax:

<div class="row">
 <div class="card text-white" style="max-width: ...rem;">
 <div class="card-header">....</div>
 <div class="card-body">
 <h5 class="card-title">....</h5>
 <p class="card-text">...</p>
 </div>
 </div>
</div>

Example 1: In this example, we set the background and color of the card, using background classes.

Output:

👁 Bootstrap 5 Card styles

Example 2: In this example, we set the cards in the horizontal direction and changed the border color.

Output:

👁 Bootstrap 5 Card styles

Example 3: In this example, we illustrate the cards header, footer, and background color using .card classes.

Output:

👁 Bootstrap 5 Card styles

Reference: https://getbootstrap.com/docs/5.0/components/card/#card-styles