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

						
How to use
  • JAbove is the example code with default styling
  • For alignment use .text-center to keep the content in center and for right alignment use .text-right to the wrapper div.

Example

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.

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

				   		
How to use
  • Use class .styled_list with <ul> element
  • You can use the similar icon set based on your list style into <li> element
  • element
  • For ordered list use <ol> element without using any icons in <li> element
	
		<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>
	
							
How to use
  • Add the class .blockquote to <blockquote> elements to implment the default simnple styling
  • For the right aligned blockquote use .text-right with .blockquote
  • Add the class .blockquote-bubble to the <blockquote> element and the class .blockquote-bubble-content to any inner element to make the quote display like a speach bubble.
  • For the right aligned blockquote footer use .text-right with .blockquote-footer

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>

						
How to use
  • Write fist letter of the word into .firstcharacter within <span> element
  • You can customize the background or text color using classes with .firstcharacter

Example

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

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.