Bootstrap

3 column panels

Bootstrap's grid system is a good grid system but difficult to use for non-developers. Custom layout has been created using 3 columns and 4 columns to address this probelm.

Box 1
Box 2
Box 3
Box 4
Box 5

<div class="flexbox column-3">
  <div class="flex-item">
    <div class="doc-example">Box 1</div>
  </div>
  <div class="flex-item">
    <div class="doc-example">Box 2</div>
  </div>
  <div class="flex-item">
    <div class="doc-example">Box 3</div>
  </div>
  <div class="flex-item">
    <div class="doc-example">Box 4</div>
  </div>
  <div class="flex-item">
    <div class="doc-example">Box 5</div>
  </div>
</div>

With divider

If additional separation is needed, add .with-divider class. Content cards are good use case for this.

Box 1
Box 2
Box 3
Box 4
Box 5

<div class="flexbox column-3 with-divider">
  <div class="flex-item">
    <div class="doc-example">Box 1</div>
  </div>
  <div class="flex-item">
    <div class="doc-example">Box 2</div>
  </div>
  <div class="flex-item">
    <div class="doc-example">Box 3</div>
  </div>
  <div class="flex-item">
    <div class="doc-example">Box 4</div>
  </div>
  <div class="flex-item">
    <div class="doc-example">Box 5</div>
  </div>
</div>

Created and open sourced by the Bootstrap team. Sage branded by Central XD of Sage.