< Bootstrap Tutorial

Bootstrap typography

← Previous Next →

Bootstrap Typography

We will style different typographical elements like headings, paragraphs, blockquotes etc.


We can define all HTML headings, <h1> through <h6> -- In the same way we define in simple HTML document. We can also utilize the heading classes .h1 through .h6 on other elements, if we want to apply the style on element's text same as headings.

Example code is as follows:

<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 code produces the same output as would be produced  by a simple HTML.

We can use the <small> tag or <span> tag with .small class to display the secondary text of any heading in a smaller and lighter variation. The following example demonstrates how this works:

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

The output produced will be as follows:


Bootstrap's global default font-size is 14px, with a line-height of 1.428. This is applied to the <body> and all paragraphs. In addition to that a bottom margin of half their line-height (10px by default) is applied to the all paragraphs i.e. the <p> elements.We can also make a paragraph stand out by just adding the class .lead.

The following demonstrates the use of this class:

<p>This is how a normal paragraph looks like in Bootstrap.</p>
<p class="lead">This is how a paragraph stands out in Bootstrap.</p>

The output will be as follows:


We can also give pretty look to your blockquotes — Just define the blockquotes using the standard <blockquote> element and bootstrap's style sheet will do the rest.

The code doing this is as follows:

     <p>The world is a dangerous place to live; not because of the people who are evil, but because of the people who don't do anything about it.</p>
     <small>by <cite>Albert Einstein</cite></small>


The HTML <abbr> element provides markup for abbreviations or acronyms, like WWW or HTTP. Bootstrap styles <abbr> elements with a light dotted border along the bottom and reveals the full text on hover (as long as we add that text to the <abbr> title attribute). To get a a slightly smaller font size add .initialism to <abbr>.

The code to do this is:

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


Using <address> tag you can display the contact information on your web page. Since the <address> defaults to display: block; we’ll need to use tags to add line breaks to the enclosed address text.

The following example code demonstrates this:

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

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


← Previous Next →