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.
<!doctype html>
<html lang="en">
<head>
<link href=
"https://cdn.jsdeliver.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet">
<script src=
"https://cdn.jsdeliver.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js">
</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:
Example 2: The below code demonstrates how we can use Typography Abbreviations using initialism class inside cards as card text and card title.
<!doctype html>
<html lang="en">
<head>
<link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
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:
Reference: https://getbootstrap.com/docs/5.0/content/typography/#abbreviations