Typography <> show code


	<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

h3. heading style

h4. heading style

h5. heading style

h6. heading style

Different alignments

Left alignment

Middle alignment

Right alignment

Text Formating <> show code


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

List Elements <> show code


	<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
For ordered list use <ol> element without using any icons in <li> element

Unordered List

Checked List

Ordered list

Default Blockquotes <> show code

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

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 ”

John Smith
Web Designer

Default Dropcaps <> show code


	<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