Support us .Net Basics C# SQL ASP.NET ADO.NET MVC Slides C# Programs Subscribe Buy DVD

Bootstrap paragraphs

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 global default font-size

Bootstrap inline text elements
bootstrap subscript superscript

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 strikethrough

Bootstrap text alignment classes
bootstrap text align center class

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 text justify class

Bootstrap transformation classes
bootstrap capitalize first letter

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 :
bootstrap uppercase class

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 : 
bootstrap lead paragraph

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 : 
bootstrap abbr tag

For a slightly smaller font-size apply .initialism class on the abbreviation.

bootstrap tutorial for beginners

No comments:

Post a Comment

If you like this website, please share with your friends on facebook and Google+ and recommend us on google using the g+1 button on the top right hand corner.