[text_box width="100" width__sm="75" parallax="-1"]
Flatsome Grid System
Responsive Rows and Columns
Create Amazing layouts by using Flatsome Row and Column System powered by Flexbox
[/text_box]
[/ux_banner]
[title style="center" text="Simple 4-column row"]
[row padding="30px"]
[col span="3" span__sm="6" bg_color="rgba(255, 0, 211, 0.96)" color="light" depth_hover="5"]
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
[/with the]
[col span="3" span__sm="6" bg_color="rgba(231, 231, 231, 0.96)"]
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
[/with the]
[col span="3" span__sm="6" bg_color="rgba(231, 231, 231, 0.96)"]
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
[/with the]
[col span="3" span__sm="6" bg_color="rgba(231, 231, 231, 0.96)"]
Lorem ipsum dolor sit amet
Lorem ipsum pain sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet pain magna aliquam erat volutpat....
[/with the]
[/row]
[title style="center" text="Vertical Centered Row"]
[row v_align="middle" padding="30px"]
[col span="6" span__sm="6" bg_color="rgba(231, 231, 231, 0.96)"]
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
[/with the]
[col span="3" span__sm="6" bg_color="rgba(231, 231, 231, 0.96)"]
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
[/with the]
[col span="3" span__sm="6" bg_color="rgba(231, 231, 231, 0.96)"]
Lorem ipsum dolor sit amet
Lorem ipsum pain sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet pain magna aliquam erat volutpat....
[/with the]
[/row]
[title style="center" text="Bottom Align Row"]
[row v_align="bottom" padding="30px"]
[col span="3" span__sm="6" bg_color="rgba(231, 231, 231, 0.96)"]
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
[/with the]
[col span="3" span__sm="6" bg_color="rgba(231, 231, 231, 0.96)"]
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
[/with the]
[col span="3" span__sm="6" bg_color="rgba(231, 231, 231, 0.96)"]
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
[/with the]
[col span="3" span__sm="6" bg_color="rgba(231, 231, 231, 0.96)"]
Lorem ipsum dolor sit amet
Lorem ipsum pain sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet pain magna aliquam erat volutpat....
[/with the]
[/row]
[title style="center" text="Equal aligned row"]
[row v_align="equal" padding="30px"]
[col span="3" span__sm="6" bg_color="rgba(231, 231, 231, 0.96)"]
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
[/with the]
[col span="3" span__sm="6" bg_color="rgba(231, 231, 231, 0.96)"]
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
[/with the]
[col span="3" span__sm="6" bg_color="rgba(231, 231, 231, 0.96)"]
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod
[/with the]
[col span="3" span__sm="6" bg_color="rgba(231, 231, 231, 0.96)"]
Lorem ipsum dolor sit amet
Lorem ipsum pain sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet pain magna aliquam erat volutpat....
[/with the]
[/row]
[title style="center" text="Rows With Drop shadow"]
[row padding="30px" depth="2" depth_hover="3"]
[col span="4" span__sm="12"]
Lorem ipsum dolor sit amet
Lorem ipsum pain sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet pain magna aliquam erat volutpat....
You can set Column Depth for All columns or per column.
[/with the]
[col span="4" span__sm="12"]
Lorem ipsum dolor sit amet
Lorem ipsum pain sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet pain magna aliquam erat volutpat....
[/with the]
[col span="4" span__sm="12"]
Lorem ipsum dolor sit amet
Lorem ipsum pain sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet pain magna aliquam erat volutpat....
[/with the]
[/row]
[title style="center" text="Divided row"]
[row style="large" col_style="divided"]
[col span="4" span__sm="6"]
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
[/with the]
[col span="4" span__sm="6"]
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
[/with the]
[col span="4" span__sm="12"]
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
[/with the]
[/row]
[title style="center" text="Dashed Lined Row" margin_top="23px" size="undefined"]
[row col_style="dashed" padding="30px"]
[col span="4" span__sm="6"]
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
[/with the]
[col span="4" span__sm="6"]
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
[/with the]
[col span="4" span__sm="6"]
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
[/with the]
[col span="4" span__sm="6"]
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
[/with the]
[col span="4" span__sm="6"]
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
[/with the]
[col span="4" span__sm="6"]
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
[/with the]
[/row]
[title style="center" text="Solid Lined Row" margin_top="25px" size="undefined"]
[row col_style="solid" padding="30px"]
[col span="4" span__sm="6"]
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
[/with the]
[col span="4" span__sm="6"]
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
[/with the]
[col span="4" span__sm="6"]
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
[/with the]
[col span="4" span__sm="6"]
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
[/with the]
[col span="4" span__sm="6"]
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
[/with the]
[col span="4" span__sm="6"]
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
[/with the]
[/row]
[title style="center" text="Custom Background on a Column" margin_top="28px" size="undefined"]
[row padding="30px"]
[col span="5" span__sm="6" padding="30px 30px 30px 30px" bg_color="rgb(38, 65, 116)" color="light" depth="2"]
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
[/with the]
[col span="3" span__sm="6"]
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
[/with the]
[col span="3" span__sm="12"]
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
[/with the]
[/row]
[title style="center" text="Full Width Row with Backgrounds"]
[row style="collapse" width="full-width" v_align="equal" padding="30px"]
[col span="4" span__sm="12" bg_color="rgb(0, 0, 0)" color="light"]
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummyLorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
[/with the]
[col span="4" span__sm="12" bg_color="rgb(153, 120, 222)" color="light"]
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummyLorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
[/with the]
[col span="4" span__sm="12" bg_color="rgb(120, 154, 222)" color="light"]
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummyLorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy
[/with the]
[/row]
[title style="center" text="Nested Rows"]
[row]
[col span="4" span__sm="12"]
Lorem ipsum dolor sit amet
Lorem ipsum pain sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet pain magna aliquam erat volutpat....
Lorem ipsum dolor sit amet
Lorem ipsum pain sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet pain magna aliquam erat volutpat....
Lorem ipsum dolor sit amet
Lorem ipsum pain sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet pain magna aliquam erat volutpat....
[/with the]
[col span="8" span__sm="12"]
[row_inner]
[col_inner span="4" span__sm="6"]
Lorem ipsum dolor sit amet
Lorem ipsum pain sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet pain magna aliquam erat volutpat....
[/col_inner]
[col_inner span="4" span__sm="6"]
Lorem ipsum dolor sit amet
Lorem ipsum pain sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet pain magna aliquam erat volutpat....
[/col_inner]
[col_inner span="4" span__sm="6"]
Lorem ipsum dolor sit amet
Lorem ipsum pain sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet pain magna aliquam erat volutpat....
[/col_inner]
[col_inner span="4" span__sm="6"]
Lorem ipsum dolor sit amet
Lorem ipsum pain sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet pain magna aliquam erat volutpat....
[/col_inner]
[col_inner span="4" span__sm="6"]
Lorem ipsum dolor sit amet
Lorem ipsum pain sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet pain magna aliquam erat volutpat....
[/col_inner]
[col_inner span="4" span__sm="6"]
Lorem ipsum dolor sit amet
Lorem ipsum pain sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet pain magna aliquam erat volutpat....
[/col_inner]
[/row_inner]
[/with the]
[/row]
[section bg_color="rgb(231, 231, 231)"]
[row v_align="middle"]
[col span="4" span__sm="6"]
Column with a drop shadow and white background
Lorem ipsum pain sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet pain magna aliquam erat volutpat....
[/with the]
[col span="4" span__sm="6"]
Column with a drop shadow and white background
Lorem ipsum pain sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet pain magna aliquam erat volutpat....
[/with the]
[col span="4" span__sm="12" padding="30px 30px 30px 30px" bg_color="rgb(255, 255, 255)" depth="3" depth_hover="5"]
Column with a drop shadow and white background
Lorem ipsum pain sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet pain magna aliquam erat volutpat....
[/with the]
[/row]
[/section]
[section bg_color="rgb(0, 0, 0)"]
[row style="small" v_align="middle"]
[col span="4" span__sm="12" padding="20px" bg_color="rgb(255, 255, 255)"]
Column with a drop shadow and white background
Lorem ipsum pain sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet pain magna aliquam erat volutpat....
[/with the]
[col span="4" span__sm="12" color="light"]
Column with a drop shadow and white background
Lorem ipsum pain sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet pain magna aliquam erat volutpat....
[/with the]
[col span="4" span__sm="12" color="light"]
Column with a drop shadow and white background
Lorem ipsum pain sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet pain magna aliquam erat volutpat....
[/with the]
[/row]
[/section]
[section bg_color="rgb(231, 231, 231)"]
[row col_style="solid"]
[col span="4" span__sm="6" parallax="1"]
Parallax Column
Lorem ipsum pain sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet pain magna aliquam erat volutpat....
[/with the]
[col span="4" span__sm="6" parallax="2"]
Parallax Column
Lorem ipsum pain sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet pain magna aliquam erat volutpat....
[/with the]
[col span="4" span__sm="12" parallax="3"]
Parallax Column
Lorem ipsum pain sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet pain magna aliquam erat volutpat....
[/with the]
[/row]
[/section]
[row h_align="center"]
[col span="7" span__sm="10" align="center"]
A Centered Columns Row
Lorem ipsum pain sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet pain magna aliquam erat volutpat....
[/with the]
[/row]
[title style="center" text="Animated Columns"]
[row]
[col span="4" span__sm="12" animate="fadeInUp"]
Fade In Up
Lorem ipsum pain sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet pain magna aliquam erat volutpat....
[/with the]
[col span="4" span__sm="12" animate="fadeInDown"]
Fade In Down
Lorem ipsum pain sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet pain magna aliquam erat volutpat....
[/with the]
[col span="4" span__sm="12" animate="fadeInLeft"]
Fade In Left
Lorem ipsum pain sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet pain magna aliquam erat volutpat....
[/with the]
[col span="4" span__sm="12" animate="fadeInRight"]
Fade In Right
Lorem ipsum pain sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet pain magna aliquam erat volutpat....
[/with the]
[col span="4" span__sm="12" animate="bounceIn"]
Bounce In
Lorem ipsum pain sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet pain magna aliquam erat volutpat....
[/with the]
[col span="4" span__sm="12" animate="bounceInUp"]
Bounce In Up
Lorem ipsum pain sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet pain magna aliquam erat volutpat....
[/with the]
[col span="4" span__sm="12" animate="bounceInDown"]
Bounce In Down
Lorem ipsum pain sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet pain magna aliquam erat volutpat....
[/with the]
[col span="4" span__sm="12" animate="bounceInLeft"]
Bounce In Left
Lorem ipsum pain sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet pain magna aliquam erat volutpat....
[/with the]
[col span="4" span__sm="12" animate="bounceInRight"]
Bounce In Right
Lorem ipsum pain sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet pain magna aliquam erat volutpat....
[/with the]
[/row]
[row]
[col span="6" span__sm="12" animate="flipInY"]
Flip In Y
Lorem ipsum pain sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet pain magna aliquam erat volutpat....
[/with the]
[col span="6" span__sm="12" animate="flipInX"]
Flip In X
Lorem ipsum pain sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet pain magna aliquam erat volutpat....
[/with the]
[col span="6" span__sm="12" animate="blurIn"]
Blur In
Lorem ipsum pain sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet pain magna aliquam erat volutpat....
[/with the]
[/row]