Bootstrap 5 Cards Titles, text, and links

Cards Titles, text, and links are used to add a title, text content, and links to a card. The .card-title class is used with <h*> tag to create the card title and the .card-subtitle class is used with <h*> tag to create the card subtitle. Similarly, the .card-link class is used with <a> tag to create a card link. 

Cards Titles, text, and links used Classes:

• .card-title: This class is used to create a card title. It is used with <h*> tag.
• .card-subtitle: This class is used to create a card sub-title. It is used with <h*> tag.
• .card-text:  This class is used to create the text content of the card.
• .card-link: This class is used to add links to the card. It is used with <a> tag.

Syntax:

<div class="card">
 <div class="card-body">
 <h5 class="card-title">Card title</h5>
 <h6 class="card-subtitle mb-2 text-muted">
 Card subtitle
 </h6>
 <p class="card-text">Text Content</p>
 <a href="#" class="card-link">Link</a>
 </div>
</div>

 

Example 1: In this example, we will create a card containing an image, title, and sub-title.

Output:

👁 Image

Example 2: In this example, we will create a card containing an image, title, sub-title, text, and link.

Output:

👁 Image

Reference: https://getbootstrap.com/docs/5.0/components/card/#titles-text-and-links