Typography in Bootstrap
Bootstrap Typography provides a standardized and flexible approach to text styling, offering various classes for headings, paragraphs, and inline text elements. It ensures consistent typography across different devices and screen sizes, enhancing readability and aesthetics.
Typography can be used to create:
- Headings
- Subheadings
- Text and Paragraph font color, font type, and alignment
- Lists
- Other inline elements
Some classes and Tags to implement the typography feature of bootstrap:
| Inline Element | Description |
|---|---|
| h1 – h6 | Font styling resembling a heading, without using the associated HTML element |
| text-muted | Fades the text, making it appear greyed out |
| display | Enhances headings for better visual presentation |
| lead | Makes a paragraph stand out visually |
| mark | Highlights the text |
| small | Creates secondary subheadings |
| initialism | Renders abbreviations in slightly smaller text size |
| blockquote | Indicates quoted content |
| blockquote-footer | Provides footer details for identifying the source of the quote |
| text-center | Aligns text to the center |
| list-inline | Makes list items appear inline |
| text-truncate | Shortens longer text by truncating with an ellipsis |
| text-uppercase | Transforms text to uppercase |
| text-lowercase | Transforms text to lowercase |
| text-capitalize | Transforms text to capitalize the first letter of each word, leaving other letters in lowercase |
| pre-scrollable | Makes a preformatted element scrollable |
| dl-horizontal | Aligns term and description elements side-by-side |
| list-unstyled | Removes default list-style and left margin from list items |
| text-right | Aligns text to the right |
| text-left | Aligns text to the left |
Example 1: In this example we use Bootstrap classes to style headings and display properties. It includes headings from h1 to h3 with corresponding classes, along with display classes (display-3, display-4, and display-5) for different styles.
<!DOCTYPE html>
<html>
<head>
<link
rel="stylesheet"
href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
integrity=
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
crossorigin="anonymous"
/>
<title>Text-muted</title>
</head>
<body>
<p class="h1">h1. Bootstrap heading</p>
<p class="h2">h2. Bootstrap heading</p>
<p class="h3">h3. Bootstrap heading</p>
<h3 class="display-3">
Display-3 property
</h3>
<h3 class="display-4">
Display-4 property
</h3>
<h3 class="display-5">
Display-5 property
</h3>
</body>
</html>
Output:
Bootstrap typographt heading and display property Example Output
Example 2: In this example we demonstrates Bootstrap typography features. It includes examples of muted text, lead paragraph, highlighted text using the mark element, blockquote with footer, and an abbreviation with initialism class.
<!DOCTYPE html>
<html>
<head>
<link
rel="stylesheet"
href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
integrity=
"sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
crossorigin="anonymous"
/>
<title>Bootstrap Typography</title>
</head>
<body>
<!-- Muted text-->
<p class="text-muted">
w3wiki //A Muted Text.
</p>
<p>w3wiki - Normal Paragraph</p>
<!-- using lead class-->
<p class="lead">
w3wiki - Lead Paragraph
</p>
<!-- using mark-->
<mark>w3wiki - Highlighted</mark>
<br><br>
<!-- using blockquote tag and blockquote-footer class.-->
<blockquote>w3wiki</blockquote>
<blockquote class="blockquote-footer">
a CS portal
</blockquote>
<!-- using initialism class-->
<abbr
title="w3wiki"
class="text-success initialism"
>
GfG</abbr
>
is a CS portal
</body>
</html>
Output:
Typography in Bootstrap Example Output
Supported Browser: