Bootstrap Typography
Master Bootstrap typography — learn how to style headings, paragraphs, text colors, font weights, alignment, and decorations using only Bootstrap utility classes, with no custom CSS needed.
- What is Typography?
- HTML Headings
- Display Headings
- Lead Paragraph
- Text Alignment
- Text Transform
- Text Colors
- Font Weight & Style
- Text Decoration
- Lists
- Blockquotes
- Common Mistakes
- Try It
- FAQ
What is Bootstrap Typography?
Bootstrap Typography is a set of pre-built CSS classes that style all text on your webpage — headings, paragraphs, lists, quotes, and more. Instead of writing custom CSS, you add a class name and Bootstrap handles the visual formatting automatically.
Good typography creates a clear reading order. Visitors should know at a glance what's the most important text on the page (big heading), what's supporting detail (paragraph), and what's a quick note (muted text). Bootstrap gives you tools to build that hierarchy fast.
Headings h1–h6
Six levels of HTML headings styled automatically by Bootstrap's base CSS.
Display Classes
Larger, bolder headings for hero sections using display-1 through display-6.
Text Colors
Semantic colors like text-primary, text-danger, text-muted and more.
Alignment & Weight
Center, bold, italic, uppercase — all without touching a CSS file.
HTML Headings in Bootstrap
Bootstrap styles all standard HTML heading tags (h1–h6) automatically. Each level has a predefined font size that decreases from h1 (largest) to h6 (smallest). No extra classes are needed — just use the correct HTML tag.
<h1>Heading 1 — Largest (2.5rem)</h1> <h2>Heading 2 — Section (2rem)</h2> <h3>Heading 3 — Subsection (1.75rem)</h3> <h4>Heading 4 — Card Title (1.5rem)</h4> <h5>Heading 5 — Minor (1.25rem)</h5> <h6>Heading 6 — Smallest (1rem)</h6>
You can also apply heading styles to any element using the .h1 through .h6 classes — useful when you need a <p> or <span> to look like a heading without affecting document structure.
<!-- A <p> that looks like an h2 --> <p class="h2">This paragraph looks like an h2</p> <!-- A <span> styled as h5 --> <span class="h5">This span looks like an h5</span>
Display Headings
Display headings are larger, more eye-catching heading styles designed for hero sections, landing pages, and major page titles. They use the display-{1–6} class and have a lighter font weight than regular headings.
<h1 class="display-1">Display 1 — Massive</h1> <h1 class="display-3">Display 3 — Large</h1> <h2 class="display-5">Display 5 — Medium</h2> <h3 class="display-6">Display 6 — Subtle Large</h3>
Lead Paragraph
The lead class makes a paragraph larger and more prominent than regular body text. It sets the font size to 1.25rem with a slightly lighter weight. Use it for article introductions, key takeaways, or any text that should stand out from the body.
<p class="lead"> This is a lead paragraph. It is larger and stands out from regular body text. </p> <p>This is regular body text at the default size.</p>
This is a lead paragraph — larger and bolder than body text.
This is regular paragraph text right below the lead for comparison.
Text Alignment Classes
Bootstrap provides alignment utilities to position text left, center, or right. These classes also support responsive breakpoint prefixes so you can control alignment differently on mobile vs desktop.
<p class="text-start">Left aligned text (default)</p> <p class="text-center">Centered text</p> <p class="text-end">Right aligned text</p> <!-- Responsive: left on mobile, center on md+ screens --> <p class="text-start text-md-center"> Left on mobile, centered on tablet+ </p>
Text Transformation Classes
Text transformation classes change how text is capitalized. The HTML source stays unchanged — only the visual rendering changes. This is useful for buttons, labels, and headings that need consistent casing.
<p class="text-lowercase">MAKE THIS ALL LOWERCASE</p> <!-- Output: make this all lowercase --> <p class="text-uppercase">make this all uppercase</p> <!-- Output: MAKE THIS ALL UPPERCASE --> <p class="text-capitalize">capitalize every word</p> <!-- Output: Capitalize Every Word -->
Text Color Classes
Bootstrap provides semantic color classes for text. Each color has a specific meaning in UI design — using them consistently helps users understand your interface instantly without reading every word.
<p class="text-primary">Primary — links, CTAs, actions</p> <p class="text-success">Success — confirmations, done states</p> <p class="text-danger">Danger — errors, warnings, delete</p> <p class="text-warning">Warning — caution messages</p> <p class="text-info">Info — helpful tips and notices</p> <p class="text-muted">Muted — captions, secondary text</p>
Font Weight and Style Classes
Control how heavy (bold or light) and how styled (italic or normal) your text appears. These utilities let you emphasize content without any custom CSS.
<p class="fw-bold">Bold text — font-weight: 700</p> <p class="fw-semibold">Semibold text — font-weight: 600</p> <p class="fw-normal">Normal text — font-weight: 400</p> <p class="fw-light">Light text — font-weight: 300</p> <p class="fst-italic">Italic text</p> <!-- Combine classes --> <p class="fw-bold fst-italic text-primary"> Bold, italic, and primary colored </p>
Text Decoration Classes
Text decoration classes add or remove visual effects like underlines and strikethroughs. The most common use is removing the default underline from links.
<p class="text-decoration-underline">Underlined text</p> <p class="text-decoration-line-through"> Was ₹999 — strikethrough for old price </p> <!-- Remove default underline from a link --> <a href="#" class="text-decoration-none"> Clean link without underline </a>
Lists and List Styling
Bootstrap provides utility classes to customize how lists look without writing any CSS. The two most useful are list-unstyled to remove bullet points, and list-inline to display list items side by side.
<!-- Remove bullets from a list --> <ul class="list-unstyled"> <li>No bullet here</li> <li>Or here</li> </ul> <!-- Horizontal inline list --> <ul class="list-inline"> <li class="list-inline-item">Home</li> <li class="list-inline-item">About</li> <li class="list-inline-item">Contact</li> </ul>
Blockquotes and Abbreviations
Bootstrap styles blockquote elements for testimonials, pull quotes, and citations. Add the blockquote class to get larger, properly spaced quote text. Use blockquote-footer for the attribution line.
The <abbr> tag with a title attribute displays a dotted underline and shows the full form in a tooltip when hovered — Bootstrap styles this automatically.
<!-- Blockquote with attribution --> <blockquote class="blockquote"> <p>Bootstrap makes responsive design fast and effortless.</p> <footer class="blockquote-footer"> A happy web developer </footer> </blockquote> <!-- Abbreviation tooltip --> <p> <abbr title="HyperText Markup Language">HTML</abbr> is the foundation of every webpage. </p>
Common Mistakes
Display headings (display-1 to display-6) are meant for hero sections and splash pages. Using display-1 inside a regular article paragraph looks out of place and breaks reading flow. Stick to h1–h6 for content hierarchy.
Bootstrap's text-warning is yellow (#ffc107). Yellow on white has very poor contrast and fails accessibility guidelines. If you need warning color on a light background, pair it with a warning background: bg-warning text-dark.
Bold text only stands out when surrounding text is not bold. If you make every paragraph fw-bold, nothing is emphasized — you've just made everything harder to read. Use bold sparingly for truly important words or headings only.
Questions About Bootstrap Typography
Common beginner questions about styling text with Bootstrap: