Bootstrap Text Formatting Classes


Bootstrap Text formatting classes:

font-weight-bold : displays text little bit bold in color
<p class="font-weight-bold">Some text</p>

font-weight-normal : displays text in normal
<h6 class="font-weight-normal">Some text</h6>

font-weight-light : displays text little bit light in color
<p class="font-weight-light">Some text</p>

font-italic : displays text in italic
<p class="font-italic">Some text</p>

text-decoration:underline : displays line under the text
<p style="text-decoration:underline;">Some text</p>

text-decoration:overline : displays line above the text
<p style="text-decoration:overline;">Some text</p>

text-decoration:linethrough : displays line over the text
<p style="text-decoration:line-through;">Some text</p>

text-decoration:none : removes any line from the text
<u style="text-decoration:none;">Home</u><br/>

small : displays text little bit smaller in size
<p class="small">Some text</p>

lead : displays text little bit bigger in size
<p class="lead">Some text</p>

mark : sets the background color to light yellow
<p class="mark">Some text</p>

pre-scrollable : adds scrollbars to pre tag
<pre class="pre-scrollable" style="height:100px;">
* * *
* * *
* * *
* * *
* * *
* * *
* * *
* * *
* * *

<sub></sub> : displays text little bit down

<sup></sup> : displays text little bit up

<q></q> : displays text enclosed in pair of double quotations
<p>Some <q>text</q></p>

display-# : displays text in different sizes
<p class="display-1">Some text</p>
<p class="display-2">Some text</p>
<p class="display-3">Some text</p>
<p class="display-4">Some text</p>

blockquote & blockquote-footer :
blockquote: displays text within it little bit bigger in size
blockquote-footer: prepends the text with --- & displays text little lighter and smaller in size

<div class="blockquote mark">
<p>HTML is a structural Language.</p>
<p class="blockquote-footer"> Tim Berners Lee </p>

Interview Questions: