Shortcodes - Page Structure - Friends of Reservoirs

Grid Structure

There are three major components—containers, rows, and columns.
Containers—.container for fixed width or .container-fluid for full width—center your site’s contents and help align your grid content.
Rows are horizontal groups of columns that ensure your columns are lined up properly.
Content should be placed within columns, and only columns may be immediate children of rows.
Column classes indicate the number of columns you’d like to use out of the possible 12 per row. So if you want three equal-width columns, you’d use .col-sm-4.
Column widths are set in percentages, so they’re always fluid and sized relative to their parent element.
Columns have horizontal padding to create the gutters between individual columns.
There are five grid tiers, one for each responsive breakpoint: extra small, small, medium, large, and extra large.
Grid tiers are based on minimum widths, meaning they apply to that one tier and all those above it (e.g., .col-sm-4 applies to small, medium, large, and extra large devices).

Code Example

[row]
  [column md="6"]
    ...
  [/column]
  [column md="6"]
    ...
  [/column]
[/row]

The container component is also supported in case your theme doesn't include a container.

[container]
  [row]
    [column md="6"]
      ...
    [/column]
    [column md="6"]
      ...
    [/column]
  [/row]
[/container]

Container Parameters

Parameter	Description	Required	Values	Default
fluid	Is the container fluid? (see Bootstrap documentation for details)	optional	true, false	false
class	Any extra classes you want to add	optional	any text	none
data	Data attribute and value pairs separated by a comma. Pairs separated by pipe.	optional	any text	none

Row Parameters

Parameter	Description	Required	Values	Default
class	Any extra classes you want to add	optional	any text	none
data	Data attribute and value pairs separated by a comma. Pairs separated by pipe.	optional	any text	none

Column Parameters

Parameter	Description	Required	Values	Default
xs	Size of column on extra small screens (less than 544px)	optional	1-12	false
sm	Size of column on small screens (greater than or equal to 544px)	optional	1-12	false
md	Size of column on medium screens (greater than or equal to 768px)	optional	1-12	false
lg	Size of column on large screens (greater than or equal to 1024px)	optional	1-12	false
xl	Size of column on extra large screens (greater than or equal to 1280px)	optional	1-12	false
offset_xs	Offset on extra small screens	optional	1-12	false
offset_sm	Offset on small screens	optional	1-12	false
offset_md	Offset on column on medium screens	optional	1-12	false
offset_lg	Offset on column on large screens	optional	1-12	false
offset_xl	Offset on column on extra large screens	optional	1-12	false
pull_xs	Pull on extra small screens	optional	1-12	false
pull_sm	Pull on small screens	optional	1-12	false
pull_md	Pull on column on medium screens	optional	1-12	false
pull_lg	Pull on column on large screens	optional	1-12	false
pull_xl	Pull on column on extra large screens	optional	1-12	false
push_xs	Push on extra small screens	optional	1-12	false
push_sm	Push on small screens	optional	1-12	false
push_md	Push on column on medium screens	optional	1-12	false
push_lg	Push on column on large screens	optional	1-12	false
push_xl	Push on column on extra large screens	optional	1-12	false
class	Any extra classes you want to add	optional	any text	none
data	Data attribute and value pairs separated by a comma. Pairs separated by pipe.	optional	any text	none

Output

One Half

One Third

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellen tesque diam sem, hendrerit ut faucibus sit amet, bibendum vel lacus. Morbi feugiat tincidunt ligula.

One Third

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellen tesque diam sem, hendrerit ut faucibus sit amet, bibendum vel lacus. Morbi feugiat tincidunt ligula.

One Third

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellen tesque diam sem, hendrerit ut faucibus sit amet, bibendum vel lacus. Morbi feugiat tincidunt ligula.