Bootstrap Typography

In this tutorial you will learn about the styling and formatting of text content like headings, paragraphs, blockquotes, etc. with Bootstrap.

Working with Headings

You can define all HTML headings, <h1> through <h6> — In the same way you define in simple HTML document. You can also utilize the heading classes .h1 through .h6 on other elements, if you want to apply the style on element's text same as headings.

<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>

— The output of the above example will look something like this:

Customizing Headings

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

    Fancy display heading
    <small class="text-muted">With faded secondary text</small>

— The output of the above example will look something like this:

Display Headings

Bootstrap 4 introduces display headings that can be used when you need a heading to stand out. Display headings are displayed in larger font-size but lighter font-weight.

Four different display headings are available. Here's is an example:

<h1 class="display-1">Display Heading 1</h1>
<h1 class="display-2">Display Heading 2</h1>
<h1 class="display-3">Display Heading 3</h1>
<h1 class="display-4">Display Heading 4</h1>

— The output of the above example will look something like this:

Working with Paragraphs

Bootstrap's global default font-size is 1rem (typically 16px), with a line-height of 1.5 (typically 24px), which is applied to the <body> element as well as all the paragraphs i.e. the <p> elements. In addition to that margin-bottom of 1rem is also applied to all the paragraphs.

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

<p>This is how a normal paragraph looks like in Bootstrap.</p>
<p class="lead">This is how a paragraph stands out in Bootstrap.</p>

— The HTML code in the above examples will produce the following result:

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

Text Alignment

You can easily align text left, right, and center inside a paragraph using the text alignment classes.

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

You can also align text based on screen size using the responsive text alignment classes. These classes use the same viewport width breakpoints as the grid system.

<p class="text-sm-left">Text aligned to left on small or wider viewports.</p>
<p class="text-md-left">Text aligned to left on medium or wider viewports.</p>
<p class="text-lg-left">Text aligned to left on large or wider viewports.</p>
<p class="text-xl-left">Text aligned to left on extra-large or wider viewports.</p>

Text Formatting

You are free to use text formatting tags like <strong>, <i>, <small> to make your text bold, italic, small and so on, in the same way you do in simple HTML page.

<p><b>This is bold text</b></p>
<p><code>This is computer code</code></p>
<p><em>This is emphasized text</em></p>
<p><i>This is italic text</i></p>
<p><mark>This is highlighted text</mark></p>
<p><small>This is small text</small></p>
<p><strong>This is strongly emphasized text</strong></p>
<p>This is <sub>subscript</sub> and <sup>superscript</sup></p>
<p><ins>This text is inserted to the document</ins></p>
<p><del>This text is deleted from the document</del></p>

— The output of the above example will look something like this:

Text Transformation

You can also transform the text to lowercase, uppercase or make them capitalize.

<p class="text-lowercase">The quick brown fox jumps over the lazy dog.</p>
<p class="text-uppercase">The quick brown fox jumps over the lazy dog.</p>
<p class="text-capitalize">The quick brown fox jumps over the lazy dog.</p>

— The output of the above example will look something like this:

Text Coloring

Colors are the powerful method of conveying important information in website design.

Bootstrap has handful of emphasis utility classes that can be used for this purpose such as showing success message in green color, warning or error message in red color, etc.

<p class="text-primary">Primary: Please read the instructions carefully before proceeding.</p>
<p class="text-secondary">Secondary: This is featured has been removed from the latest version.</p>
<p class="text-success">Success: Your message has been sent successfully.</p>
<p class="text-info">Info: You must agree with the terms and conditions to complete the sign up process.</p>
<p class="text-warning">Warning: There was a problem with your network connection.</p>
<p class="text-danger">Danger: An error has been occurred while submitting your data.</p>
<p class="text-muted">Muted: This paragraph of text is grayed out.</p>

— The output of the above example will look something like this:

Please, check out the Bootstrap helper classes chapter to learn about other text coloring and background coloring classes, as well as various other utility classes.

Styling Blockquotes

You can also give pretty look to your blockquotes — Just define the blockquotes using the standard <blockquote> element and bootstrap's style sheet will do the rest.

Moreover, for identifying the source you can add a <footer> element with class .blockquote-footer, and wrap the name of the source work in <cite>, like this:

<blockquote class="blockquote">
    <p class="mb-0">The world is a dangerous place to live; not because of the people who are evil, but because of the people who don't do anything about it.</p>
    <footer class="blockquote-footer">by <cite>Albert Einstein</cite></footer>

— The output of the above example will look something like this:

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

Truncating Long Text

For longer text, you can use the class .text-truncate to truncate the text with an ellipsis. The display property value of the element must be inline-block or block.

It is particularly helpful in a situation where you want to display a piece of text in a single line but there is no enough space available. Let's see how it actually works:

<!-- Block level element -->
<div class="row">
    <div class="col-2 text-truncate">
        The quick brown fox jumps over the lazy dog.

<!-- Inline level element -->
<span class="d-inline-block text-truncate" style="max-width: 100px;">
    The quick brown fox jumps over the lazy dog.

Wrapping Long Word

You can use the class .text-break to prevent long word from breaking your layout.

Let's try out the following example to understand how it basically works:

<div class="row">
    <div class="col-2">
        <p class="text-break">veryveryveryveryveryveryverylongword</p>
Bootstrap UI Design Templates