Shortcodes – Page Structure

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellen tesque diam sem, hendrerit ut faucibus sit amet, bibendum vel lacus. Morbi feugiat tincidunt ligula. Sed malesuada odio. Nunc cursus, nunc vel laoreet volutpat, diam libero facilisis lectus.

One Half

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellen tesque diam sem, hendrerit ut faucibus sit amet, bibendum vel lacus. Morbi feugiat tincidunt ligula. Sed malesuada odio. Nunc cursus, nunc vel laoreet volutpat, diam libero facilisis lectus.

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.

One Fourth

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellen tesque diam sem, hendrerit ut faucibus sit amet.

One Fourth

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellen tesque diam sem, hendrerit ut faucibus sit amet.

One Fourth

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellen tesque diam sem, hendrerit ut faucibus sit amet.

One Fourth

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellen tesque diam sem, hendrerit ut faucibus sit amet.

One Fourth

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellen tesque diam sem, hendrerit ut faucibus sit amet.

One Fourth

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellen tesque diam sem, hendrerit ut faucibus sit amet.

One Half

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellen tesque diam sem, hendrerit ut faucibus sit amet, bibendum vel lacus. Morbi feugiat tincidunt ligula. Sed malesuada odio. Nunc cursus, nunc vel laoreet volutpat, diam libero facilisis lectus.

One Fourth

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellen tesque diam sem, hendrerit ut faucibus sit amet.

Three Fourth

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellen tesque diam sem, hendrerit ut faucibus sit amet, bibendum vel lacus. Morbi feugiat tincidunt ligula. Sed malesuada odio. Nunc cursus, nunc vel laoreet volutpat, diam libero facilisis lectus, eget posuere dui nibh sed urna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus semper, lectus sit amet pharetra auctor, nisi turpis congue mauris.

Three Fourth

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellen tesque diam sem, hendrerit ut faucibus sit amet, bibendum vel lacus. Morbi feugiat tincidunt ligula. Sed malesuada odio. Nunc cursus, nunc vel laoreet volutpat, diam libero facilisis lectus, eget posuere dui nibh sed urna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus semper, lectus sit amet pharetra auctor, nisi turpis congue mauris.

One Fourth

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellen tesque diam sem, hendrerit ut faucibus sit amet.

Two Thirds

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellen tesque diam sem, hendrerit ut faucibus sit amet, bibendum vel lacus. Morbi feugiat tincidunt ligula. Sed malesuada odio. Nunc cursus, nunc vel laoreet volutpat, diam libero facilisis lectus, eget posuere dui nibh sed urna. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus semper, lectus sit amet pharetra auctor, nisi turpis congue mauris.

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.


Table Wrap

Wrap any table with this shortcode to change the border styles, row background color, or to make it's width fluid which and adds a horizontal scroll-bar on smaller screens.

Code Example

[table-wrap]<table><tr><td></td</tr></table>[/table-wrap]

Parameters

Parameter Description Required Values Default
bordered Add borders to all sides of the table and cells. optional true, false false
striped Add zebra-striping to any table row within the <tbody> optional true, false false
responsive Wrap the table in a div with the class "table-responsive" 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

Output

Table Caption
Table Header
Table Data Table Data Table Data Table Data Table Data Table Data
Table Data Table Data Table Data Table Data Table Data Table Data
Table Data Table Data Table Data Table Data Table Data Table Data

Table Responsive

Wrap any table to make it's width fluid and includes a horizontal scroll-bar on smaller screens.

Code Example

[table-responsive]<table><tr><td></td</tr></table>[/table-responsive]

Output

Table Caption
Table Header
Table Data Table Data Table Data Table Data Table Data Table Data
Table Data Table Data Table Data Table Data Table Data Table Data
Table Data Table Data Table Data Table Data Table Data Table Data

Display

Code Example

[display hidden="" block="" inline="" inline_block="" class=""][/display]

Parameters

Parameter Description Required Values Default
hidden Sizes at which this element is hidden (separated by spaces) optional xs, sm, md, lg, xl false
block Sizes at which this element is visible and displayed as a "block" element (separated by spaces) optional xs, sm, md, lg, xl false
inline Sizes at which this element is visible and displayed as an "inline" element (separated by spaces) optional xs, sm, md, lg, xl false
inline_block Sizes at which this element is visible and displayed as an "inline-block" element (separated by spaces) optional xs, sm, md, lg, xl 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:


Become a Contributing Sponsor

Become a part of projects that need your support.