Bootstrap Typography

Bootstrap sets some standards on typography by changing the way headings, paragraphs and lists get displayed. By default, the bootstrap will use a font size of 1rem (16px) and the line height is 1.5.

 

From bootstrap 4 onwards using default web fonts (Helvetica Neue, Helvetica, and Arial) has been dropped. Instead, the bootstrap 4 is using “native font stack” to render the text by selecting the best font-family for each OS and device.

 

Let’s see the styling for each element in bootstrap.

Bootstrap Headings

The headings in Bootstrap will use the HTML headings <h1> to <h6>.

 

Live Preview

<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 above bootstrap example will return the result like as shown below.

 

Bootstrap headings example result

The bootstrap has provided the heading classes .h1 through .h6 to apply the same headings style on other elements.

 

Following is the example of using headings classes (.h1 through .h6) on paragraph (<p>) tags to achieve the same headings style.

 

<p class="h1">h1. Bootstrap heading</p>

<p class="h2">h2. Bootstrap heading</p>

<p class="h3">h3. Bootstrap heading</p>

<p class="h4">h4. Bootstrap heading</p>

<p class="h5">h5. Bootstrap heading</p>

<p class="h6">h6. Bootstrap heading</p>

The above bootstrap example will return the result like as shown below.

 

Bootstrap headings example result

Bootstrap Customize Headings

In bootstrap, we can use the <small> tag with .text-muted class to display the small secondary text in any heading like as shown below.

 

Live Preview

<h1>Heading1 <small class="text-muted">Small text</small></h1>

<h2>Heading2 <small class="text-muted">Small text</small></h2>

<h3>Heading3 <small class="text-muted">Small text</small></h3>

<h4>Heading4 <small class="text-muted">Small text</small></h4>

<h5>Heading5 <small class="text-muted">Small text</small></h5>

<h6>Heading6 <small class="text-muted">Small text</small></h6>

The above bootstrap example will return the result like as shown below.

 

Bootstrap customized headings example result

Bootstrap Display Headings

Bootstrap 4 has introduced display headings to show the headings with larger font-size and lighter font-weight. The display headings are useful when you need a heading to stand out.

 

Following are the four different type of display headings available in bootstrap 4.

 

Live Preview

<h1 class="display-1">Display 1</h1>

<h1 class="display-2">Display 2</h2>

<h1 class="display-3">Display 3</h3>

<h1 class="display-4">Display 4</h4>

The above bootstrap example will return the result like as shown below.

 

Bootstrap Display Headings Example Result

 

You need to remember that the display headings are not responsive by default.

Bootstrap Paragraphs

As discussed, the Bootstrap’s default font size is 1rem (16px) and line-height is 1.5. This size is for the HTML body, as well as for paragraphs assigned with <p> tag. Also, the paragraphs have a bottom margin 1rem (16px) by default.

 

Following is the basic example of creating paragraphs with sample text in bootstrap.

 

Live Preview

<div class="container">

<h3>The following text is a body text</h3>

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>

<p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>

</div>

The above example will return the result like as shown below.

 

Bootstrap paragraphs example result 

If you observe the above result, by default bootstrap applied 1rem (16px) font-size and it applied font-family dynamically.

 

In bootstrap, we can make paragraphs (<p>) stand out by adding .lead class like as shown below.

 

<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>

<p class="lead">It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>

The above example will return the result like as shown below.

 

Bootstrap paragraphs with lead example result

 

If you observe the above result, we made a paragraph stand out by applying .lead class in bootstrap.

Bootstrap Text Formatting

In bootstrap, we can format or style the text in different ways same like we do in HTML by applying the different tags like <mark>, <del>, <ins>, etc. like as shown below.

 

Live Preview

<div class="container">

    <p><mark>This is Marked Text</mark></p>

    <p><del>This text is a deleted text</del></p>

    <p><s>This text is a strikethrough text</s></p>

    <p><ins>This text is an inserted text in doc</ins></p>

    <p><u>It's a underlined text</u></p>

    <p><small>It's a small text</small></p>

    <p><strong>It's a bold text</strong></p>

    <p><em>Its Italics text</em></p>

    <p><em>Its <sub>subscript</sub> text and <sup>superscript</sup> text</em></p>

</div>

The above example will format the text elements and return the result like as shown below.

 

Bootstrap text formatting example result

Bootstrap Text Alignment

In bootstrap, we have different classes like .text-left, .text-center, .text-right, etc. available to align the text based on our requirements.

 

Following is the example of using different text alignment classes to change the alignment of text.

 

Live Preview

<div class="container">

    <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>

    <p class="text-nowrap">No wrap text.</p>

</div>

The above example will return the result like as shown below.

 

Bootstrap text alignment example result

Bootstrap Text Transformation

In bootstrap, we can transform the text from lowercase to uppercase or capitalized by using .text-lowercase, .text-uppercase, .text-capitalize like as shown below.

 

Live Preview

<div class="container">

    <p class="text-lowercase">Lower Case Text</p>

    <p class="text-uppercase">Upper case text</p>

    <p class="text-capitalize">Capitalized text</p>

</div>

The above example will return the result like as shown below.

 

lower case text

UPPER CASE TEXT

Capitalized Text

Bootstrap Abbreviations

The bootstrap will style the HTML <abbr> element with a dotted border bottom along with the default style of underline and help cursor to provide the additional context on hover.

 

Following is the example of HTML <abbr> element for abbreviations in bootstrap.

 

Live Preview

<div class="container">

    <p><abbr title="One stop lane for tutorials">Tutlane.com</abbr></p>

    <p><abbr title="Bootstrap is a CSS/JS Framework">Bootstrap Tutorial</abbr></p>

</div>

The above example will return the result like as shown below.

 

Bootstrap abbreviations example result

Bootstrap Blockquotes

In bootstrap, we can style the quoting blocks from other sources by wrapping the quotes content with <blockquote class=”blockquote”> element like as shown below.

 

Live Preview

<div class="container">

    <blockquote class="blockquote">

        <p class="mb-0">One day a man said to another: bla bla bla bla bla! Really? Yeah!</p>

    </blockquote>

</div>

The above example will return the result like as shown below.

 

One day a man said to another: bla bla bla bla bla! Really? Yeah!

In case, if you want to add the source of quote, we can do it by adding <footer> element with .blockquote-footer class and wrap the name of the source in <cite> element like as shown below.

 

Live Preview

<blockquote class="blockquote">

    <p class="mb-0">One day a man said to another: bla bla bla bla bla! Really? Yeah!</p>

    <footer class="blockquote-footer">Famous <cite title="Source Title">Source Title</cite></footer>

</blockquote>

The above example will return the result like as shown below.

 

Bootstrap blockquotes example result

 

Even, we can change the block quote align either to left, right, or center by applying .text-left, .text-center, .text-right classes on <blockquote> element. 

 
 

NEXT

Bootstrap Lists