Column Layouts

ShortcodesColumn Layouts

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]

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]

Variations

Change the Skin for this Case Study

Demos

React Hub
Lens
Berri
Replika
Press
Second
View all Demos React Hub Copy current page content
[box type="custom-boxed-item" align="center" text_align="textcenter"] [fancy_header tag="h4" size="medium" text_align="textcenter" bold="1"]What's this?[/fancy_header] 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. [icon icon="fa-arrow-down" font_size="15" boxed="1" description="See examples below" position="center" margin_top="20px" margin_bottom="-40px" link="#content" class="infinite wobble"] [/box] [section_break type="blank" margin_bottom="30" /] [tabs layout="vertical" convert="cvt-phone-ldsp"] [tab title="Column options"] [fancy_header bold="1" type="style1"]With Padding[/fancy_header] [row] [col width="50"][box type="basic-light" align="center"]50%[/box][/col] [col width="50"][box type="basic-light" align="center"]50%[/box][/col] [/row] [accordion style="plain"] [accordion_toggle title="Get code"]
[row]
[col width="50"]...[/col]
[col width="50"]...[/col]
[/row]
[/accordion_toggle] [/accordion] [fancy_header bold="1" type="style1" margin_top="50"]With Gap[/fancy_header] [row padding="0" gaps="1"] [col width="50"][box type="basic-light" align="center"]50%[/box][/col] [col width="50"][box type="basic-light" align="center"]50%[/box][/col] [/row] [accordion style="plain"] [accordion_toggle title="Get code"]
[row padding="0" gaps="1"]
[col width="50"]...[/col]
[col width="50"]...[/col]
[/row]
[/accordion_toggle] [/accordion] [fancy_header bold="1" type="style1" margin_top="50"]No Gap, No padding[/fancy_header] [row padding="0" gaps="0"] [col width="50"][box type="basic-light" align="center"]50%[/box][/col] [col width="50"][box type="basic-light" align="center"]50%[/box][/col] [/row] [accordion style="plain"] [accordion_toggle title="Get code"]
[row padding="0" gaps="0"]
[col width="50"]...[/col]
[col width="50"]...[/col]
[/row]
[/accordion_toggle] [/accordion] [fancy_header bold="1" type="style1" margin_top="50"]Borders[/fancy_header] [row borderl="1"] [col width="50"][box type="basic-light" align="center"]50%[/box][/col] [col width="50"][box type="basic-light" align="center"]50%[/box][/col] [/row] [accordion style="plain"] [accordion_toggle title="Get code"]
[row borderl="1"]
[col width="50"]...[/col]
[col width="50"]...[/col]
[/row]
[/accordion_toggle] [/accordion] [row borderb="1" borderl="1"] [col width="50"][box type="basic-light" align="center"]50%[/box][/col] [col width="50"][box type="basic-light" align="center"]50%[/box][/col] [/row] [accordion style="plain"] [accordion_toggle title="Get code"] [row borderb="1" borderl="1"] [col width="50"]...[/col] [col width="50"]...[/col] [/row] [/accordion_toggle] [/accordion] [/tab] [tab title="Responsive convert"] [box type="info"]Re-size your browser to see the columns change.[/box] [fancy_header bold="1" type="style1" margin_top="50"]Phone 1 column[/fancy_header] [row padding="0" gaps="1" convert="phone-width-100"] [col width="60"][box type="basic-light" align="center"]Phone 1 column[/box][/col] [col width="40"][box type="basic-light" align="center"]Phone 1 column[/box][/col] [/row] [accordion style="plain"] [accordion_toggle title="Get code"]
[row convert="phone-width-100"]
[col width="60"]...[/col]
[col width="40"]...[/col]
[/row]
[/accordion_toggle] [/accordion] [fancy_header bold="1" type="style1" margin_top="50"]Phone 2 column[/fancy_header] [row padding="0" gaps="1" convert="units-phone-50"] [col width="40"][box type="basic-light" align="center"]Phone 2 column[/box][/col] [col width="60"][box type="basic-light" align="center"]Phone 2 column[/box][/col] [/row] [accordion style="plain"] [accordion_toggle title="Get code"]
[row convert="units-phone-50"]
[col width="60"]...[/col]
[col width="40"]...[/col]
[/row]
[/accordion_toggle] [/accordion] [fancy_header bold="1" type="style1" margin_top="50"]Tablet and Phone 1 column[/fancy_header] [row padding="0" gaps="1" convert="mobile-width-100"] [col width="60"][box type="basic-light" align="center"]Tablet and Phone 1 column[/box][/col] [col width="40"][box type="basic-light" align="center"]Tablet and Phone 1 column[/box][/col] [/row] [accordion style="plain"] [accordion_toggle title="Get code"]
[row convert="mobile-width-100"]
[col width="60"]...[/col]
[col width="40"]...[/col]
[/row]
[/accordion_toggle] [/accordion] [fancy_header bold="1" type="style1" margin_top="50"]Tablet and Phone 2 column[/fancy_header] [row padding="0" gaps="1" convert="units-mobile-50"] [col width="40"][box type="basic-light" align="center"]Tablet and Phone 2 column[/box][/col] [col width="60"][box type="basic-light" align="center"]Tablet and Phone 2 column[/box][/col] [/row] [accordion style="plain"] [accordion_toggle title="Get code"]
[row convert="units-mobile-50"]
[col width="60"]...[/col]
[col width="40"]...[/col]
[/row]
[/accordion_toggle] [/accordion] [fancy_header bold="1" type="style1" margin_top="50"]Tablet 2 columns and Phone 1 column[/fancy_header] [row padding="0" gaps="1" convert="units-tablet-50 phone-width-100"] [col width="60"][box type="basic-light" align="center"]Tablet 2 columns and Phone 1 column[/box][/col] [col width="40"][box type="basic-light" align="center"]Tablet 2 columns and Phone 1 column[/box][/col] [/row] [accordion style="plain"] [accordion_toggle title="Get code"]
[row convert="units-tablet-50 phone-width-100"]
[col width="60"]...[/col]
[col width="40"]...[/col]
[/row]
[/accordion_toggle] [/accordion] [/tab] [tab title="Variations"] [fancy_header bold="1" type="style1"]2 columns[/fancy_header] [row padding="0" gaps="1" convert="phone-width-100"] [col width="50"][box type="basic-light" align="center"]50%[/box][/col] [col width="50"][box type="basic-light" align="center"]50%[/box][/col] [/row] [accordion style="plain"] [accordion_toggle title="Get code"]
[row padding="0" gaps="1" convert="phone-width-100"]
[col width="50"]...[/col]
[col width="50"]...[/col]
[/row]
[/accordion_toggle] [/accordion] [row padding="0" gaps="1" convert="phone-width-100"] [col width="60"][box type="basic-light" align="center"]60%[/box][/col] [col width="40"][box type="basic-light" align="center"]40%[/box][/col] [/row] [accordion style="plain"] [accordion_toggle title="Get code"]
[row padding="0" gaps="1" convert="phone-width-100"]
[col width="60"]...[/col]
[col width="40"]...[/col]
[/row]
[/accordion_toggle] [/accordion] [row padding="0" gaps="1" convert="phone-width-100"] [col width="70"][box type="basic-light" align="center"]70%[/box][/col] [col width="30"][box type="basic-light" align="center"]30%[/box][/col] [/row] [accordion style="plain"] [accordion_toggle title="Get code"]
[row padding="0" gaps="1" convert="phone-width-100"]
[col width="70"]...[/col]
[col width="30"]...[/col]
[/row]
[/accordion_toggle] [/accordion] [fancy_header bold="1" type="style1" margin_top="50"]3 columns[/fancy_header] [row padding="0" gaps="1" convert="phone-width-100"] [col width="33"][box type="basic-light" align="center"]33%[/box][/col] [col width="33"][box type="basic-light" align="center"]33%[/box][/col] [col width="33"][box type="basic-light" align="center"]33%[/box][/col] [/row] [accordion style="plain"] [accordion_toggle title="Get code"]
[row padding="0" gaps="1" convert="phone-width-100"]
[col width="33"]...[/col]
[col width="33"]...[/col]
[col width="33"]...[/col]
[/row]
[/accordion_toggle] [/accordion] [row padding="0" gaps="1" convert="phone-width-100"] [col width="50"][box type="basic-light" align="center"]50%[/box][/col] [col width="25"][box type="basic-light" align="center"]25%[/box][/col] [col width="25"][box type="basic-light" align="center"]25%[/box][/col] [/row] [accordion style="plain"] [accordion_toggle title="Get code"]
[row padding="0" gaps="1" convert="phone-width-100"]
[col width="50"]...[/col]
[col width="25"]...[/col]
[col width="25"]...[/col]
[/row]
[/accordion_toggle] [/accordion] [row padding="0" gaps="1" convert="phone-width-100"] [col width="20"][box type="basic-light" align="center"]20%[/box][/col] [col width="50"][box type="basic-light" align="center"]50%[/box][/col] [col width="30"][box type="basic-light" align="center"]30%[/box][/col] [/row] [accordion style="plain"] [accordion_toggle title="Get code"]
[row padding="0" gaps="1" convert="phone-width-100"]
[col width="20"]...[/col]
[col width="50"]...[/col]
[col width="30"]...[/col]
[/row]
[/accordion_toggle] [/accordion] [fancy_header bold="1" type="style1" margin_top="50"]4 columns[/fancy_header] [row padding="0" gaps="1" convert="phone-width-100"] [col width="25"][box type="basic-light" align="center"]25%[/box][/col] [col width="25"][box type="basic-light" align="center"]25%[/box][/col] [col width="25"][box type="basic-light" align="center"]25%[/box][/col] [col width="25"][box type="basic-light" align="center"]25%[/box][/col] [/row] [accordion style="plain"] [accordion_toggle title="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]
[/accordion_toggle] [/accordion] [fancy_header bold="1" type="style1" margin_top="50"]4 columns[/fancy_header] [row padding="0" gaps="1" convert="phone-width-100"] [col width="20"][box type="basic-light" align="center"]25%[/box][/col] [col width="30"][box type="basic-light" align="center"]25%[/box][/col] [col width="20"][box type="basic-light" align="center"]25%[/box][/col] [col width="30"][box type="basic-light" align="center"]25%[/box][/col] [/row] [accordion style="plain"] [accordion_toggle title="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]
[/accordion_toggle] [/accordion] [row padding="0" gaps="1" convert="phone-width-100"] [col width="20"][box type="basic-light" align="center"]20%[/box][/col] [col width="30"][box type="basic-light" align="center"]30%[/box][/col] [col width="20"][box type="basic-light" align="center"]20%[/box][/col] [col width="30"][box type="basic-light" align="center"]30%[/box][/col] [/row] [accordion style="plain"] [accordion_toggle title="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]
[/accordion_toggle] [/accordion] [row padding="0" gaps="1" convert="phone-width-100"] [col width="40"][box type="basic-light" align="center"]40%[/box][/col] [col width="20"][box type="basic-light" align="center"]20%[/box][/col] [col width="20"][box type="basic-light" align="center"]20%[/box][/col] [col width="20"][box type="basic-light" align="center"]20%[/box][/col] [/row] [accordion style="plain"] [accordion_toggle title="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]
[/accordion_toggle] [/accordion] [fancy_header bold="1" type="style1" margin_top="50"]5 columns[/fancy_header] [row padding="0" gaps="1" convert="phone-width-100"] [col width="20"][box type="basic-light" align="center"]20%[/box][/col] [col width="20"][box type="basic-light" align="center"]20%[/box][/col] [col width="20"][box type="basic-light" align="center"]20%[/box][/col] [col width="20"][box type="basic-light" align="center"]20%[/box][/col] [col width="20"][box type="basic-light" align="center"]20%[/box][/col] [/row] [accordion style="plain"] [accordion_toggle title="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]
[/accordion_toggle] [/accordion] [/tab] [/tabs]
Download - $44