Columns

Since Fluidable is mobile first, columns defined for the smallest break point (Mobile) get inherited to next one above. Each column can be defined for multiple break points.

Offset

.col-offset-x

.col-dt-offset-x

A set of classes to push a column using its left margin. This is good to use instead of creating empty columns. Use .col-offset-0 to rest the offset.

Fixed aspect ratio

.col-fixed-hd

.col-fixed-landscape

.col-fixed-square

.col-portrait

Fix the hight of a column to a specific aspect ratio. For this to work, wrap the content of the column in an element with the class .col-content. This is great for displaying grid views where all the item should be the same height.

Source order

.col-pull-x

.col-push-x

.col-dt-pull-x

.col-dt-push-x

Change the display order of columns. You can play around with the order for different break points.

Containers

.container

Use a conainer to wrap your groups of columns to prevent scrollbars on small and mobile screens.