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

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

					   	

	<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

	<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