Icons

Choose from one of these icon packages: Themify-icons, Simple-Line-icons, Fontello, Fontastic, DripIcons.

<span class="ti-arrow-up"></span>

Headings

<h1>H1</h1>
<h2>H2</h2>
<h3>H3</h3>
<h4>H4</h4>
<h5>H5</h5>
<h6>H6</h6>

Font sizes

Encrease your font size using .size class. Available classes .size5, .size6, .size7, .size8, .size9, .size10, .size11, .size12, .size13, .size14, .size16, .size18, .size20, .size22, .size24, .size26, .size28, .size30, .size32, .size34, .size36, .size38, .size40, .size42, .size44, .size46, .size48, .size50, .size55, .size56, .size60, .size70, .size80, .size90, .size100

<span class="size14">Size</span>

Font Family

The default font is Open Sans. You can use clases like slim, normal, big, heavy

<span class="size18 slim">Open Sans</span>
<span class="size18 normal">Open Sans</span>
<span class="size18 big">Open Sans</span>
<span class="size18 heavy">Open Sans</span>

Styles

Here are some basic styling examples. You can use <b> tag or <strong> tag to bold your text. <mark> tag to highlight text, <i> for italic, you can even asociate some predefined colors to your text ( here is a list )

<strong>Lorem</strong> ipsum dolor <mark>sit amet</mark>, <i class="cmaincolor">consectetur adipisicing elit</i>. Non, repudiandae, ratione, <span class="caps cwhite bggreen">temporibus</span> dolor consequatur nesciunt magni rerum consectetur esse fugit reprehenderit fuga quo deserunt quidem soluta vitae sed et aperiam.

Blockquotes

Make a paragraph stand out by adding .lead class.

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>
 <footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>

Lead body copy

Make a paragraph stand out by adding .lead class.

<p class="lead">Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.</p>

Labels, background & text colors

Add any of the below mentioned modifier classes to change the appearance of a label, background or text.

<span class="label label-default">Default</span>
<span class="label label-primary">Primary</span>
<span class="label label-success">Success</span>
<span class="label label-info">Info</span>
<span class="label label-warning">Warning</span>
<span class="label label-danger">Danger</span>

Padding

Use .p20 to add a 20px padding to your content, or you can use .pt10, .pb10, .pl10, .pr10, .ptb10, .plr10
To cancel all paddings and margins use .nospace class.

<div class="borderall inline p5">Padding 1</div>
<div class="borderall inline plr20 ptb10">Padding 2</div>
<div class="borderall inline p30">Padding 3</div>
<div class="borderall inline p50">Padding 4</div>
<div class="borderall inline p60 nospace">Padding 5 - nospace</div>

Blocks

If you need certain dimensions blocks you can create them easy as pye using .w100 and .h200 classes where w is the width and h is the height. Dimensions available from 10 to 10 up to 100 , from 50 to 50 up 1000px.

<div class="w10 h10 borderall"></div>
<div class="w20 h20 borderall"></div>
<div class="w50 h50 borderall"></div>
<div class="w100 h100 borderall"></div>

Spacings and positions

Adjust block positions by adding the .mt10 class where mt is margin-top and 10 is the distance in pixels (change 10 with any number from 1 to 10 and from 10 to 10 up to 100px). You can use also negative values this way .mt-10.

Here are more examples .m10, .mt10, .mt-10, .mb10, .mb-10, .mt10, .mt-10, .mr10, .mr-10, .ml10, .ml-10, .mtb10, .mlr10

<div class="col-md-2">
	<div class="w50 h50 borderall"></div>
	<div class="w50 h50 borderall"></div>
</div>
<div class="col-md-2">
	<div class="w50 h50 borderall"></div>
	<div class="w50 h50 borderall mt10 ml10"></div>
</div>
<div class="col-md-2">
	<div class="w50 h50 borderall mt-20"></div>
	<div class="w50 h50 borderall ml-10"></div>
</div>
<div class="col-md-2">
	<div class="w50 h50 borderall"></div>
	<div class="w50 h50 borderall mtb5"></div>
	<div class="w50 h50 borderall"></div>
</div>
<div class="col-md-2">
	<div class="w50 h50 borderall ml-30 mb-15 bglight"></div>
	<div class="w50 h50 borderall"></div>
</div>
<div class="col-md-2">
	<div class="w30 h30 borderall inline"></div>
	<div class="w30 h30 borderall inline mlr5"></div>
	<div class="w30 h30 borderall inline"></div>
</div>

Buttons

You cann add different classes to your button to style it as you want. Ex to make it round just add round, or caps to make inside text uppercase, or bold to make the text stronger. wfull to make the button full width. Basicaly you can custom build it as you want using the above tools from "Blocks", "Padding" and "Background & text colors"

<a class="btn btnwhite btn-default" href="#"><i class="icon-article-alt"></i> Small</a>
<a type="submit" class="btn btnwhitebig btn-default caps "><i class="icon-mail"></i> Big</a>
<a href="#" class="btn btnwhitehuge btn-default">Huge</a>

<a href="#" class="btn btnwhiteline2 fontproximabold caps >Purchase this template</a>
<a class="btn btndarkline2 fontproximabold caps">Browse more pages</a>
<button type="submit" class="btn btndarkline wfull fontproximalight caps">Browse our creative themes</button>
<button type="submit" class="btn btnwhiteline wfull fontproximalight caps">Browse our creative themes</button>
<button type="submit" class="btn btnwhitelineblue wfull fontproximalight caps">Browse our creative themes</button>
<a class="btn btnorange fontproximalight plr50 caps">Browse more pages</a>

Hover Effects Ideas

You can choose from a large variety of hover effects: example 1, example 2

Tabs

<ul role="tablist" class="nav nav-tabs fb-tabs" id="myTab">
  <li class="active"><a data-toggle="tab" role="tab" href="#tab">Tab</a></li>
  <li class=""><a data-toggle="tab" role="tab" href="#tab2">Tab 2</a></li>
  <li class=""><a data-toggle="tab" role="tab" href="#tab3">Tab 3</a></li>
</ul>
<div class="tab-content border" id="myTabContent">
  <div id="tab" class="tab-pane fade active in">
    <p class="p20">Content 1</p>
  </div>
  <div id="tab2" class="tab-pane fade">
    <p class="p20">Content 2</p>
  </div>
  <div id="tab3" class="tab-pane fade">
    <p class="p20">Content 3</p>
  </div>
</div>

Tabs 2

<div class="bs-example-tabs">
    <ul role="tablist" class="nav nav-tabs fb-tabs2" id="myTab2">
      <li class="active"><a data-toggle="tab" role="tab" href="#tab-b">Tab</a></li>
      <li class=""><a data-toggle="tab" role="tab" href="#tab2-b">Tab 2</a></li>
      <li class=""><a data-toggle="tab" role="tab" href="#tab3-b">Tab 3</a></li>
    </ul>
    <div class="tab-content border" id="myTabContent2">
      <div id="tab-b" class="tab-pane fade active in">
        <p class="p20">Content 1</p>
      </div>
      <div id="tab2-b" class="tab-pane fade">
        <p class="p20">Content 2</p>
      </div>
      <div id="tab3-b" class="tab-pane fade">
        <p class="p20">Content 3</p>
      </div>
    </div>
</div>

Accordion

<!-- Accordion -->
<div class="panel-group" id="accordion">
  <div class="panel panel-default">
	<div class="panel-heading">
	  <h4 class="panel-title">
		<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
		  Collaps 1
		</a>
	  </h4>
	  <span></span>
	</div>
	<div id="collapseOne" class="panel-collapse collapse in">
	  <div class="panel-body"><span></span>
		Content 1
	  </div>
	</div>					
  </div>
  
  <div class="panel panel-default">
	<div class="panel-heading">
	  <h4 class="panel-title">
		<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
		  Collaps 2
		</a>
	  </h4>
	  <span></span>
	</div>
	<div id="collapseTwo" class="panel-collapse collapse">
	  <div class="panel-body"><span></span>
		Content 2
	  </div>
	</div>					
  </div>
  
  <div class="panel panel-default">
	<div class="panel-heading">
	  <h4 class="panel-title">
		<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
		  Collaps 3
		</a>
	  </h4>
	  <span></span>
	</div>
	<div id="collapseThree" class="panel-collapse collapse">
	  <div class="panel-body"><span></span>
		 Content 3
	  </div>
	</div>					
  </div>
</div>
<!-- End of Accordion -->		

Alerts

<div class="alert p15 alert-success" role="alert">
	<span class="ti-check"></span> Congratulations!   
	<button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
</div>
<div class="alert p15 alert-info" role="alert"><span class="ti-info"></span> Information!</div>
<div class="alert p15 alert-warning" role="alert"><span class="ti-alert"></span> Alert!</div>
<div class="alert p15 alert-danger" role="alert"><span class="ti-face-sad"></span> Error!</div>	

Pricing - 5 columns

<div class="pricelist-wrapper dark col5">
  <ul>
    <li class="noselections">
      <div class="plistrow0">Sign Up for</div>
      <div class="plistrow2 plistprice"><img alt="" src="images/spacer.png"></div>
      <div class="plistrowbg">Lorem ipsum dolor</div>
      <div class="plistrow">Sit amet</div>
      <div class="plistrowbg">Lorem ipsum dolor</div>
      <div class="plistrow">Sit amet</div>
      <div class="plistrowbg">Lorem ipsum dolor</div>
      <div class="plistrow2"></div>
    </li>
    <li class="noselections">
      <div class="plistrow1">Basic</div>
      <div class="plistrow2"><span class="h9">€9.99</span><br><span class="smallp">/month</span></div>
      <div class="plistrowbg">10</div>
      <div class="plistrow"><span class="ti-check cgreen"></span></div>
      <div class="plistrowbg"><span class="ti-close cred"></span></div>
      <div class="plistrow"><span class="ti-check cgreen"></span></div>
      <div class="plistrowbg"><span class="ti-close cred"></span></div>
      <div class="plistrow2"><div class="button_ok"><a href="#">Buy</a></div></div>
    </li>
    <li class="plistselected">
      <div class="plistrow1">Professional</div>
      <div class="plistrow2"><span class="h9">€29.99</span><br><span class="smallp">/month</span></div>
      <div class="plistrowbg">100</div>
      <div class="plistrow pchecked"><span class="ti-check cgreen"></span></div>
      <div class="plistrowbg">Unlimited</div>
      <div class="plistrow"><span class="ti-check cgreen"></span></div>
      <div class="plistrowbg"><span class="ti-close cred"></span></div>
      <div class="plistrow2"><div class="button_ok"><a href="#">Buy</a></div></div>
    </li>
    <li class="noselections">
      <div class="plistrow1">Premium</div>
      <div class="plistrow2"><span class="h9">€39.99</span><br><span class="smallp">/month</span></div>
      <div class="plistrowbg">500</div>
      <div class="plistrow"><span class="ti-check cgreen"></span></div>
      <div class="plistrowbg">Unlimited</div>
      <div class="plistrow"><span class="ti-check cgreen"></span></div>
      <div class="plistrowbg"><span class="ti-check cgreen"></span></div>
      <div class="plistrow2"><div class="button_ok"><a href="#">Buy</a></div></div>
    </li>
    <li class="noselections">
      <div class="plistrow1">Ultimate</div>
      <div class="plistrow2"><span class="h9">€49.99</span><br><span class="smallp">/month</span></div>
      <div class="plistrowbg">Unlimited</div>
      <div class="plistrow"><span class="ti-check cgreen"></span></div>
      <div class="plistrowbg">Unlimited</div>
      <div class="plistrow"><span class="ti-check cgreen"></span></div>
      <div class="plistrowbg"><span class="ti-check cgreen"></span></div>
      <div class="plistrow2"><div class="button_ok"><a href="#">Buy</a></div></div>
    </li>
  </ul>
</div>	

Pricing - 4 columns

	<div class="pricelist-wrapper dark col4">
	  <ul>
	    <li class="noselections">
	      <div class="plistrow0">Sign Up for</div>
	      <div class="plistrow2 plistprice"><img alt="" src="images/spacer.png"></div>
	      <div class="plistrowbg">Lorem ipsum dolor</div>
	      <div class="plistrow">Sit amet</div>
	      <div class="plistrowbg">Lorem ipsum dolor</div>
	      <div class="plistrow">Sit amet</div>
	      <div class="plistrowbg">Lorem ipsum dolor</div>
	      <div class="plistrow2"></div>		
	    </li>
	    <li>
	      <div class="plistrow1">Basic</div>
	      <div class="plistrow2"><span class="h9">€9.99</span><br><span class="smallp">/month</span></div>
	      <div class="plistrowbg">10</div>
	      <div class="plistrow"><span class="ti-check cgreen"></span></div>
	      <div class="plistrowbg"><span class="ti-close cred"></span></div>
	      <div class="plistrow"><span class="ti-check cgreen"></span></div>
	      <div class="plistrowbg"><span class="ti-close cred"></span></div>
	      <div class="plistrow2"><div class="button_ok"><a href="#">Buy</a></div></div>
	    </li>
	    <li>
	      <div class="plistrow1">Professional</div>
	      <div class="plistrow2"><span class="h9">€29.99</span><br><span class="smallp">/month</span></div>
	      <div class="plistrowbg">100</div>
	      <div class="plistrow"><span class="ti-check cgreen"></span></div>
	      <div class="plistrowbg">Unlimited</div>
	      <div class="plistrow"><span class="ti-check cgreen"></span></div>
	      <div class="plistrowbg"><span class="ti-close cred"></span></div>
	      <div class="plistrow2"><div class="button_ok"><a href="#">Buy</a></div></div>
	    </li>
	    <li>
	      <div class="plistrow1">Premium</div>
	      <div class="plistrow2"><span class="h9">€39.99</span><br><span class="smallp">/month</span></div>
	      <div class="plistrowbg">500</div>
	      <div class="plistrow"><span class="ti-check cgreen"></span></div>
	      <div class="plistrowbg">Unlimited</div>
	      <div class="plistrow"><span class="ti-check cgreen"></span></div>
	      <div class="plistrowbg"><span class="ti-check cgreen"></span></div>
	      <div class="plistrow2"><div class="button_ok"><a href="#">Buy</a></div></div>
	    </li>
		</ul>
	</div>

Pricing - 3 columns

	<div class="pricelist-wrapper dark col3">
	  <ul>
	    <li>
	      <div class="plistrow1">Basic</div>
	      <div class="plistrow2"><span class="h9">€9.99</span><br><span class="smallp">/month</span></div>
	      <div class="plistrowbg">10</div>
	      <div class="plistrow"><span class="ti-check cgreen"></span></div>
	      <div class="plistrowbg"><span class="ti-close cred"></span></div>
	      <div class="plistrow"><span class="ti-check cgreen"></span></div>
	      <div class="plistrowbg"><span class="ti-close cred"></span></div>
	      <div class="plistrow2"><div class="button_ok"><a href="#">Buy</a></div></div>
	    </li>
	    <li>
	      <div class="plistrow1">Professional</div>
	      <div class="plistrow2"><span class="h9">€29.99</span><br><span class="smallp">/month</span></div>
	      <div class="plistrowbg">100</div>
	      <div class="plistrow"><span class="ti-check cgreen"></span></div>
	      <div class="plistrowbg">Unlimited</div>
	      <div class="plistrow"><span class="ti-check cgreen"></span></div>
	      <div class="plistrowbg"><span class="ti-close cred"></span></div>
	      <div class="plistrow2"><div class="button_ok"><a href="#">Buy</a></div></div>
	    </li>
	    <li>
	      <div class="plistrow1">Premium</div>
	      <div class="plistrow2"><span class="h9">€39.99</span><br><span class="smallp">/month</span></div>
	      <div class="plistrowbg">500</div>
	      <div class="plistrow"><span class="ti-check cgreen"></span></div>
	      <div class="plistrowbg">Unlimited</div>
	      <div class="plistrow"><span class="ti-check cgreen"></span></div>
	      <div class="plistrowbg"><span class="ti-check cgreen"></span></div>
	      <div class="plistrow2"><div class="button_ok"><a href="#">Buy</a></div></div>
	    </li>
	  </ul>
	</div>

Pricing - 2 columns

<div class="pricelist-wrapper dark col2">
  <ul>
    <li>
      <div class="plistrow1">Basic</div>
      <div class="plistrow2"><span class="h9">€9.99</span><br><span class="smallp">/month</span></div>
      <div class="plistrowbg">10</div>
      <div class="plistrow"><span class="ti-check cgreen"></span></div>
      <div class="plistrowbg"><span class="ti-close cred"></span></div>
      <div class="plistrow"><span class="ti-check cgreen"></span></div>
      <div class="plistrowbg"><span class="ti-close cred"></span></div>
      <div class="plistrow2"><div class="button_ok"><a href="#">Buy</a></div></div>
    </li>
    <li>
      <div class="plistrow1">Professional</div>
      <div class="plistrow2"><span class="h9">€29.99</span><br><span class="smallp">/month</span></div>
      <div class="plistrowbg">100</div>
      <div class="plistrow"><span class="ti-check cgreen"></span></div>
      <div class="plistrowbg">Unlimited</div>
      <div class="plistrow"><span class="ti-check cgreen"></span></div>
      <div class="plistrowbg"><span class="ti-close cred"></span></div>
      <div class="plistrow2"><div class="button_ok"><a href="#">Buy</a></div></div>
    </li>
  </ul>
</div>
<div class="clearfix p10"></div>
<img src="images/shadow.png" width="100%" class="relative mt-10" alt="">

Skills

With auto trigger

<div class="enableanimation">
	<div class="progress-about margbar">
	  <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="90" role="progressbar" class="progress-bar progress-bar-maincolor pbar1">
		BRANDING 90%
	  </div>
	</div>
	<div class="progress-about margbar">
	  <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" role="progressbar" class="progress-bar progress-bar-maincolor pbar2">
		WEB DEVELOPING 100%
	  </div>
	</div>
	<div class="progress-about margbar">
	  <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="85" role="progressbar" class="progress-bar progress-bar-maincolor pbar3">
		GRAPHIC DESIGN 85%
	  </div>
	</div>				
	<div class="progress-about margbar mb50">
	  <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="95" role="progressbar" class="progress-bar progress-bar-maincolor pbar4">
		S.E.O. 95%
	  </div>
	</div>		
</div>	

Static

<div class="progress flat nocorners">
  <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="70" role="progressbar" class="progress-bar progress-bar-red" style="width: 70%">
	<span class="sr-only">70% Complete (success)</span>
  </div>
</div>
<div class="progress flat nocorners">
  <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="100" role="progressbar" class="progress-bar progress-bar-orange" style="width: 100%">
	<span class="sr-only">100% Complete (success)</span>
  </div>
</div>
<div class="progress flat nocorners">
  <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="85" role="progressbar" class="progress-bar progress-bar-blue" style="width: 85%">
	<span class="sr-only">85% Complete (success)</span>
  </div>
</div>				
<div class="progress flat nocorners">
  <div aria-valuemax="100" aria-valuemin="0" aria-valuenow="95" role="progressbar" class="progress-bar progress-bar-green" style="width: 95%">
	<span class="sr-only">95% Complete (success)</span>
  </div>
</div>		

Tables

For basic styling—light padding and only horizontal dividers—add the base class .table to any <table>. It may seem super redundant, but given the widespread use of tables for other plugins like calendars and date pickers, we've opted to isolate our custom table styles.

<table class="table table-hover">
      <caption>Optional table caption.</caption>
      <thead>
        <tr>
          <th>#</th>
          <th>First Name</th>
          <th>Last Name</th>
          <th>Username</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <th scope="row">1</th>
          <td>Mark</td>
          <td>Otto</td>
          <td>@mdo</td>
        </tr>
        <tr>
          <th scope="row">2</th>
          <td>Jacob</td>
          <td>Thornton</td>
          <td>@fat</td>
        </tr>
        <tr>
          <th scope="row">3</th>
          <td>Larry</td>
          <td>the Bird</td>
          <td>@twitter</td>
        </tr>
      </tbody>
</table>

Use .table-striped to add zebra-striping to any table row within the <tbody>.

	<table class="table table-striped">
	      <caption>Optional table caption.</caption>
	      <thead>
	        <tr>
	          <th>#</th>
	          <th>First Name</th>
	          <th>Last Name</th>
	          <th>Username</th>
	        </tr>
	      </thead>
	      <tbody>
	        <tr>
	          <th scope="row">1</th>
	          <td>Mark</td>
	          <td>Otto</td>
	          <td>@mdo</td>
	        </tr>
	        <tr>
	          <th scope="row">2</th>
	          <td>Jacob</td>
	          <td>Thornton</td>
	          <td>@fat</td>
	        </tr>
	        <tr>
	          <th scope="row">3</th>
	          <td>Larry</td>
	          <td>the Bird</td>
	          <td>@twitter</td>
	        </tr>
	      </tbody>
	</table>

Add .table-bordered for borders on all sides of the table and cells.

	<table class="table table-bordered">
	      <caption>Optional table caption.</caption>
	      <thead>
	        <tr>
	          <th>#</th>
	          <th>First Name</th>
	          <th>Last Name</th>
	          <th>Username</th>
	        </tr>
	      </thead>
	      <tbody>
	        <tr>
	          <th scope="row">1</th>
	          <td>Mark</td>
	          <td>Otto</td>
	          <td>@mdo</td>
	        </tr>
	        <tr>
	          <th scope="row">2</th>
	          <td>Jacob</td>
	          <td>Thornton</td>
	          <td>@fat</td>
	        </tr>
	        <tr>
	          <th scope="row">3</th>
	          <td>Larry</td>
	          <td>the Bird</td>
	          <td>@twitter</td>
	        </tr>
	      </tbody>
	</table>