Columns flex
Display columns inside the main page layout. Please note that this is not the elements and classes style to use for admin page layout.
In order to use column flex, you have to add stylesheet link to assets/css/rdta/columns/columns-flex.css.
Flexible columns
The very basic container for put columns that works the same on all screen sizes. If no column size specified then it will be flexible columns (or auto columns).
Source
If you feels like the left and right edge is too narrower than the page layout, fix with .fix-columns-container-edge class.
Fixed columns
The fixed columns will have total 12 columns max. The class name .col-xs-* is mobile first, it works on all screen sizes.
Source
And what gonna happen if you put more than 12 columns.
The fixed size 1 columns with flexible column.
The column in various sizes with flexible column.
Small screen or larger
The example below works on small screen or larger. It uses .col-sm-* CSS class.
Medium screen or larger
The example below works on medium screen or larger. It uses .col-md-* CSS class.
Large screen or larger
The example below works on large screen or larger. It uses .col-lg-* CSS class.
Extra large screen or larger
The example below works on extra large screen or larger. It uses .col-xl-* CSS class.
Mixed column sizes in different screen
The example below will show you the mixed column sizes in different screen. Resize your web browser to see it in action.
Source
Offset
Move column to the right using offset.
Source
Small screen or larger
Medium screen or larger
Large screen or larger
Extra large screen or larger
Break columns
The columns can be force break into new line using .column-break class.
It also works on both flexible or fixed columns.
Source
Nesting
The columns can be nested.
Source
You may feels that the left & right edge of columns, even nested column was too narrower than page layout. This can be fixed by add .fix-columns-container-edge class to the container.