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.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < title > Bootstrap 5 Cards Titles, text, and links </ title > < link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin = "anonymous" > < script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity = "sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin = "anonymous" > </ script > </ head > < body > < div class = "text-center" > < h1 class = "text-success" > w3wiki </ h1 > < h2 >Bootstrap 5 Cards Titles, text, and links</ h2 > </ div > < div class = "card mx-auto" style = "width: 350px" > < img src = "https://media.w3wiki.net/wp-content/cdn-uploads/Java.png" class = "card-img-top" > < div class = "card-body" > < h5 class = "card-title" >Title -Java</ h5 > < h6 class = "card-subtitle mb-2 text-muted" > Subtitle - Programming Language </ h6 > </ div > </ div > </ body > </ html > |
Output:
Example 2: In this example, we will create a card containing an image, title, sub-title, text, and link.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < title > Bootstrap 5 Cards Titles, text, and links </ title > < link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel = "stylesheet" integrity = "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin = "anonymous" > < script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity = "sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin = "anonymous" > </ script > </ head > < body > < div class = "text-center" > < h1 class = "text-success" > w3wiki </ h1 > < h2 >Bootstrap 5 Cards Titles, text, and links</ h2 > </ div > < div class = "card mx-auto" style = "width: 350px" > < img src = "https://media.w3wiki.net/wp-content/cdn-uploads/Java.png" class = "card-img-top" > < div class = "card-body" > < h5 class = "card-title" >Title-Java</ h5 > < h6 class = "card-subtitle mb-2 text-muted" > SubTitle-Programming Language </ h6 > < p class = "card-text" > Text-Java is Object Oriented. However, it is not considered as pure object-oriented as it provides support for primitive data types (like int, char, etc) </ p > < br > < a href = "#" class = "card-link" >GFG Links</ a > </ div > </ div > </ body > </ html > |
Output:
Reference: https://getbootstrap.com/docs/5.0/components/card/#titles-text-and-links
Contact Us