Bootstrap grid examples

Bootstrap grid system.

by Edgar Martinez

HTML

<div class="container text-center">
    <h4>One Column</h4>
    <div class="row">
        <div class="col-md-12">.col-md-12</div>
      </div>
         
    <div class="row">
        <h4>Two Columns</h4>
        <div class="col-md-6">.col-md-6</div>
        <div class="col-md-6">.col-md-6</div>
      </div>
         
    <ul class="row">
        <h4>Three Columns</h4>
        <li class="col-md-4">.col-md-4</li>
        <li class="col-md-4">.col-md-4</li>
        <li class="col-md-4">.col-md-4</li>
      </ul>
         
    <div class="row">
        <h4>Four Columns</h4>
        <div class="col-md-3">.col-md-3</div>
        <div class="col-md-3">.col-md-3</div>
        <div class="col-md-3">.col-md-3</div>
        <div class="col-md-3">.col-md-3</div>
      </div>
         
    <div class="row">
        <h4>Five Columns</h4>
        <div class="col-md-6">.col-md-6</div>
        <div class="col-md-2">.col-md-2</div>
        <div class="col-md-2">.col-md-2</div>
        <div class="col-md-2">.col-md-2</div>
      </div>
         
    <div class="row">
        <h4>Six Columns</h4>
        <div class="col-md-2">.col-md-2</div>
        <div class="col-md-2">.col-md-2</div>
        <div class="col-md-2">.col-md-2</div>
        <div class="col-md-2">.col-md-2</div>
        <div class="col-md-2">.col-md-2</div>
        <div class="col-md-2">.col-md-2</div>
      </div>
    <hr />
         
    <div class="row">
        <h4>Nested columns</h4>

        <div class="col-md-8">
          .col-md-8
          <div class="row">
            <div class="col-md-6">.col-md-6</div>
            <div class="col-md-6">.col-md-6</div>
          </div>
        </div>
        <div class="col-md-4">.col-md-4</div>
      </div>
    
    
<div class="row">
        <h4>Mixed: mobile and desktop</h4>
        <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
        <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
      </div>
    
<div class="row">
        <div class="col-xs-6...

CSS

body { padding: 20px; }
.container {
  padding-right: 15px;
  padding-left: 15px;
}

h4 { margin-bottom: 30px; }

.row {
  margin-bottom: 20px;
}
.row .row {
  margin-top: 10px;
  margin-bottom: 0;
}
[class*="col-"] {
  padding-top: 15px;
  padding-bottom: 15px;
  border: 1px solid #ddd;
  border: 1px solid rgba(86,61,124,.2);
  font-size: 11px;
}

hr {
  margin-top: 40px;
  margin-bottom: 40px;
}