Grid System

The CSS Extended grid system is built with flexbox and is 100% responsive.
New to flexbox? Check this tutorial out https://css-tricks.com/snippets/css/a-guide-to-flexbox/.

How it works

Rows are wrappers to the columns.

All columns have a padding, think the design of a column as a container.

All columns change sizes depending on how much width is left on the page. Let’s say if we have one column that is 45% bigger in width, and the other column has no width value specified. Then the column that has no width value specified will get the leftover space, 55% in this case. This means in the end, the whole width of the site is covered.

The grid has five breakpoints wich makes the grid fully responsive. Extra Small, Small, Large and Extra Large.

100% = 12 columns

For example, the breakpoint for small is 655px. And if we change from small to medium the breakpoint changes from 655px to 1039px.

Example

  <div class="row text-black">
      <div class="col-sm-5 bg-green">col-sm-5</div>
      <div class="col-sm-3 bg-red">col-sm-3</div>
      <div class="col-sm-4 bg-orange">col-sm-4</div>
  </div>

Result

After breakpoint: