×
FREE ASSISTANCE FOR THE INQUISITIVE PEOPLE
Tutorial Topics
X
softetechnologies
Bootstrap Image - custom style
Bootstrap Typography [ Easy way to formatting text on web] - Bootstrap 3
1872    Arnab De    18/05/2017

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.

softetechnologies

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

softetechnologies

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

 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
Bootstrap Image - custom style
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.
Enter New Comment
Comment History
No Comment Found Yet.
Swami Vivekananda
If the poor cannot come to education, education must reach them, at the plough, in the bakery factor
Swami Vivekananda
1554
35.58
Today So Far
Total View (Lakh)
softetechnologies
01/01/2018     33880
28/06/2017     30126
26/05/2018     28037
02/08/2017     27820
15/05/2017     23768
25/06/2018     22412
06/07/2017     22314
01/08/2017     22297
21/04/2018     18818
14/07/2017     17248
softetechnologies