Bootstrap | Typography

Hello folks! welcome back to a new edition of our tutorial on Bootstrap. In this tutorial guide, we will be studying about Bootstrap Typography.

Bootstrap framework uses Helvetica Neue, Helvetica, Arial, and sans-serif in it's default font stack. Using the typography feature of Bootstrap, you can create paragraphs, lists, headings and other inline elements. Let us study about each of these elements in the following sections.

Headings

All headings in HTML(h1 to h6) are styled in Bootstrap.

Example

Following below is a simple example -

<h1>I'm Heading1 h1</h1>
<h2>I'm Heading2 h2</h2>
<h3>I'm Heading3 h3</h3>
<h4>I'm Heading4 h4</h4>
<h5>I'm Heading5 h5</h5>
<h6>I'm Heading6 h6</h6>

Output

When the above example is executed, it will produce the following result -

I'm Heading1 h1
I'm Heading2 h2
I'm Heading3 h3
I'm Heading4 h4
I'm Heading5 h5
I'm Heading6 h6

READ: Bootstrap | CSS Overview

Inline Subheadings

In order to add an inline subheading to any of the headings, simply add <small> around any of the elements or add .small class and you will get smaller text in a lighter color.

Example

Following below is a simple example -

<h1>I'm Heading1 h1. <small>I'm secondary Heading1 h1</small></h1> 
<h2>I'm Heading2 h2. <small>I'm secondary Heading2 h2</small></h2>
<h3>I'm Heading3 h3. <small>I'm secondary Heading3 h3</small></h3>
<h4>I'm Heading4 h4. <small>I'm secondary Heading4 h4</small></h4>
<h5>I'm Heading5 h5. <small>I'm secondary Heading5 h5</small></h5>
<h6>I'm Heading6 h6. <small>I'm secondary Heading1 h6</small></h6>

Output

When the above example is executed, it will produce the following result -

I'm Heading1 h1. I'm secondary Heading1 h1
I'm Heading2 h2. I'm secondary Heading2 h2
I'm Heading3 h3. I'm secondary Heading3 h3
I'm Heading4 h4. I'm secondary Heading4 h4
I'm Heading5 h5. I'm secondary Heading5 h5
I'm Heading6 h6. I'm secondary Heading1 h6

Lead Body Copy

To add some emphasis to a paragraph, add class = "lead". This gives you a larger font size, lighter weight, and a taller line height.

Example

Following below is a simple example -

<h2>Lead Example</h2>
<p class = "lead">This is an example paragraph demonstrating 
   the use of lead body copy. This is an example paragraph 
   demonstrating the use of lead body copy.This is an example 
   paragraph demonstrating the use of lead body copy.This is an 
   example paragraph demonstrating the use of lead body copy.
   This is an example paragraph demonstrating the use of lead body copy.</p>

Output

When the above example is executed, it will produce the following result -

Lead Example
This is an example paragraph demonstrating the use of lead body copy. This is an 
example paragraph demonstrating the use of lead body copy.This is an example 
paragraph demonstrating the use of lead body copy.This is an example paragraph 
demonstrating the use of lead body copy.This is an example paragraph 
demonstrating the use of lead body copy.

READ: Bootstrap | Grid System

Emphasis

The HTML'S default emphasis tags such as <small> can set a text at 85% the size of the parent, <strong> can emphasize a text with heavier font-weight, and <em> emphasizes a text in italics.

Example

Bootstrap offers a few classes that can be used to provide emphasis on texts as seen in the below example -

<small>This content is within tag</small><br>
<strong>This content is within tag</strong><br>
<em>This content is within tag and is rendered as italics</em><br>

<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-muted">This content is muted</p>
<p class = "text-primary">This content carries a primary class</p>
<p class = "text-success">This content carries a success class</p>
<p class = "text-info">This content carries a info class</p>
<p class = "text-warning">This content carries a warning class</p>
<p class = "text-danger">This content carries a danger class</p>

Output

When the above example is executed, it will produce the following result -

This content is within tag
This content is within tag
This content is within tag and is rendered as italics
Left aligned text.
Center aligned text.
Right aligned text.
This content is muted
This content carries a primary class
This content carries a success class
This content carries a info class
This content carries a warning class
This content carries a danger class

Abbreviations

HTML <abbr> element provides markup for abbreviations or acronyms, like CSS or RSS. Bootstrap styles the <abbr> elements with a light dotted border along the bottom and reveals the full text on hover (provided you add that text to the <abbr> title attribute). In order to get a slightly smaller font size, then add .initialism to <abbr>.

Example

Following below is a simple example -

<abbr title = "World Wide Web">WWW</abbr><br>
<abbr title = "Real Simple Syndication" class = "initialism">RSS</abbr>

Output

When the above example is executed, it will produce the following result -

WWW
RSS

Addresses

Using the <address> tag you can show the contact information on your website. Since the <address> tag defaults to display: block; you will need to use tags to add line breaks to the enclosed address text.

Example

Following below is a simple example -

<address>
   <strong>Some Company, Inc.</strong><br>
   007 street<br>
   Some City, State XXXXX<br>
   <abbr title = "Phone">P:</abbr> (123) 456-7890
</address>

<address>
   <strong>Full Name</strong><br>
   <a href = "mailto:#">mailto@somedomain.com</a>
</address>

Output

When the above example is executed, it will produce the following result -

Some Company, Inc.
007 street
Some City, State XXXXX
P: (123) 456-7890
Full Name
mailto@somedomain.com

READ: Bootstrap | Environment Setup

Blockquotes

The default <blockquote> can be made use of around any HtML text. Other options are, adding a <small> tag to identify the quote source and right-aligning the <blockquote> using the .pull-right class.

Example

Following example below demonstrates all these features -

<blockquote>
   <p>This is a default blockquote example. This is a default 
      blockquote example. This is a default blockquote 
      example.This is a default blockquote example. This is a 
      default blockquote example.</p>
</blockquote>

<blockquote>
   This is a blockquote with a source title.
   <small>Someone famous in <cite title = "Source Title">Source Title</cite></small>
</blockquote>

<blockquote class = "pull-right">This is a blockquote aligned to the right.
   <small>Someone famous in <cite title = "Source Title">Source Title</cite></small>
</blockquote>

Output

When the above example is executed, it will produce the following result -

This is a default blockquote example. This is a default blockquote example. This is a default blockquote example.This is a default blockquote example. This is a default blockquote example.
This is a blockquote with a source title.Someone famous in Source Title
This is a blockquote aligned to the right.Someone famous in Source Title -

Lists

Bootstrap supports ordered lists, unordered lists and definition lists.

• Ordered lists - An ordered list is a list that falls in some sort of sequential order and is prefaced by numbers.

• Unordered lists - An unordered list is a list that doesn't have any particular order and is traditionally styled with bullets. If you do not want the bullets to display, you can remove the styling by making use of .list-unstyled class. You can also place all list items on a single line using the .list-inline class.

• Definition lists - In this type of list, each of the list item consists of both the <dt> and <dd> elements. <dt> is an acronym for definition term, and like a dictionary, this is the term that is being defined. Subsequently <dd> is the definition of <dt>. 

Example

Following below is a simple example -

<h4>Example of Ordered List</h4>
<ol>
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
   <li>Item 4</li>
</ol>

<h4>Example of UnOrdered List</h4>

<ul>
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
   <li>Item 4</li>
</ul>

<h4>Example of Unstyled List</h4>

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

<h4>Example of Inline List</h4>

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

<h4>Example of Definition List</h4>

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

<h4>Example of Horizontal Definition List</h4>

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

Output

When the above example is executed, it will produce the following result -

Example of Ordered List
Item 1
Item 2
Item 3
Item 4
Example of UnOrdered List
Item 1
Item 2
Item 3
Item 4
Example of Unstyled List
Item 1
Item 2
Item 3
Item 4
Example of Inline List
Item 1
 
Item 2
 
Item 3
 
Item 4
Example of Definition List
Description 1
Item 1
Description 2
Item 2
Example of Horizontal Definition List
Description 1
Item 1
Description 2
Item 2

READ: Bootstrap | Introduction

Alright guys! This is where we are going to be rounding up for this tutorial. In our next tutorial guide, we are going to be studying about the Bootstrap Code.

Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.

Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.

Thanks for reading and bye for now.