Bootstrap Typography



In the previous chapter we have learnt about the basics of Bootstrap with CSS. In this tutorial we are looking into the Grid system in bootstrap.

1. HTML Heading

All HTML headings, <h1> through <h6>, are available. .h1 through .h6 classes are also available

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

Output :


Bootstrap Heading

2. HTML Heading with Subheading :

Consider the below code –

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

Output :


Bootstrap Heading with sub-heading

3. Lead Body Copy :

For adding some emphasis effect to a paragraph we need to add class=”lead”.It will gives us larger font size, lighter weight, and a taller line height as in the following example:

<h2>Lead Example</h2>
<p class="lead">This is an example of bootstrap for 
demonstrating lead body typography.This is an example 
of bootstrap for demonstrating lead body typography.
This is an example of bootstrap for demonstrating lead 
body typography.This is an example of bootstrap for 
demonstrating lead body typography.</p>

Output :

Lead Example - Bootstrap

4. Emphasis :

<small>Smaller Content</small><br>
<strong>Strong Content</strong><br>
<em>Emp Content</em><br>

<p class="text-left">Left aligned.</p>
<p class="text-center">Center aligned.</p>
<p class="text-right">Right aligned.</p>
<p class="text-muted">Muted Content</p>
<p class="text-primary">Warning class</p>
<p class="text-success">Success class</p>
<p class="text-info">Info class</p>
<p class="text-warning">Warning class</p>
<p class="text-danger">Danger class</p>

Output :

Emphasis - Bootstrap

5. Abbreviations :

  1. The HTML provides markup for abbreviations or acronyms.
  2. Bootstrap is used to styles <abbr> elements with a light dotted bottom border and reveals the full text on hover.
  3. We need to add text to the <abbr> title attribute
<abbr title="Hyper Text Markup Language">HTML</abbr><br>
<abbr title="Java Script Object Notation">JSON</abbr>

Output :

abbr - bootstrap

6. Address :

<address>
  <strong>Google, Inc.</strong><br>
  007 street<br>
  Hydrabad, State Andhra Pradesh<br>
  <abbr title="Phone">P:</abbr> (123) 456-7890
</address>

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

Output :

address - bootstrap

7. Blockquote :

<blockquote>
  <p>
    Our greatest weakness lies in giving up. The most 
certain way to succeed is always to try just one more time.
  </p>
</blockquote>

<blockquote>
  Our greatest weakness lies in giving up. The most 
certain way to succeed is always to try just one more time.
  <small>
    By 
    <cite title="Source Title">
      Thomas Edison
    </cite>
  </small>
</blockquote>

<blockquote class="pull-right">
  Our greatest weakness lies in giving up. The most 
certain way to succeed is always to try just one more time.
  <small>
    By 
    <cite title="Source Title">
      Thomas Edison
    </cite>
  </small>
</blockquote>

Output :

blockquotes - bootstrap

8. List :

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

list - bootstrap