Row & Columns

this is the shortcode we give a show for your always help Row & Column available size example below. Equal height, Divider yes/no, Background color, color. of course use the shortcode & get more facility.

Full Width Column Example

Full Width Column Example

			[row]
				[column center="yes"]
					[panel text_align="center"]Full Width Column Example[/panel]
				[/column]
			[/row]
		
1/2 Column Example

1/2 Column Example

					[row]	
						[column size="1/2"]
							[panel text_align="center"]1/2 Column Example[/panel]
						[/column]
						[column size="1/2"]
							[panel text_align="center"]1/2 Column Example[/panel]
						[/colum]
					[/row]
				
1/2 Column Example
1/3 Column Example

1/3 Column Example

					[row]	
						[column size="1/3"]
							[panel text_align="center"]1/3 Column Example[/panel]
						[/column]
						[column size="1/3"]
							[panel text_align="center"]1/3 Column Example[/panel]
						[/column]
						[column size="1/3" last="1"]
							[panel text_align="center"]1/3 Column Example[/panel]
						[/column]
					[/row]
				
1/3 Column Example
1/3 Column Example
2/3 Column Example

2/3 Column & 1/3 Column Example

					[row]
						[column size="2/3"]
								[panel text_align="center"]2/3 Column Example[/panel]	
						[/column]
						[column size="1/3" last="1"]
								[panel text_align="center"]1/3 Column Example[/panel]
						[/column]
					[/row]
				
1/3 Column Example
1/4 Column Example

1/4 Column Example

					[row]
						[column size="1/4"]
								[panel text_align="center"]1/4 Column Example[/panel]
						[/column]
						[column size="1/4"]
								[panel text_align="center"]1/4 Column Example[/panel]
						[/column]
						[column size="1/4"]
								[panel text_align="center"]1/4 Column Example[/panel]
						[/column]
						[column size="1/4" last="1"]
								[panel text_align="center"]1/4 Column Example[/panel]
						[/column]
					[/row]	
				
1/4 Column Example
1/4 Column Example
1/4 Column Example
3/4 Column Example
1/4 Column Example
1/4 Column Example

1/4 Column & 3/4 Column Example

					[row]
						[column size="1/4"]
								[panel text_align="center"]1/4 Column Example[/panel]
						[/column]
						[column size="3/4" last="1"]
								[panel text_align="center"]3/4 Column Example[/panel]
						[/column]
					[/row]
				
3/4 Column Example
1/5 Column Example

1/5 Column Example

					[row]
						[column size="1/5"]
								[panel text_align="center"]1/5 Column Example[/panel]
						[/column]
						[column size="1/5"]
								[panel text_align="center"]1/5 Column Example[/panel]
						[/column]
						[column size="1/5"]
								[panel text_align="center"]1/5 Column Example[/panel]
						[/column]
						[column size="1/5"]
								[panel text_align="center"]1/5 Column Example[/panel]
						[/column]
						[column size="1/5" last="1"]
								[panel text_align="center"]1/5 Column Example[/panel]
						[/column]
					[/row]
				
1/5 Column Example
1/5 Column Example
1/5 Column Example
1/5 Column Example
1/6 Column Example

1/6 Column Example

					[row]
						[column size="1/6"]
								[panel text_align="center"]1/6 Column Example[/panel]
						[/column]
						[column size="1/6"]
								[panel text_align="center"]1/6 Column Example[/panel]
						[/column]
						[column size="1/6"]
								[panel text_align="center"]1/6 Column Example[/panel]
						[/column]
						[column size="1/6"]
								[panel text_align="center"]1/6 Column Example[/panel]
						[/column]
						[column size="1/6" last="1"]
								[panel text_align="center"]1/6 Column Example[/panel]
						[/column]
						[column size="1/6" last="1"]
								[panel text_align="center"]1/6 Column Example[/panel]
						[/column]
					[/row]
				
1/6 Column Example
1/6 Column Example
1/6 Column Example
1/6 Column Example
1/6 Column Example
2/5 Column Example

2/5 Column, 2/5 Column & 1/5 Column Example

				[row]
					[column size="2/5"]
						[panel text_align="center"]2/5 Column Example[/panel]
					[/column]
					[column size="2/5"]
						[panel text_align="center"]2/5 Column Example[/panel]
					[/column]
					[column size="1/5" last="1"]
						[panel text_align="center"]1/5 Column Example[/panel]
					[/column]
				[/row]
			
2/5 Column Example
1/5 Column Example
3/5 Column Example

3/5 Column & 2/5 Column Example

				[row]
					[column size="3/5"]
						[panel text_align="center"]3/5 Column Example[/panel]
					[/column]
					[column size="2/5" last="1"]
						[panel text_align="center"]2/5 Column Example[/panel]
					[/column]
				[/row]
			
2/5 Column Example
4/5 Column Example

4/5 Column & 1/5 Column Example

				[row]
					[column size="4/5"]
						[panel text_align="center"]4/5 Column Example[/panel]
					[/column]
					[column size="1/5" last="1"]
						[panel text_align="center"]1/5 Column Example[/panel]
					[/column]
				[/row]
			
1/5 Column Example
5/6 Column Example

5/6 Column & 1/6 Column Example

				[row]
					[column size="5/6"]
						[panel text_align="center"]5/6 Column Example[/panel]
					[/column]
					[column size="1/6" last="1"]
						[panel text_align="center"]1/6 Column Example[/panel]
					[/column]
				[/row]
			
1/6 Column Example
1/6 Column Example

1/6 Column & 5/6 Column Example

				[row]
					[column size="1/6"]
						[panel text_align="center"]1/6 Column Example[/panel]
					[/column]
					[column size="5/6" last="1"]
						[panel text_align="center"]5/6 Column Example[/panel]
					[/column]
				[/row]
			
5/6 Column Example

Equal Height Yes

Equal Height Yes

				[row equal_height="yes"]	
					[column size="1/3" background="#eee" padding="20"]
						<h4>Equal Height Yes</h4>
						<p>Vivamus nec accumsan lectus. In quis ex tortor.</p>
					[/column]
					[column size="1/3" background="#eee" padding="20"] 
						<h4>Equal Height Yes</h4>							
						<p>Vivamus nec accumsan lectus. In quis ex tortor.</p>
					[/column]
					[column size="1/3" background="#eee" padding="20"] 
						<h4>Equal Height Yes</h4>							
						<p>Vivamus nec accumsan lectus. In quis ex tortor.</p>
					[/column]
				[/row]
				

Vivamus nec accumsan lectus. In quis ex tortor. Pellentesque lacinia ex nec nisl cursus vulputate. Nunc ac porta magna. Proin molestie lectus nec justo molestie elementum. Nam pharetra arcu et faucibus congue. Aliquam feugiat scelerisque mauris, viverra pellentesque magna mollis at. Nam tristique, arcu quis molestie porttitor, felis erat tempus.

Equal Height Yes

Vivamus nec accumsan lectus. In quis ex tortor. Pellentesque lacinia ex nec nisl cursus vulputate.

Equal Height Yes

Vivamus nec accumsan lectus. In quis ex tortor. Pellentesque lacinia ex nec nisl cursus vulputate. Nunc ac porta magna.

Vertical Align Top

Vertical Align Example

[row equal_height="yes"]
	[column size="1/3" background="#eee" padding="20" vertical_align="top"]
		<h4>Vertical Align Top</h4>
		<p>Now you can easily set your column as vertical align top, middle, bottom. but keep in mind you must need to set equal height yes in row, vertical align not work without equal height. Vivamus nec accumsan lectus. In quis ex tortor. Pellentesque lacinia ex nec nisl cursus vulputate. Nunc ac porta magna. Proin molestie lectus nec justo molestie elementum.</p>
	[/column]
	[column size="1/3" background="#eee" padding="20" vertical_align="middle"] 
		<h4>Vertical Align Middle</h4>
		<p>Vivamus nec accumsan lectus. In quis ex tortor. Pellentesque lacinia ex nec nisl cursus vulputate.</p>
	[/column]
	[column size="1/3" background="#eee" padding="20" vertical_align="bottom"] 
		<h4>Vertical Align Bottom</h4>
		<p>Vivamus nec accumsan lectus. In quis ex tortor. Pellentesque lacinia ex nec nisl cursus vulputate.</p>
	[/column]
[/row]
				

Now you can easily set your column as vertical align top, middle, bottom. but keep in mind you must need to set equal height yes in row, vertical align not work without equal height. Vivamus nec accumsan lectus. In quis ex tortor. Pellentesque lacinia ex nec nisl cursus vulputate. Nunc ac porta magna. Proin molestie lectus nec justo molestie elementum.

Vertical Align Middle

Vivamus nec accumsan lectus. In quis ex tortor. Pellentesque lacinia ex nec nisl cursus vulputate.

Vertical Align Bottom

Vivamus nec accumsan lectus. In quis ex tortor. Pellentesque lacinia ex nec nisl cursus vulputate.

Divider Yes

Divider Yes

					[row divider="yes"]	
						[column size="1/3" padding="20"]
							<h4>Divider Yes</h4>
							<p style="text-align:justify">Vivamus nec accumsan.</p>
						[/column]
						
						[column size="1/3" padding="20" divider="yes"] 
							<h4>Divider Yes</h4>
							<p style="text-align:justify">Vivamus nec accumsan.</p>
						[/column]
						
						[column size="1/3" padding="20"] 
							<h4>Divider Yes</h4>
							<p style="text-align:justify">Vivamus nec accumsan.</p>
						[/column]
					[/row]
				

Vivamus nec accumsan lectus. In quis ex tortor. Pellentesque lacinia ex nec nisl cursus vulputate. Nunc ac porta magna. Proin molestie lectus nec justo molestie elementum. Nam pharetra arcu et faucibus congue.

Divider Yes

Vivamus nec accumsan lectus. In quis ex tortor. Pellentesque lacinia ex nec nisl cursus vulputate. Nunc ac porta magna. Proin molestie lectus nec justo molestie elementum. Nam pharetra arcu et faucibus congue.

Divider Yes

Vivamus nec accumsan lectus. In quis ex tortor. Pellentesque lacinia ex nec nisl cursus vulputate. Nunc ac porta magna. Proin molestie lectus nec justo molestie elementum. Nam pharetra arcu et faucibus congue.

Background & Color Example

Background & Color Example

					[row]	
						[column size="1/3" padding="20" background="#576F9E" color="#88C3D8"]
							<h4 style="color:#fff">Background & Color Example</h4>
							<p style="text-align:justify">Vivamus nec accumsan.</p>
						[/column]
						
						[column size="1/3" padding="20" divider="no" background="#6697B9" color="#ABC6D9"] 
							<h4 style="color:#fff">Background & Color Example</h4>
							<p style="text-align:justify">Vivamus nec accumsan.</p>
						[/column]
						
						[column size="1/3" padding="20" divider="no" background="#4FC1E9" color="#fff"] 
							<h4 style="color:#fff">Background & Color Example</h4>
							<p style="text-align:justify">Vivamus nec accumsan.</p>
						[/column]
					[/row]
				

Vivamus nec accumsan lectus. In quis ex tortor. Pellentesque lacinia ex nec nisl cursus vulputate. Nunc ac porta magna. Proin molestie lectus nec justo molestie elementum. Nam pharetra arcu et faucibus congue.

Background & Color Example

Vivamus nec accumsan lectus. In quis ex tortor. Pellentesque lacinia ex nec nisl cursus vulputate. Nunc ac porta magna. Proin molestie lectus nec justo molestie elementum. Nam pharetra arcu et faucibus congue.

Background & Color Example

Vivamus nec accumsan lectus. In quis ex tortor. Pellentesque lacinia ex nec nisl cursus vulputate. Nunc ac porta magna. Proin molestie lectus nec justo molestie elementum. Nam pharetra arcu et faucibus congue.

Responsive Column Width Example

Responsive Column Width Example

					[row]	
						[column size="1/3" medium="1/2" padding="20" background="#DDDDDD" color="#444444"]
							<h4>Responsive Column Width Example</h4>
							<p style="text-align:justify">Vivamus nec accumsan.</p>
						[/column]
						
						[column size="1/3" medium="1/2" padding="20" divider="no" background="#DDDDDD" color="#444444"] 
							<h4>Responsive Column Width Example</h4>
							<p style="text-align:justify">Vivamus nec accumsan.</p>
						[/column]
						
						[column size="1/3" medium="1/1" padding="20" divider="no" background="#DDDDDD" color="#444444"] 
							<h4>Responsive Column Width Example</h4>
							<p style="text-align:justify">Vivamus nec accumsan.</p>
						[/column]
					[/row]
				

Vivamus nec accumsan lectus. In quis ex tortor. Pellentesque lacinia ex nec nisl cursus vulputate. Nunc ac porta magna. Proin molestie lectus nec justo molestie elementum. Nam pharetra arcu et faucibus congue.

Responsive Column Width Example

Vivamus nec accumsan lectus. In quis ex tortor. Pellentesque lacinia ex nec nisl cursus vulputate. Nunc ac porta magna. Proin molestie lectus nec justo molestie elementum. Nam pharetra arcu et faucibus congue.

Responsive Column Width Example

Vivamus nec accumsan lectus. In quis ex tortor. Pellentesque lacinia ex nec nisl cursus vulputate. Nunc ac porta magna. Proin molestie lectus nec justo molestie elementum. Nam pharetra arcu et faucibus congue.

Visible All Size

Visible All Size

					[row]	
						[column size="1/3" medium="1/2" small="1/1" padding="20" background="#DDDDDD" color="#444444"]
							<h4>Visible All Size</h4>
							<p style="text-align:justify">Vivamus nec accumsan.</p>
						[/column]
						
						[column size="1/3" visible="large" padding="20" background="#DDDDDD" color="#444444"] 
							<h4>Visible Only Large Size</h4>
							<p style="text-align:justify">Vivamus nec accumsan.</p>
						[/column]
						
						[column size="1/3" padding="20" background="#DDDDDD" color="#444444" medium="1/2" small="1/1"] 
							<h4>Visible All Size</h4>
							<p style="text-align:justify">Vivamus nec accumsan.</p>
						[/column]
					[/row]
				

Vivamus nec accumsan lectus. In quis ex tortor. Pellentesque lacinia ex nec nisl cursus vulputate. Nunc ac porta magna. Proin molestie lectus nec justo molestie elementum. Nam pharetra arcu et faucibus congue.

Visible Only Large Size

Vivamus nec accumsan lectus. In quis ex tortor. Pellentesque lacinia ex nec nisl cursus vulputate. Nunc ac porta magna. Proin molestie lectus nec justo molestie elementum. Nam pharetra arcu et faucibus congue.

Visible All Size

Vivamus nec accumsan lectus. In quis ex tortor. Pellentesque lacinia ex nec nisl cursus vulputate. Nunc ac porta magna. Proin molestie lectus nec justo molestie elementum. Nam pharetra arcu et faucibus congue.

Hidden Only Phone size

Hidden Only Phone size

					[row]	
						[column size="1/3" hidden="small" medium="1/2" padding="20" background="#DDDDDD" color="#444444"]
							<h4>Hidden Only Phone size</h4>
							<p style="text-align:justify">Vivamus nec accumsan.</p>
						[/column]
						
						[column size="1/3" hidden="medium" small="1/1" padding="20" background="#DDDDDD" color="#444444"] 
							<h4>Hidden Only Tablet Size</h4>
							<p style="text-align:justify">Vivamus nec accumsan.</p>
						[/column]
						
						[column size="1/3" padding="20" background="#DDDDDD" color="#444444" medium="1/2" small="1/1"] 
							<h4>Visible All Size</h4>
							<p style="text-align:justify">Vivamus nec accumsan.</p>
						[/column]
					[/row]
				

Vivamus nec accumsan lectus. In quis ex tortor. Pellentesque lacinia ex nec nisl cursus vulputate. Nunc ac porta magna. Proin molestie lectus nec justo molestie elementum. Nam pharetra arcu et faucibus congue.

Hidden Only Tablet Size

Vivamus nec accumsan lectus. In quis ex tortor. Pellentesque lacinia ex nec nisl cursus vulputate. Nunc ac porta magna. Proin molestie lectus nec justo molestie elementum. Nam pharetra arcu et faucibus congue.

Visible All Size

Vivamus nec accumsan lectus. In quis ex tortor. Pellentesque lacinia ex nec nisl cursus vulputate. Nunc ac porta magna. Proin molestie lectus nec justo molestie elementum. Nam pharetra arcu et faucibus congue.

No Gutter Example

No Gutter Example

					[row gutter="no"]	
						[column size="1/3" padding="20" background="#576F9E" color="#88C3D8"]
							<h4 style="color:#fff">No Gutter Example</h4>
							<p style="text-align:justify">Vivamus nec accumsan .</p>
						[/column]
						
						[column size="1/3" padding="20" divider="no" background="#6697B9" color="#ABC6D9"] 
							<h4 style="color:#fff">No Gutter Example</h4>
							<p style="text-align:justify">Vivamus nec accumsan .</p>
						[/column]
						
						[column size="1/3" padding="20" divider="no" background="#4FC1E9" color="#fff"] 
							<h4 style="color:#fff">No Gutter Example</h4>
							<p style="text-align:justify">Vivamus nec accumsan .</p>
						[/column]
					[/row]
				

Vivamus nec accumsan lectus. In quis ex tortor. Pellentesque lacinia ex nec nisl cursus vulputate.

No Gutter Example

Vivamus nec accumsan lectus. In quis ex tortor. Pellentesque lacinia ex nec nisl cursus vulputate.

No Gutter Example

Vivamus nec accumsan lectus. In quis ex tortor. Pellentesque lacinia ex nec nisl cursus vulputate.

Gutter Small Example

Gutter Small Example

					[row gutter="small"]	
						[column size="1/3" padding="20" background="#576F9E" color="#88C3D8"]
							<h4 style="color:#fff">Gutter Small Example</h4>
							<p style="text-align:justify">Vivamus nec accumsan.</p>
						[/column]
						
						[column size="1/3" padding="20" divider="no" background="#6697B9" color="#ABC6D9"] 
							<h4 style="color:#fff">Gutter Small Example</h4>
							<p style="text-align:justify">Vivamus nec accumsan.</p>
						[/column]
						
						[column size="1/3" padding="20" divider="no" background="#4FC1E9" color="#fff"] 
							<h4 style="color:#fff">Gutter Small Example</h4>
							<p style="text-align:justify">Vivamus nec accumsan.</p>
						[/column]
					[/row]
				

Vivamus nec accumsan lectus. In quis ex tortor. Pellentesque lacinia ex nec nisl cursus vulputate.

Gutter Small Example

Vivamus nec accumsan lectus. In quis ex tortor. Pellentesque lacinia ex nec nisl cursus vulputate.

Gutter Small Example

Vivamus nec accumsan lectus. In quis ex tortor. Pellentesque lacinia ex nec nisl cursus vulputate.

Gutter Medium Example

Gutter Medium Example

					[row gutter="medium"]	
						[column size="1/3" padding="20" background="#576F9E" color="#88C3D8"]
							<h4 style="color:#fff">Gutter Medium Example</h4>
							<p style="text-align:justify">Vivamus nec accumsan lectus. In quis ex tortor. Pellentesque lacinia ex nec nisl cursus vulputate.</p>
						[/column]
						
						[column size="1/3" padding="20" divider="no" background="#6697B9" color="#ABC6D9"] 
							<h4 style="color:#fff">Gutter Medium Example</h4>
							<p style="text-align:justify">Vivamus nec accumsan lectus. In quis ex tortor. Pellentesque lacinia ex nec nisl cursus vulputate.</p>
						[/column]
						
						[column size="1/3" padding="20" divider="no" background="#4FC1E9" color="#fff"] 
							<h4 style="color:#fff">Gutter Medium Example</h4>
							<p style="text-align:justify">Vivamus nec accumsan lectus. In quis ex tortor. Pellentesque lacinia ex nec nisl cursus vulputate.</p>
						[/column]
					[/row]
				

Vivamus nec accumsan lectus. In quis ex tortor. Pellentesque lacinia ex nec nisl cursus vulputate.

Gutter Medium Example

Vivamus nec accumsan lectus. In quis ex tortor. Pellentesque lacinia ex nec nisl cursus vulputate.

Gutter Medium Example

Vivamus nec accumsan lectus. In quis ex tortor. Pellentesque lacinia ex nec nisl cursus vulputate.

Gutter Large Example

Gutter Large Example

					[row gutter="large"]	
						[column size="1/3" padding="20" background="#576F9E" color="#88C3D8"]
							<h4 style="color:#fff">Gutter Large Example</h4>
							<p style="text-align:justify">Vivamus nec accumsan lectus. In quis ex tortor. Pellentesque lacinia ex nec nisl cursus vulputate.</p>
						[/column]
						
						[column size="1/3" padding="20" divider="no" background="#6697B9" color="#ABC6D9"] 
							<h4 style="color:#fff">Gutter Large Example</h4>
							<p style="text-align:justify">Vivamus nec accumsan lectus. In quis ex tortor. Pellentesque lacinia ex nec nisl cursus vulputate.</p>
						[/column]
						
						[column size="1/3" padding="20" divider="no" background="#4FC1E9" color="#fff"] 
							<h4 style="color:#fff">Gutter Large Example</h4>
							<p style="text-align:justify">Vivamus nec accumsan lectus. In quis ex tortor. Pellentesque lacinia ex nec nisl cursus vulputate.</p>
						[/column]
					[/row]
				

Vivamus nec accumsan lectus. In quis ex tortor. Pellentesque lacinia ex nec nisl cursus vulputate.

Gutter Large Example

Vivamus nec accumsan lectus. In quis ex tortor. Pellentesque lacinia ex nec nisl cursus vulputate.

Gutter Large Example

Vivamus nec accumsan lectus. In quis ex tortor. Pellentesque lacinia ex nec nisl cursus vulputate.

This is a parent of 1/2 column

Column Inner Example

[row]
	[column size="1/2" padding="20" background="#4FC1E9"]
	<h4 style="color:#fff;">This is a parent of 1/2 column</h4>
		[row_inner]
			[column_inner size="2/3"]
				[panel text_align="center"]Column inner example: 2/3 Column[/panel]
			[/column_inner]
			
			[column_inner size="1/3"]
				[panel text_align="center"]Column inner example: 1/3 Column[/panel]
			[/column_inner]
		[/row_inner]
	[/column]
	
	[column size="1/2" padding="20" background="#4FC1E9"]
	<h4 style="color:#fff;">This is a parent of 1/2 column</h4>
		[row_inner]
			[column_inner size="2/3"]
				[panel text_align="center"]Column inner example: 2/3 Column[/panel]
			[/column_inner]

			[column_inner size="1/3"]
				[panel text_align="center"]Column inner example: 1/3 Column[/panel]
			[/column_inner]
		[/row_inner]
	[/column]
[/row]

Column inner example: 2/3 Column
Column inner example: 1/3 Column

This is a parent of 1/2 column

Column inner example: 2/3 Column
Column inner example: 1/3 Column

Need Shortcode Ultimate Documentation?

Click the documentation link and go there for shortcode ultimate plugin documentation!
DOCUMENTATION

Hey Wait Wait!

I hope you you like me! if you want to purchase so please: CLICK FOR DOWNLOAD