Typography plays a vital role in user experience and visual hierarchy. Bootstrap provides a rich set of predefined typography styles to ensure your text is readable, responsive, and visually consistent across all devices.
Whether it’s headings, paragraphs, blockquotes, or inline elements, Bootstrap helps you style your content without writing custom CSS.
Headings
Bootstrap supports all six HTML heading tags (<h1> through <h6>) and styles them with consistent spacing and font weights.
You can also use .h1 to .h6 classes on other elements (like <div> or <span>) to apply heading styles without changing the tag.
Display Headings
For a larger, more prominent title, use display classes:
These are useful for hero sections, banners, or marketing pages.
Paragraphs & Lead Text
Bootstrap styles paragraphs with margin-bottom by default for spacing.
Use .lead for introductory or attention-catching text.
Text Alignment & Transform
Bootstrap includes utility classes to align and transform text:
Text Alignment:
Text Transform:
Text Colors & Backgrounds
You can apply Bootstrap’s contextual color classes:
And for contrast, background utility classes:
Blockquotes
For quotations or testimonials, use the .blockquote class:
Inline Text Elements
Bootstrap supports standard inline tags and classes:
-
<mark>: Highlighted text -
<del>: Deleted text -
<ins>: Inserted text -
<small>: Smaller text -
<strong>: Bold text -
<em>: Italicized text
Example:
✅ Conclusion
Typography in Bootstrap is clean, flexible, and easy to customize. It provides everything from scalable headings and responsive text to colored, aligned, and styled content. Mastering these basics helps set the tone and readability of your website.
