Bootstrap comes with predefined classes to arrange, align, highlight and to format the content of web-pages. We will learn how those typography classes are used for formatting the page content properly.

Bootstrap uses normalize.css for browser reset. Browser reset is used to reset the browser's default user-agent stylesheet. Since each browser has its own version of user-agent stylesheet, so to keep the design of site consistent across the browsers, CSS reset is used.

Headings in Bootstrap

Heading tags h1, h2 and h3 have margin-top of 20px and margin-bottom 10px while h4, h5 and h6 has 10px of margin-top and bottom. 

h1 = font-size 36px
h2 = font-size 30px
h3 = font-size 24px
h4 = font-size 18px
h5 = font-size 14px
h6 = font-size 12px

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

So the bootstrap headings look like 

bootstrap headings

We can also add subheading along with headings using <small> tag or .small class

 <h1>Heading1 h1. <small>subheading Heading1 h1</small></h1> 
<h2>Heading2 h2. <small>subheading Heading2 h2</small></h2>
<h3>Heading3 h3. <small>subheading Heading3 h3</small></h3>
<h4>Heading4 h4. <small>subheading Heading4 h4</small></h4>
<h5>Heading5 h5. <small>subheading Heading5 h5</small></h5>
<h6>Heading6 h6. <small>subheading Heading1 h6</small></h6>

bootstrap subheadings

Paragraph and .lead

Bootstrap uses 14px font-size for the body and paragraphps with the line-height of 1.428. 

<p>Lorem ipsum dolor sit amet, eu ius purto argumentum, quidam saperet singulis
ei eos, qui id commodo mediocrem. Eu amet delicatissimi concludaturque usu.
Duo audiam perfecto posidonium at, labores consetetur concludaturque sea et. Cu vis
oratio albucius, eos ad dolor graeci sadipscing, et eum quas illum labore. ridens nusquam
gubergren in, minimum theophrastus comprehensam sea et. Postea utamur invenire ad vim.
Mel persius perfecto explicari eu, facilisi periculis an mea, mucius audiam volumus in usu.
</p>
<p> Usu ullum phaedrum an, mea putent efficiendi theophrastus id, ut ius utamur fastidii
atomorum. No sea tamquam pertinacia, eos ridens graecis expetenda ex, te recusabo expetendis
percipitur sea. Nusquam deterruisset ne mea. Nam an sumo dolorem, quo saepe concludaturque no, sint
tractatos at has. Ex vero molestiae honestatis vix, eam no altera
delicatissimi, ubique latine efficiendi nam id.
</p>

bootstrap paragraph

We can emphaasize the text content of <p> element using .lead class. This will make the text bigger.

<p class = "lead">Integre theophrastus nam ut. Autem explicari vel cu.
Eum eu commodo fuisset similique, mediocrem deseruisse sadipscing ei duo.
Eirmod iisque reformidans nam id, euismod vituperata cu quo, an eius vivendum
instructior eos. Vero prima abhorreant qui ei, ex has etiam quidam vituperatoribus.
</p>

bootstrap lead text

Text Emphasis

Bootstrap comes with the predefined message formatting classes. For example we can use .text-success class to show a success message which is in green or an informatic message with .text-info

Available classes are - .text-muted.text-primary , .text-success.text-info.text-warning and .text-danger

 <p class = "text-muted">text muted</p>
<p class = "text-primary">primary 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>

bootstrap text emphasize

Blockquote and blockquote-reverse

Showing quoted text in bootstrap is very easy. Simply wrap the text inside <blockquote> tag and also we can use <cite> tag for showing source of the quote. You must wrap your <cite> tag inside <small> tag if you wish to make it small in size.

 <blockquote>
<p>Integre theophrastus nam ut. Autem explicari vel cu.
Eum eu commodo fuisset similique, mediocrem deseruisse sadipscing ei duo.
Eirmod iisque reformidans nam id, euismod vituperata cu quo, an eius vivendum
instructior eos.
</p>
<small>by <cite>Unknown</cite></small>
</blockquote>

bootstrap blockquote

As in above example, the default blockquote is left aligned. To make it right aligned we can use class .blockquote-reverse

 <blockquote class='blockquote-reverse'>
<p>Integre theophrastus nam ut. Autem explicari vel cu.
Eum eu commodo fuisset similique, mediocrem deseruisse sadipscing ei duo.
Eirmod iisque reformidans nam id, euismod vituperata cu quo, an eius vivendum
instructior eos.
</p>
<small>by <cite>Unknown</cite></small>
</blockquote>

bootstrap blockquote reverse

Text transformation

Bootstrap has predefined classes for text transformation. Just use the classes to transform the texts. Available classes are .text-lowercase , .text-uppercase and .text-capitalize 

 <p class="text-lowercase">All content is in lowercase.</p>
<p class="text-uppercase">All content is in uppercase.</p>
<p class="text-capitalize">All content is capitalize .</p>

bootstrap text transformation
Text alignment

We can easily align the content using bootstrap classes. Available classes are .text-left , .text-center , .text-right

 <p class="text-left">
<strong>text-left</strong>
Integre theophrastus nam ut. Autem explicari vel cu.
Eum eu commodo fuisset similique, mediocrem deseruisse sadipscing ei duo.
Eirmod iisque reformidans nam id, euismod vituperata cu quo, an eius vivendum instructior eos.
</p>

<p class="text-center">
<strong>text-center</strong>Integre theophrastus nam ut. Autem explicari vel cu.
Eum eu commodo fuisset similique, mediocrem deseruisse sadipscing ei duo.
Eirmod iisque reformidans nam id, euismod vituperata cu quo, an eius vivendum instructior eos.
</p>

<p class="text-right">
<strong>text-right</strong> Integre theophrastus nam ut. Autem explicari vel cu.
Eum eu commodo fuisset similique, mediocrem deseruisse sadipscing ei duo.
Eirmod iisque reformidans nam id, euismod vituperata cu quo, an eius vivendum instructior eos.
</p>

<p class="text-justify">
<strong>text-justify</strong>
Integre theophrastus nam ut. Autem explicari vel cu.
Eum eu commodo fuisset similique, mediocrem deseruisse sadipscing ei duo.
Eirmod iisque reformidans nam id, euismod vituperata cu quo, an eius vivendum instructior eos.
</p>

bootstrap text alignment