<div class="container">
   <div class="page-header">
      <h1>Common Bootstrap 3 Grid Layouts</h1>
   </div>
   <!--  /page-header  -->

   <h2>One column centered</h2>

   <div class="row">
      <div class="my-cb center-block">

      </div>

   </div>


   <div class="row">
      <div class="col-md-6 col-md-offset-3"></div>
   </div>

   <h2>Two column</h2>
   <div class="row">

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

      </div>
      <!-- /.col-md-6 -->
      <div class="col-md-6">

      </div>
      <!-- /.col-md-6 -->
   </div>
   <!-- /.row -->


   <h2>Two column - Golden Ratio Left</h2>
   <div class="row">

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

      </div>
      <!-- /.col-md-6 -->
      <div class="col-md-4">

      </div>
      <!-- /.col-md-6 -->
   </div>
   <!-- /.row -->


   <h2>Two column - Golden Ratio Right</h2>
   <div class="row">

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

      </div>
      <!-- /.col-md-6 -->
      <div class="col-md-8">

      </div>
      <!-- /.col-md-6 -->
   </div>
   <!-- /.row -->


   <h2>Three column</h2>
   <div class="row">

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

      </div>
      <!-- /.col-md-6 -->
      <div class="col-md-4">

      </div>
      <!-- /.col-md-6 -->
      <div class="col-md-4">

      </div>
      <!-- /.col-md-6 -->
   </div>
   <!-- /.row -->


   <h2>Four column</h2>
   <div class="row">

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

      </div>
      <!-- /.col-md-6 -->
      <div class="col-md-3">

      </div>
      <!-- /.col-md-6 -->
      <div class="col-md-3">

      </div>
      <!-- /.col-md-6 -->
      <div class="col-md-3">

      </div>
      <!-- /.col-md-6 -->

   </div>
   <!-- /.row -->

   <h2>Five column - Needs custom styles, see CSS</h2>
<div class="row five-columns">
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
    <div class="col-md-2"></div>
</div>
   
   
   <h2>Six column</h2>
   <div class="row">

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

      </div>
      <!-- /.col-md-6 -->
      <div class="col-md-2">

      </div>
      <!-- /.col-md-6 -->
      <div class="col-md-2">

      </div>
      <!-- /.col-md-6 -->
      <div class="col-md-2">

      </div>
      <!-- /.col-md-6 -->
      <div class="col-md-2">

      </div>
      <!-- /.col-md-6 -->
      <div class="col-md-2">

      </div>
      <!-- /.col-md-6 -->
   </div>
   <!-- /.row -->






   
   
</div>
<!-- /.container -->
/* add width to element with .center-block because its default is 100% */
.my-cb {width:200px;}

/* Used for demo purposes */
.row div { margin-bottom:1em;background:blue;opacity:0.4;}
.row div:nth-child(odd) {background-color:orange;}

.row div:after {content: " ";background:#ccc;width:100%;display:block;height:30px;}





/* start of modification for 5 columns */
@media (min-width: 768px){
    .five-columns .col-md-2, .five-columns .col-sm-2, .five-columns .col-lg-2  {
        width: 20%;
        *width: 20%;
    }
}
@media (min-width: 1200px) {
    .five-columns .col-md-2, .five-columns .col-sm-2, .five-columns .col-lg-2 {
        width: 20%;
        *width: 20%;
    }
}
@media (min-width: 768px) and (max-width: 979px) {
    .five-columns .col-md-2, .five-columns .col-sm-2, .five-columns .col-lg-2 {
        width: 20%;
        *width: 20%;
    }
}
/* end of modification for 5 columns */

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js
  2. //maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js