Bootstrap Text Formatting Classes
Notes:
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;">
* * *
* * *
* * *
* * *
* * *
* * *
* * *
* * *
* * *
</pre>
<sub></sub> : displays text little bit down
<p>H<sub>2</sub>O</p>
<sup></sup> : displays text little bit up
<p>(a+b)<sup>2</sup></p>
<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>
</div>
Interview Questions: