Bootstrap

Bootstrap CSS Typography

Bootstrap 5 Typography Classes

1. Headings

Bootstrap provides classes to style any element as a heading:

  • .h1 — styles text like <h1>

  • .h2 — styles text like <h2>

  • .h3

  • .h4

  • .h5

  • .h6

Example:

html
<p class="h1">This looks like an H1 heading</p>

2. Display Headings

Extra-large headings for hero sections or big titles:

  • .display-1 (largest)

  • .display-2

  • .display-3

  • .display-4 (smallest)

Example:

html
<h1 class="display-1">Big Display Heading</h1>

3. Lead Paragraph

A paragraph with slightly larger font-size and lighter weight:

  • .lead

Example:

html
<p class="lead">This is a lead paragraph, great for intro text.</p>

4. Inline Text Elements

  • .mark — Highlights text (yellow background)

  • .small — Smaller text

  • .text-muted — Muted (gray) text color

  • .initialism — Smaller text for abbreviations (e.g., NASA)

  • .blockquote — Styles for blockquotes (see also .blockquote-footer)

  • .blockquote-footer — Citation text in blockquote

Example:

html
<p>This is <mark>highlighted</mark> and this is <small>small text</small>.</p>

5. Text Alignment

  • .text-start — Align left (default in LTR)

  • .text-center — Center text

  • .text-end — Align right (default in LTR)

Responsive versions (apply at specific breakpoints):

  • .text-sm-start, .text-md-center, .text-lg-end, etc.

Example:

html
<p class="text-center">Centered text</p>

6. Text Wrapping & Truncation

  • .text-wrap — Allow text wrap (default)

  • .text-nowrap — Prevent text wrapping (no line breaks)

  • .text-truncate — Truncate text with ellipsis when overflowing container

Example:

html
<p class="text-truncate" style="max-width: 200px;">This is a very long text that will be truncated.</p>

7. Text Transformation

  • .text-lowercase — Lowercase all letters

  • .text-uppercase — Uppercase all letters

  • .text-capitalize — Capitalize first letter of each word

Example:

html
<p class="text-uppercase">this will be uppercase</p>

8. Font Weight & Italics

  • .fw-light — Light font weight

  • .fw-normal — Normal font weight (default)

  • .fw-bold — Bold font weight

  • .fst-italic — Italic text

  • .fst-normal — Normal (not italic)

Example:

html
<p class="fw-bold fst-italic">Bold and italic text</p>

9. Text Color

Text color utilities you can combine with typography classes:

  • .text-primary, .text-secondary, .text-success, .text-danger, .text-warning, .text-info, .text-light, .text-dark, .text-muted, .text-white

Example:

html
<p class="text-success">Success message</p>

10. Monospace Font

  • .font-monospace

Example:

html
<p class="font-monospace">This is monospace text</p>

Summary Table

Class Effect
.h1 to .h6 Heading styles
.display-1 to .display-4 Large display headings
.lead Larger intro paragraph
.mark Highlighted text
.small Smaller text
.text-muted Muted (gray) text
.text-start Left-aligned text
.text-center Center-aligned text
.text-end Right-aligned text
.text-truncate Ellipsis truncation
.text-uppercase Uppercase
.fw-bold Bold font
.fst-italic Italic text
.font-monospace Monospace font

Leave a Reply

Your email address will not be published. Required fields are marked *