Bootstrap 5 Tutorial
v5.3.0Bootstrap 5 Tutorial
Typography in Bootstrap 5
Global Typography Settings
Bootstrap sets basic global display, typography, and link styles. These are applied to the <body> element.
Default Body Text
This is a paragraph of text. Bootstrap sets basic global display, typography, and link styles. When more control is needed, check out the textual utility classes.
You can use the mark tag to highlight text.
Default Settings:
- Font family: system font stack
- Base font size: 1rem (16px)
- Line height: 1.5
- Font weight: 400 (normal)
Applied to:
<body>element- All paragraphs
<p> - List items
<li> - Other text elements
Headings
All HTML Headings
h1. Bootstrap heading
h2. Bootstrap heading
h3. Bootstrap heading
h4. Bootstrap heading
h5. Bootstrap heading
h6. Bootstrap heading
| Heading | Example | Font Size | Font Weight | Line Height |
|---|---|---|---|---|
<h1> | Sample | 2.5rem (40px) | 500 | 1.2 |
<h2> | Sample | 2rem (32px) | 500 | 1.2 |
<h3> | Sample | 1.75rem (28px) | 500 | 1.2 |
<h4> | Sample | 1.5rem (24px) | 500 | 1.2 |
<h5> | Sample | 1.25rem (20px) | 500 | 1.2 |
<h6> | Sample | 1rem (16px) | 500 | 1.2 |
Heading Classes
You can use heading classes to make other elements look like headings:
This paragraph looks like an h1
This paragraph looks like an h2
This paragraph looks like an h3
<!-- Using heading classes on other elements -->
<p class="h1">h1. Bootstrap heading</p>
<p class="h2">h2. Bootstrap heading</p>
<p class="h3">h3. Bootstrap heading</p>Customizing Headings
Small Secondary Text
Fancy display headingWith faded secondary text
<h3>
Fancy display heading
<small class="text-muted">With faded text</small>
</h3>Use the <small> tag or .small class for smaller, secondary text.
Display Headings
Display 1
Display 6
<h1 class="display-1">Display 1</h1>
<h1 class="display-2">Display 2</h1>
<!-- ... up to display-6 -->Display headings are larger, lighter heading style for hero sections.
Inline Text Elements
Common Inline Styles
You can use the mark tag to highlight text.
This line of text is meant to be treated as deleted text.
This line of text is meant to be treated as no longer accurate.
This line of text is meant to be treated as an addition to the document.
This line of text will render as underlined.
This line of text is meant to be treated as fine print.
This line rendered as bold text.
This line rendered as italicized text.
| Element | Example | Purpose |
|---|---|---|
<mark> | Highlighted text | Highlight |
<del> | Deleted/removed | |
<s> | Strikethrough | |
<ins> | Inserted text | Added content |
<u> | Underlined | Underline |
<small> | Small text | Fine print |
<strong> | Bold | Importance |
<em> | Italic | Emphasis |
Text Alignment
Alignment Classes
Left aligned text on all viewport sizes.
Center aligned text on all viewport sizes.
Right aligned text on all viewport sizes.
Responsive Alignment
This text is left aligned on mobile, center aligned on tablet, and right aligned on desktop.
| Class | Breakpoint | Alignment |
|---|---|---|
text-start | All screens | Left align |
text-center | All screens | Center align |
text-end | All screens | Right align |
text-sm-center | sm and up | Center on tablets+ |
text-md-end | md and up | Right on desktop+ |
text-lg-start | lg and up | Left on large screens+ |
<!-- Responsive text alignment -->
<p class="text-start text-md-center text-lg-end">
Aligns differently on different screens
</p>
<!-- Center text only on medium screens -->
<p class="text-start text-md-center">
Centered on tablet+
</p>Text Transformation
Lowercase
ALL LOWERCASE TEXT.
text-lowercaseUppercase
all uppercase text.
text-uppercaseCapitalize
all words capitalized.
text-capitalizeFont Weight and Italics
Font Weight
Bold text.
Bolder weight text (relative to the parent element).
Semibold weight text.
Normal weight text.
Light weight text.
Lighter weight text (relative to the parent element).
Font Style
Italic text.
Text without font style.
Monospace
This is in monospace
| Class | Effect | CSS Equivalent |
|---|---|---|
fw-bold | Bold text | font-weight: 700 |
fw-semibold | Semibold text | font-weight: 600 |
fw-normal | Normal text | font-weight: 400 |
fw-light | Light text | font-weight: 300 |
fst-italic | Italic text | font-style: italic |
fst-normal | Normal font style | font-style: normal |
font-monospace | Monospace font | font-family: monospace |
Text Colors
Contextual Text Colors
.text-primary.text-secondary.text-success.text-danger.text-warning.text-info.text-light bg-dark.text-dark.text-body.text-muted.text-white bg-dark.text-black-50.text-white-50 bg-darkText Decoration
Text Decoration
This text has a line underneath it.
This text has a line going through it.
This link has its text decoration removed
Text Wrap
Word Break
mmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
Line Height
.lh-1
This is a long paragraph of text to show how the line-height affects the text. The line height is set to 1.
.lh-sm
This is a long paragraph of text to show how the line-height affects the text. The line height is set to sm.
.lh-base
This is a long paragraph of text to show how the line-height affects the text. The line height is set to base.
| Class | Line Height | Use Case |
|---|---|---|
lh-1 | 1 | Tight spacing |
lh-sm | 1.25 | Small spacing |
lh-base | 1.5 | Default (body text) |
lh-lg | 2 | Large spacing |
Typography Best Practices
- ✅ Use proper heading hierarchy (h1 → h2 → h3)
- ✅ Maintain sufficient contrast for readability
- ✅ Use line-height of 1.5 for body text
- ✅ Limit line length to 50-75 characters
- ✅ Use responsive typography for different screens
- ✅ Choose font sizes that create clear hierarchy
