Chapter 4 : Typography

Bootstrap makes styling text incredibly easy by providing a set of default styles and utility classes. Instead of writing custom CSS for every font size or alignment, you just add a class to your HTML element.

Here is a breakdown of the most important typography features in Bootstrap.

1. Headings

Bootstrap styles all standard HTML headings (<h1> through <h6>). However, sometimes you want a piece of text to look like a heading without actually using the tag (which is important for SEO).

Classes: Use .h1 through .h6 on any element (like a <p> or <span>) to give it heading styles.
Display Headings: When you need a heading to really stand out (larger and more “boutique”), use Display classes:
- .display-1 (Largest) down to .display-6 (Smallest).

2. Lead Body Text

If you have a starting paragraph that needs to be slightly more prominent than a regular paragraph, use the .lead class. It makes the font a bit larger and lighter in weight.

HTML

<p class="lead">This is a standout paragraph that catches the eye.</p>

3. Inline Text Elements

Bootstrap provides quick ways to style bits of text inside a sentence:

.mark: Gives a yellow highlighted background.
.small: Drops the font size to 80% of the parent.
.text-decoration-underline: Adds an underline.
.text-decoration-line-through: Strikes through the text.

4. Text Alignment

Moving text around is one of the most common tasks. You don’t need text-align: center; in CSS; just use these classes:

Class	Result
`.text-start`	Aligns text to the left (default).
`.text-center`	Aligns text to the center.
`.text-end`	Aligns text to the right.

5. Text Transformation & Weight

You can change the “thickness” or the casing of your words instantly:

Weight: .fw-bold (bold), .fw-normal (regular), or .fst-italic (italics).
Casing: .text-lowercase, .text-uppercase, or .text-capitalize (First Letter Of Each Word).

6. Abbreviations and Blockquotes

To make your content look professional, use these specialized structures:

Abbreviations: Use <abbr title="attribute"> to show a dotted underline. When a user hovers, they see the full text.
Blockquotes: To quote someone, wrap a <p> in a <blockquote class="blockquote">. To add a source, use the <figcaption class="blockquote-footer">.