Grid Columns
Created by Orckestra

How to present content in columns

Edit a page.

Insert:

the "Columns" component (Components | Columns),
or the Orckestra.Web.Html.Grid.Columns function ( Insert | Function),

or the following code:
Expand code

<f:function name="Orckestra.Web.Html.Grid.Columns" xmlns:f="http://www.composite.net/ns/function/1.0">
	<f:param name="Column1">
		<html>
			<head>
			</head>
			<body>
				<p>Lorem ipsum dolor sit amet...</p>
			</body>
		</html>
	</f:param>
	<f:param name="Column2">
		<html>
			<head>
			</head>
			<body>
				<p>Lorem ipsum dolor sit amet...</p>
			</body>
		</html>
	</f:param>
	<f:param name="Column3">
		<html>
			<head>
			</head>
			<body>
				<p>Lorem ipsum dolor sit amet...</p>
			</body>
		</html>
	</f:param>
	<f:param name="Column4">
		<html>
			<head>
			</head>
			<body>
				<p>Lorem ipsum dolor sit amet...</p>
			</body>
		</html>
	</f:param>
	<f:param name="LayoutOptions" value="1:1" />
</f:function>

Add content in as many column parameters as you need (2, 3, or 4): Column 1 through Column 4 (see "Number of Columns" below).
Set the Layout Options parameter (optional) by selecting the proportional width of the columns as a ratio (see "Column layout options" below). By default, all the columns will have equal widths (1:1).
If necessary, enable one or more Display Options:
1. Use full page width: The column block will be full-width on the page. Disabled by default.
2. Add spacing at the top: Add spacing above the column block. Disabled by default.
3. Add spacing at the bottom: Add spacing above the column block. Disabled by default.

Number of columns

You can choose to use 2, 3 or 4 columns. 4 is the maximum number of columns.

Example:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nec velit est.

Column layout options

If not specified, the column layout is set to 1:1, that is the widths are equal.

Example:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nec velit est.

If you use 2 columns, and select the ratio of 1:2, Column 2 will be twice as wider than Column 1.

Example:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nec velit est.

If you use 3 columns and select the ratio of 1:2, it will default to 1:2:1 and try showing 3 columns where Column 2 is twice as wider than Columns 1 and 3.

Example:

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris nec velit est.

Important. If the layout option is not supported with the selected number of columns , the function preview will inform you of this issue (in red) in Visual Editor, and the layout will be reset to the default ratio of 1:1.

For example, if you use 3 columns with the ratio of 1:3, Column 3 will try the ratio of :1, ending up as 1:3:1, which is not supported by Bootstrap's Grid System. As a result, 1:1:1 will be used instead.

Version 1.0.5

Tags Bootstrap | Columns | Content | Grid | Layout

Have a question?

Post it to the C1 CMS Foundation forum.

Know it first and engage with us on all channels

Grid Columns Created by Orckestra

How to present content in columns

Number of columns

Column layout options

Have a question?

Share this page

ABOUT C1 CMS IN SHORT

UPDATES ABOUT C1 CMS

Know it first and engage with us on all channels

Grid Columns
Created by Orckestra