Features Box - Style 1

Box will take width of 'div' inside which it is placed, here inside '.span6'

<div class="span6">
<div class="feature-box1">
<h3>Easily editable</h3>
<p>Eeifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me legunt saepius.</p> 
<img src="img/icons/lamp_active.png" width="32" height="32" alt="icon"> </div>
</div>

Features Box - Style 2

Box will take width of 'div' inside which it is placed, here inside '.span6'

<div class="span6">
<div class="feature-box2"> <img src="img/icons/icon-big-64-1.png" width="64" height="64" alt="icon">
<h3>Easily editable</h3>
<p>Eeifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me legunt saepius.</p>
</div>
</div>

Screenshots Gallery - Style 1

• 

• Tools anyone can use

  Eeifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam.

  Read more
• 

• Unlock the possibilities

  Eeifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam.

  Read more

<div class="row">
<div class="span12">
<ul class="gallery-text-img">
<li>
<div class="thumb"><img src="img/preview/thumb-1.jpg" width="200" height="150" alt="image"><a href="img/preview/slider-img1.png" data-rel="prettyPhoto[gallery1]" title="This is title of image" class="zoom"></a></div>
</li>
<li>
<h4>Tools anyone can use</h4>
<p>Eeifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam.</p>
<a href="#" class="link-arrow">Read more</a> </li>
<li>
<div class="thumb"><img src="img/preview/thumb-1.jpg" width="200" height="150" alt="image"><a href="img/preview/slider-img1.png" data-rel="prettyPhoto[gallery1]" title="This is title of image" class="zoom"></a></div>
</li>
<li class="omega">
<h4>Unlock the possibilities</h4>
<p>Eeifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam.</p>
<a href="#" class="link-arrow">Read more</a> </li>
</ul>
</div>
</div>

Button styles

<a href="#" class="btn-android" title="button"></a>

<a href="#" class="btn-blackberry" title="button"></a>

<a href="#" class="btn-iphone" title="button"></a>

 <a href="#" class="btn-windows" title="button"></a>

<a href="#" class="btn-grey">Grey small button</a>

<a href="#" class="btn-green">Green small button</a>

<a href="#" class="btn-cyan">Cyan small button</a>

<a href="#" class="btn-brown">Brown small button</a>

<a href="#" class="btn-grey btn-big">Grey big button</a>

<a href="#" class="btn-green btn-big">Green big button</a>

<a href="#" class="btn-cyan btn-big">Cyan big button</a>

<a href="#" class="btn-brown btn-big">Brown big button</a>

Grid system

For a simple two column layout, create a .row and add the appropriate number of .span* columns. As this is a 12-column grid, each .span* spans a number of those 12 columns, and should always add up to 12 for each row (or the number of columns in the parent).

<div class="row">
  <div class="span4">...</div>
  <div class="span8">...</div>
</div>

Given this example, we have .span4 and .span8, making for 12 total columns and a complete row.

Nesting columns

To nest your content with the default grid, add a new .row and set of .span* columns within an existing .span* column. Nested rows should include a set of columns that add up to the number of columns of its parent.

<div class="row">
  <div class="span9">
    Level 1 column
    <div class="row">
      <div class="span6">Level 2</div>
      <div class="span3">Level 2</div>
    </div>
  </div>
</div>