Bootstrap 5 Typography
Last Updated :
10 Apr, 2024
Bootstrap 5 Typography styles and formats text, providing customized headings, subheadings, lists, paragraphs, and font styles. It supports global settings for font stack, headings, link styles, ensuring consistency across devices.
Here’s the information represented in a table format:
| Term | Description |
|---|
| Headings | Classes available from .h1 to .h6. Helps create font-style-like headings without HTML heading tags. |
| Display headings | Classes from .display-1 to .display-6. Used for larger font size and lighter font weight headings. |
| Lead | Uses .lead class for creating standout paragraphs. |
| Inline text elements | Provides styling for common HTML elements. For example, <mark> tag for highlighting text within paragraphs. |
| Text utilities | Used for changing text alignment, style, weight, line-height, and other decorations. |
| Blockquotes | <blockquote> tag used to display long quotations, with unique alignment. |
| Lists | Used to style lists on the webpage, removing pre-defined styles and adding new ones. |
Syntax:
<p class="Typography classes">
...
</p>Example 1: Â Let us see an example of Typography Headings.
HTML
<!DOCTYPE html>
<html>
<head>
<!-- Load Bootstrap -->
<link
rel="stylesheet"
href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
crossorigin="anonymous"
/>
</head>
<body class="m-5">
<h3>Bootstrap 5 Typography</h3>
<div class="h6">GeeksforGeeks</div>
<div class="h5">GeeksforGeeks</div>
<div class="h4">GeeksforGeeks</div>
<div class="h3">GeeksforGeeks</div>
<div class="h2">GeeksforGeeks</div>
<div class="h1">GeeksforGeeks</div>
</body>
</html>
Output:
Bootstrap 5 Typography Example Output
Example 2: Let us see an example of display heading classes.
HTML
<!DOCTYPE html>
<html>
<head>
<!-- Load Bootstrap -->
<link
rel="stylesheet"
href=
"https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/css/bootstrap.min.css"
crossorigin="anonymous"
/>
</head>
<body class="m-5">
<h3>Bootstrap5 Typography display</h3>
<p class="display-5">GFG 5</p>
<p class="display-4">GFG 4</p>
<p class="display-3">GFG 3</p>
<p class="display-2">GFG 2</p>
<p class="display-1">GFG 1</p>
</body>
</html>
Output:
Share your thoughts in the comments
Please Login to comment...