Typography

  
    <h1>h1. heading style</h1>
    <p>
      Lorem ipsum dolor sit amet....
    </p>
    <h2>h2. heading style</h2>
    <p>
      Lorem ipsum dolor sit amet....
    </p>
    <h3>h3. heading style</h3>
    <p>
      Lorem ipsum dolor sit amet....
    </p>
    <h4>h4. heading style</h4>
    <p>
      Lorem ipsum dolor sit amet....
    </p>
    <h5>h5. heading style</h5>
    <p>
      Lorem ipsum dolor sit amet....
    </p>
    <h6>h6. heading style</h6>
    <p>
      Lorem ipsum dolor sit amet....
    </p>
  
              

h1. heading style

Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore dolore magna aliqua.ullamco laboris nisi ut aliquip ex ea commodo consequat duis aute irure dolor.in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae.

h2. heading style

Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore dolore magna aliqua.ullamco laboris nisi ut aliquip ex ea commodo consequat duis aute irure dolor.in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae.

h3. heading style

Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore dolore magna aliqua.ullamco laboris nisi ut aliquip ex ea commodo consequat duis aute irure dolor.in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae.

h4. heading style

Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore dolore magna aliqua.ullamco laboris nisi ut aliquip ex ea commodo consequat duis aute irure dolor.in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae.

h5. heading style

Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore dolore magna aliqua.ullamco laboris nisi ut aliquip ex ea commodo consequat duis aute irure dolor.in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae.

h6. heading style

Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore dolore magna aliqua.ullamco laboris nisi ut aliquip ex ea commodo consequat duis aute irure dolor.in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae.


Alignments


Left alignment

Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore dolore magna aliqua.ullamco laboris nisi ut aliquip ex ea commodo consequat duis aute irure dolor.in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae.

Middle alignment

Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore dolore magna aliqua.ullamco laboris nisi ut aliquip ex ea commodo consequat duis aute irure dolor.in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae.

Right alignment

Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore dolore magna aliqua.ullamco laboris nisi ut aliquip ex ea commodo consequat duis aute irure dolor.in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae.

  
    <p>You can use the mark tag to <mark>highlight</mark> text.</p>
    <p><del>This line of text is meant to be treated as deleted text.</del></p>
    <p><u>This line of text will render as underlined</u></p>
    <p><small>This line of text is meant to be treated as fine print.</small></p>
    <p><strong>This line rendered as bold text.</strong></p>
    <p><em>This line rendered as italicized text.</em></p>
  
                

You can use the mark tag to highlight text.

This line of text is meant to be treated as deleted text.

This line of text will render as underlined

This line of text is meant to be treated as fine print.

This line rendered as bold text.

This line rendered as italicized text.

  
    <ul class="styled_list">
      <li class=""><a href="#"><i class="fa fa-circle-o"></i> Fringilla dolor ullamcorper.</a></li>
      <li class=""><a href="#"><i class="fa fa-circle-o"></i> Dolor ullamcorp faucibu.</a></li>
      <li class=""><a href="#"><i class="fa fa-circle-o"></i> Tempus velit venenatis.</a></li>
      <li class=""><a href="#"><i class="fa fa-circle-o"></i> Magna laoreet augue interdum.</a></li>
      <li class=""><a href="#"><i class="fa fa-circle-o"></i> Laoreet augue interdum et.</a></li>
      <li class=""><a href="#"><i class="fa fa-circle-o"></i> Posuere magna mollis lectus.</a></li>
    </ul>

    <!-- Checked List -->
    <ul class="styled_list">
      <li class=""><a href="#"><i class="fa fa-check"></i> ....</a></li>
      <li class=""><a href="#"><i class="fa fa-check"></i> ....</a></li>
      <li class=""><a href="#"><i class="fa fa-check"></i> ....</a></li>
      <li class=""><a href="#"><i class="fa fa-check"></i> ....</a></li>
      <li class=""><a href="#"><i class="fa fa-check"></i> ....</a></li>
      <li class=""><a href="#"><i class="fa fa-check"></i> ....</a></li>
    </ul>

    <!-- ordered list -->
    <ol class="styled_list">
      <li class=""><a href="#">Fringilla dolor ullamcorper.</a></li>
      <li class=""><a href="#">Dolor ullamcorp faucibu.</a></li>
      <li class=""><a href="#">Tempus velit venenatis.</a></li>
      <li class=""><a href="#">Magna laoreet augue interdum.</a></li>
      <li class=""><a href="#">Laoreet augue interdum et.</a></li>
      <li class=""><a href="#">Posuere magna mollis lectus.</a></li>
    </ol>
  
              
    
      <blockquote class="blockquote">
        <p class="mb-0">Perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi ”</p>
      </blockquote>

      <blockquote class="blockquote text-right">
       ...
      </blockquote>

      <blockquote class="blockquote blockquote-bubble">
        <p class="mb-0 blockquote-bubble-content">Perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi ”</p>
      </blockquote>
      <div class="blockquote-footer">
        <img src="..." alt="" class="img-circle mr-1">
        <div class="info">
          <span class="name">John Smith</span> <br>
          <span class="designation">Web Designer</span>
        </div>
      </div>

      <!-- blockquote with bubble -->
      <blockquote class="blockquote text-right blockquote-bubble">
        ...
      </blockquote>

      <!-- blockquote with bubble in right alignment -->
      <div class="blockquote-footer text-right">
        ...
      </div>
    
                

Example:

Perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi ”

Perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi ”

Blockquotes Testimonial With Bubble

Perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi ”

Perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi ”

  
    <div class="dropcaps">
      <p>
        <span class="firstcharacter">L</span>orem ipsum dolor sit amet,...
      </p>
    </div>

    <!-- Color Dropcap -->
    <div class="dropcaps">
      <p>
        <span class="firstcharacter bg-primary text-white">L</span>orem ipsum dolor sit amet,...
      </p>
    </div>
  
              

Example: Dropcaps

Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore dolore magna aliqua.ullamco laboris nisi ut aliquip ex ea commodo consequat duis aute irure dolor.in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae.

Color Dropcap

Lorem ipsum dolor sit amet, consectetur adipisicing elit sed do eiusmod tempor incididunt ut labore dolore magna aliqua.ullamco laboris nisi ut aliquip ex ea commodo consequat duis aute irure dolor.in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae.