Bootstrap 5 Typography Abbreviations
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
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
Reference: https://getbootstrap.com/docs/5.0/content/typography/#abbreviations
Last Updated :
06 Mar, 2023
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...