You Are Here

Bootstrap 4 Typography

Typography is a feature of Bootstrap for styling and formatting the text content like headings, paragraphs, blockquotes, etc. Now learn each one of these typography classes in the following.

Headings:

You can define all HTML headings, <h1> to <h6> in the same way you define in simple HTML document.

Example:

<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>
Try it
By using .h1 to h6 bootstrap classes, you can match the font styling of a heading without using the associated HTML element.

Example:

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

Sub-Headings:

You can create a sub-heading or secondary text by placing text inside a <small> element within the heading or add .small class.

Example:

<h1> h1 Bootstrap heading <small> Sub-heading </small> </h1>
<h2> h2 Bootstrap heading <small> Sub-heading </small> </h2>
<h3> h3 Bootstrap heading <small> Sub-heading </small> </h3>
<h4> h4 Bootstrap heading <small> Sub-heading </small> </h4>
<h5> h5 Bootstrap heading <small> Sub-heading </small> </h5>
<h6> h6 Bootstrap heading <small> Sub-heading </small> </h6>
Try it

Display Headings:

Display headings are designed to create better headings i.e. larger font-size and lighter font-weight. There are four classes exists in display headings which are .display-1, .display-2, .display-3, and .display-4.

Example:

<h1 class="display-1"> h1 Bootstrap heading </h1>
<h1 class="display-2"> h2 Bootstrap heading </h1>
<h1 class="display-3"> h3 Bootstrap heading </h1>
<h1 class="display-4"> h4 Bootstrap heading </h1>
Try it

Lead Text:

By using .lead class, you can make a paragraph stand out such as larger font size, lighter weight, and taller line-height.

Example:

<p> This is a normal paragraph in Bootstrap. </p>
<p class="lead"> This is paragraph stands out in Bootstrap. </p>
Try it

Marked Text:

The HTML <mark> element represents text as marked or highlighted for reference purposes.

Example:

<p>This paragraph has <mark> mark text </mark>.</p>
Try it

Abbreviations:

The HTML <abbr> represents an abbreviation or acronym. The title attribute can be used to provide an expansion of the abbreviation. In Bootstrap, <abbr> element with a light dotted bottom border and a help cursor on hover.

Example:

<abbr title = "World Wide Web"> WWW </abbr>
Try it

Blockquotes:

To apply Bootstrap’s styles to the <blockquote> element, use the .blockquote class. The .blockquote-footer class is used to add the footer details for identifying the source of the quote.

Example:

<div class="container">
<blockquote class="blockquote">
<p> This is blockquote example. This is blockquote example. This is blockquote example. This is blockquote example. This is blockquote example. This is blockquote example. This is blockquote example. </p>
<footer class="blockquote-footer"> by Albert Einstein </footer>
</blockquote>
</div>
Try it

Lists:

The bootstrap supports ordered lists, unordered lists, and definition lists. It applies various styles and has several classes specifically for lists.

Lists — Unstyled

By using .list-unstyled class, you can render lists without their default list-style and left-margin.

Example:

<ul class="list-unstyled">
<li> List1 </li>
<li> List2 </li>
<li> List3 </li>
<li> List4 </li>
</ul>
Try it

Lists — Inline

By using .list-inline and .list-inline-item classes, you can render lists as display: inline-block.

Example:

<ul class="list-inline">
<li class="list-inline-item"> List1 </li>
<li class="list-inline-item"> List2 </li>
<li class="list-inline-item"> List3 </li>
<li class="list-inline-item"> List4 </li>
</ul>
Try it

Definition List

Example:

<dl>
<dt> Description 1 </dt>
<dd> Item 1 </dd>
<dt> Description 2 </dt>
<dd> Item 2 </dd>
</dl>
Try it

Horizontal Definition List

By using .dl-horizontal class, you can make the definition list horizontally.

Example:

<dl class = "dl-horizontal">
<dt> Description 1 </dt>
<dd> Item 1 </dd>
<dt> Description 2 </dt>
<dd> Item 2 </dd>
</dl>
Try it

Code:

In Bootstrap, the <code> element is worked as follows:

Example:

This <code> bootstrap 4 </code> tutorial is very useful.
Try it

Preformatted Text:

Example:

<pre>

This content has been

formatted

using the HTML

pre tag.

</pre>
Try it

Keyboard Input:

In Bootstrap, the <kbd> element is worked like this:

Example:

<p> Use <kbd> ctrl + s </kbd> to open the save dialog box. </p>
Try it

Variables:

In Bootstrap, the <var> element is worked like this:

Example:

<var> E </var> = <var> m </var> <var> c </var> <sup> 2 </sup>
Try it

Other Typography Classes:

Class Description
.text-left This class is used to set the left alignment of text.
.text-right This class is used to set the right alignment of text.
.text-center This class is used to set the center alignment of text.
.font-weight-bold This class is used to sets the font weight to bold. It is used to display the importance of text.
.font-weight-bolder This class is used to sets the font weight to deep bold. It is used to display the importance of text.
.font-italic This class is used to sets the font style italic.
.text-uppercase This class is used to transform text into uppercase.
.text-lowercase This class is used to transform text into lowercase.
.text-capitalize This class is used to transform text to capitalize first letter of each word.
.text-nowrap This class Indicates no wrap text.
.text-reset By using this class resets the color of a text or a link.
.text-justify Indicates justified text.
.text-decoration-none Removes the underline from a link.
.font-weight-light Light weight text.
.font-weight-lighter Lighter weight text.
.initialism Displays the text inside an element in a slightly smaller font size.
.pre-scrollable This class makes a <pre> element scrollable

Ask a Question

Your email address will not be published. Required fields are marked *