Suggested Video Tutorials
Part 7 - Bootstrap image gallery
Part 8 - Bootstrap 3 responsive utility classes
Part 9 - Bootstrap typography
In this video we will discuss working with paragraph elements and inline text.
The following are the global defaults applied to the <body> and all paragraph <p> elements. In addition, paragraphs receive a bottom margin of half their computed line-height (10px by default).
Bootstrap inline text elements
Example :
Output :
Bootstrap text alignment classes
Example :
Result :
Bootstrap transformation classes
Example :
Result :
To make a paragraph stand out from the other paragraph elements, use the lead class on the paragraph element
Result :
Abbreviations : Abbreviations with a title attribute displays a dotted underline. When the mouse is over the abbreviation, the pointer becomes a help cursor and the title attribute value is displayed as a tooltip.
Example :
Output :
For a slightly smaller font-size apply .initialism class on the abbreviation.
Part 7 - Bootstrap image gallery
Part 8 - Bootstrap 3 responsive utility classes
Part 9 - Bootstrap typography
In this video we will discuss working with paragraph elements and inline text.
The following are the global defaults applied to the <body> and all paragraph <p> elements. In addition, paragraphs receive a bottom margin of half their computed line-height (10px by default).
Bootstrap inline text elements
Example :
<p>
<u>This text will be underlined</u>
</p>
<p>
<s>This text will be striken through</s>
</p>
<p>
<mark>This text will be highlighted</mark>
</p>
<p>
<em>This text will be italicized</em>
</p>
<p>
<strong>This text will be in boold</strong>
</p>
<p>
This is <sub>subscript</sub> and this is <sup>superscript</sup>
</p>
Output :
Bootstrap text alignment classes
Example :
<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">
The text in this paragraph will be
justified.
Bootstrap is a free, open-source and is the
most popular HTML,
CSS, and JavaScript framework.
</p>
<p class="text-nowrap">
This text will not wrap and you will get a
horizontal scrollbar
if there is no space on the screen to view.
</p>
Result :
Bootstrap transformation classes
Example :
<p class="text-lowercase">
All The Letters Will Be in Lowercase
</p>
<p class="text-uppercase">
All The Letters Will Be in Uppercase
</p>
<p class="text-capitalize">
First letter of every word will be
capitalized
</p>
Result :
To make a paragraph stand out from the other paragraph elements, use the lead class on the paragraph element
<p class="lead">
What is Bootstrap
</p>
<p>
Bootstrap is a free, open-source and is the
most popular HTML,
CSS, and JavaScript framework
</p>
Result :
Abbreviations : Abbreviations with a title attribute displays a dotted underline. When the mouse is over the abbreviation, the pointer becomes a help cursor and the title attribute value is displayed as a tooltip.
Example :
<abbr title="British Broadcasting
Corporation">BBC</abbr>
Output :
For a slightly smaller font-size apply .initialism class on the abbreviation.
No comments:
Post a Comment
It would be great if you can help share these free resources