Grid

Brandaris includes a powerful mobile-first grid system for building layouts of all shapes and sizes. It’s based on a 12 column layout and has multiple tiers.

How it works

At a high level, here’s how the grid system works:

There are three major components: containers, rows, and columns.
Containers—.container for fixed width or .container-fluid for full width—center your site’s contents and help align your grid content. You can use it in combination with .container-full for a conatiner without side padding.
Rows are horizontal groups of columns that ensure your columns are lined up properly.
Content should be placed within columns, and only columns may be immediate children of rows.
Column classes indicate the number of columns you’d like to use out of the possible 12 per row.
If you want three equal-width columns, you can easily use .col-sm.
Column widths are set in percentages, so they’re always fluid and sized relative to their parent element.
Columns have horizontal padding to create the gutters between individual columns.
There are five grid tiers, one for each responsive breakpoint: extra small, small, medium, large, and extra large.
Grid tiers are based on minimum widths, meaning they apply to that one tier and all those above it (e.g., .col-sm-4 applies to small, medium, large, and extra large devices).

Auto-layout columns

Add any number of auto sizing columns to a row. Let the grid figure it out.

<div class="row">
  <div class="col-xs">
    One of three columns
  </div>
  <div class="col-xs">
    One of three columns
  </div>
  <div class="col-xs">
    One of three columns
  </div>
</div>

Alignment

Add classes to align elements to the start or end of a row as well as the top, bottom, or center of a column.

Start

Align all columns to the start of the .row. This is default.

<div class="row start-xs">
  <div class="col-4">
    ...
  </div>
  <div class="col-4">
    ...
  </div>
</div>

Center

Align all columns to the center of the .row.

<div class="row center-xs">
  <div class="col-4">
    ...
  </div>
  <div class="col-4">
    ...
  </div>
</div>

End

Align all columns to the end of the .row.

<div class="row end-xs">
  <div class="col-4">
    ...
  </div>
  <div class="col-4">
    ...
  </div>
</div>

You can also use different alignments for different viewport sizes:

<div class="row center-xs end-sm start-lg">
  <div class="col-xs-6">
    All together now
  </div>
</div>

Top

Align all columns at the top of the .row. This is default.

<div class="row top-xs">
  <div class="col-4">
    ...
  </div>
  <div class="col-4">
    ...
  </div>
  <div class="col-4">
    ...
  </div>
</div>

Middle

Align all columns in the middle of the .row.

<div class="row middle-xs">
  <div class="col-4">
    ...
  </div>
  <div class="col-4">
    ...
  </div>
  <div class="col-4">
    ...
  </div>
</div>

Bottom

Align all columns to the bottom of the .row.

<div class="row bottom-xs">
  <div class="col-4">
    ...
  </div>
  <div class="col-4">
    ...
  </div>
  <div class="col-4">
    ...
  </div>
</div>

Full

Stretch all columns for equal, full, height in the .row.

<div class="row full-xs">
  <div class="col-4">
    ...
  </div>
  <div class="col-4">
    ...
  </div>
  <div class="col-4">
    ...
  </div>
</div>

Reordering

Add classes to reorder columns.

First

<div class="row">
  <div class="col-xs">
    1
  </div>
  <div class="col-xs">
    2
  </div>
  <div class="col-xs first-xs">
    3
  </div>
</div>

Last

<div class="row">
  <div class="col-xs last-xs">
    1
  </div>
  <div class="col-xs">
    2
  </div>
  <div class="col-xs">
    3
  </div>
</div>

Reverse

<div class="row reverse">
  <div class="col-xs">
    1
  </div>
  <div class="col-xs">
    2
  </div>
  <div class="col-xs">
    3
  </div>
</div>

On this page

Base