Bootstrap Typography

This lesson will teach you how to use Bootstrap to style and structure text content including headers, paragraph, blockquotes, and more.

Working with Headings

In Bootstrap, defining HTML headings (from <h1> to <h6>) is as straightforward as in a regular HTML document. Moreover, you have the option to apply heading styles to other elements using the heading classes .h1 through .h6 if desired.

<div class="m-4">
    <h1>h1. Headings</h1>
    <h2>h2. Headings</h2>
    <h3>h3. Headings</h3>
    <h4>h4. Headings</h4>
    <h5>h5. Headings</h5>
    <h6>h6. Headings</h6>
</div>

Try this code

Customizing Headings

To display secondary text for any heading in a smaller and lighter variation, you can use the <small> tag along with the .text-muted class. Here's an example:

<div class="m-4">
    <h2>
        Great show heading
        <small class="text-muted">the secondary text is fading</small>
    </h2>
</div>

Try this code

Display Headings

Bootstrap also offers display headings that are useful when you want a heading to stand out. Display headings are presented in a larger font size but with a lighter font weight.

There are six different display headings available. Here's an example:

<div class="m-4">
    <h1 class="display-1">Show Headings</h1>
    <h1 class="display-2">Show Headings</h1>
    <h1 class="display-3">Show Headings</h1>
    <h1 class="display-4">Show Headings</h1>
    <h1 class="display-5">Show Headings</h1>
    <h1 class="display-6">Show Headings</h1>
</div>

Try this code

Working with Paragraphs

Bootstrap's default global font-size is 1rem (typically 16px), and its line-height is 1.5 (typically 24px), which is applied to both the <body> element and all <p> elements (paragraphs). Additionally, a margin-bottom of 1rem is applied to all paragraphs.

You can make a paragraph stand out by adding the .lead class to it.

<div class="m-4">
    <p>A typical sentence in Bootstrap look like this.</p>
    <p class="lead">A typical sentence in Bootstrap look like this.</p>
</div>

Try this code

Tip: In CSS, rem stands for root em, and 1rem is equal to the font size of the root element (i.e., the <html> element), which is usually 16px in most browsers by default.

Text Alignment

Text alignment can be easily achieved in Bootstrap using classes for left, right, and center alignment.

<div class="m-4">
    <p class="text-start">Left In all viewing sizes, the content is aligned. </p>
    <p class="text-center">Center In all viewing sizes, the content is aligned.</p>
    <p class="text-end">Right In all viewing sizes, the content is aligned.</p>
</div>

Try this code

Moreover, Bootstrap provides responsive text alignment classes that allow you to align text based on screen size, using the same viewport width breakpoints as the grid system.

<div class="m-4">
    <p class="text-sm-center">Up to and including small size (sm) viewports, content will be centered.</p>
    <p class="text-md-center">For medium-sized (md) viewports and larger, content will be centered.</p>
    <p class="text-lg-center">In large viewports (lg) and larger, content will be centered aligned.</p>
    <p class="text-xl-center">In extra-large (xl) viewports and larger, content will be center aligned.</p>
</div>

Try this code

Text Formatting

You are free to use text formatting tags like <strong>, <i>, and <small> to apply styles like bold, italic, and small, just as you would in a simple HTML page. Here's an example:

<div class="m-4">
    <p><b>This text is bold</b></p>
    <p><code>Code for a computer</code></p>
    <p><em>This text is highlighted.</em></p>
    <p><i>This text is bold.</i></p>
    <p><mark>The highlighted text here</mark></p>
    <p><small>Little text here</small></p>
    <p><strong>Strong text emphasis is used here</strong></p>
    <p>This is <sub>subscripts</sub> and <sup>superscripts</sup></p>
    <p><ins>The document includes this content.</ins></p>
    <p><del>The document has been updated to remove this text.</del></p>
</div>

Try this code

Text Transformation

Additionally, you have the option to transform text in Bootstrap by converting it to lowercase, uppercase, or capitalize the first letter.

<div class="m-4">
    <p class="text-lowercase">I will win definitely but not immediately.</p>
    <p class="text-uppercase">I will win definitely but not immediately.</p>
    <p class="text-capitalize">I will win definitely but not immediately.</p>
</div>

Try this code

Text Coloring

Colors play a crucial role in conveying important information in website design.

Bootstrap provides a variety of emphasis utility classes that can be utilized for specific purposes, such as displaying success messages in green color or warning/error messages in red color, among others.

<div class="m-4">
    <p class="text-primary">Primary:Before continuing, please read the instructions.</p>
    <p class="text-secondary">Secondary: The most recent version no longer includes this functionality.</p>
    <p class="text-success">Success: Your message was successfully delivered.</p>
    <p class="text-info">Info:To finish the sign-up procedure, you must accept the terms and conditions.</p>
    <p class="text-warning">Warning: The network connection you were using had an issue.</p>
    <p class="text-danger">Danger:During sending your data, a mistake was made.</p>
    <p class="text-muted">Muted: This sentence has a grayed-out background.</p>
</div>

Try this code

For a comprehensive understanding of text coloring, background coloring classes, and various other utility classes, refer to the Bootstrap helper classes chapter.

Styling Blockquotes

To enhance the appearance of your blockquotes, you can easily define them using the standard <blockquote> element, and Bootstrap's style sheet will take care of the rest.

<div class="m-4">
	<blockquote class="blockquote">
    	<p>Knowledge is not as vital as imaginations.</p>
	</blockquote>
</div>

Try this code

When attributing quotes, enclose your <blockquote> in a <figure> element and use a <figcaption> or a block-level element (e.g., <p>) with the .blockquote-footer class.

<div class="m-4">
    <figure>
        <blockquote class="blockquote">
            <p>“Learn from yesterday, live for today, hope for tomorrow. The important thing is not to stop questioning.”</p>
        </blockquote>
        <figcaption class="blockquote-footer">by <cite>Albert Einstein</cite></figcaption>
    </figure>
</div>

Try this code

You can also align blockquotes to the right or center by applying the text alignment classes .text-end or .text-center to the <blockquote> or <figure> element.

Truncating Long Text

If you have longer text that needs to be displayed in a single line but there isn't enough space available, you can use the .text-truncate class to truncate the text with an ellipsis. However, it's important to note that the display property value of the element must be set to inline-block or block for this to work correctly.

This feature becomes especially useful when you want to showcase condensed text without compromising on readability. Let's experiment with an example to see how it functions in action.

<div class="m-4">
    <!-- Block level element -->
    <div class="row">
        <div class="col-2 text-truncate">
            I will win definitely but not immediately.
        </div>
    </div>

    <!-- Inline level element -->
    <span class="d-inline-block text-truncate" style="max-width: 100px;">
        I will win definitely but not immediately.
    </span>
</div>

Try this code

Text wrapping and Overflow

The class .text-wrap can be utilized to wrap text within an element by overriding its white-space property, especially when it is set to pre or nowrap, like in Bootstrap badge components.

Similarly, by using the class .text-nowrap, you can stop text from wrapping within an element.

Let's test the following example to grasp its fundamental functionality:

<div class="m-4">
    <div class="badge bg-primary text-wrap" style="width: 6rem;">
        This text will wrap.
    </div>

    <div class="bg-warning text-nowrap mt-4" style="width: 6rem;">
       The content will fill the whole box of the elements.
    </div>
</div>

Try this code

Wrapping Long Word

To prevent long words from disrupting your layout, you can use the class .text-break.

<div class="row">
            <div class="col-2">
                <p class="bg-warning">veryveryveryveryveryveryverylongword</p>
            </div>
        </div>

Try this code

FAQ

What is Bootstrap Typography?

Bootstrap Typography refers to the system of organizing and styling text content in a consistent and visually appealing manner using the Bootstrap framework. It includes a set of CSS classes and styles that help developers create headings, paragraphs, lists, and other textual elements with predefined styles.

How do you create headings using Bootstrap Typography?

To create headings using Bootstrap Typography, you can use the <h1> to <h6> HTML elements along with Bootstrap's corresponding classes. For example, to create a large and bold heading, you can use the class class="h1" for an <h1> element. This applies the appropriate font size and weight styles.

<h1 class="h1">Heading 1</h1>
<h2 class="h2">Heading 2</h2>
<!-- ...and so on -->

What are display headings in Bootstrap?

Display headings are extra-large and bold headings designed to grab the user's attention. They are created using the display-{1-6} classes. These classes increase the font size and weight of the headings to make them stand out.

<h1 class="display-4">Large Heading</h1>

How can you style paragraphs with Bootstrap Typography?

You can style paragraphs using the default Bootstrap classes for text. For instance, you can use the class class="lead" on a paragraph to make it larger and stand out, often used for introductory content or summaries.

<p class="lead">This text is emphasized for importance.</p>

What is the purpose of Bootstrap's utility classes for text manipulation?

Bootstrap provides utility classes that allow you to quickly modify the appearance of text. These classes include text alignment (text-left, text-center, text-right, text-justify), text transformation (text-uppercase, text-lowercase, text-capitalize), and font weight (font-weight-bold, font-weight-normal, etc.).

How can you create lists with Bootstrap Typography?

You can create ordered and unordered lists using the HTML <ul> and <ol> elements, respectively. To style these lists, Bootstrap provides classes like list-unstyled to remove default list styling and list-inline to create horizontal inline lists.

<ul class="list-unstyled">
   <li>Item 1</li>
   <li>Item 2</li>
</ul>

<ul class="list-inline">
   <li class="list-inline-item">Item 1</li>
   <li class="list-inline-item">Item 2</li>
</ul>

What is the purpose of the `blockquote` class in Bootstrap Typography?

The blockquote class is used to style blockquote elements, which are often used to highlight quoted content or testimonials on a webpage. The class adds appropriate margins and styles to enhance the visual presentation of blockquotes.

<blockquote class="blockquote">
   <p>This is a blockquote.</p>
   <footer class="blockquote-footer">- Author</footer>
</blockquote>

How can you handle text alignment in Bootstrap Typography?

Bootstrap offers text alignment classes such as text-left, text-center, text-right, and text-justify. These classes allow you to align your text content as needed within different containers.

<p class="text-left">Left-aligned text.</p>
<p class="text-center">Centered text.</p>
<p class="text-right">Right-aligned text.</p>
<p class="text-justify">Justified text.</p>

What is the purpose of the `display-4` class in Bootstrap Typography?

The display-4 class is used to create the largest and most prominent display heading (usually <h1>). It increases the font size and weight of the text, making it suitable for important page titles or headers.

<p class="lead">This text is emphasized for importance.</p>

How can you customize font sizes using Bootstrap Typography?

Bootstrap provides responsive font size classes such as fs-1 to fs-6 that allow you to adjust font sizes based on the screen size. These classes ensure that text remains legible on various devices.

<p class="fs-1">Font Size 1 (Larger Text)</p>
<p class="fs-6">Font Size 6 (Smaller Text)</p>

How can you create emphasized or highlighted text using Bootstrap?

Bootstrap provides the <mark> HTML element and the class mark to create highlighted or emphasized text. This is often used to draw attention to specific words or phrases within a paragraph.

<p>This is a <span class="mark">highlighted</span> word. It's also <span class="small">smaller</span>.</p>

What is the purpose of the `text-muted` class in Bootstrap Typography?

The text-muted class is used to apply a light gray color to text, indicating that it's less important or subdued. It's often used for metadata, captions, or text that doesn't require immediate attention.

How can you create responsive text in Bootstrap Typography?

Bootstrap's responsive text classes like text-sm, text-md, text-lg, and text-xl allow you to adjust text size based on different breakpoints. This ensures that text remains readable and appropriately sized across various screen sizes.

<p class="text-lg">Large text on larger screens.</p>

What is the purpose of the `text-truncate` class in Bootstrap Typography?

The text-truncate class is used to truncate text that exceeds the width of its container with an ellipsis. This is useful when you have limited space and want to indicate that there's more content.

<p class="text-truncate">This is a long text that gets truncated with an ellipsis.</p>

How can you create text with a primary or contextual color in Bootstrap Typography?

Bootstrap offers contextual text color classes such as text-primary, text-success, text-info, text-warning, and text-danger. Applying these classes changes the color of the text to match the associated contextual color.

<p class="text-primary">Primary-colored text</p>

What is the purpose of the `text-decoration` class in Bootstrap Typography?

The text-decoration class provides options for styling text decorations, such as underlines, overlines, and line-throughs. For example, you can use text-decoration-underline to underline text.

How can you create responsive font-weight using Bootstrap Typography?

Bootstrap's responsive font-weight classes like fw-light, fw-normal, fw-bold, and fw-bolder allow you to adjust font weights based on different breakpoints.

<p class="fw-bold">Bold text</p>

What is the purpose of the `text-break` class in Bootstrap Typography?

The text-break class is used to allow long words and URLs to wrap and break onto the next line, preventing horizontal overflow within their container.

<p class="text-break">ThisIsALongURLThatWrapsAndBreaks</p>

What is the purpose of the `text-nowrap` class in Bootstrap Typography?

The text-nowrap class prevents text from wrapping to the next line, ensuring that it remains on a single line within its container.

<p class="text-nowrap">This text won't wrap.</p>

How can you adjust the letter spacing of text using Bootstrap Typography?

Bootstrap provides classes like tracking-tighter, tracking-tight, tracking-normal, tracking-wide, and tracking-wider to adjust the letter spacing of text.

How can you create justified text using Bootstrap Typography?

Bootstrap's text-justify class is used to create justified text, where both the left and right edges are aligned. This provides a clean and structured appearance to paragraphs.

How can you vertically align text using Bootstrap Typography?

Bootstrap offers vertical alignment classes like align-baseline, align-top, align-middle, align-bottom, and align-text-top, align-text-bottom to control the vertical alignment of text within its containing element.

What is the purpose of the `text-shadow` class in Bootstrap Typography?

The text-shadow class is used to apply shadow effects to text. You can use it to create a subtle or bold shadow behind the text for a visual effect.

Conclusion

Bootstrap provides a robust set of tools and classes for text styling and typography that empower web designers and developers to create visually appealing and user-friendly content. The framework offers extensive options for font styles, text formatting, and customizing text appearance, allowing for responsive text design that caters to a wide range of devices and screen sizes.

With font properties and font classes, Bootstrap offers typography options that cover text elements, ensuring that your content remains readable text that adheres to consistent text alignment and offers various heading styles for a harmonious layout. Bootstrap's commitment to responsive font design enables you to control typeface and their alignment, ensuring that your paragraph styles, and manage text size and color, allowing for responsive typography that responds to different screen sizes.

Furthermore, Bootstrap provides tools to control text alignment, wrapping, and overflow, as well as text transformation effects and truncation. This flexibility allows for typeface customization and adjustable font size and color, ensuring that your text layout and alignment meet your design goals.

You can effectively manage text wrapping and overflow, explore text transformation options, and fine-tune font weight and style, all while maintaining appropriate line height and spacing.