Responsive Grid Layout

One Half

Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet.

One Half

Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. 

<div class="row">

  <div class="col-md-6"> 

    <div class="glyphicon-block">
      <span class="glyphicon glyphicon-cog"></span>
      <h4>One Half</h4>
      <p>Donec sed odio dui...</p>
    </div> 

  </div> 

  <div class="col-md-6"> 

    <div class="glyphicon-block">
      <span class="glyphicon glyphicon-globe"></span>
      <h4>One Half</h4>
      <p>Donec sed odio dui...</p>
    </div> 

  </div> 

</div>

One Third

Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ant.

One Third

Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ant.

One Third

Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ant. 

<div class="row">

  <div class="col-md-4"> 

    <div class="glyphicon-block">
      <span class="glyphicon glyphicon-camera"></span>
      <h4>One Third</h4>
      <p>Donec sed odio dui...</p>
    </div> 

  </div> 

  <div class="col-md-4"> 

    <div class="glyphicon-block">
      <span class="glyphicon glyphicon-cloud"></span>
      <h4>One Third</h4>
      <p>Donec sed odio dui...</p>
    </div> 

  </div> 

  <div class="col-md-4"> 

    <div class="glyphicon-block">
      <span class="glyphicon glyphicon-shopping-cart"></span>
      <h4>One Third</h4>
      <p>Donec sed odio dui...</p>
    </div> 

  </div> 

</div>

One Third

Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultric. Integer posuere erat a ante.

Two Thirds

Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nulla vitae elit libero dolor id nibh ultricies vehicula. 

<div class="row">

  <div class="col-md-4"> 

    <div class="glyphicon-block">
      <span class="glyphicon glyphicon-stats"></span>
      <h4>One Third</h4>
      <p>Donec sed odio dui...</p>
    </div> 

  </div> 

  <div class="col-md-8"> 

    <div class="glyphicon-block">
      <span class="glyphicon glyphicon-user"></span>
      <h4>One Third</h4>
      <p>Donec sed odio dui...</p>
    </div> 

  </div> 

</div>

Two Thirds

Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nulla vitae elit libero dolor id nibh ultricies vehicula.

One Third

Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultric. Integer posuere erat a ante. 

<div class="row">

  <div class="col-md-8"> 

    <div class="glyphicon-block">
      <span class="glyphicon glyphicon-map-marker"></span>
      <h4>One Third</h4>
      <p>Donec sed odio dui...</p>
    </div> 

  </div> 

  <div class="col-md-4"> 

    <div class="glyphicon-block">
      <span class="glyphicon glyphicon-cloud-download"></span>
      <h4>One Third</h4>
      <p>Donec sed odio dui...</p>
    </div> 

  </div> 

</div>

One Fourth

Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut.

One Fourth

Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut.

One Fourth

Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut.

One Fourth

Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Nullam id dolor id nibh ultricies vehicula ut. 

<div class="row">

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

    <div class="glyphicon-block">
      <span class="glyphicon glyphicon-heart"></span>
      <h4>One Fourth</h4>
      <p>Donec sed odio dui...</p>
    </div> 

  </div> 

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

    <div class="glyphicon-block">
      <span class="glyphicon glyphicon-home"></span>
      <h4>One Fourth</h4>
      <p>Donec sed odio dui...</p>
    </div> 

  </div> 

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

    <div class="glyphicon-block">
      <span class="glyphicon glyphicon-envelope"></span>
      <h4>One Fourth</h4>
      <p>Donec sed odio dui...</p>
    </div> 

  </div> 

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

    <div class="glyphicon-block">
      <span class="glyphicon glyphicon-refresh"></span>
      <h4>One Fourth</h4>
      <p>Donec sed odio dui...</p>
    </div> 

  </div> 

</div>

One Fourth

Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Nullam id.

Three Fourth

Phasellus erat mi, tempor quis aliquam eget, convallis et augue. Morbi vel gravida magna. Dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. 

<div class="row">

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

    <div class="glyphicon-block">
      <span class="glyphicon glyphicon-phone-alt"></span>
      <h4>One Fourth</h4>
      <p>Donec sed odio dui...</p>
    </div> 

  </div> 

  <div class="col-md-9"> 

    <div class="glyphicon-block">
      <span class="glyphicon glyphicon-th-large"></span>
      <h4>One Fourth</h4>
      <p>Donec sed odio dui...</p>
    </div> 

  </div> 

</div>