Open In App

Bootstrap 5 Cards Titles, text, and links

Last Updated : 11 Nov, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

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>
        rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
        crossorigin="anonymous">
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" 
        crossorigin="anonymous">
    </script>
</head>
  
<body>
    <div class="text-center">
        <h1 class="text-success">
            GeeksforGeeks
        </h1>
  
        <h2>Bootstrap 5 Cards Titles, text, and links</h2>
    </div>
  
    <div class="card mx-auto" style="width: 350px">
        <img src=
            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>
        rel="stylesheet"
        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
        crossorigin="anonymous">
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" 
        crossorigin="anonymous">
    </script>
</head>
  
<body>
    <div class="text-center">
        <h1 class="text-success">
            GeeksforGeeks
        </h1>
  
        <h2>Bootstrap 5 Cards Titles, text, and links</h2>
    </div>
  
    <div class="card mx-auto" style="width: 350px">
        <img src=
            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



Like Article
Suggest improvement
Previous
Next
Share your thoughts in the comments