View this in TEXT mode to see the HTML that produces these columns

Container is “columns”
Individual columns can be “col-50” (halves), “col-33” (thirds), “col-25” (fourths).

There are 5 padding classes that can be added to the above col classes.
“pad” adds 2em pad to all sides,
“pad-l” adds 1em to left side,
“pad-r” adds 1em to right side,
“pad-b” adds 1em to the bottom,
“pad-t” adds 1em to the top

For example, the following code would produce 2 columns with full padding

<div class="columns">
  <div class="col-50 pad">
    Content here
  </div>
  <div class="col-50 pad">
    Content here
  </div>
</div>

These columns have a border hard-coded for ease of viewing

Two Columns

Our success is built around strong teamwork, hard work, integrity, collaboration, and a customer-centric mindset.
Our success is built around strong teamwork, hard work, integrity, collaboration, and a customer-centric mindset.

Three Columns

Using “pad-l” and “pad-t”

Our success is built around strong teamwork, hard work, integrity, collaboration, and a customer-centric mindset.
Our success is built around strong teamwork, hard work, integrity, collaboration, and a customer-centric mindset.
Our success is built around strong teamwork, hard work, integrity, collaboration, and a customer-centric mindset.

Four Columns

using “pad” class on all blocks

Our success is built around strong teamwork, hard work, integrity, collaboration, and a customer-centric mindset.
Our success is built around strong teamwork, hard work, integrity, collaboration, and a customer-centric mindset.
Our success is built around strong teamwork, hard work, integrity, collaboration, and a customer-centric mindset.
Our success is built around strong teamwork, hard work, integrity, collaboration, and a customer-centric mindset.

Back to Top