📢 แจ้งเตือน: bootstrap/bootstrap 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">
            GeeksforGeeks
        </h1>

        <h2>Bootstrap 5 Cards Titles, text, and links</h2>
    </div>

    <div class="card mx-auto" style="width: 350px">
        <img src=
"https://media.geeksforgeeks.org/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">
            GeeksforGeeks
        </h1>

        <h2>Bootstrap 5 Cards Titles, text, and links</h2>
    </div>

    <div class="card mx-auto" style="width: 350px">
        <img src=
"https://media.geeksforgeeks.org/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

Bootstrap 5 Cards Titles, text, and links

Explore