.col-{$slug}-[1,12]

Based on the breakpoints you created empty will generate individual column classes for layouts with a maximum of 12 columns floating horizontally next to each other.

For example if you've set up a breakpoint with the slug sm the following classes will be triggered whenever the viewport is active:

  • col-sm-1
  • col-sm-2
  • col-sm-3
  • col-sm-4
  • col-sm-5
  • col-sm-6
  • col-sm-7
  • col-sm-8
  • col-sm-9
  • col-sm-10
  • col-sm-11
  • col-sm-12

In addition to the classes which determine how many columns a certain content will use, classes will be created to offset content parts from the left for a certain amount of columns.

Following the example above those classes will be:

  • col-sm-offset-1
  • col-sm-offset-12

There is one more class that may be added to any container with a column class applied which is .single. Add it to a column and the column won't have any margin applied underneath it.