Bootstrap Text Formatting Classes - Bootstrap Tutorial 08

Описание: Notes for You:: Bootstrap Text Formatting Classes - Bootstrap Tutorial 08

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 style="height:100px;"class="pre-scrollable" >
* *
* *
* *
* *
* *
* *
* *
* *
* *
</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>

Complete code:

<p>Some Text</p>
<p class="font-weight-bold">Some Text</p>
<h6 class="font-weight-normal">Some Text</h6>
<p class="font-weight-light">Some Text</p>

<p class="font-italic">Some Text</p>

<p style="text-decoration:underline;">Some Text</p>
<p style="text-decoration:overline;">Some Text</p>
<p style="text-decoration:line-through;">Some Text</p>
<p>Some <u style="text-decoration:none;">Text</u></p>
<p>Some <s style="text-decoration:none;">Text</s></p>

<p class="small">Some Text</p>
<p>Some Text</p>
<p class="lead">Some Text</p>
<p class="mark">Some Text</p>

<pre class="mark pre-scrollable" style="height:50px;">
* *
* *
* *
* *
* *
</pre>

<p>H<sub>2</sub>O</p>
<p>(a+b)<sup>2</sup></p>
<p>Some Text</p>
<p>Some<q>Text</q></p>

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

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

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


Note:
replace < wtih less-than symbol.
replace > with greater-than symbol.

=========================================

Follow the link for next video:
Bootstrap Tutorial 09 - Bootstrap Text Color Classes | Bootstrap Typography
   • Bootstrap Text Color Classes - Bootstrap T...  

Follow the link for previous video:
Bootstrap Tutorial 07 - How to use Popper.js in HTML page
   • How to link Popper.js to HTML page - Boots...  

=========================================

Bootstrap Tutorials Playlist:-
   • Bootstrap4 Tutorials  

=========================================
Watch My Other Useful Tutorials:-

Dreamweaver Tutorials Playlist:-
   • Dreamweaver Tutorials  

PHP Tutorials Playlist:-
   • PHP Tutorials  

=========================================

Subscribe to our YouTube channel:-
   / chidrestechtutorials  

=========================================
Hash Tags:-
#ChidresTechTutorials #Bootstrap #BootstrapTutorial