Grid System

One Column

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellendus sint quod explicabo voluptatum quas accusantium error sequi enim repellat, repudiandae natus, molestias commodi officiis quo consectetur, tempore similique. Sint, cumque.

<div class="col-md-12"> { Your content } </div>

Two Column

<div class="col-md-6"> { Your content } </div>

Two Column

<div class="col-md-6"> { Your content } </div>

Three Column

<div class="col-md-4"> { Your content } </div>

Three Column

<div class="col-md-4"> { Your content } </div>

Three Column

<div class="col-md-4"> { Your content } </div>

Three Column

<div class="col-md-3">Content</div>

Three Column

<div class="col-md-3">Content</div>

Three Column

<div class="col-md-3">Content</div>

Three Column

<div class="col-md-3">Content</div>

Alerts

Well done! You successfully read this important alert message.

<div class="alert alert-success" role="alert"> Text </div>

Heads up! This alert needs your attention, but it's not super important.

<div class="alert alert-info" role="alert"> Text </div>

Warning! Better check yourself, you're not looking too good.

<div class="alert alert-warning" role="alert"> Text </div>

Oh snap! Change a few things up and try submitting again.

<div class="alert alert-danger" role="alert"> Text </div>

Dismissible alerts

Warning! Better check yourself, you're not looking too good.

<div class="alert alert-warning alert-dismissible" role="alert">
  <button type="button" class="close" data-dismiss="alert"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
  <strong>Warning!</strong> Better check yourself, you're not looking too good.
</div>

Skill Bars

SEO

60%

Jquery

80%

Wordpress

95%

HTML5

90%

CSS

80%

Code for skill bars

<div class="skill">
	<h4>SEO</h4>
	<div class="skillbar"><div class="bar" style="width: 60%;"><span class="percent">60%</span></div></div>
	<h4>Jquery</h4>
	<div class="skillbar"><div class="bar" style="width: 80%;"><span class="percent">80%</span></div></div>
	<h4>Wordpress</h4>
	<div class="skillbar"><div class="bar" style="width: 95%;"><span class="percent">95%</span></div></div>
	<h4>HTML5</h4>
	<div class="skillbar"><div class="bar" style="width: 90%;"><span class="percent">90%</span></div></div>
	<h4>CSS</h4>
	<div class="skillbar"><div class="bar" style="width: 80%;"><span class="percent">80%</span></div></div>
</div>

Skill Bars STRIPED

SEO

60%

Jquery

80%

Wordpress

95%

HTML5

90%

CSS

80%

Code for skill bars stripped

<div class="skill">
	<h4>SEO</h4>
	<div class="skillbar"><div class="bar progress-bar-striped active progress-bar" style="width: 60%;"><span class="percent">60%</span></div></div>
</div>

Just add the class .progress-bar-striped
To add animation and striped style use this classes bar progress-bar-striped active progress-bar

Buttons

Primary Success Warning Danger Deep Info Disabled Button

<a href="#link" class="btn btn-primary">Primary</a>
<a href="#link" class="btn btn-success">Success</a>
<a href="#link" class="btn btn-warning">Warning</a>
<a href="#link" class="btn btn-danger">Danger</a>
<a href="#link" class="btn btn-deep">Deep</a>
<a href="#link" class="btn btn-info">Info</a>
<a href="#link" class="btn btn-default disabled">Disabled Button</a>

Labels

Default Primary Success Info Warning Danger Deep


<h2>
	<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>
	<span class="label label-deep">Deep</span>
</h2>

Badges


<ul class="nav nav-pills nav-stacked">
<li class="active"><a href="#"><span class="badge ">42</span>Home</a></li>
<li class="active"><a href="#"><span class="badge pull-right">42</span>Home</a></li>
</ul>

Pretty Photo

Code for PrettyPhoto

<a href="images/team-2.jpg" data-gal="prettyPhoto"><img src="images/team-2.jpg" alt=""></a>

Pretty Photo Gallery

Code for PrettyPhoto

<a href="images/team-2.jpg" class="prettyPhoto"><img src="images/team-2.jpg" alt=""></a>

To link images to a gallery use the same name of the gallery inside square brackets like this rel="prettyPhoto[name]"

Pretty Photo Youtube Video

Code for PrettyPhoto Youtube Video

<a href="https://www.youtube.com/watch?v=i6OwxEd0Th0?rel=0" data-gal="prettyPhoto" title="YouTube demo"><img src="images/4.jpg" alt=""></a>

Pretty Photo Vimeo Video

Code for PrettyPhoto Vimeo Video

<a href="http://vimeo.com/108843586" data-gal="prettyPhoto" title="Vimeo demo"><img src="images/4.jpg" alt=""></a>

List Styles

Circle list style
Circle list style
Circle list style
Circle list style

Disc list style
Disc list style
Disc list style
Disc list style

Square list style
Square list style
Square list style
Square list style

Code for <ul> list styles

<ul class="disc"><li>Disc list style</li></ul>
<ul class="circles"><li>Circle list style</li></ul>
<ul class="squre"><li>Squre list style</li></ul>

The three classes are: .disc .circles and .squre

Blockquotes

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Someone famous Source Title

Code for Blockquotes

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Someone famous Source Title

Code for Blockquotes Right

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

Page Title

WANT TO KNOW US BETTER? WE DON’T BITE

We focus your idea into a unique vision and identity.


<div class="page_title">
	<h1 class="title">WANT TO KNOW US BETTER? <strong>WE DON’T BITE</strong></h1>
	<h2 class="page_subtitle">We focus your idea into a unique vision and identity.</h2>
</div><!--page-title-->

Tabs

Tab 1
Tab 2
Tab 3

This is an example of a block tab

Lorem ipsum dolor sit amet, consectetur adipiscing elit.Molestie non, porta eget nisi. Sed nec felis id est tincidunt laoreet. Fusce sollicitudin scelerisque gravida.This is a span tag Nulla hendrerit imperdiet turpis, quis facilisis ante sollicitudin vel. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec rhoncus feugiat neque, et dapibus lacus aliquet vitae. In pretium velit non tellus imperdiet mollis.

This is an example of a block tab

Lorem ipsum dolor sit amet, ieeget nisi. Sed nec felis id est tincidunt laoreet. Fusce sollicitudin scmontes,This is a span tag nascetur ridiculus mus. Donec rhoncus feugiat neque, et dapibus lacus aliquet vitae. In pretium velit non tellus imperdiet mollis.

This is an example of a block tab

Lorem ipsum dolor sit amet, consectetur adipiscing elit.Molestie non, porta eget nisi. Sed nec felis id est tincidunt laoreet. Fusce sollicitudin scelerisque gr imperdiet turpis, quis facilisis ante sollicitudin vel. Cum sociis natoque penatibus et magnis dis parturient montes, This is a span tag nascetur ridiculus mus. Donec rhoncus feugiat neque, et dapibus lacus aliquet vitae. In pretium velit non tellus imperdiet mollis.Lorem ipsum dolor sit amet, consectetur adipiscing elit.Molestie non, porta eget nisi. Sed nec felis id est tincidunt laoreet. Fusce sollicitudin scelerisque gr imperdiet turpis, quis facilisis ante sollicitudin vel. Cum sociis natoque penatibus et magnis dis parturient montes, This is a span tag nascetur ridiculus mus. Donec rhoncus feugiat neque, et dapibus lacus aliquet vitae. In pretium velit non tellus imperdiet mollis.

Code for tabs

<div class="tabs">
		<ul class="tabs-control">
			<li><a href="#tab-1">Tab 1</a></li>
			<li><a href="#tab-2">Tab 2</a></li>
			<li><a href="#tab-3">Tab 3</a></li>
		</ul>
	<div class="tabs-tabs">
		<div class="tabs-tab tab-1">
			<h3>This is an example of a block tab</h3>
			{ Content }
		</div><!--end tab1-->

		<div class="tabs-tab tab-2">
			<h3>This is an example of a block tab</h3>
			{ Content }
			<div class="clear"></div>
		</div><!--end tab 2-->

		<div class="tabs-tab tab-3">
			<h3>This is an example of a block tab</h3>
			{ Content }
			<div class="clear"></div>
		</div><!--end tab 3-->
	</div>
</div><!--End Tabs-->

Tables

Tag	Description
<table>	Wrapping element for displaying data in a tabular format
<thead>	Container element for table header rows (<tr>) to label table columns
<tbody>	Container element for table rows (<tr>) in the body of the table
<tr>	Container element for a set of table cells (<td> or <th>) that appears on a single row
<td>	Default table cell
<th>	Special table cell for column (or row, depending on scope and placement) labels Must be used within a <thead>
<caption>	Description or summary of what the table holds, especially useful for screen readers

Code for tables

<table cellspacing='0'>
	<tr>
	  <th><strong>Tag</strong></th>
	  <th><strong align="center">Description</strong></th>
  </tr>
	<tr>
	  <td><strong><table></strong></td>
	  <td>Wrapping element for displaying data in a tabular format</td>
  </tr>
	<tr class="even">
	  <td><strong><thead></strong></td>
	  <td>Container element for table header rows (<tr>) to label table columns</td>
  </tr>
	<tr>
	  <td><strong><tbody></strong></td>
	  <td>Container element for table rows (<tr>) in the body of the table</td>
  </tr>
	<tr class="even">
	  <td><strong><tr></strong></td>
	  <td>Container element for a set of table cells (<td> or <th>) that appears on a single row</td>
  </tr>
	<tr>
	  <td><strong><td></strong></td>
	  <td>Default table cell</td>
  </tr>
	<tr class="even">
	  <td><strong><th></strong></td>
	  <td>Special table cell for column (or row, depending on scope and placement) labels<br />
	    Must be used within a <thead></td>
  </tr>
	<tr>
	  <td><strong><caption></strong></td>
	  <td>Description or summary of what the table holds, especially useful for screen readers</td>
  </tr>
</table>

Accordions

This is an example of a accordion

Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna.Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna.Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In suscipit faucibus urna.

This is a second accordion

This is a third accordion

Code for Accordion

<div class="accordion_wrap">
	 <h3 class="accordion"><a href="#"><i class="fa fa-plus"></i><i class="fa fa-minus"></i>This is an example of a accordion</a></h3>
	 <div class="accordion_container">
		<div class="block">
			{ Content }
		</div>			        
	</div><!--accordion container-->   

	<h3 class="accordion"><a href="#"><i class="fa fa-plus"></i><i class="fa fa-minus"></i>This is a second accordion</a></h3>
	<div class="accordion_container">
		<div class="block">
			{ Content }
		</div>			        
	</div><!--accordion container-->   

	<h3 class="accordion"><a href="#"><i class="fa fa-plus"></i><i class="fa fa-minus"></i>This is a third accordion</a></h3>
	<div class="accordion_container">
		<div class="block">
			{ Content }
		</div>			        
	</div><!--accordion container-->    
				
</div><!--accordion_wrap-->

Toggles

This is an example of a toggle

Consequat te olim letalis premo ad hos olim odio olim indoles ut venio iusto. Euismod, sagaciter diam neque antehabeo blandit, jumentum transverbero luptatum. Lenis vel diam praemitto molior facilisi facilisi suscipere abico, ludus, at. Wisi suscipere nisl ad capto comis esse, autem genitus.

This is a second toggle

This is a third toggle

Code for Toggle

<div class="toggle">         
	<h3 class="trigger"> <a href="#"> <i class="fa fa-plus"> </i> <i class="fa fa-minus"> </i> This is an example of a toggle</a> </h3> 
	<div class="toggle_container"> 
	<div class="block"> { Content }</div> <!--trugger dark--> 


	<h3 class="trigger"> <a href="#"> <i class="fa fa-plus"> </i> <i class="fa fa-minus"> </i> This is a second toggle</a> </h3> 
	<div class="toggle_container"> 
	<div class="block"> { Content }</div> <!--trugger dark--> 


	<h3 class="trigger"> <a href="#"> <i class="fa fa-plus"> </i> <i class="fa fa-minus"> </i> This is a third toggle</a> </h3> 
	<div class="toggle_container"> 
	<div class="block"> { Content }</div> 
</div> <!--Toggle -->

Pricing Tables

Basic

$3.99/Monthly

Free Live Support
Unlimited Users
No Time Tracking
Free setup

Purchase Now

Platinum

$5.99/Monthly

Free Live Support
Unlimited Users
No Time Tracking
Free setup

Purchase Now

Code for Pricing Tables

<div class="pricing-table">
	<div class="pricing_header">
		<h1>Titanium</h1>
	</div>
	<div class="pricing_sub_header">
		<h1>$19.99<span>/Monthly</span></h1>
	</div>

	<ul class="features">
		<li>Free Live Support</li>
		<li>Unlimited Users</li>
		<li>No Time Tracking</li>
		<li>Free setup</li>
	</ul><!-- end .features -->

	<div class="pricing_footer">
		<a href="#link" class="btn btn-primary">Purchase Now</a>
	</div>
</div><!--pricing-table-->

Shortcodes

Grid System

One Column

Two Column

Two Column

Three Column

Three Column

Three Column

Three Column

Three Column

Three Column

Three Column

Alerts

Dismissible alerts

Skill Bars

SEO

Jquery

Wordpress

HTML5

CSS

Code for skill bars

Skill Bars STRIPED

SEO

Jquery

Wordpress

HTML5

CSS

Code for skill bars stripped

Buttons

Labels

Default Primary Success Info Warning Danger Deep

Badges

Pretty Photo

Code for PrettyPhoto

Pretty Photo Gallery

Code for PrettyPhoto

Pretty Photo Youtube Video

Code for PrettyPhoto Youtube Video

Pretty Photo Vimeo Video

Code for PrettyPhoto Vimeo Video

List Styles

Code for <ul> list styles

Blockquotes

Code for Blockquotes

Code for Blockquotes Right

Page Title

WANT TO KNOW US BETTER? WE DON’T BITE

We focus your idea into a unique vision and identity.

Tabs

This is an example of a block tab

This is an example of a block tab

This is an example of a block tab

Code for tabs

Tables

Code for tables

Accordions

This is an example of a accordion

This is a second accordion

This is a third accordion

Code for Accordion

Toggles

This is an example of a toggle

This is a second toggle

This is a third toggle

Code for Toggle

Pricing Tables

Basic

$3.99/Monthly

Platinum

$5.99/Monthly

Code for Pricing Tables

About Us

Our location

Social

Our latest tweets

Contact

Color

Hide Panel