Bootstrap 5 Text/Typography Guide
Bootstrap 5 provides a responsive typography system that makes it easy to style text with different sizes, weights, alignments, and more.
1. Headings
Bootstrap offers predefined heading styles (h1 to h6) with .h1 to .h6 classes.
<h1 class="h1">Heading 1</h1>
<h2 class="h2">Heading 2</h2>
<h3 class="h3">Heading 3</h3>
<h4 class="h4">Heading 4</h4>
<h5 class="h5">Heading 5</h5>
<h6 class="h6">Heading 6</h6>
2. Display Headings
For larger, prominent headings, use .display-1 to .display-6.
<h1 class="display-1">Display 1</h1>
<h2 class="display-2">Display 2</h2>
<h3 class="display-3">Display 3</h3>
<h4 class="display-4">Display 4</h4>
<h5 class="display-5">Display 5</h5>
<h6 class="display-6">Display 6</h6>
✔ Display text is bigger and bolder than normal headings.
3. Lead Paragraph
Use .lead to make text larger and more readable.
<p class="lead">This is a lead paragraph. It has slightly larger font size.</p>
4. Inline Text Styles
Bootstrap provides various text styling classes:
<p class="fw-bold">Bold text</p>
<p class="fw-bolder">Bolder text</p>
<p class="fw-normal">Normal text</p>
<p class="fw-light">Light text</p>
<p class="fst-italic">Italic text</p>
<p class="fst-normal">Normal (non-italic) text</p>
✔ Use fw-* for font weight and fst-* for italic styles.
5. Text Alignment
Align text with .text-start, .text-center, or .text-end.
<p class="text-start">Left aligned text</p>
<p class="text-center">Center aligned text</p>
<p class="text-end">Right aligned text</p>
✔ Responsive alignment:
<p class="text-sm-end text-md-center text-lg-start">Responsive text alignment</p>
6. Text Colors
Bootstrap provides text color classes:
<p class="text-primary">Primary color text</p>
<p class="text-secondary">Secondary color text</p>
<p class="text-success">Success color text</p>
<p class="text-danger">Danger color text</p>
<p class="text-warning">Warning color text</p>
<p class="text-info">Info color text</p>
<p class="text-dark">Dark color text</p>
<p class="text-light bg-dark">Light color text</p>
7. Text Transformation
Use .text-uppercase, .text-lowercase, and .text-capitalize to change text case.
<p class="text-uppercase">Uppercase text</p>
<p class="text-lowercase">Lowercase text</p>
<p class="text-capitalize">capitalize text</p>
✔ Text transformation helps in formatting content quickly.
8. Line Height & Spacing
Use .lh-* for line height and .spacing-* for letter spacing.
<p class="lh-1">Line Height 1</p>
<p class="lh-sm">Small Line Height</p>
<p class="lh-base">Base Line Height</p>
<p class="lh-lg">Large Line Height</p>
9. Truncate Text (Ellipsis for Long Text)
Use .text-truncate to shorten overflowing text.
<div class="text-truncate" style="width: 200px; overflow: hidden; white-space: nowrap;">
This is a long text that will be truncated...
</div>
✔ Useful for long headings or names in limited space.
10. Responsive Font Sizes (RFS)
Bootstrap 5 has responsive font sizes by default, which means text scales automatically on different screen sizes.
✔ For custom font sizes, use:
<p class="fs-1">Font Size 1</p>
<p class="fs-2">Font Size 2</p>
<p class="fs-3">Font Size 3</p>
<p class="fs-4">Font Size 4</p>
<p class="fs-5">Font Size 5</p>
<p class="fs-6">Font Size 6</p>
✔ .fs-1 is the largest, .fs-6 is the smallest.
Conclusion
✔ Bootstrap 5 provides predefined typography styles for headings, paragraphs, and text formatting.
✔ Responsive text automatically scales on different devices.
✔ Use text alignment, colors, font sizes, and transformations for better readability.
Want more details? Let me know!
0 comments:
Post a Comment