Admin Dashboard

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).

column
column
column
column
column

If you feels like the left and right edge is too narrower than the page layout, fix with .fix-columns-container-edge class.

column
column

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.

col-xs-1
col-xs-1
col-xs-1
col-xs-1
col-xs-1
col-xs-1
col-xs-1
col-xs-1
col-xs-1
col-xs-1
col-xs-1
col-xs-1

And what gonna happen if you put more than 12 columns.

col-xs-1
col-xs-1
col-xs-1
col-xs-1
col-xs-1
col-xs-1
col-xs-1
col-xs-1
col-xs-1
col-xs-1
col-xs-1
col-xs-1
col-xs-1
col-xs-1
col-xs-9
col-xs-4
col-xs-2

The fixed size 1 columns with flexible column.

col-xs-1
column
col-xs-1
col-xs-1
column
col-xs-1
col-xs-1
col-xs-1
column
col-xs-1
col-xs-1
col-xs-1
col-xs-1
column
col-xs-1
col-xs-1
col-xs-1
col-xs-1
col-xs-1
column
col-xs-1
col-xs-1
col-xs-1
col-xs-1
col-xs-1
col-xs-1
column
col-xs-1
col-xs-1
col-xs-1
col-xs-1
col-xs-1
col-xs-1
col-xs-1
column
col-xs-1
col-xs-1
col-xs-1
col-xs-1
col-xs-1
col-xs-1
col-xs-1
col-xs-1
column
col-xs-1
col-xs-1
col-xs-1
col-xs-1
col-xs-1
col-xs-1
col-xs-1
col-xs-1
col-xs-1
column
col-xs-1
col-xs-1
col-xs-1
col-xs-1
col-xs-1
col-xs-1
col-xs-1
col-xs-1
col-xs-1
col-xs-1
column
col-xs-1
col-xs-1
col-xs-1
col-xs-1
col-xs-1
col-xs-1
col-xs-1
col-xs-1
col-xs-1
col-xs-1
col-xs-1
column

The column in various sizes with flexible column.

col-xs-2
column
col-xs-3
column
col-xs-4
column
col-xs-5
column
col-xs-6
column
col-xs-7
column
col-xs-8
column
col-xs-9
column
col-xs-10
column
col-xs-11
column
col-xs-12

Small screen or larger

The example below works on small screen or larger. It uses .col-sm-* CSS class.

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

Medium screen or larger

The example below works on medium screen or larger. It uses .col-md-* CSS class.

col-md-1
column
col-md-2
column
col-md-3
column
col-md-4
column
col-md-5
column
col-md-6
column
col-md-7
column
col-md-8
column
col-md-9
column
col-md-10
column
col-md-11
column
col-md-12

Large screen or larger

The example below works on large screen or larger. It uses .col-lg-* CSS class.

col-lg-1
column
col-lg-2
column
col-lg-3
column
col-lg-4
column
col-lg-5
column
col-lg-6
column
col-lg-7
column
col-lg-8
column
col-lg-9
column
col-lg-10
column
col-lg-11
column
col-lg-12

Extra large screen or larger

The example below works on extra large screen or larger. It uses .col-xl-* CSS class.

col-xl-1
column
col-xl-2
column
col-xl-3
column
col-xl-4
column
col-xl-5
column
col-xl-6
column
col-xl-7
column
col-xl-8
column
col-xl-9
column
col-xl-10
column
col-xl-11
column
col-xl-12

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.

col-xl-3 col-lg-6 col-md-3 col-sm-2 col-xs-4
col-xl-3 col-lg-6 col-md-6 col-sm-10 col-xs-8
col-xl-3 col-lg-9 col-md-3 col-sm-3 col-xs-4
col-xl-3 col-lg-3 col-md-12 col-sm-9 col-xs-8

Offset

Move column to the right using offset.

col-xs-11 offset-xs-1
col-xs-10 offset-xs-2
col-xs-9 offset-xs-3
col-xs-8 offset-xs-4
col-xs-7 offset-xs-5
col-xs-6 offset-xs-6
col-xs-5 offset-xs-7
col-xs-4 offset-xs-8
col-xs-3 offset-xs-9
col-xs-2 offset-xs-10
col-xs-1 offset-xs-11

Small screen or larger

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

Medium screen or larger

col-md-11 offset-md-1
col-md-10 offset-md-2
col-md-9 offset-md-3
col-md-8 offset-md-4
col-md-7 offset-md-5
col-md-6 offset-md-6
col-md-5 offset-md-7
col-md-4 offset-md-8
col-md-3 offset-md-9
col-md-2 offset-md-10
col-md-1 offset-md-11

Large screen or larger

col-lg-11 offset-lg-1
col-lg-10 offset-lg-2
col-lg-9 offset-lg-3
col-lg-8 offset-lg-4
col-lg-7 offset-lg-5
col-lg-6 offset-lg-6
col-lg-5 offset-lg-7
col-lg-4 offset-lg-8
col-lg-3 offset-lg-9
col-lg-2 offset-lg-10
col-lg-1 offset-lg-11

Extra large screen or larger

col-xl-11 offset-xl-1
col-xl-10 offset-xl-2
col-xl-9 offset-xl-3
col-xl-8 offset-xl-4
col-xl-7 offset-xl-5
col-xl-6 offset-xl-6
col-xl-5 offset-xl-7
col-xl-4 offset-xl-8
col-xl-3 offset-xl-9
col-xl-2 offset-xl-10
col-xl-1 offset-xl-11

Break columns

The columns can be force break into new line using .column-break class.

column
column
column
column

It also works on both flexible or fixed columns.

col-xs-3
col-xs-3
col-xs-3
col-xs-3

Nesting

The columns can be nested.

col-sm-9
col-md-6
col-md-6
col-sm-3

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.

col-sm-9
col-md-6
col-xl-4
col-xl-4
col-xl-4
col-md-6
col-lg-6
col-lg-6
col-sm-3