Bootstrap Typography
h1. Bootstrap heading
h2. Bootstrap heading
h3. Bootstrap heading
h4. Bootstrap heading
h5. Bootstrap heading
h6. Bootstrap heading
Code Here:
<h1>h1. Bootstrap heading</h1>
<h2>h2. Bootstrap heading</h2>
<h3>h3. Bootstrap heading</h3>
<h4>h4. Bootstrap heading</h4>
<h5>h5. Bootstrap heading</h5>
<h6>h6. Bootstrap heading</h6>
Heading With Subtitle
Heading 1 Sub-heading
Heading 2 Sub-heading
Heading 3 Sub-heading
Heading 4 Sub-heading
Heading 5 Sub-heading
Heading 6 Sub-heading
Code Here
<h1>Heading 1 <small>Sub-heading</small></h1>
<h2>Heading 2 <small>Sub-heading</small></h2>
<h3>Heading 3 <small>Sub-heading</small></h3>
<h4>Heading 4 <small>Sub-heading</small></h4>
<h5>Heading 5 <small>Sub-heading</small></h5>
<h6>Heading 6 <small>Sub-heading</small></h6>
Paragraph with justify
Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.
Code Here
<p class="text-justify">Ambitioni dedisse scripsisse iudicaretur. Cras mattis
iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis
rhoncus. Praeterea iter est quasdam res quas ex communi. At nos hinc
posthac, sitientis piros Afros. Petierunt uti sibi concilium totius Galliae
in diem certam indicere. Cras mattis iudicium purus sit amet fermentum.</p>
Alignment text
Left aligned text on all viewport sizes.
Center aligned text on all viewport sizes.
Right aligned text on all viewport sizes.
Code Here
<p class="text-left">Left aligned text on all viewport sizes.</p>
<p class="text-center">Center aligned text on all viewport sizes.</p>
<p class="text-right">Right aligned text on all viewport sizes.</p>
View port text
Left aligned text on viewports sized SM (small) or wider.
Left aligned text on viewports sized MD (medium) or wider.
Left aligned text on viewports sized LG (large) or wider.
Left aligned text on viewports sized XL (extra-large) or wider.
Code Here
<p class="text-sm-left">Left aligned text on viewports sized SM (small) or
wider.</p>
<p class="text-md-left">Left aligned text on viewports sized MD (medium) or
wider.</p>
<p class="text-lg-left">Left aligned text on viewports sized LG (large) or
wider.</p>
<p class="text-xl-left">Left aligned text on viewports sized XL (extra-large) or
wider.</p>
Font weight and italics
Bold text.
Normal weight text.
Italic text.
Code Here
<p class="font-weight-bold">Bold text.</p>
<p class="font-weight-normal">Normal weight text.</p>
<p class="font-italic">Italic text.</p>
Text colors
This is an example of muted text.
This is an example of primary text.
This is an example of success text.
This is an example of info text.
This is an example of warning text.
This is an example of danger text.
Code Here
<p class="text-muted">This is an example of muted text. Add class
<code>text-muted</code></p>
<p class="text-primary">This is an example of primary text. Add class
<code>text-primary</code></p>
<p class="text-success">This is an example of success text. Add class
<code>text-success</code></p>
<p class="text-info">This is an example of info text. Add class
<code>text-info</code></p>
<p class="text-warning">This is an example of warning text. Add class
<code>text-warning</code></p>
<p class="text-danger">This is an example of danger text. Add class
<code>text-danger</code></p>
Address
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P:(123) 456-7890 George Belly
first.last@example.com
Code Here
<address>
<strong>Twitter, Inc.</strong>
<br> 795 Folsom Ave, Suite 600
<br> San Francisco, CA 94107
<br>
<abbr title="Phone">P:</abbr>(123) 456-7890
</address>
<address>
<strong>George Belly</strong>
<br>
<a href="mailto:#">first.last@example.com</a>
</address>
Ol Listing
- Lorem ipsum dolor sit amet
- Consectetur adipiscing elit
- Integer molestie lorem at massa
Code Here
<ol>
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Integer molestie lorem at massa </li>
</ol>
Fancy Listing with href
Code Here
<ul class="list-style-none">
<li><a href="javascript:void(0)"><i class="fa fa-check text-info"></i> Lorem
ipsum dolor sit amet</a></li>
<li><a href="javascript:void(0)"><i class="fa fa-check text-info"></i>
Consectetur adipiscing elit</a></li>
<li><a href="javascript:void(0)"><i class="fa fa-check text-info"></i>
Integer molestie lorem at massa </a></li>
</ul>