Divider

Divider can be added by using class .ul to any <div> tag

Simple Invisible Divider

Text 1(Small Disatace)

Text 2

								  	
<p>Text 1(Small Disatace)</p>
<!-- Small invisible divider -->
<div class="ul"></div>
<p>Text 2</p>
								  	
								  	

Divider Visible Line different size and alignment

 

<!-- Divider Visible Line different size and alignment -->
							  	
<div class="ul ul-line"></div>
								  	
<div class="ul ul-line ul-line-lg"></div>
								  	
<div class="ul ul-line ul-line-md ul-line-left"></div>
								  	
<div class="ul ul-line ul-line-sm ul-line-center"></div>
								  	
<div class="ul ul-line ul-line-xs ul-line-right"></div>
								  	
								  	

Divider Underline - Size and Positions (Heading Underline)

This is heading

This is heading (underline at top w. r. t. divider)

This is heading (underline at bottom w. r. t. divider)

This is heading

This is heading

This is heading

This is heading

This is heading

This is heading

This is heading

This is heading

<!-- Divider As Underline -->
								  	
<h3 class="heading txt-sm">This is heading</h3>
<div class="ul ul-line"><span></span></div>

<!-- Since update v1.1{ -->
<h3 class="heading txt-sm">This is heading (underline at top w. r. t. divider)</h3>
<div class="ul ul-line ul-top"><span></span></div>
								  	
<h3 class="heading txt-sm">This is heading (underline at bottom w. r. t. divider)</h3>
<div class="ul ul-line ul-bottom"><span></span></div>
<!-- } -->

<h3 class="heading txt-sm">This is heading</h3>
<div class="ul ul-lg"><span></span></div>
								  	
<h3 class="heading txt-sm">This is heading</h3>
<div class="ul ul-line ul-md"><span></span></div>
								  	
<h3 class="heading txt-sm">This is heading</h3>
<div class="ul ul-sm"><span></span></div>
								  	
<h3 class="heading txt-sm">This is heading</h3>
<div class="ul ul-line ul-xs"><span></span></div>
								  	
<h3 class="heading txt-sm text-center">This is heading</h3>
<div class="ul ul-line ul-center"><span></span></div>
								  	
<h3 class="heading txt-sm text-center">This is heading</h3>
<div class="ul ul-line-center ul-line-sm ul-center"><span></span></div>
								  	
<h3 class="heading txt-sm text-right">This is heading</h3>
<div class="ul ul-line ul-right"><span></span></div>
								  	
<h3 class="heading txt-sm text-right">This is heading</h3>
<div class="ul ul-line-right ul-line-sm ul-right"><span></span></div>
								  	
								  	

Icon, Link and Text Divider

Icons

Link

New Since version v1.1

Text

To add text add .ul-text and .fa classes to `span` and then add text within span

Text Divider New Since version v1.1

Special Text Divider New Since version v1.1

<!-- Icon, Link and Text Divider -->
								  	
<!-- Icons -->
<div class="ul ul-line ul-center"><span class="fa fa-twitter"></span></div>
								  	
<div class="ul ul-line ul-line-md ul-center"><span class="fa fa-twitter"></span></div>
								  	
<div class="ul ul-line ul-line-sm ul-center"><span class="fa fa-twitter"></span></div>
								  	
<div class="ul ul-line ul-line-xs ul-center"><span class="fa fa-twitter"></span></div>
								  	
<!-- Link -->
<div class="ul ul-line ul-line-sm ul-center"><a href="#"><span class="fa fa-twitter"></span></a></div>

<!-- New since version v1.1 -->

<div class="ul ul-line ul-line-sm ul-center"><a href="#"><span class="fa fa-twitter txt-lg"></span></a></div>
								  	
<div class="ul ul-line ul-line-sm ul-center"><a href="#"><span class="fa fa-twitter txt-md"></span></a></div>
								  	
<div class="ul ul-line ul-line-sm ul-center"><a href="#"><span class="fa fa-twitter txt-sm"></span></a></div>
								  	
<div class="ul ul-line ul-line-sm ul-center"><a href="#"><span class="fa fa-twitter txt-xs"></span></a></div>
								  	
<div class="ul ul-line ul-line-sm ul-center"><a href="#"><span class="fa fa-twitter txt-md color"></span></a></div>
								  	
<!-- Text -->
<div class="ul ul-line ul-line-sm ul-center"><a href="#"><span class="fa ul-text">Or</span></a></div>

<!-- New since version v1.1 -->
							  	
<div class="ul ul-line ul-line-sm ul-center"><a href="#"><span class="fa ul-text txt-lg">Text</span></a></div>
								  	
<div class="ul ul-line ul-line-sm ul-center"><a href="#"><span class="fa ul-text txt-md">Text</span></a></div>
								  	
<div class="ul ul-line ul-line-sm ul-center"><a href="#"><span class="fa ul-text txt-sm">Text</span></a></div>
								  	
<div class="ul ul-line ul-line-sm ul-center"><a href="#"><span class="fa ul-text txt-xs">Text</span></a></div>
								  	
<div class="ul ul-line ul-line-sm ul-center"><a href="#"><span class="fa ul-text txt-md color">Text</span></a></div>
								  	
<div class="ul ul-line ul-line-sm ul-center"><a href="#"><span class="fa ul-text txt-md txt-n">Text</span></a></div>
								  	
<div class="ul ul-line ul-line-sm ul-center"><a href="#"><span class="fa ul-text txt-md txt-i">Text</span></a></div>
								  		 
<!-- Special New Since version v1.1 -->

<div class="ul ul-line ul-line-sm ul-center"><h3 class="heading"><span class="fa ul-text txt-md">Sample Heading</span></h3><div class="ul"><span></span></div></div>