[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]
