HOME C C++ PYTHON JAVA HTML CSS JAVASCRIPT BOOTSTRAP JQUERY REACT PHP SQL AJAX JSON DATA SCIENCE AI

Bootstrap 5 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.

Card image

John Doe

Some example text some example text. John Doe is an architect and engineer

See Profile

Basic Card

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

Basic card

Example

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

Header and Footer

Header
Content
Footer

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

Example

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

Contextual Cards

To add a background color the card, use contextual classes (.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-danger, .bg-secondary, .bg-dark and .bg-light.

Basic card

Example

 

    
Basic card

  

 

    
Primary card

  

 

    
Success card

  

  

    
Info card

  

  

    
Warning card

  

 

    
Danger card

  

 

    
Secondary card

  

  

  

    
Dark card

  



    
Light card

Titles, text, and links

Card title

Some example text. Some example text.

Card link Another link

Example

 <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>
You can click on above box to edit the code and run again.

Output