Typography

Use tags h1 to h6 for get desire heading.

h1. Bootstrap heading

h2. Bootstrap heading

h3. Bootstrap heading

h4. Bootstrap heading

h5. Bootstrap heading
h6. Bootstrap heading
                                            
                                                <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

Use tags h1 to h6 for get desire heading.

Heading 1 Sub-heading

Heading 2 Sub-heading

Heading 3 Sub-heading

Heading 4 Sub-heading

Heading 5 Sub-heading
Heading 6 Sub-heading
                                            
                                                <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

Use tags text-justify for get desire paragraph.

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.

Alignment text

Use tags text-left, text-center, text-right for get desire text.

Left aligned text on all viewport sizes.

Center aligned text on all viewport sizes.

Right aligned text on all viewport sizes.

                                            
                                                <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

Use tags text-sm-left, text-md-left, text-lg-left, text-xl-left for get desire 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.

Font weight and italics

Use tags font-weight-bold, font-weight-normal, font-weight-italic for get desire text.

Bold text.

Normal weight text.

Italic text.

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

Use tags below class for get desire text.

This is an example of muted text. Add class text-muted

This is an example of primary text. Add class text-primary

This is an example of success text. Add class text-success

This is an example of info text. Add class text-info

This is an example of warning text. Add class text-warning

This is an example of danger text. Add class text-danger

Address

Use address for get desire address.
Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P:(123) 456-7890
George Belly
first.last@example.com

Blockquotes

Use blockquote for get desire address.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

- Someone famous in Source Title
                                            
                                                <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>
                                                    <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>                                              
                                            
                                        
                                            
                                                <blockquote>
                                                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                                                    <small>- Someone famous in <cite title="Source Title">Source Title</cite></small>
                                                </blockquote>
                                            
                                        





Ol Listing

Use tags ol > lifor get desire ol list.
  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa

Ul Listing

Use tags ul > lifor get desire ol list.
  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa

Description Text

Use tags dl > dtfor get desire ol list.
Standard Description List
Description Text
Description List Title
Description List Text
                                            
                                                <ol>
                                                    <li>Lorem ipsum dolor sit amet</li>
                                                    <li>Consectetur adipiscing elit</li>
                                                    <li>Integer molestie lorem at massa </li>
                                                </ol>                                             
                                            
                                        
                                            
                                                <ul>
                                                    <li>Lorem ipsum dolor sit amet</li>
                                                    <li>Consectetur adipiscing elit</li>
                                                    <li>Integer molestie lorem at massa </li>
                                                </ul>                                             
                                            
                                        
                                            
                                                 <dl>
                                                    <dt>Standard Description List</dt>
                                                    <dd>Description Text</dd>
                                                    <dt>Description List Title</dt>
                                                    <dd>Description List Text</dd>
                                                </dl>
                                            
                                        





Fancy Listing 1

Use class list-iconsto ul for get desire ol list.
  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa

Fancy Listing with href

Use class list-iconsto ul for get desire ol list.

Fancy Listing with href

Use class list-iconsto ul for get desire ol list.
                                            
                                                 <ul class="list-style-none">
                                                    <li><i class="ti-angle-right"></i> Lorem ipsum dolor sit amet</li>
                                                    <li><i class="ti-angle-right"></i> Consectetur adipiscing elit</li>
                                                    <li><i class="ti-angle-right"></i> Integer molestie lorem at massa </li>
                                                </ul>                                             
                                            
                                        
                                            
                                                <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>                                            
                                            
                                        
                                            
                                                <ul class="list-style-none">
                                                    <li><a href="javascript:void(0)"><i class="fa fa-chevron-right"></i> Lorem ipsum dolor sit amet</a></li>
                                                    <li><a href="javascript:void(0)"><i class="fa fa-chevron-right"></i> Consectetur adipiscing elit</a></li>
                                                    <li><a href="javascript:void(0)"><i class="fa fa-chevron-right"></i> Integer molestie lorem at massa </a></li>
                                                </ul>
                                            
                                        
All Rights Reserved by Nice admin. Designed and Developed by WrapPixel.