cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <h1 class="h1-like">Bootstrap testing</h1>
<p class="txtcenter">public URL : <a href="http://kiwi.gg/b">kiwi.gg/b</a></p>

<p>Documentation at <a href="https://getbootstrap.com/css/#grid">https://getbootstrap.com/css/#grid</a>.</p>
<p>Features:</p>
<ul>
  <li>mobile-first
  <li>default 12-column
  <li>nestable
</ul>
<p>Howto:</p>
<ul>
  <li>Within a <code>.container</code> (fixed-width) or <code>.container-fluid</code> (full-width)
  <li>a <code>.row</code> element should be added
  <li>within that row, then add elements with a <code>.col-XX</code> class and/or
  <li>specify the widths of each column with the <code>.col-xs-#</code>, <code>.col-md-#</code>, and <code>.col-lg-#</code> classes.
  <li>If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.
  <li><i>Nested grids</i> - To nest your content with the default grid, add a new <code>.row</code> and set of <code>.col-sm-*</code> columns within an existing <code>.col-sm-*</code> column.<br>Nested rows should include a set of columns that add up to 12 or fewer (it is not required that you use all 12 available columns)
  <li><i>Offsets</i> - Move columns to the right using <code>.col-md-offset-*</code> classes. These classes increase the left margin of a column by <code>*</code> columns.
</ul>

<h2 class="h2-like">single column</h2>
<p><b>Action:</b> a <code>.container</code> element with a child <code>.col-12</code> (variations: a <code>.container-fluid</code> as parent container or a <code>.col-cs-12</code> child).</p>
<p><b>Test:</b> <span class="ok">OK</span> if : </p>
<ul>
  <li>1 column on tiny devices</li>
  <li>1 column on small devices</li>
  <li>1 column on higher devices</li>
</ul>
<div class="container">.container
  <div class="row"><p>.row</p>
    <div class="col-12">.col-12 Lorem</div>
  </div>
  <div class="row"><p>.row</p>
    <div class="col-xs-12">.col-xs-12 Lorem</div>
  </div>
</div> <!-- / fixed-width container -->
<div class="container-fluid">.container-fluid
  <div class="row"><p>.row</p>
    <div class="col-12">.col-12 Lorem</div>
  </div>
  <div class="row"><p>.row</p>
    <div class="col-xs-12">.col-xs-12 Lorem</div>
  </div>
</div> <!-- / fluid-width container -->

<table>
  <caption>Tests results : single column</caption>
  <thead>
    <tr>
      <th scope="col">Browser</th>
      <th scope="col">Test</th>
      <th scope="col">Comment</th>
     </tr>
  </thead>
  <tr>
    <th scope="row">Windows Chrome</th>
    <td>OK</td>
    <td>-</td>
  </tr>
  <tr>
    <th scope="row">Windows Firefox</th>
    <td>OK</td>
    <td>-</td>
  </tr>
  <tr>
    <th scope="row">Windows IE10</th>
    <td>OK</td>
    <td>-</td>
  </tr>
  <tr>
    <th scope="row">Windows IE11</th>
    <td>OK</td>
    <td>-</td>
  </tr>
  <tr>
    <th scope="row">Windows Edge</th>
    <td>OK</td>
    <td>-</td>
  </tr>
  <tr>
    <th scope="row">Mac Safari</th>
    <td>OK</td>
    <td>-</td>
  </tr>
  <tr>
    <th scope="row">Apple iPhone 5 (iOS 9.x)</th>
    <td>OK</td>
    <td>-</td>
  </tr>
  <tr>
    <th scope="row">LG Nexus 5 (Android 5.x)</th>
    <td>...</td>
    <td>...</td>
  </tr>
  <tr>
    <th scope="row">Motorola Moto G (Android 6.x)</th>
    <td>OK</td>
    <td>-</td>
  </tr>
</table>

<h2 class="h2-like">three equal columns</h2>
<p><b>Action:</b> In a <code>.container(-fluid)</code> parent, 3 or 4 children with <code>.col-sm-6</code> and <code>.col-md-4</code> classes (variations: adding <code>.col-xs-12</code>.</p>
<p><b>Test:</b> <span class="ok">OK</span> if : </p>
<ul>
  <li>1 column on tiny devices </li>
  <li>2 equal columns on small devices</li>
  <li>3 equal columns on higher devices</li>
  <li>Picture scales down on tiny screens</li>
</ul>
<div class="container">.container
  <div class="row"><p>.row</p>
    <div class="col-sm-6 col-md-4">.col-sm-6 col-md-4 Lorem</div>
    <div class="col-sm-6 col-md-4">.col-sm-6 col-md-4 Lorem</div>
    <div class="col-sm-6 col-md-4">.col-sm-6 col-md-4 Lorem</div>
  </div>
  <div class="row"><p>.row</p>
    <div class="col-xs-12 col-sm-6 col-md-4">.col-xs-12 col-sm-6 col-md-4 one</div>
    <div class="col-xs-12 col-sm-6 col-md-4">.col-xs-12 col-sm-6 col-md-4 two</div>
    <div class="col-xs-12 col-sm-6 col-md-4">.col-xs-12 col-sm-6 col-md-4 three</div>
    <div class="col-xs-12 col-sm-6 col-md-4">
      and a picture! <br />
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/9425/chuck-norris-775.jpg" alt="chucky" width="775">
    </div>
  </div>
</div> <!-- / fixed-width container -->
<div class="container-fluid">.container-fluid
  <div class="row"><p>.row</p>
    <div class="col-sm-6 col-md-4">.col-sm-6 col-md-4 Lorem</div>
    <div class="col-sm-6 col-md-4">.col-sm-6 col-md-4 Lorem</div>
    <div class="col-sm-6 col-md-4">.col-sm-6 col-md-4 Lorem</div>
  </div>
  <div class="row"><p>.row</p>
    <div class="col-xs-12 col-sm-6 col-md-4">.col-xs-12 col-sm-6 col-md-4 one</div>
    <div class="col-xs-12 col-sm-6 col-md-4">.col-xs-12 col-sm-6 col-md-4 two</div>
    <div class="col-xs-12 col-sm-6 col-md-4">.col-xs-12 col-sm-6 col-md-4 three</div>
    <div class="col-xs-12 col-sm-6 col-md-4">
      and a picture! <br />
      <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/9425/chuck-norris-775.jpg" alt="chucky" width="775">
    </div>
  </div>
</div> <!-- / fluid-width container -->

<table>
  <caption>Tests results : three equal columns</caption>
  <thead>
    <tr>
      <th scope="col">Browser</th>
      <th scope="col">Test</th>
      <th scope="col">Comment</th>
     </tr>
  </thead>
  <tr>
    <th scope="row">Windows Chrome</th>
    <td>Limited</td>
    <td>Fails if .row larger than 12, in a way depending of the height of previous column (not necessarily obvious with simple cases)</td>
  </tr>
  <tr>
    <th scope="row">Windows Firefox</th>
    <td>Limited</td>
    <td>Idem</td>
  </tr>
  <tr>
    <th scope="row">Windows IE10</th>
    <td>Limited</td>
    <td>Idem</td>
  </tr>
  <tr>
    <th scope="row">Windows IE11</th>
    <td>Limited</td>
    <td>Idem</td>
  </tr>
  <tr>
    <th scope="row">Windows Edge</th>
    <td>Limited</td>
    <td>Idem</td>
  </tr>
  <tr>
    <th scope="row">Mac Safari</th>
    <td>Limited</td>
    <td>Idem</td>
  </tr>
  <tr>
    <th scope="row">Apple iPhone 5 (iOS 9.x)</th>
    <td>OK</td>
    <td>-</td>
  </tr>
  <tr>
    <th scope="row">LG Nexus 5 (Android 5.x)</th>
    <td>...</td>
    <td>...</td>
  </tr>
  <tr>
    <th scope="row">Motorola Moto G (Android 6.x)</th>
    <td>OK</td>
    <td>-</td>
  </tr>
</table>


<h2 class="h2-like">three unequal columns</h2>
<p><b>Action:</b> In a <code>.container(-fluid)</code> parent, 3 children with <code>.col-sm-6</code> class. 2 of them also have <code>.col-md-3</code> and 1 of them <code>.col-md-6</code> class (variation: children with <code>.col-xs-12</code> class which should stay optional).</p>
<p><b>Test:</b> <span class="ok">OK</span> if : </p>
<ul>
  <li>1 column on tiny devices</li>
  <li>2 equal columns on small devices</li>
  <li>3 unequal columns on higher devices</li>
</ul>
<div class="container">.container
  <div class="row"><p>.row</p>
    <div class="col-sm-6 col-md-3">.col-sm-6 col-md-3 Lorem</div>
    <div class="col-sm-6 col-md-6">.col-sm-6 col-md-6 Lorem</div>
    <div class="col-sm-6 col-md-3">.col-sm-6 col-md-3 Lorem</div>
  </div>
  <div class="row"><p>.row</p>
    <div class="col-xs-12 col-sm-6 col-md-3">.col-xs-12 col-sm-6 col-md-3 Lorem</div>
    <div class="col-xs-12 col-sm-6 col-md-6">.col-xs-12 col-sm-6 col-md-6 Lorem</div>
    <div class="col-xs-12 col-sm-6 col-md-3">.col-xs-12 col-sm-6 col-md-3 Lorem</div>
  </div>
</div> <!-- / fixed-width container -->
<div class="container-fluid">.container-fluid
  <div class="row"><p>.row</p>
    <div class="col-sm-6 col-md-3">.col-sm-6 col-md-3 Lorem</div>
    <div class="col-sm-6 col-md-6">.col-sm-6 col-md-6 Lorem</div>
    <div class="col-sm-6 col-md-3">.col-sm-6 col-md-3 Lorem</div>
  </div>
  <div class="row"><p>.row</p>
    <div class="col-xs-12 col-sm-6 col-md-3">.col-xs-12 col-sm-6 col-md-3 Lorem</div>
    <div class="col-xs-12 col-sm-6 col-md-6">.col-xs-12 col-sm-6 col-md-6 Lorem</div>
    <div class="col-xs-12 col-sm-6 col-md-3">.col-xs-12 col-sm-6 col-md-3 Lorem</div>
  </div>
</div> <!-- / fluid-width container -->

<table>
  <caption>Tests results : three unequal columns</caption>
 <thead>
    <tr>
      <th scope="col">Browser</th>
      <th scope="col">Test</th>
      <th scope="col">Comment</th>
     </tr>
  </thead>
  <tr>
    <th scope="row">Windows Chrome</th>
    <td>Limited</td>
    <td>Fails if .row larger than 12, in a way depending of the height of previous column (not necessarily obvious with simple cases)</td>
  </tr>
  <tr>
    <th scope="row">Windows Firefox</th>
    <td>Limited</td>
    <td>Idem</td>
  </tr>
  <tr>
    <th scope="row">Windows IE10</th>
    <td>Limited</td>
    <td>Idem</td>
  </tr>
  <tr>
    <th scope="row">Windows IE11</th>
    <td>Limited</td>
    <td>Idem</td>
  </tr>
  <tr>
    <th scope="row">Windows Edge</th>
    <td>Limited</td>
    <td>Idem</td>
  </tr>
  <tr>
    <th scope="row">Mac Safari</th>
    <td>Limited</td>
    <td>Idem</td>
  </tr>
  <tr>
    <th scope="row">Apple iPhone 5 (iOS 9.x)</th>
    <td>OK</td>
    <td>-</td>
  </tr>
  <tr>
    <th scope="row">LG Nexus 5 (Android 5.x)</th>
    <td>...</td>
    <td>...</td>
  </tr>
  <tr>
    <th scope="row">Motorola Moto G (Android 6.x)</th>
    <td>OK</td>
    <td>-</td>
  </tr>
</table>


<h2 class="h2-like">three unequal columns with gutter</h2>
<p><b>Action:</b> In a <code>.container(-fluid)</code> parent, some rows with unequal and equal columns. Then styling background color of the content of <code>.col-**</code>s instead of <code>.col-**</code>s themselves.
</p>
<p><b>Test:</b> <span class="ok">OK</span> if : </p>
<ul>
  <li>1 column on tiny devices </li>
  <li>2 equal columns on small devices </li>
  <li>3 unequal columns on higher devices</li>
  <li>gutter appears between columns</li>
  <li>children's sizes are correctly designed</li>
</ul>
<div class="container">.container
  <div class="row show-gutter"><p>.row</p>
    <div class="col-sm-6 col-md-3"><p>.col-sm-6 col-md-3 Lorem</p></div>
    <div class="col-sm-6 col-md-6"><p>.col-sm-6 col-md-6 Lorem</p></div>
    <div class="col-sm-6 col-md-3"><p>.col-sm-6 col-md-3 Lorem</p></div>
  </div>
  <div class="row show-gutter"><p>.row</p>
    <div class="col-sm-6 col-md-3"><p>.col-sm-6 col-md-3 Lorem</p></div>
    <div class="col-sm-6 col-md-9"><p>.col-sm-6 col-md-9 Lorem</p></div>
  </div>
  <div class="row show-gutter"><p>.row</p>
    <div class="col-sm-6 col-md-6"><p>.col-sm-6 col-md-6 Lorem</p></div>
    <div class="col-sm-6 col-md-6"><p>.col-sm-6 col-md-6 Lorem</p></div>
  </div>

  <div class="row show-gutter"><p>.row</p>
    <div class="col-xs-12 col-sm-6 col-md-3"><p>.col-xs-12 col-sm-6 col-md-3 Lorem</p></div>
    <div class="col-xs-12 col-sm-6 col-md-6"><p>.col-xs-12 col-sm-6 col-md-6 Lorem</p></div>
    <div class="col-xs-12 col-sm-6 col-md-3"><p>.col-xs-12 col-sm-6 col-md-3 Lorem</p></div>
  </div>
  <div class="row show-gutter"><p>.row</p>
    <div class="col-xs-12 col-sm-6 col-md-3"><p>.col-xs-12 col-sm-6 col-md-3 Lorem</p></div>
    <div class="col-xs-12 col-sm-6 col-md-9"><p>.col-xs-12 col-sm-6 col-md-9 Lorem</p></div>
  </div>
  <div class="row show-gutter"><p>.row</p>
    <div class="col-xs-12 col-sm-6 col-md-6"><p>.col-xs-12 col-sm-6 col-md-6 Lorem</p></div>
    <div class="col-xs-12 col-sm-6 col-md-6"><p>.col-xs-12 col-sm-6 col-md-6 Lorem</p></div>
  </div>
</div> <!-- / fixed-width container -->
<div class="container-fluid">.container-fluid
  <div class="row show-gutter"><p>.row</p>
    <div class="col-sm-6 col-md-3"><p>.col-sm-6 col-md-3 Lorem</p></div>
    <div class="col-sm-6 col-md-6"><p>.col-sm-6 col-md-6 Lorem</p></div>
    <div class="col-sm-6 col-md-3"><p>.col-sm-6 col-md-3 Lorem</p></div>
  </div>
  <div class="row show-gutter"><p>.row</p>
    <div class="col-sm-6 col-md-3"><p>.col-sm-6 col-md-3 Lorem</p></div>
    <div class="col-sm-6 col-md-9"><p>.col-sm-6 col-md-9 Lorem</p></div>
  </div>
  <div class="row show-gutter"><p>.row</p>
    <div class="col-sm-6 col-md-6"><p>.col-sm-6 col-md-6 Lorem</p></div>
    <div class="col-sm-6 col-md-6"><p>.col-sm-6 col-md-6 Lorem</p></div>
  </div>

  <div class="row show-gutter"><p>.row</p>
    <div class="col-xs-12 col-sm-6 col-md-3"><p>.col-xs-12 col-sm-6 col-md-3 Lorem</p></div>
    <div class="col-xs-12 col-sm-6 col-md-6"><p>.col-xs-12 col-sm-6 col-md-6 Lorem</p></div>
    <div class="col-xs-12 col-sm-6 col-md-3"><p>.col-xs-12 col-sm-6 col-md-3 Lorem</p></div>
  </div>
  <div class="row show-gutter"><p>.row</p>
    <div class="col-xs-12 col-sm-6 col-md-3"><p>.col-xs-12 col-sm-6 col-md-3 Lorem</p></div>
    <div class="col-xs-12 col-sm-6 col-md-9"><p>.col-xs-12 col-sm-6 col-md-9 Lorem</p></div>
  </div>
  <div class="row show-gutter"><p>.row</p>
    <div class="col-xs-12 col-sm-6 col-md-6"><p>.col-xs-12 col-sm-6 col-md-6 Lorem</p></div>
    <div class="col-xs-12 col-sm-6 col-md-6"><p>.col-xs-12 col-sm-6 col-md-6 Lorem</p></div>
  </div>
</div> <!-- / fluid-width container -->

<table>
  <caption>Tests results : three unequal columns with gutter</caption>
 <thead>
    <tr>
      <th scope="col">Browser</th>
      <th scope="col">Test</th>
      <th scope="col">Comment</th>
     </tr>
  </thead>
  <tr>
    <th scope="row">Windows Chrome</th>
    <td>Not directly</td>
    <td>- No real gutter, styling a child of .column<br>- Widths aren't exact because a fixed padding is substracted from any (child of) column<br>- Expanded rows have half a gutter on their left and right</td>
  </tr>
  <tr>
    <th scope="row">Windows Firefox</th>
    <td>Not directly</td>
    <td>Idem</td>
  </tr>
  <tr>
    <th scope="row">Windows IE10</th>
    <td>Not directly</td>
    <td>Idem</td>
  </tr>
  <tr>
    <th scope="row">Windows IE11</th>
    <td>Not directly</td>
    <td>Idem</td>
  </tr>
  <tr>
    <th scope="row">Windows Edge</th>
    <td>Not directly</td>
    <td>Idem</td>
  </tr>
  <tr>
    <th scope="row">Mac Safari</th>
    <td>Not directly</td>
    <td>Idem</td>
  </tr>
  <tr>
    <th scope="row">Apple iPhone 5 (iOS 9.x)</th>
    <td>Not directly</td>
    <td>- No real gutter, styling a child of .column</td>
  </tr>
  <tr>
    <th scope="row">LG Nexus 5 (Android 5.x)</th>
    <td>...</td>
    <td>...</td>
  </tr>
  <tr>
    <th scope="row">Motorola Moto G (Android 6.x)</th>
    <td>OK</td>
    <td>Idem</td>
  </tr>
</table>


<h2 class="h2-like">three columns with offset</h2>
<p><b>Action:</b> Class <code>.col-sm-offset-4</code> is added to the 4<sup>th</sup> column to offset it by the width of 4 columns.<br>Other test case: only 2 children with 1 of them having this same class.</p>
<p><b>Test:</b> <span class="ok">OK</span> if : </p>
<ul>
  <li>1 column on tiny devices</li>
  <li>3 equal columns on higher devices</li>
  <li>4th child is pushed on the right (on small devices minimum)</li>
</ul>
<div class="container">.container
  <div class="row"><p>.row</p>
    <div class="col-sm-4"><p>.col-sm-4 one</p></div>
    <div class="col-sm-4"><p>.col-sm-4 two</p></div>
    <div class="col-sm-4"><p>.col-sm-4 three</p></div>
    <div class="col-sm-4 col-sm-offset-4"><p>.col-sm-4 col-sm-offset-4 push</p></div>
    <div class="col-sm-4"><p>.col-sm-4 five</p></div>
  </div>
  <div class="row"><p>.row</p>
    <div class="col-sm-4"><p>row1</p></div>
    <div class="col-sm-4"><p>row1</p></div>
    <div class="col-sm-4"><p>row1</p></div>
  </div>
  <div class="row"><p>.row</p>
    <div class="col-sm-4 col-sm-offset-4"><p>.col-sm-4 col-sm-offset-4 push</p></div>
    <div class="col-sm-4"><p>.col-sm-4 two</p></div>
  </div>
  <div class="row"><p>.row</p>
    <div class="col-sm-4"><p>.col-sm-4 one</p></div>
    <div class="col-sm-4 col-sm-offset-4"><p>.col-sm-4 col-sm-offset-4 push</p></div>
  </div>

  <div class="row"><p>.row</p>
    <div class="col-xs-12 col-sm-4"><p>.col-xs-12 col-sm-4 one</p></div>
    <div class="col-xs-12 col-sm-4"><p>.col-xs-12 col-sm-4 two</p></div>
    <div class="col-xs-12 col-sm-4"><p>.col-xs-12 col-sm-4 three</p></div>
    <div class="col-xs-12 col-sm-4 col-sm-offset-4"><p>.col-xs-12 col-sm-4 col-sm-offset-4 push</p></div>
    <div class="col-xs-12 col-sm-4"><p>.col-xs-12 col-sm-4 five</p></div>
  </div>
  <div class="row"><p>.row</p>
    <div class="col-xs-12 col-sm-4"><p>row1</p></div>
    <div class="col-xs-12 col-sm-4"><p>row1</p></div>
    <div class="col-xs-12 col-sm-4"><p>row1</p></div>
  </div>
  <div class="row"><p>.row</p>
    <div class="col-xs-12 col-sm-4 col-sm-offset-4"><p>.col-xs-12 col-sm-4 col-sm-offset-4 push</p></div>
    <div class="col-xs-12 col-sm-4"><p>.col-xs-12 col-sm-4 two</p></div>
  </div>
  <div class="row"><p>.row</p>
    <div class="col-xs-12 col-sm-4"><p>.col-xs-12 col-sm-4 one</p></div>
    <div class="col-xs-12 col-sm-4 col-sm-offset-4"><p>.col-xs-12 col-sm-4 col-sm-offset-4 push</p></div>
  </div>
</div> <!-- / fixed-width container -->
<div class="container-fluid">.container-fluid
  <div class="row"><p>.row</p>
    <div class="col-sm-4"><p>.col-sm-4 one</p></div>
    <div class="col-sm-4"><p>.col-sm-4 two</p></div>
    <div class="col-sm-4"><p>.col-sm-4 three</p></div>
    <div class="col-sm-4 col-sm-offset-4"><p>.col-sm-4 col-sm-offset-4 push</p></div>
    <div class="col-sm-4"><p>.col-sm-4 five</p></div>
  </div>
  <div class="row"><p>.row</p>
    <div class="col-sm-4"><p>row1</p></div>
    <div class="col-sm-4"><p>row1</p></div>
    <div class="col-sm-4"><p>row1</p></div>
  </div>
  <div class="row"><p>.row</p>
    <div class="col-sm-4 col-sm-offset-4"><p>.col-sm-4 col-sm-offset-4 push</p></div>
    <div class="col-sm-4"><p>.col-sm-4 two</p></div>
  </div>
  <div class="row"><p>.row</p>
    <div class="col-sm-4"><p>.col-sm-4 one</p></div>
    <div class="col-sm-4 col-sm-offset-4"><p>.col-sm-4 col-sm-offset-4 push</p></div>
  </div>

  <div class="row"><p>.row</p>
    <div class="col-xs-12 col-sm-4"><p>.col-xs-12 col-sm-4 one</p></div>
    <div class="col-xs-12 col-sm-4"><p>.col-xs-12 col-sm-4 two</p></div>
    <div class="col-xs-12 col-sm-4"><p>.col-xs-12 col-sm-4 three</p></div>
    <div class="col-xs-12 col-sm-4 col-sm-offset-4"><p>.col-xs-12 col-sm-4 col-sm-offset-4 push</p></div>
    <div class="col-xs-12 col-sm-4"><p>.col-xs-12 col-sm-4 five</p></div>
  </div>
  <div class="row"><p>.row</p>
    <div class="col-xs-12 col-sm-4"><p>row1</p></div>
    <div class="col-xs-12 col-sm-4"><p>row1</p></div>
    <div class="col-xs-12 col-sm-4"><p>row1</p></div>
  </div>
  <div class="row"><p>.row</p>
    <div class="col-xs-12 col-sm-4 col-sm-offset-4"><p>.col-xs-12 col-sm-4 col-sm-offset-4 push</p></div>
    <div class="col-xs-12 col-sm-4"><p>.col-xs-12 col-sm-4 two</p></div>
  </div>
  <div class="row"><p>.row</p>
    <div class="col-xs-12 col-sm-4"><p>.col-xs-12 col-sm-4 one</p></div>
    <div class="col-xs-12 col-sm-4 col-sm-offset-4"><p>.col-xs-12 col-sm-4 col-sm-offset-4 push</p></div>
  </div>
</div> <!-- / fluid-width container -->

<table>
  <caption>Tests results : three columns with push</caption>
 <thead>
    <tr>
      <th scope="col">Browser</th>
      <th scope="col">Test</th>
      <th scope="col">Comment</th>
     </tr>
  </thead>
  <tr>
    <th scope="row">Windows Chrome</th>
    <td>OK</td>
    <td>-</td>
  </tr>
  <tr>
    <th scope="row">Windows Firefox</th>
    <td>OK</td>
    <td>-</td>
  </tr>
  <tr>
    <th scope="row">Windows IE10</th>
    <td>OK</td>
    <td>-</td>
  </tr>
  <tr>
    <th scope="row">Windows IE11</th>
    <td>OK</td>
    <td>-</td>
  </tr>
  <tr>
    <th scope="row">Windows Edge</th>
    <td>OK</td>
    <td>-</td>
  </tr>
  <tr>
    <th scope="row">Mac Safari</th>
    <td>OK</td>
    <td>-</td>
  </tr>
  <tr>
    <th scope="row">Apple iPhone 5 (iOS 9.x)</th>
    <td>OK</td>
    <td>-</td>
  </tr>
  <tr>
    <th scope="row">LG Nexus 5 (Android 5.x)</th>
    <td>...</td>
    <td>...</td>
  </tr>
  <tr>
    <th scope="row">Motorola Moto G (Android 6.x)</th>
    <td>OK</td>
    <td>-</td>
  </tr>
</table>


<h2 class="h2-like">nested grid</h2>
<p><b>Action:</b> In each <code>.row</code>, 5 columns larger than 12 columns. The 4<sup>th</sup> column contains a (nested) <code>.row</code> with 2 children <code>class="col-sm-6"</code> (also <code>.col-12</code> or <code>.col-12</code>, for testing purposes).<br>The total width of the nested columns shouldn't be larger than 12 otherwise the latter will occupy 2 lines or more.</p>
<p><b>Test:</b> <span class="ok">OK</span> if : </p>
<ul>
  <li>1 column on tiny devices </li>
  <li>3 equal columns on higher devices</li>
  <li>4th child is nested</li>
</ul>
<div class="container">.container
  <div class="row"><p>.row</p>
    <div class="col-sm-4"><p>.col-sm-4 one</p></div>
    <div class="col-sm-4"><p>.col-sm-4 two</p></div>
    <div class="col-sm-4"><p>.col-sm-4 three</p></div>
    <div class="col-sm-4">
      <div class="row">
        <div class="col-sm-6"><p>.col-sm-6 nested</p></div>
        <div class="col-sm-6"><p>.col-sm-6 nested</p></div>
      </div>
    </div>
    <div class="col-sm-4"><p>.col-sm-4 five</p></div>
  </div>
  <div class="row"><p>.row</p>
    <div class="col-xs-12 col-sm-4"><p>.col-xs-12 col-sm-4 one</p></div>
    <div class="col-xs-12 col-sm-4"><p>.col-xs-12 col-sm-4 two</p></div>
    <div class="col-xs-12 col-sm-4"><p>.col-xs-12 col-sm-4 three</p></div>
    <div class="col-xs-12 col-sm-4">
      <div class="row">
        <div class="col-12 col-sm-6"><p>.col-12 col-sm-6 nested</p></div>
      <div class="col-12 col-sm-6"><p>.col-12 col-sm-6 nested</p></div>
      </div>
    </div>
    <div class="col-xs-12 col-sm-4"><p>.col-xs-12 col-sm-4 five</p></div>
  </div>
</div> <!-- / fixed-width container -->
<div class="container-fluid">.container-fluid
  <div class="row"><p>.row</p>
    <div class="col-sm-4"><p>.col-sm-4 one</p></div>
    <div class="col-sm-4"><p>.col-sm-4 two</p></div>
    <div class="col-sm-4"><p>.col-sm-4 three</p></div>
    <div class="col-sm-4">
      <div class="row">
        <div class="col-sm-6"><p>.col-sm-6 nested</p></div>
        <div class="col-sm-6"><p>.col-sm-6 nested</p></div>
      </div>
    </div>
    <div class="col-sm-4"><p>.col-sm-4 five</p></div>
  </div>
  <div class="row"><p>.row</p>
    <div class="col-xs-12 col-sm-4"><p>.col-xs-12 col-sm-4 one</p></div>
    <div class="col-xs-12 col-sm-4"><p>.col-xs-12 col-sm-4 two</p></div>
    <div class="col-xs-12 col-sm-4"><p>.col-xs-12 col-sm-4 three</p></div>
    <div class="col-xs-12 col-sm-4">
      <div class="row">
        <div class="col-xs-12 col-sm-6"><p>.col-xs-12 col-sm-6 nested</p></div>
        <div class="col-xs-12 col-sm-6"><p>.col-xs-12 col-sm-6 nested</p></div>
      </div>
    </div>
    <div class="col-xs-12 col-sm-4"><p>.col-xs-12 col-sm-4 five</p></div>
  </div>
</div> <!-- / fluid-width container -->

<table>
  <caption>Tests results : nested grid</caption>
 <thead>
    <tr>
      <th scope="col">Browser</th>
      <th scope="col">Test</th>
      <th scope="col">Comment</th>
     </tr>
  </thead>
  <tr>
    <th scope="row">Windows Chrome</th>
    <td>OK</td>
    <td>Any nested column needs 4 ancestors (.container, .row and .column of parent column + an extra .row as parent)</td>
  </tr>
  <tr>
    <th scope="row">Windows Firefox</th>
    <td>OK</td>
    <td>Idem</td>
  </tr>
  <tr>
    <th scope="row">Windows IE10</th>
    <td>OK</td>
    <td>Idem</td>
  </tr>
  <tr>
    <th scope="row">Windows IE11</th>
    <td>OK</td>
    <td>Idem</td>
  </tr>
  <tr>
    <th scope="row">Windows Edge</th>
    <td>OK</td>
    <td>Idem</td>
  </tr>
  <tr>
    <th scope="row">Mac Safari</th>
    <td>OK</td>
    <td>Idem</td>
  </tr>
  <tr>
    <th scope="row">Apple iPhone 5 (iOS 9.x)</th>
    <td>OK</td>
    <td>Idem</td>
  </tr>
  <tr>
    <th scope="row">LG Nexus 5 (Android 5.x)</th>
    <td>...</td>
    <td>...</td>
  </tr>
  <tr>
    <th scope="row">Motorola Moto G (Android 6.x)</th>
    <td>OK</td>
    <td>Idem</td>
  </tr>
</table>
            
          
!
            
              // breakpoints
$tiny: 544px;
$small: 768px;


/* deco */

div > div > div {
  padding: 1rem;
}
div > div:not(.show-gutter) > div {
  background: rgba(86,61,124,.15);
  border: 1px solid rgba(86,61,124,.2);
}
.show-gutter > div > * {
  padding: 1rem;
  background: rgba(66,41,104,.15);
  border: 1px solid rgba(66,41,104,.2);
}

* {
  box-sizing: border-box;
}
img {
  max-width: 100%;
  height: auto;
}
html {
  font-size: 62.5%;
  font-size: calc(0.625em * 1);
}
body {
	margin: 2rem; 
	padding: 1rem 0;
  line-height: 1.4;
	font-family: arial, sans-serif;
  font-size: 1.6em;
  background: #fff;
}
.h1-like {
	margin: 0 0 1em;
	color: #345;
	text-align: center;
  font-family: georgia, "trebuchet ms", arial, serif;
}
.h2-like {
	margin: 3rem 0 1rem;
	color: #567;
  font-family: georgia, "trebuchet ms", arial, serif;
}
.txtcenter {
	text-align: center;
}
code {
	font-size: 110%;
	color: firebrick;
}
li {
  margin-bottom: 5px;
}
a {
  color: hotpink
}
.ok {
  color: green;
  font-weight: bold;
}
table {
  border: 1px solid #ccc; 
  border-collapse: collapse;
  margin-top: 4rem;
  margin-bottom: 4rem;
}

caption {
  padding: 1rem;
  color: #555;
  font-style: italic; }

td,
th {
  padding: 0.3em 0.8em;
  border: 1px #aaa dotted;
  text-align: left; 
}
thead tr {
  background: #eee;
}

/* Bootstrap variables + mixins + normalize + grid */
/*!
 * Bootstrap v3.3.7 (https://getbootstrap.com)
 * Copyright 2011-2016 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/_blob/master/LICENSE)
 */
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
html {
  font-family: sans-serif;
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%; }

body {
  margin: 0; }

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block; }

audio,
canvas,
progress,
video {
  display: inline-block;
  vertical-align: baseline; }

audio:not([controls]) {
  display: none;
  height: 0; }

[hidden],
template {
  display: none; }

a {
  background-color: transparent; }

a:active,
a:hover {
  outline: 0; }

abbr[title] {
  border-bottom: 1px dotted; }

b,
strong {
  font-weight: bold; }

dfn {
  font-style: italic; }

h1 {
  font-size: 2em;
  margin: 0.67em 0; }

mark {
  background: #ff0;
  color: #000; }

small {
  font-size: 80%; }

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline; }

sup {
  top: -0.5em; }

sub {
  bottom: -0.25em; }

img {
  border: 0; }

svg:not(:root) {
  overflow: hidden; }

figure {
  margin: 1em 40px; }

hr {
  box-sizing: content-box;
  height: 0; }

pre {
  overflow: auto; }

code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em; }

button,
input,
optgroup,
select,
textarea {
  color: inherit;
  font: inherit;
  margin: 0; }

button {
  overflow: visible; }

button,
select {
  text-transform: none; }

button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  cursor: pointer; }

button[disabled],
html input[disabled] {
  cursor: default; }

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0; }

input {
  line-height: normal; }

input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box;
  padding: 0; }

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto; }

input[type="search"] {
  -webkit-appearance: textfield;
  box-sizing: content-box; }

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none; }

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em; }

legend {
  border: 0;
  padding: 0; }

textarea {
  overflow: auto; }

optgroup {
  font-weight: bold; }

table {
  border-collapse: collapse;
  border-spacing: 0; }

td,
th {
  padding: 0; }

/*@import "bootstrap/_print.scss";
@import "bootstrap/_glyphicons.scss";
*/
.container {
  margin-right: auto;
  margin-left: auto;
  padding-left: 15px;
  padding-right: 15px; }
  .container:before, .container:after {
    content: " ";
    display: table; }
  .container:after {
    clear: both; }
  @media (min-width: 768px) {
    .container {
      width: 750px; } }
  @media (min-width: 992px) {
    .container {
      width: 970px; } }
  @media (min-width: 1200px) {
    .container {
      width: 1170px; } }

.container-fluid {
  margin-right: auto;
  margin-left: auto;
  padding-left: 15px;
  padding-right: 15px; }
  .container-fluid:before, .container-fluid:after {
    content: " ";
    display: table; }
  .container-fluid:after {
    clear: both; }

.row {
  margin-left: -15px;
  margin-right: -15px; }
  .row:before, .row:after {
    content: " ";
    display: table; }
  .row:after {
    clear: both; }

.col-xs-1, .col-sm-1, .col-md-1, .col-lg-1, .col-xs-2, .col-sm-2, .col-md-2, .col-lg-2, .col-xs-3, .col-sm-3, .col-md-3, .col-lg-3, .col-xs-4, .col-sm-4, .col-md-4, .col-lg-4, .col-xs-5, .col-sm-5, .col-md-5, .col-lg-5, .col-xs-6, .col-sm-6, .col-md-6, .col-lg-6, .col-xs-7, .col-sm-7, .col-md-7, .col-lg-7, .col-xs-8, .col-sm-8, .col-md-8, .col-lg-8, .col-xs-9, .col-sm-9, .col-md-9, .col-lg-9, .col-xs-10, .col-sm-10, .col-md-10, .col-lg-10, .col-xs-11, .col-sm-11, .col-md-11, .col-lg-11, .col-xs-12, .col-sm-12, .col-md-12, .col-lg-12 {
  position: relative;
  min-height: 1px;
  padding-left: 15px;
  padding-right: 15px; }

.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 {
  float: left; }

.col-xs-1 {
  width: 8.33333%; }

.col-xs-2 {
  width: 16.66667%; }

.col-xs-3 {
  width: 25%; }

.col-xs-4 {
  width: 33.33333%; }

.col-xs-5 {
  width: 41.66667%; }

.col-xs-6 {
  width: 50%; }

.col-xs-7 {
  width: 58.33333%; }

.col-xs-8 {
  width: 66.66667%; }

.col-xs-9 {
  width: 75%; }

.col-xs-10 {
  width: 83.33333%; }

.col-xs-11 {
  width: 91.66667%; }

.col-xs-12 {
  width: 100%; }

.col-xs-pull-0 {
  right: auto; }

.col-xs-pull-1 {
  right: 8.33333%; }

.col-xs-pull-2 {
  right: 16.66667%; }

.col-xs-pull-3 {
  right: 25%; }

.col-xs-pull-4 {
  right: 33.33333%; }

.col-xs-pull-5 {
  right: 41.66667%; }

.col-xs-pull-6 {
  right: 50%; }

.col-xs-pull-7 {
  right: 58.33333%; }

.col-xs-pull-8 {
  right: 66.66667%; }

.col-xs-pull-9 {
  right: 75%; }

.col-xs-pull-10 {
  right: 83.33333%; }

.col-xs-pull-11 {
  right: 91.66667%; }

.col-xs-pull-12 {
  right: 100%; }

.col-xs-push-0 {
  left: auto; }

.col-xs-push-1 {
  left: 8.33333%; }

.col-xs-push-2 {
  left: 16.66667%; }

.col-xs-push-3 {
  left: 25%; }

.col-xs-push-4 {
  left: 33.33333%; }

.col-xs-push-5 {
  left: 41.66667%; }

.col-xs-push-6 {
  left: 50%; }

.col-xs-push-7 {
  left: 58.33333%; }

.col-xs-push-8 {
  left: 66.66667%; }

.col-xs-push-9 {
  left: 75%; }

.col-xs-push-10 {
  left: 83.33333%; }

.col-xs-push-11 {
  left: 91.66667%; }

.col-xs-push-12 {
  left: 100%; }

.col-xs-offset-0 {
  margin-left: 0%; }

.col-xs-offset-1 {
  margin-left: 8.33333%; }

.col-xs-offset-2 {
  margin-left: 16.66667%; }

.col-xs-offset-3 {
  margin-left: 25%; }

.col-xs-offset-4 {
  margin-left: 33.33333%; }

.col-xs-offset-5 {
  margin-left: 41.66667%; }

.col-xs-offset-6 {
  margin-left: 50%; }

.col-xs-offset-7 {
  margin-left: 58.33333%; }

.col-xs-offset-8 {
  margin-left: 66.66667%; }

.col-xs-offset-9 {
  margin-left: 75%; }

.col-xs-offset-10 {
  margin-left: 83.33333%; }

.col-xs-offset-11 {
  margin-left: 91.66667%; }

.col-xs-offset-12 {
  margin-left: 100%; }

@media (min-width: 768px) {
  .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
    float: left; }
  .col-sm-1 {
    width: 8.33333%; }
  .col-sm-2 {
    width: 16.66667%; }
  .col-sm-3 {
    width: 25%; }
  .col-sm-4 {
    width: 33.33333%; }
  .col-sm-5 {
    width: 41.66667%; }
  .col-sm-6 {
    width: 50%; }
  .col-sm-7 {
    width: 58.33333%; }
  .col-sm-8 {
    width: 66.66667%; }
  .col-sm-9 {
    width: 75%; }
  .col-sm-10 {
    width: 83.33333%; }
  .col-sm-11 {
    width: 91.66667%; }
  .col-sm-12 {
    width: 100%; }
  .col-sm-pull-0 {
    right: auto; }
  .col-sm-pull-1 {
    right: 8.33333%; }
  .col-sm-pull-2 {
    right: 16.66667%; }
  .col-sm-pull-3 {
    right: 25%; }
  .col-sm-pull-4 {
    right: 33.33333%; }
  .col-sm-pull-5 {
    right: 41.66667%; }
  .col-sm-pull-6 {
    right: 50%; }
  .col-sm-pull-7 {
    right: 58.33333%; }
  .col-sm-pull-8 {
    right: 66.66667%; }
  .col-sm-pull-9 {
    right: 75%; }
  .col-sm-pull-10 {
    right: 83.33333%; }
  .col-sm-pull-11 {
    right: 91.66667%; }
  .col-sm-pull-12 {
    right: 100%; }
  .col-sm-push-0 {
    left: auto; }
  .col-sm-push-1 {
    left: 8.33333%; }
  .col-sm-push-2 {
    left: 16.66667%; }
  .col-sm-push-3 {
    left: 25%; }
  .col-sm-push-4 {
    left: 33.33333%; }
  .col-sm-push-5 {
    left: 41.66667%; }
  .col-sm-push-6 {
    left: 50%; }
  .col-sm-push-7 {
    left: 58.33333%; }
  .col-sm-push-8 {
    left: 66.66667%; }
  .col-sm-push-9 {
    left: 75%; }
  .col-sm-push-10 {
    left: 83.33333%; }
  .col-sm-push-11 {
    left: 91.66667%; }
  .col-sm-push-12 {
    left: 100%; }
  .col-sm-offset-0 {
    margin-left: 0%; }
  .col-sm-offset-1 {
    margin-left: 8.33333%; }
  .col-sm-offset-2 {
    margin-left: 16.66667%; }
  .col-sm-offset-3 {
    margin-left: 25%; }
  .col-sm-offset-4 {
    margin-left: 33.33333%; }
  .col-sm-offset-5 {
    margin-left: 41.66667%; }
  .col-sm-offset-6 {
    margin-left: 50%; }
  .col-sm-offset-7 {
    margin-left: 58.33333%; }
  .col-sm-offset-8 {
    margin-left: 66.66667%; }
  .col-sm-offset-9 {
    margin-left: 75%; }
  .col-sm-offset-10 {
    margin-left: 83.33333%; }
  .col-sm-offset-11 {
    margin-left: 91.66667%; }
  .col-sm-offset-12 {
    margin-left: 100%; } }

@media (min-width: 992px) {
  .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
    float: left; }
  .col-md-1 {
    width: 8.33333%; }
  .col-md-2 {
    width: 16.66667%; }
  .col-md-3 {
    width: 25%; }
  .col-md-4 {
    width: 33.33333%; }
  .col-md-5 {
    width: 41.66667%; }
  .col-md-6 {
    width: 50%; }
  .col-md-7 {
    width: 58.33333%; }
  .col-md-8 {
    width: 66.66667%; }
  .col-md-9 {
    width: 75%; }
  .col-md-10 {
    width: 83.33333%; }
  .col-md-11 {
    width: 91.66667%; }
  .col-md-12 {
    width: 100%; }
  .col-md-pull-0 {
    right: auto; }
  .col-md-pull-1 {
    right: 8.33333%; }
  .col-md-pull-2 {
    right: 16.66667%; }
  .col-md-pull-3 {
    right: 25%; }
  .col-md-pull-4 {
    right: 33.33333%; }
  .col-md-pull-5 {
    right: 41.66667%; }
  .col-md-pull-6 {
    right: 50%; }
  .col-md-pull-7 {
    right: 58.33333%; }
  .col-md-pull-8 {
    right: 66.66667%; }
  .col-md-pull-9 {
    right: 75%; }
  .col-md-pull-10 {
    right: 83.33333%; }
  .col-md-pull-11 {
    right: 91.66667%; }
  .col-md-pull-12 {
    right: 100%; }
  .col-md-push-0 {
    left: auto; }
  .col-md-push-1 {
    left: 8.33333%; }
  .col-md-push-2 {
    left: 16.66667%; }
  .col-md-push-3 {
    left: 25%; }
  .col-md-push-4 {
    left: 33.33333%; }
  .col-md-push-5 {
    left: 41.66667%; }
  .col-md-push-6 {
    left: 50%; }
  .col-md-push-7 {
    left: 58.33333%; }
  .col-md-push-8 {
    left: 66.66667%; }
  .col-md-push-9 {
    left: 75%; }
  .col-md-push-10 {
    left: 83.33333%; }
  .col-md-push-11 {
    left: 91.66667%; }
  .col-md-push-12 {
    left: 100%; }
  .col-md-offset-0 {
    margin-left: 0%; }
  .col-md-offset-1 {
    margin-left: 8.33333%; }
  .col-md-offset-2 {
    margin-left: 16.66667%; }
  .col-md-offset-3 {
    margin-left: 25%; }
  .col-md-offset-4 {
    margin-left: 33.33333%; }
  .col-md-offset-5 {
    margin-left: 41.66667%; }
  .col-md-offset-6 {
    margin-left: 50%; }
  .col-md-offset-7 {
    margin-left: 58.33333%; }
  .col-md-offset-8 {
    margin-left: 66.66667%; }
  .col-md-offset-9 {
    margin-left: 75%; }
  .col-md-offset-10 {
    margin-left: 83.33333%; }
  .col-md-offset-11 {
    margin-left: 91.66667%; }
  .col-md-offset-12 {
    margin-left: 100%; } }

@media (min-width: 1200px) {
  .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
    float: left; }
  .col-lg-1 {
    width: 8.33333%; }
  .col-lg-2 {
    width: 16.66667%; }
  .col-lg-3 {
    width: 25%; }
  .col-lg-4 {
    width: 33.33333%; }
  .col-lg-5 {
    width: 41.66667%; }
  .col-lg-6 {
    width: 50%; }
  .col-lg-7 {
    width: 58.33333%; }
  .col-lg-8 {
    width: 66.66667%; }
  .col-lg-9 {
    width: 75%; }
  .col-lg-10 {
    width: 83.33333%; }
  .col-lg-11 {
    width: 91.66667%; }
  .col-lg-12 {
    width: 100%; }
  .col-lg-pull-0 {
    right: auto; }
  .col-lg-pull-1 {
    right: 8.33333%; }
  .col-lg-pull-2 {
    right: 16.66667%; }
  .col-lg-pull-3 {
    right: 25%; }
  .col-lg-pull-4 {
    right: 33.33333%; }
  .col-lg-pull-5 {
    right: 41.66667%; }
  .col-lg-pull-6 {
    right: 50%; }
  .col-lg-pull-7 {
    right: 58.33333%; }
  .col-lg-pull-8 {
    right: 66.66667%; }
  .col-lg-pull-9 {
    right: 75%; }
  .col-lg-pull-10 {
    right: 83.33333%; }
  .col-lg-pull-11 {
    right: 91.66667%; }
  .col-lg-pull-12 {
    right: 100%; }
  .col-lg-push-0 {
    left: auto; }
  .col-lg-push-1 {
    left: 8.33333%; }
  .col-lg-push-2 {
    left: 16.66667%; }
  .col-lg-push-3 {
    left: 25%; }
  .col-lg-push-4 {
    left: 33.33333%; }
  .col-lg-push-5 {
    left: 41.66667%; }
  .col-lg-push-6 {
    left: 50%; }
  .col-lg-push-7 {
    left: 58.33333%; }
  .col-lg-push-8 {
    left: 66.66667%; }
  .col-lg-push-9 {
    left: 75%; }
  .col-lg-push-10 {
    left: 83.33333%; }
  .col-lg-push-11 {
    left: 91.66667%; }
  .col-lg-push-12 {
    left: 100%; }
  .col-lg-offset-0 {
    margin-left: 0%; }
  .col-lg-offset-1 {
    margin-left: 8.33333%; }
  .col-lg-offset-2 {
    margin-left: 16.66667%; }
  .col-lg-offset-3 {
    margin-left: 25%; }
  .col-lg-offset-4 {
    margin-left: 33.33333%; }
  .col-lg-offset-5 {
    margin-left: 41.66667%; }
  .col-lg-offset-6 {
    margin-left: 50%; }
  .col-lg-offset-7 {
    margin-left: 58.33333%; }
  .col-lg-offset-8 {
    margin-left: 66.66667%; }
  .col-lg-offset-9 {
    margin-left: 75%; }
  .col-lg-offset-10 {
    margin-left: 83.33333%; }
  .col-lg-offset-11 {
    margin-left: 91.66667%; }
  .col-lg-offset-12 {
    margin-left: 100%; } }

            
          
!
999px
Loading ..................

Console