Bootstrap Typography

In Bootstrap, heading from <h1> to <h6> are similar to the default HTML heading and rendered by the browser in the same fashion. Bootstrap provides great flexibility to use his heading classes that is .h1 to .h6 with other HTML elements like <div> if you wish to apply style to other HTML element similar to 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>
<hr>
<div class="h1">h1. Bootstrap heading</div>
<div class="h2">h2. Bootstrap heading</div>
<div class="h3">h3. Bootstrap heading</div>
<div class="h4">h4. Bootstrap heading</div>
<div class="h5">h5. Bootstrap heading</div>
<div class="h6">h6. Bootstrap heading</div>

See Live Example

The above code example will produce below output:

Bootstrap's default font-size is 14px and default line uses height 1.428. This applied to the <body> element of the page, hence applied to all the paragraphs.

Bootstrap Page Headers

Bootstrap gives you great flexibility to work with page header. With Bootstrap If you want to display secondary text in heading, you can still use lt;small> element or you can use <span> element with .small class.

<h1>h1. Bootstrap heading <small>Secondary text</small></h1>
<h2>h2. Bootstrap heading <small>Secondary text</small></h2>
<h3>h3. Bootstrap heading <small>Secondary text</small></h3>
<h4>h4. Bootstrap heading <small>Secondary text</small></h4>
<h5>h5. Bootstrap heading <small>Secondary text</small></h5>
<h6>h6. Bootstrap heading <small>Secondary text</small></h6>
<hr>
<h1>h1. Bootstrap heading <span class="small">Secondary text</span></h1>
<h2>h2. Bootstrap heading <span class="small">Secondary text</span></h2>
<h3>h3. Bootstrap heading <span class="small">Secondary text</span></h3>
<h4>h4. Bootstrap heading <span class="small">Secondary text</span></h4>
<h5>h5. Bootstrap heading <span class="small">Secondary text</span></h5>
<h6>h6. Bootstrap heading <span class="small">Secondary text</span></h6>

See Live Example

The above code example will produce below output:

Bootstrap and <mark>

Similar to HTML <small> element, Bootstrap will style the HTML <mark> element in the following way:

<p>Mark element is used to <mark>highlight</mark> text.</p>

See Live Example

The above code example will produce below output:

Bootstrap and <abbr>

Similar to HTML <mark> element, Bootstrap will style the HTML element in the following way:

<p>The <abbr title="World Trade Organization">WTO</abbr> was founded in 1 Jauary 1995.</p>

See Live Example

The above code example will produce below output:

Bootstrap and <blockquote>

Similar to HTML <mark> element, Bootstrap will style the HTML <blockquote> element in the following way:

<blockquote>
    <p>Bootstrap system, the way to create responsive website layouts. 
	Bootstrap has bunch of classes that support grid layouts 
in the form of row and columns to organize page contents. 
Bootstrap grid system enables to create layout for different 
types of devices like mobile, tablets, laptops and desktops etc. 
Bootstrap's grid system supports up to 12 columns across the page.</p>
    <footer>From techstrikers.com website</footer>
  </blockquote>

See Live Example

The above code example will produce below output:

<blockquote class="blockquote-reverse">
    <p>Bootstrap system, the way to create responsive website layouts. 
	Bootstrap has bunch of classes that support grid layouts 
in the form of row and columns to organize page contents. 
Bootstrap grid system enables to create layout for different 
types of devices like mobile, tablets, laptops and desktops etc. 
Bootstrap's grid system supports up to 12 columns across the page.</p>
    <footer>From techstrikers.com website</footer>
  </blockquote>

See Live Example

The above code example will produce below output:

Bootstrap and <dl>

Similar to HTML <mark> element, Bootstrap will style the HTML <dl> element in the following way:

<dl>
    <dt>Coffee</dt>
    <dd>- black hot drink</dd>
    <dt>Milk</dt>
    <dd>- white cold drink</dd>
  </dl>

See Live Example

The above code example will produce below output:

Bootstrap and <code>

Similar to HTML <mark> element, Bootstrap will style the HTML <code> element in the following way:

<p>HTML elements like <code>span</code>, <code>section</code>, 
and <code>div</code> defines a section in a document.<p>

See Live Example

The above code example will produce below output:

Bootstrap and <kbd>

Similar to HTML <mark> element, Bootstrap will style the HTML <kbd> element in the following way:

<p>Use <kbd>ctrl + c</kbd> to copy selected text.</p>

See Live Example

The above code example will produce below output:

Bootstrap and <pre>

Similar to HTML <mark> element, Bootstrap will style the HTML <pre> element in the following way:

<pre>
This is pre HTML element (used to display code)
rendering with Bootstrap displaying is a fixed-width
font, and it preserves
spaces and line breaks.
</pre>

See Live Example

The above code example will produce below output:

Bootstrap Text Transformation Classes

Bootstrap provides you set of classes to transform the text to lowercase, uppercase or make them capitalize by using .text-lowercase, .text-uppercase and .text-capitalize classes.

<p class="text-lowercase">Bootstrap support to lowercase text using <code>.text-lowercase</code> class.</p>
<p class="text-uppercase">Bootstrap support to uppercase text using <code>.text-uppercase</code> class.</p>
<p class="text-capitalize">Bootstrap support to capitalize text using <code>.text-capitalize</code> class.</p>

See Live Example

The above code example will produce below output:

Bootstrap Text Emphasis Classes

Bootstrap provides you set of classes to show different messages in different colors for example success in green, error in red etc, by using .text-muted, .text-primary, .text-success, .text-info, .text-warning and .text-danger classes.

<p class="text-muted"><b>Muted:</b> This will grayed out the text.</p>
<p class="text-primary"><b>Important:</b> Please read the guidelines carefully and strictly follow them when creating your
submission!</p>
<p class="text-success"><b>Success:</b> Your file has been uploaded successfully.</p>
<p class="text-info"><b>Note:</b> To continue signing in you must agree to the terms and conditions.</p>
<p class="text-warning"><b>Warning:</b> There was a problem with database connection, please contact to Administrator.</p>
<p class="text-danger"><b>Error:</b> An error occurred while inserting data into the database.</p>

See Live Example

The above code example will produce below output:

Bootstrap Text Background Classes

Bootstrap also provides you bunch of classes to show different messages with different background colors, instead of text color for example green backgroun for success, rad background for error message etc. by using .bg-muted, .bg-primary, .bg-success, .bg-info, .bg-warning and .bg-danger classes.

<p class="bg-muted"><b>Muted:</b> This will grayed out the text.</p>
<p class="bg-primary"><b>Important:</b> Please read the guidelines carefully and strictly follow them when creating your
submission!</p>
<p class="bg-success"><b>Success:</b> Your file has been uploaded successfully.</p>
<p class="bg-info"><b>Note:</b> To continue signing in you must agree to the terms and conditions.</p>
<p class="bg-warning"><b>Warning:</b> There was a problem with database connection, please contact to Administrator.</p>
<p class="bg-danger"><b>Error:</b> An error occurred while inserting data into the database.</p>

See Live Example

The above code example will produce below output:

Bootstrap More Typography Classes

Bootstrap has more typography classes given below to style HTML elements further:

Class	Description	Live Demo
.lead	To makes a paragraph stand out	Try Now
.text-left	This indicates left-aligned text	Try Now
.text-center	This indicates center-aligned text	Try Now
.text-right	This indicates right-aligned text	Try Now
.text-justify	Indicates justified text	Try Now
.text-nowrap	This indicates no wrap text	Try Now
.initialism	This displays the text inside an <abbr> element	Try Now
.list-unstyled	This removes the default list-style and left margin on list items	Try Now
.list-inline	This will places all list items on a single line	Try Now
.dl-horizontal	This will lines up the the <dt> and descriptions <dd> in <dl> elements side-by-side.	Try Now
.pre-scrollable	This makes a <pre> element scrollable	Try Now