Bootstrap Typography [ Easy way to formatting text on web]
18-05-2017    520 times
Typography

Bootstrap Typography

Bootstrap Typography is a very simple, easy and customizable typography for headings, body text, lists, and more. We can use the bootstrap built-in classes to avoid the TML attributs or tags, which make our code more attractive.

Heading

In HTML we are use the tag <h1> to <h6> for display different size of heading. But in bootstrap we can alternatively use .h1 to .h6 classes.

<p class="h1">Tutorial At Home</p>
<p class="h2">Tutorial At Home</p>
<p class="h3">Tutorial At Home</p>
<p class="h4">Tutorial At Home</p>
<p class="h5">Tutorial At Home</p>
<p class="h6">Tutorial At Home</p>

Bootstrap Typography Heading
Bootstrap Typography Heading

 

Secondary Heading

We create a secondary heading along with a primary. The secondary heading is a smaller part of the heading.

Tutorial at home

 <p class="h1">Tutorial At Home<small class="text-muted"> - Free Web Tutorial Home</small></p>

Bootstrap Typography Secondary Heading
Bootstrap Typography Secondary Heading

Display Heading

To display heading more prominently we can use .display class.

<h1>Tutorial At Home ( Without Display Class)</h1>
<h1 class="display-1">Tutorial At Home </h1>
<h1 class="display-2">Tutorial At Home</h1>
<h1 class="display-3">Tutorial At Home </h1>
<h1 class="display-4">Tutorial At Home</h1> 

Bootstrap Typography Display Heading
Bootstrap Typography Display Heading

Lead

We can use .lead class to a paragraph for highlighting it.

Tutorial at home

<p>On the Insert tab, the galleries include items that are designed to coordinate with the overall look of your document.<span style="color:red"> - Normal Paragraph</span> </p>

<p class="lead">On the Insert tab, the galleries include items that are designed to coordinate with the overall look of your document.<span style="color:red"> - Lead Paragraph</span> </p>

Bootstrap Lead Paragraph
Bootstrap Lead Paragraph
Tutorial at home
Tutorial at home

 Blockquotes

.blockquotes class is used for block a quote.

Bootstrap Blockquote
Bootstrap Blockquote

<blockquote class="blockquote">
<blockquote class="blockquote">
<p>The important thing is not to stop questioning. Curiosity has its own reason for existence. ….</p>
</blockquote>

<blockquote class="blockquote-reverse">
<p>The important thing is not to stop questioning. Curiosity has its own reason for existence. ……</p>
</blockquote>

<blockquote class="blockquote">
<p>The important thing is not to stop questioning. Curiosity has its own reason for existence. …..</p>
<footer class="blockquote-footer">Albert Einstein</footer>
</blockquote>

Bootstrap Blockquote Footer
Bootstrap Blockquote Footer
softetechnologies
    Author Details
Arnab De
I have over 16 years of experience working as an IT professional, ranging from teaching at my own institute to being a computer faculty at different leading institute across Kolkata. I also work as a web developer and designer, having worked for renowned companies and brand. Through tutorialathome, I wish to share my years of knowledge with the readers.
    Related Post
  Query About the post