Open In App

Bootstrap 5 Typography Abbreviations

Improve
Improve
Like Article
Like
Save
Share
Report

Bootstrap 5 Typography Abbreviations are not different from the basic HTML <abbr> tag and its main usage is to define an acronym or an abbreviation like HTML, CSS, JavaScript, etc. Abbreviations also feature a help pointer and a default underlining to give users of assistive technology and users of hover context more information. We can also add an optional .initialism class to provide a smaller font size.

Bootstrap 5 Typography Abbreviations Class:

  • initialism: This class is optional but if used, this reduces the font size slightly.

Syntax:

<abbr title="<!-- Acronym and Abbreviation full form --!>" 
           class="initialism">
    ...
</abbr>

Example 1: The below code demonstrates how we can use Typography Abbreviations inside a grid.

HTML




<!doctype html>
<html lang="en">
 
<head>
    <link href=
        rel="stylesheet">
    <script src=
    </script>
</head>
 
<body>
    <h1 class="m-4 text-success">
        GeeksforGeeks
    </h1>
    <h4 class="ms-4">
        Bootstrap 5 Typography Abbreviations
    </h4>
    <div class="container mt-5">
        <div class="row bg-dark text-light">
            <div class="col ps-5 pt-2 border border-light">
                <p>
                    <abbr title="Cascading Styling Sheets"
                        class="m-2">
                        CSS
                    </abbr>
                </p>
            </div>
            <div class="col ps-5 pt-2 border border-light">
                <p>
                    <abbr title="HyperText Markup Language"
                        class="m-2">
                        HTML
                    </abbr>
                </p>
            </div>
            <div class="col ps-5 pt-2 border border-light">
                <p>
                    <abbr title="JavaScript" class="m-2">
                        JS
                    </abbr>
                </p>
            </div>
        </div>
    </div
</body>
</html>


Output:

BootSraep 5 Typography Abbreviations

BootSraep 5 Typography Abbreviations

Example 2: The below code demonstrates how we can use Typography Abbreviations using initialism class inside cards as card text and card title.

HTML




<!doctype html>
<html lang="en">
 
<head>
    <link href=
        rel="stylesheet" integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
        crossorigin="anonymous">
     
</head>
 
<body>
    <h1 class="m-4 text-success">
        GeeksforGeeks
    </h1>
    <h4 class="ms-4">
        Bootstrap 5 Typography Abbreviations
    </h4>
    <div class="container mt-4">
        <div class="card-group">
            <div class="card p-3">
                <div class="card-body">
                    <h5 class="card-title">
                        <abbr title="Card Title 1"
                            class="initialism">
                            CT-1
                        </abbr>
                    </h5>
                    <p class="card-text mt-2">
                        First Abbreviation
                        <strong>
                            <abbr title="Machine Learning"
                                class="initialism">
                                ML
                            </abbr>
                        </strong>
                    </p>
                </div>
            </div>
            <div class="card p-3">
                <div class="card-body">
                   <h5 class="card-title">
                        <abbr title="Card Title 2"
                            class="initialism">
                                CT-2
                        </abbr>
                    </h5>
                   <p class="card-text mt-2">
                        Second Abbreviation
                        <strong>
                            <abbr title="Artificial Intelligence"
                            class="initialism">AI</abbr>
                        </strong>
                    </p>
                </div>
            </div>
            <div class="card p-3">
                <div class="card-body">
                    <h5 class="card-title">
                        <abbr title="Card Title 3"
                            class="initialism">
                                CT-3
                        </abbr></h5>
                    <p class="card-text mt-2">
                        Third Abbreviation
                        <strong>
                            <abbr title="Data Science"
                                class="initialism">
                                DS
                            </abbr>
                        </strong>
                    </p>
                </div>
            </div>
        </div>
    </div
</body>
</html>


Output:

BootSraep 5 Typography Abbreviations

BootSraep 5 Typography Abbreviations

Reference: https://getbootstrap.com/docs/5.0/content/typography/#abbreviations 



Last Updated : 06 Mar, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads