---
layout: example
title: Grid template
---

<!-- Custom styles for this template -->
<style>

  /* Show grid styles from docs.css
  -------------------------------------------------- */

  .show-grid {
    margin-bottom: 15px;
  }
  .show-grid [class^="span"] {
    padding-top: 10px;
    padding-bottom: 10px;
    background-color: #eee;
    border: 1px solid #ddd;
  }
  .show-grid [class*="span"]:hover {
    background-color: #ddd;
  }

</style>


<div class="container">

  <div class="page-header">
    <h1>Grids</h1>
  </div>

  <h2>Default grid columns</h2>
  <div class="bs-docs-grid">
    <div class="row show-grid">
      <div class="span1">1</div>
      <div class="span1">1</div>
      <div class="span1">1</div>
      <div class="span1">1</div>
      <div class="span1">1</div>
      <div class="span1">1</div>
      <div class="span1">1</div>
      <div class="span1">1</div>
      <div class="span1">1</div>
      <div class="span1">1</div>
      <div class="span1">1</div>
      <div class="span1">1</div>
    </div>
    <div class="row show-grid">
      <div class="span4">4</div>
      <div class="span4">4</div>
      <div class="span4">4</div>
    </div>
    <div class="row show-grid">
      <div class="span6">6</div>
      <div class="span6">6</div>
    </div>
    <div class="row show-grid">
      <div class="span12">12</div>
    </div>
  </div>

</div> <!-- /container -->