Row Shortcode

<style>#example .intense.row > div { margin-bottom: 30px; }</style>
[intense_content_section]
<h2>Introduction</h2>
Organize your content into rows and columns for a clean visual look using the row shortcode. The columns can be any size from 1-12 (ex. two columns of size 6, 4 columns of size 3, 3 columns of size 4, etc.).

Each column can be customized to have different sizes for mobile devices. There are four different sizes which apply to different screen sizes:

<ul>
<li>Standard - Large devices (large desktops, 1200px and up)</li>
<li>Medium - Medium devices (desktops, 992px and up)</li>
<li>Small - Small devices (tablets, 768px and up)</li>
<li>Extra Small - Extra small devices (phones, less than 768px)</li>
</ul>

The columns have gutters which add white space between columns. The gutters can be disabled if you want the columns to be right next to each other.

[/intense_content_section]
[intense_content_section id="example" background_type="color" background_color="#f9f9f9" border_top="1px solid #ededed" border_bottom="1px solid #ededed"]
<h2>Examples</h2>

The row shortcode examples below include very common column sizes. Most layouts can be done using one of these.

<h3>4 Columns (1/4)</h3>
To create a row with 4 columns, the column size is set to 3.
[intense_row padding_top="0"]
[intense_column size="3"]
In lobortis ullamcorper nibh, non euismod ligula pharetra sit amet. In sed euismod arcu. Proin pellentesque placerat elit, vel interdum velit egestas sit amet. Aenean ac velit purus. Nunc vitae felis sit amet tellus interdum adipiscing at vitae urna. Nunc dignissim eros enim, vitae venenatis dui gravida et. Vestibulum molestie.
[/intense_column]
[intense_column size="3"]
In lobortis ullamcorper nibh, non euismod ligula pharetra sit amet. In sed euismod arcu. Proin pellentesque placerat elit, vel interdum velit egestas sit amet. Aenean ac velit purus. Nunc vitae felis sit amet tellus interdum adipiscing at vitae urna. Nunc dignissim eros enim, vitae venenatis dui gravida et. Vestibulum molestie.
[/intense_column]
[intense_column size="3"]
In lobortis ullamcorper nibh, non euismod ligula pharetra sit amet. In sed euismod arcu. Proin pellentesque placerat elit, vel interdum velit egestas sit amet. Aenean ac velit purus. Nunc vitae felis sit amet tellus interdum adipiscing at vitae urna. Nunc dignissim eros enim, vitae venenatis dui gravida et. Vestibulum molestie.
[/intense_column]
[intense_column size="3"]
In lobortis ullamcorper nibh, non euismod ligula pharetra sit amet. In sed euismod arcu. Proin pellentesque placerat elit, vel interdum velit egestas sit amet. Aenean ac velit purus. Nunc vitae felis sit amet tellus interdum adipiscing at vitae urna. Nunc dignissim eros enim, vitae venenatis dui gravida et. Vestibulum molestie.
[/intense_column]
[/intense_row]

[intense_hr size="large" /]
<h3>3 Columns (1/3)</h3>
To create a row with 3 columns, the column size is set to 4.
[intense_row padding_top="0"]
[intense_column size="4"]
Curabitur tortor lacus, vehicula nec dolor at, ornare laoreet metus. Duis dui tortor, ullamcorper eget condimentum ut, semper euismod nisi. Cras sapien diam, rutrum id venenatis dignissim, pharetra id nunc. In nibh erat, blandit a lacus vel, molestie porta nisi. Etiam auctor tortor non dolor.
[/intense_column]
[intense_column size="4"]
Curabitur tortor lacus, vehicula nec dolor at, ornare laoreet metus. Duis dui tortor, ullamcorper eget condimentum ut, semper euismod nisi. Cras sapien diam, rutrum id venenatis dignissim, pharetra id nunc. In nibh erat, blandit a lacus vel, molestie porta nisi. Etiam auctor tortor non dolor.
[/intense_column]
[intense_column size="4"]
Curabitur tortor lacus, vehicula nec dolor at, ornare laoreet metus. Duis dui tortor, ullamcorper eget condimentum ut, semper euismod nisi. Cras sapien diam, rutrum id venenatis dignissim, pharetra id nunc. In nibh erat, blandit a lacus vel, molestie porta nisi. Etiam auctor tortor non dolor.
[/intense_column]
[/intense_row]

[intense_hr size="large" /]
<h3>2 Columns (1/2)</h3>
To create a row with 2 columns, the column size is set to 6.
[intense_row padding_top="0"]
[intense_column size="6"]
Praesent urna magna, dignissim ac sem malesuada, egestas dignissim dolor. Sed non dictum metus. Aliquam ipsum tellus, sollicitudin quis nisl vehicula, facilisis semper ligula. Vivamus mattis tincidunt lectus, elementum suscipit nisl volutpat nec. Ut tempor at felis id eleifend. Donec magna orci, sagittis id congue ac, elementum eget mi. Proin molestie dignissim ante, eget consectetur leo viverra pretium. Sed facilisis.
[/intense_column]
[intense_column size="6"]
Praesent urna magna, dignissim ac sem malesuada, egestas dignissim dolor. Sed non dictum metus. Aliquam ipsum tellus, sollicitudin quis nisl vehicula, facilisis semper ligula. Vivamus mattis tincidunt lectus, elementum suscipit nisl volutpat nec. Ut tempor at felis id eleifend. Donec magna orci, sagittis id congue ac, elementum eget mi. Proin molestie dignissim ante, eget consectetur leo viverra pretium. Sed facilisis.
[/intense_column]
[/intense_row]

[intense_hr size="large" /]
<h3>2/3 Columns</h3>
This example has a column size 8 and another set to size 4.
[intense_row padding_top="0"]
[intense_column size="8"]
Duis hendrerit convallis sollicitudin. Sed ut pellentesque velit. Suspendisse potenti. Mauris et feugiat nunc, ullamcorper ullamcorper dolor. Nam laoreet ante magna, a lacinia nulla rutrum non. In sed quam vel elit molestie suscipit sit amet nec nunc. Donec laoreet vehicula mi, in interdum libero iaculis eu. Vestibulum commodo, lorem id. In sed quam vel elit molestie suscipit sit amet nec nunc. Donec laoreet vehicula mi, in interdum libero iaculis eu. Vestibulum commodo, lorem id.
[/intense_column]
[intense_column size="4"]
In adipiscing convallis pellentesque. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis ac scelerisque est. Etiam non mattis urna. Nullam imperdiet auctor.
[/intense_column]
[/intense_row]

[intense_hr size="large" /]
<h3>3/4 Columns</h3>
This example has a column size 9 and another set to size 3.
[intense_row padding_top="0"]
[intense_column size="9"]
Maecenas nec ornare ipsum. Aliquam erat volutpat. Sed faucibus egestas augue sed tempus. Sed vel turpis sed tellus adipiscing ultricies tempus at urna. Aliquam dictum placerat ipsum, in pretium urna ornare sit amet. Mauris rhoncus iaculis justo vehicula gravida. Praesent volutpat nulla velit, vel egestas nunc adipiscing at. Nam turpis est, suscipit id feugiat non, condimentum sed nunc. Aenean quis. Mauris rhoncus iaculis justo vehicula gravida. Praesent volutpat nulla velit, vel egestas nunc adipiscing at. Nam turpis est, suscipit id feugiat non, condimentum sed. Quisque convallis aliquet diam, id ultricies nisl accumsan dapibus. Etiam volutpat luctus mauris, id venenatis augue commodo eu. Nunc semper, odio ac aliquam accumsan, neque sapien pulvinar sem, et luctus. Nunc semper, odio ac aliquam accumsan, neque sapien pulvinar sem, et luctus.
[/intense_column]
[intense_column size="3"]
Maecenas nec ornare ipsum. Aliquam erat volutpat. Sed faucibus egestas augue sed tempus. Sed vel turpis sed tellus adipiscing ultricies tempus at urna. Aliquam dictum placerat ipsum, in pretium urna ornare sit amet. nunc. Aenean quis.
[/intense_column]
[/intense_row]

[/intense_content_section]

[intense_snippet snippet_id="Child Theme | Shortcodes/footer" snippet_title="Shortcode Page Footer"]