# Simple example of columns

Besides using a row, you inside have to specify the columns. In order to put the number of colums used you only have to specify with the class `col-{number-of-columns-to-fill}`.

col-1
col-2
col-1
col-1

# Fluid automatic columns

You don't need always to specify the number of columns to be used, as if you want columns system to automatically calculated, you can just put the `col` classname and grid system will do the trick for you.

col
col
col

You can mix with columns with the number of columns specified and it will be flexible and adapt to the grid system.

col-3
col
col-1

# Responsive columns on mobile

You can define custom columns sizes for mobiles. Just, besides the `col-{columns}` class you can add `col-mobile-{columns}` and `col-mobile-big-{columns}` so your grid will adapt according to the number of columns that just specify.

col-1
col-mobile-2
col-mobile-big-2
col-1
col-mobile-1
col-mobile-big-1
col-1
col-mobile-1
col-mobile-big-1
col-1
col-mobile-2
col-mobile-big-2
col-1
col-mobile-2
col-mobile-big-3

# Responsive columns on tablet

Same applies for tablets sizes as well. In this example, first column get three spaces from five available on desktop. But in tablet columns are equal (tablet has 4 columns available, and the first one gets two and the second other two)

col-3
col-tablet-2
col-2
col-tablet-2

# Responsive columns with auto

You can rely to auto column width by not specifying the number of columns in the classname `col-tablet`.

col-3
col-tablet-2
col-2
col-tablet

# Example with buttons