What’s this?
Aligning your content into columns and rows is essential part of creating websites. Our Column layouts are fluid and can be adapted for devices. Check out the examples below.With Padding
50%
50%
Get code
[row] [col width="50"]...[/col] [col width="50"]...[/col] [/row]
With Gap
50%
50%
Get code
[row padding="0" gaps="1"] [col width="50"]...[/col] [col width="50"]...[/col] [/row]
No Gap, No padding
50%
50%
Get code
[row padding="0" gaps="0"] [col width="50"]...[/col] [col width="50"]...[/col] [/row]
Borders
50%
50%
Get code
[row borderl="1"] [col width="50"]...[/col] [col width="50"]...[/col] [/row]
50%
50%
Get code
[row borderb=”1″ borderl=”1″]
[col width=”50″]…[/col]
[col width=”50″]…[/col]
[/row]
[col width=”50″]…[/col]
[col width=”50″]…[/col]
[/row]
Re-size your browser to see the columns change.
Phone 1 column
Phone 1 column
Phone 1 column
Get code
[row convert="phone-width-100"] [col width="60"]...[/col] [col width="40"]...[/col] [/row]
Phone 2 column
Phone 2 column
Phone 2 column
Get code
[row convert="units-phone-50"] [col width="60"]...[/col] [col width="40"]...[/col] [/row]
Tablet and Phone 1 column
Tablet and Phone 1 column
Tablet and Phone 1 column
Get code
[row convert="mobile-width-100"] [col width="60"]...[/col] [col width="40"]...[/col] [/row]
Tablet and Phone 2 column
Tablet and Phone 2 column
Tablet and Phone 2 column
Get code
[row convert="units-mobile-50"] [col width="60"]...[/col] [col width="40"]...[/col] [/row]
Tablet 2 columns and Phone 1 column
Tablet 2 columns and Phone 1 column
Tablet 2 columns and Phone 1 column
Get code
[row convert="units-tablet-50 phone-width-100"] [col width="60"]...[/col] [col width="40"]...[/col] [/row]
2 columns
50%
50%
Get code
[row padding="0" gaps="1" convert="phone-width-100"] [col width="50"]...[/col] [col width="50"]...[/col] [/row]
60%
40%
Get code
[row padding="0" gaps="1" convert="phone-width-100"] [col width="60"]...[/col] [col width="40"]...[/col] [/row]
70%
30%
Get code
[row padding="0" gaps="1" convert="phone-width-100"] [col width="70"]...[/col] [col width="30"]...[/col] [/row]
3 columns
33%
33%
33%
Get code
[row padding="0" gaps="1" convert="phone-width-100"] [col width="33"]...[/col] [col width="33"]...[/col] [col width="33"]...[/col] [/row]
50%
25%
25%
Get code
[row padding="0" gaps="1" convert="phone-width-100"] [col width="50"]...[/col] [col width="25"]...[/col] [col width="25"]...[/col] [/row]
20%
50%
30%
Get code
[row padding="0" gaps="1" convert="phone-width-100"] [col width="20"]...[/col] [col width="50"]...[/col] [col width="30"]...[/col] [/row]
4 columns
25%
25%
25%
25%
Get code
[row padding="0" gaps="1" convert="phone-width-100"] [col width="25"]...[/col] [col width="25"]...[/col] [col width="25"]...[/col] [col width="25"]...[/col] [/row]
4 columns
25%
25%
25%
25%
Get code
[row padding="0" gaps="1" convert="phone-width-100"] [col width="20"]...[/col] [col width="30"]...[/col] [col width="20"]...[/col] [col width="30"]...[/col] [/row]
20%
30%
20%
30%
Get code
[row padding="0" gaps="1" convert="phone-width-100"] [col width="20"]...[/col] [col width="30"]...[/col] [col width="20"]...[/col] [col width="30"]...[/col] [/row]
40%
20%
20%
20%
Get code
[row padding="0" gaps="1" convert="phone-width-100"] [col width="40"]...[/col] [col width="20"]...[/col] [col width="20"]...[/col] [col width="20"]...[/col] [/row]
5 columns
20%
20%
20%
20%
20%
Get code
[row padding="0" gaps="1" convert="phone-width-100"] [col width="20"]...[/col] [col width="20"]...[/col] [col width="20"]...[/col] [col width="20"]...[/col] [col width="20"]...[/col] [/row]