Typography is a crucial element of web design, and Bootstrap 3 offers a variety of pre-defined CSS classes to style text quickly and consistently. From text alignment to contextual color classes, Bootstrap simplifies text styling while ensuring responsiveness and compatibility.
In this guide, we’ll explore all the Bootstrap 3 typography classes, their descriptions, and examples, so you can create beautiful and user-friendly designs.
For more Bootstrap resources, visit TheCodingCollege.com.
1. Text Alignment Classes
These classes control the alignment of text in your designs.
| Class | Description |
|---|---|
.text-left | Aligns text to the left. |
.text-right | Aligns text to the right. |
.text-center | Centers text horizontally. |
.text-justify | Justifies text. |
.text-nowrap | Prevents text from wrapping. |
Example:
<p class="text-left">This text is left-aligned.</p>
<p class="text-center">This text is center-aligned.</p>
<p class="text-right">This text is right-aligned.</p>2. Text Transformation Classes
Transform text to uppercase, lowercase, or capitalize it easily.
| Class | Description |
|---|---|
.text-lowercase | Converts text to lowercase. |
.text-uppercase | Converts text to uppercase. |
.text-capitalize | Capitalizes the first letter of each word. |
Example:
<p class="text-lowercase">this text is lowercase.</p>
<p class="text-uppercase">this text is uppercase.</p>
<p class="text-capitalize">this text is capitalized.</p>3. Contextual Text Colors
Use contextual text color classes to style text according to specific themes.
| Class | Description |
|---|---|
.text-muted | Applies muted gray text color. |
.text-primary | Applies the primary theme color. |
.text-success | Applies green (success) color. |
.text-info | Applies blue (info) color. |
.text-warning | Applies yellow (warning) color. |
.text-danger | Applies red (danger) color. |
Example:
<p class="text-muted">This text is muted.</p>
<p class="text-primary">This text is primary.</p>
<p class="text-success">This text indicates success.</p>
<p class="text-danger">This text indicates danger.</p>4. Font Weight and Emphasis
Bootstrap provides classes for bold, italic, and small text.
| Class | Description |
|---|---|
<strong> | Makes text bold. |
<em> | Emphasizes text (italic). |
.small | Reduces font size for smaller text. |
.mark | Highlights text (yellow). |
<abbr> | Abbreviates with a dotted underline. |
Example:
<p>This is <strong>bold</strong> text.</p>
<p>This is <em>italicized</em> text.</p>
<p><small>This is small text.</small></p>
<p>This is <mark>highlighted</mark> text.</p>
<p><abbr title="Hypertext Markup Language">HTML</abbr> is fun!</p>5. Lead Paragraph
The .lead class is used to make a paragraph stand out with larger font and increased line spacing.
Example:
<p class="lead">This is a lead paragraph that draws attention.</p>
<p>This is a regular paragraph for comparison.</p>6. Lists
Bootstrap supports styled lists and inline lists for organized content.
Unordered List
Adds default styles to lists.
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>Inline List
For horizontal list items.
<ul class="list-inline">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>Description List
For key-value style information.
<dl>
<dt>Term</dt>
<dd>Definition of the term.</dd>
</dl>7. Blockquote
The blockquote element is styled beautifully in Bootstrap.
Example:
<blockquote>
<p>This is a blockquote example.</p>
<footer>— Author</footer>
</blockquote>8. Text Overflow
Control text overflow and prevent wrapping using .text-overflow utilities.
| Class | Description |
|---|---|
.text-nowrap | Prevents text from wrapping. |
.text-truncate | Truncates text with ellipses. |
Example:
<div class="text-nowrap">
This is a very long line of text that will not wrap.
</div>
<div class="text-truncate" style="max-width: 150px;">
This is a very long line of text that will truncate.
</div>9. Code Styling
Bootstrap provides simple classes for inline and block-level code.
| Class | Description |
|---|---|
<code> | Styles inline code snippets. |
<pre> | Styles block-level code. |
.pre-scrollable | Makes a <pre> block scrollable. |
Example:
<p>Use <code>this code</code> to style inline code.</p>
<pre>
<code>
# This is block-level code
print("Hello, Bootstrap!")
</code>
</pre>Conclusion
Bootstrap 3 provides a robust set of typography classes to help you style text efficiently and consistently. Whether it’s aligning text, adding contextual colors, or styling code snippets, these classes save time and enhance your design.