Learn with us

In Bootstrap 5, the text and typography classes provide various options for styling and formatting text content. Here are some commonly used text and typography classes in Bootstrap 5:

1. .display-1 to .display-6: These classes are used to create display headings of different sizes, with .display-1 being the largest and .display-6 being the smallest.
2. .h1 to .h6: These classes define heading styles from <h1> to <h6>. They provide semantic markup and hierarchy for your headings.
3. .lead: This class adds a larger font size and increased line height to make text stand out, often used for introductory paragraphs.
4. .text-muted: This class sets the text color to a muted or faded gray, commonly used for less prominent or secondary content.
5. .text-primary, .text-secondary, .text-success, .text-danger, .text-warning, .text-info, .text-light, .text-dark: These classes set the text color to predefined Bootstrap contextual colors. They can be used to give text different visual emphasis or meaning based on the context.
6. .text-decoration-none: This class removes any text decoration, such as underline or strikethrough, from the text.
7. .text-nowrap: This class prevents the text from wrapping to the next line, ensuring it remains on a single line.
8. .text-break: This class allows the text to break and wrap onto multiple lines if necessary.
9. .text-uppercase: This class transforms the text to uppercase.
10. .text-lowercase: This class transforms the text to lowercase.
11. .text-capitalize: This class capitalizes the first letter of each word in the text.

These are just a few examples of the text and typography classes available in Bootstrap 5. By applying these classes to your HTML elements, you can easily style and format your text content in a consistent and visually appealing manner. Refer to the official Bootstrap documentation for a comprehensive list of available classes and their usage.

Here are some examples of using Bootstrap 5 text and typography classes:

1. Display Headings:

<h1 class="display-1">Display Heading 1</h1>
<h2 class="display-2">Display Heading 2</h2>
<h3 class="display-3">Display Heading 3</h3>
<h4 class="display-4">Display Heading 4</h4>
<h5 class="display-5">Display Heading 5</h5>
<h6 class="display-6">Display Heading 6</h6>

2. Lead Text:

<p class="lead">This is a lead paragraph. It stands out with larger font size and increased line height.</p>

3. Muted Text:

<p class="text-muted">This text has a muted or faded gray color.</p>

4. Contextual Text Colors:

<p class="text-primary">This text is in primary color.</p>
<p class="text-success">This text is in success color.</p>
<p class="text-danger">This text is in danger color.</p>
<p class="text-warning">This text is in warning color.</p>
<p class="text-info">This text is in info color.</p>
<p class="text-light bg-dark">This text is in light color on a dark background.</p>
<p class="text-dark">This text is in dark color.</p>

5. Text Decoration:

<p class="text-decoration-none">This text has no underline or strikethrough decoration.</p>

6. Text Transformations:

<p class="text-uppercase">This text is in uppercase.</p>
<p class="text-lowercase">This text is in lowercase.</p>
<p class="text-capitalize">This text is capitalized.</p>

These examples demonstrate the usage of various text and typography classes in Bootstrap 5. You can apply these classes to different HTML elements such as headings, paragraphs, or spans to achieve the desired styling and formatting for your text content.