Examples

These example containers are installed on this site using Container Magic.

The display is generated using the Primary Theme Info block provided by the Front End Dashboard theme which enables the Container Check display to be shown in a front-end block.

Container Icon
Highlight Stripe [Container Magic: light_stripe] (Optional areas may collapse)
(Optional) Title
Body
<div class="cm-stripe cm-light-stripe cm-magic padding-top-40 padding-bottom-40 one-column stripe bg-light">
   <div class="container grid-container">
       <div class="row grid-row">
           <div class="container-light-stripe-title col-md-12 column-12 stripe-title">
               (Optional) Title
           </div>
       </div>
       <div class="row grid-row">
           <div class="cm-light-stripe-body col-md-12 column-12">
               Body
           </div>
       </div>
   </div>
</div>
full.png
Left Sidebar 3 [Container Magic: left_sidebar_3] (Optional areas may collapse)
(Optional) Body Full Above
Sidebar
Body
(Optional) Body Full Below
<div class="cm-left-sidebar cm-left-sidebar-3 cm-magic">
   <div class="container grid-container">
       <div class="row grid-row">
           <div class="cm-full-body-above cc-optional col-md-12 column-12">
               (Optional) Body Full Above
           </div>
       </div>
       <div class="row grid-row">
           <div class="cm-sidebar col-md-3 column-3">
               Sidebar
           </div>
           <div class="cm-body col-md-9 column-9">
               Body
           </div>
       </div>
       <div class="row grid-row">
           <div class="cm-full-body-below cc-optional col-md-12 column-12">
               (Optional) Body Full Below
           </div>
       </div>
   </div>
</div>
left_sidebar.png
Left Sidebar 3 with gutter [Container Magic: left_sidebar_3_gap] (Optional areas may collapse)
(Optional) Body Full Above
Sidebar
Body
(Optional) Body Full Below
<div class="cm-left-sidebar cm-left-sidebar-3-gap cm-magic">
   <div class="container grid-container">
       <div class="row grid-row">
           <div class="cm-full-body-above cc-optional col-md-12 column-12">
               (Optional) Body Full Above
           </div>
       </div>
       <div class="row grid-row">
           <div class="cm-sidebar col-md-3 column-3">
               Sidebar
           </div>
           <div class="col-md-1 column-1 cm-gutter">
           </div>
           <div class="cm-body col-md-8 column-8">
               Body
           </div>
       </div>
       <div class="row grid-row">
           <div class="cm-full-body-below cc-optional col-md-12 column-12">
               (Optional) Body Full Below
           </div>
       </div>
   </div>
</div>
left_sidebar.png
Left Sidebar 4 [Container Magic: left_sidebar_4] (Optional areas may collapse)
(Optional) Body Full Above
Sidebar
Body
(Optional) Body Full Below
<div class="cm-left-sidebar cm-left-sidebar-4 cm-magic">
   <div class="container grid-container">
       <div class="row grid-row">
           <div class="cm-full-body-above cc-optional col-md-12 column-12">
               (Optional) Body Full Above
           </div>
       </div>
       <div class="row grid-row">
           <div class="cm-sidebar col-md-4 column-4">
               Sidebar
           </div>
           <div class="cm-body col-md-8 column-8">
               Body
           </div>
       </div>
       <div class="row grid-row">
           <div class="cm-full-body-below cc-optional col-md-12 column-12">
               (Optional) Body Full Below
           </div>
       </div>
   </div>
</div>
left_sidebar.png
Left Sidebar 4 with gutter [Container Magic: left_sidebar_4_gap] (Optional areas may collapse)
(Optional) Body Full Above
Sidebar
Body
(Optional) Body Full Below
<div class="cm-left-sidebar cm-left-sidebar-4-gap cm-magic">
   <div class="container grid-container">
       <div class="row grid-row">
           <div class="cm-full-body-above cc-optional col-md-12 column-12">
               (Optional) Body Full Above
           </div>
       </div>
       <div class="row grid-row">
           <div class="cm-sidebar col-md-4 column-4">
               Sidebar
           </div>
           <div class="col-md-1 column-1 cm-gutter">
           </div>
           <div class="cm-body col-md-7 column-7">
               Body
           </div>
       </div>
       <div class="row grid-row">
           <div class="cm-full-body-below cc-optional col-md-12 column-12">
               (Optional) Body Full Below
           </div>
       </div>
   </div>
</div>
left_sidebar.png
Left Sidebar 5 [Container Magic: left_sidebar_5] (Optional areas may collapse)
(Optional) Body Full Above
Sidebar
Body
(Optional) Body Full Below
<div class="cm-left-sidebar cm-left-sidebar-5 cm-magic">
   <div class="container grid-container">
       <div class="row grid-row">
           <div class="cm-full-body-above cc-optional col-md-12 column-12">
               (Optional) Body Full Above
           </div>
       </div>
       <div class="row grid-row">
           <div class="cm-sidebar col-md-5 column-5">
               Sidebar
           </div>
           <div class="cm-body col-md-7 column-7">
               Body
           </div>
       </div>
       <div class="row grid-row">
           <div class="cm-full-body-below cc-optional col-md-12 column-12">
               (Optional) Body Full Below
           </div>
       </div>
   </div>
</div>
left_sidebar.png
Responsive Grid of Four [Container Magic: grid_four] (Optional areas may collapse)
(Optional) Body Full Above
Item 1
Item 2
Item 3
Item 4
(Optional) Body Full Below
<div class="cm-grid-four cm-magic">
   <div class="container grid-container">
       <div class="row grid-row">
           <div class="cm-full-body-above cc-optional col-md-12 column-12">
               (Optional) Body Full Above
           </div>
       </div>
       <div class="row grid-row">
           <div class="cm-grid-four-1 col-xl-3 col-lg-3 col-md-3 col-sm-6 col-xs-12 column-3">
               Item 1
           </div>
           <div class="cm-grid-four-2 col-xl-3 col-lg-3 col-md-3 col-sm-6 col-xs-12 column-3">
               Item 2
           </div>
           <div class="cm-grid-four-3 col-xl-3 col-lg-3 col-md-3 col-sm-6 col-xs-12 column-3">
               Item 3
           </div>
           <div class="cm-grid-four-4 col-xl-3 col-lg-3 col-md-3 col-sm-6 col-xs-12 column-3">
               Item 4
           </div>
       </div>
       <div class="row grid-row">
           <div class="cm-full-body-below cc-optional col-md-12 column-12">
               (Optional) Body Full Below
           </div>
       </div>
   </div>
</div>
grid.png
Responsive Grid of Four by Two [Container Magic: grid_four_two] (Optional areas may collapse)
(Optional) Body Full Above
Item 1
Item 2
Item 3
Item 4
(Optional) Body Full Below
<div class="cm-grid-four-by-two cm-magic">
   <div class="container grid-container">
       <div class="row grid-row">
           <div class="m-full-body-above cc-optional col-md-12 column-12">
               (Optional) Body Full Above
           </div>
       </div>
       <div class="row grid-row">
           <div class="cm-grid-four-by-two-1 col-xl-6 col-lg-6 col-md-6 col-sm-6 col-xs-12 column-6">
               Item 1
           </div>
           <div class="cm-grid-four-by-two-2 col-xl-6 col-lg-6 col-md-6 col-sm-6 col-xs-12 column-6">
               Item 2
           </div>
           <div class="cm-grid-four-by-two-3 col-xl-6 col-lg-6 col-md-6 col-sm-6 col-xs-12 column-6">
               Item 3
           </div>
           <div class="cm-grid-four-by-two-4 col-xl-6 col-lg-6 col-md-6 col-sm-6 col-xs-12 column-6">
               Item 4
           </div>
       </div>
       <div class="row grid-row">
           <div class="m-full-body-below cc-optional col-md-12 column-12">
               (Optional) Body Full Below
           </div>
       </div>
   </div>
</div>
grid.png
Responsive Grid of Six [Container Magic: grid_six] (Optional areas may collapse)
(Optional) Body Full Above
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
(Optional) Body Full Below
<div class="cm-grid-six cm-magic">
   <div class="container grid-container">
       <div class="row grid-row">
           <div class="cm-full-body-above cc-optional col-md-12 column-12">
               (Optional) Body Full Above
           </div>
       </div>
       <div class="row grid-row">
           <div class="cm-grid-six-1 col-xl-4 col-lg-4 col-md-4 col-sm-6 col-xs-12 column-4">
               Item 1
           </div>
           <div class="cm-grid-six-2 col-xl-4 col-lg-4 col-md-4 col-sm-6 col-xs-12 column-4">
               Item 2
           </div>
           <div class="cm-grid-six-3 col-xl-4 col-lg-4 col-md-4 col-sm-6 col-xs-12 column-4">
               Item 3
           </div>
           <div class="cm-grid-six-4 col-xl-4 col-lg-4 col-md-4 col-sm-6 col-xs-12 column-4">
               Item 4
           </div>
           <div class="cm-grid-six-5 col-xl-4 col-lg-4 col-md-4 col-sm-6 col-xs-12 column-4">
               Item 5
           </div>
           <div class="cm-grid-six-6 col-xl-4 col-lg-4 col-md-4 col-sm-6 col-xs-12 column-4">
               Item 6
           </div>
       </div>
       <div class="row grid-row">
           <div class="cm-full-body-below cc-optional col-md-12 column-12">
               (Optional) Body Full Below
           </div>
       </div>
   </div>
</div>
grid.png
Responsive Grid of Six by Two [Container Magic: grid_six_two] (Optional areas may collapse)
(Optional) Body Full Above
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
(Optional) Body Full Below
<div class="cm-grid-six-by-two cm-magic">
   <div class="container grid-container">
       <div class="row grid-row">
           <div class="m-full-body-above cc-optional col-md-12 column-12">
               (Optional) Body Full Above
           </div>
       </div>
       <div class="row grid-row">
           <div class="cm-grid-six-by-two-1 col-xl-6 col-lg-6 col-md-6 col-sm-6 col-xs-12 column-6">
               Item 1
           </div>
           <div class="cm-grid-six-by-two-2 col-xl-6 col-lg-6 col-md-6 col-sm-6 col-xs-12 column-6">
               Item 2
           </div>
           <div class="cm-grid-six-by-two-3 col-xl-6 col-lg-6 col-md-6 col-sm-6 col-xs-12 column-6">
               Item 3
           </div>
           <div class="cm-grid-six-by-two-4 col-xl-6 col-lg-6 col-md-6 col-sm-6 col-xs-12 column-6">
               Item 4
           </div>
           <div class="cm-grid-six-by-two-5 col-xl-6 col-lg-6 col-md-6 col-sm-6 col-xs-12 column-6">
               Item 5
           </div>
           <div class="cm-grid-six-by-two-6 col-xl-6 col-lg-6 col-md-6 col-sm-6 col-xs-12 column-6">
               Item 6
           </div>
       </div>
       <div class="row grid-row">
           <div class="m-full-body-below cc-optional col-md-12 column-12">
               (Optional) Body Full Below
           </div>
       </div>
   </div>
</div>
grid.png
Responsive Grid of Twelve by Four [Container Magic: grid_twelve_four] (Optional areas may collapse)
(Optional) Body Full Above
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
(Optional) Body Full Below
<div class="cm-grid-twelve-by-four cm-magic">
   <div class="container grid-container">
       <div class="row grid-row">
           <div class="cm-full-body-above cc-optional col-md-12 column-12">
               (Optional) Body Full Above
           </div>
       </div>
       <div class="row grid-row">
           <div class="cm-grid-twelve-by-four-1 col-xl-3 col-lg-3 col-md-4 col-sm-6 col-xs-12 column-3 column-lg-4">
               Item 1
           </div>
           <div class="cm-grid-twelve-by-four-2 col-xl-3 col-lg-3 col-md-4 col-sm-6 col-xs-12 column-3 column-lg-4">
               Item 2
           </div>
           <div class="cm-grid-twelve-by-four-3 col-xl-3 col-lg-3 col-md-4 col-sm-6 col-xs-12 column-3 column-lg-4">
               Item 3
           </div>
           <div class="cm-grid-twelve-by-four-4 col-xl-3 col-lg-3 col-md-4 col-sm-6 col-xs-12 column-3 column-lg-4">
               Item 4
           </div>
           <div class="cm-grid-twelve-by-four-5 col-xl-3 col-lg-3 col-md-4 col-sm-6 col-xs-12 column-3 column-lg-4">
               Item 5
           </div>
           <div class="cm-grid-twelve-by-four-6 col-xl-3 col-lg-3 col-md-4 col-sm-6 col-xs-12 column-3 column-lg-4">
               Item 6
           </div>
           <div class="cm-grid-twelve-by-four-7 col-xl-3 col-lg-3 col-md-4 col-sm-6 col-xs-12 column-3 column-lg-4">
               Item 7
           </div>
           <div class="cm-grid-twelve-by-four-8 col-xl-3 col-lg-3 col-md-4 col-sm-6 col-xs-12 column-3 column-lg-4">
               Item 8
           </div>
           <div class="cm-grid-twelve-by-four-9 col-xl-3 col-lg-3 col-md-4 col-sm-6 col-xs-12 column-3 column-lg-4">
               Item 9
           </div>
           <div class="cm-grid-twelve-by-four-10 col-xl-3 col-lg-3 col-md-4 col-sm-6 col-xs-12 column-3 column-lg-4">
               Item 10
           </div>
           <div class="cm-grid-twelve-by-four-11 col-xl-3 col-lg-3 col-md-4 col-sm-6 col-xs-12 column-3 column-lg-4">
               Item 11
           </div>
           <div class="cm-grid-twelve-by-four-12 col-xl-3 col-lg-3 col-md-4 col-sm-6 col-xs-12 column-3 column-lg-4">
               Item 12
           </div>
       </div>
       <div class="row grid-row">
           <div class="cm-full-body-below cc-optional col-md-12 column-12">
               (Optional) Body Full Below
           </div>
       </div>
   </div>
</div>
grid.png
Responsive Grid of Twelve by Three [Container Magic: grid_twelve_three] (Optional areas may collapse)
(Optional) Body Full Above
Item 1
Item 2
Item 3
Item 4
Item 5
Item 6
Item 7
Item 8
Item 9
Item 10
Item 11
Item 12
(Optional) Body Full Below
<div class="cm-grid-twelve-by-three cm-magic">
   <div class="container grid-container">
       <div class="row grid-row">
           <div class="cm-full-body-above cc-optional col-md-12 column-12">
               (Optional) Body Full Above
           </div>
       </div>
       <div class="row grid-row">
           <div class="cm-grid-twelve-by-three-1 col-xl-4 col-lg-4 col-md-4 col-sm-6 col-xs-12 column-4">
               Item 1
           </div>
           <div class="cm-grid-twelve-by-three-2 col-xl-4 col-lg-4 col-md-4 col-sm-6 col-xs-12 column-4">
               Item 2
           </div>
           <div class="cm-grid-twelve-by-three-3 col-xl-4 col-lg-4 col-md-4 col-sm-6 col-xs-12 column-4">
               Item 3
           </div>
           <div class="cm-grid-twelve-by-three-4 col-xl-4 col-lg-4 col-md-4 col-sm-6 col-xs-12 column-4">
               Item 4
           </div>
           <div class="cm-grid-twelve-by-three-5 col-xl-4 col-lg-4 col-md-4 col-sm-6 col-xs-12 column-4">
               Item 5
           </div>
           <div class="cm-grid-twelve-by-three-6 col-xl-4 col-lg-4 col-md-4 col-sm-6 col-xs-12 column-4">
               Item 6
           </div>
           <div class="cm-grid-twelve-by-three-7 col-xl-4 col-lg-4 col-md-4 col-sm-6 col-xs-12 column-4">
               Item 7
           </div>
           <div class="cm-grid-twelve-by-three-8 col-xl-4 col-lg-4 col-md-4 col-sm-6 col-xs-12 column-4">
               Item 8
           </div>
           <div class="cm-grid-twelve-by-three-9 col-xl-4 col-lg-4 col-md-4 col-sm-6 col-xs-12 column-4">
               Item 9
           </div>
           <div class="cm-grid-twelve-by-three-10 col-xl-4 col-lg-4 col-md-4 col-sm-6 col-xs-12 column-4">
               Item 10
           </div>
           <div class="cm-grid-twelve-by-three-11 col-xl-4 col-lg-4 col-md-4 col-sm-6 col-xs-12 column-4">
               Item 11
           </div>
           <div class="cm-grid-twelve-by-three-12 col-xl-4 col-lg-4 col-md-4 col-sm-6 col-xs-12 column-4">
               Item 12
           </div>
       </div>
       <div class="row grid-row">
           <div class="cm-full-body-below cc-optional col-md-12 column-12">
               (Optional) Body Full Below
           </div>
       </div>
   </div>
</div>
grid.png
Right Sidebar 3 [Container Magic: right_sidebar_3] (Optional areas may collapse)
(Optional) Body Full Above
Body
Sidebar
(Optional) Body Full Below
<div class="cm-right-sidebar cm-right-sidebar-3 cm-magic">
   <div class="container grid-container">
       <div class="row grid-row">
           <div class="cm-full-body-above cc-optional col-md-12 column-12">
               (Optional) Body Full Above
           </div>
       </div>
       <div class="row grid-row">
           <div class="cm-body col-md-9 column-9">
               Body
           </div>
           <div class="cm-sidebar col-md-3 column-3">
               Sidebar
           </div>
       </div>
       <div class="row grid-row">
           <div class="cm-full-body-below cc-optional col-md-12 column-12">
               (Optional) Body Full Below
           </div>
       </div>
   </div>
</div>
right_sidebar.png
Right Sidebar 3 with gutter [Container Magic: right_sidebar_3_gap] (Optional areas may collapse)
(Optional) Body Full Above
Body
Sidebar
(Optional) Body Full Below
<div class="cm-right-sidebar cm-right-sidebar-3-gap cm-magic">
   <div class="container grid-container">
       <div class="row grid-row">
           <div class="cm-full-body-above cc-optional col-md-12 column-12">
               (Optional) Body Full Above
           </div>
       </div>
       <div class="row grid-row">
           <div class="cm-body col-md-8 column-8">
               Body
           </div>
           <div class="col-md-1 column-1 cm-gutter">
           </div>
           <div class="cm-sidebar col-md-3 column-3">
               Sidebar
           </div>
       </div>
       <div class="row grid-row">
           <div class="cm-full-body-below cc-optional col-md-12 column-12">
               (Optional) Body Full Below
           </div>
       </div>
   </div>
</div>
right_sidebar.png
Right Sidebar 4 [Container Magic: right_sidebar_4] (Optional areas may collapse)
(Optional) Body Full Above
Body
Sidebar
(Optional) Body Full Below
<div class="cm-right-sidebar cm-right-sidebar-4 cm-magic">
   <div class="container grid-container">
       <div class="row grid-row">
           <div class="cm-full-body-above cc-optional col-md-12 column-12">
               (Optional) Body Full Above
           </div>
       </div>
       <div class="row grid-row">
           <div class="cm-body col-md-8 column-8">
               Body
           </div>
           <div class="cm-sidebar col-md-4 column-4">
               Sidebar
           </div>
       </div>
       <div class="row grid-row">
           <div class="cm-full-body-below cc-optional col-md-12 column-12">
               (Optional) Body Full Below
           </div>
       </div>
   </div>
</div>
right_sidebar.png
Right Sidebar 4 with gutter [Container Magic: right_sidebar_4_gap] (Optional areas may collapse)
(Optional) Body Full Above
Body
Sidebar
(Optional) Body Full Below
<div class="cm-right-sidebar cm-right-sidebar-4-gap cm-magic">
   <div class="container grid-container">
       <div class="row grid-row">
           <div class="cm-full-body-above cc-optional col-md-12 column-12">
               (Optional) Body Full Above
           </div>
       </div>
       <div class="row grid-row">
           <div class="cm-body col-md-7 column-7">
               Body
           </div>
           <div class="col-md-1 column-1 cm-gutter">
           </div>
           <div class="cm-sidebar col-md-4 column-4">
               Sidebar
           </div>
       </div>
       <div class="row grid-row">
           <div class="cm-full-body-below cc-optional col-md-12 column-12">
               (Optional) Body Full Below
           </div>
       </div>
   </div>
</div>
right_sidebar.png
Right Sidebar 5 [Container Magic: right_sidebar_5] (Optional areas may collapse)
(Optional) Body Full Above
Body
Sidebar
(Optional) Body Full Below
<div class="cm-right-sidebar cm-right-sidebar-5 cm-magic">
   <div class="container grid-container">
       <div class="row grid-row">
           <div class="cm-full-body-above cc-optional col-md-12 column-12">
               (Optional) Body Full Above
           </div>
       </div>
       <div class="row grid-row">
           <div class="cm-body col-md-7 column-7">
               Body
           </div>
           <div class="cm-sidebar col-md-5 column-5">
               Sidebar
           </div>
       </div>
       <div class="row grid-row">
           <div class="cm-full-body-below cc-optional col-md-12 column-12">
               (Optional) Body Full Below
           </div>
       </div>
   </div>
</div>
right_sidebar.png
Single Column [Container Magic: single_column] (Optional areas may collapse)
(Optional) Body Full Above
Column
(Optional) Body Full Below
<div class="cm-single-col cm-magic">
   <div class="container grid-container">
       <div class="row grid-row">
           <div class="cm-full-body-below cc-optional col-md-12 column-12">
               (Optional) Body Full Above
           </div>
       </div>
       <div class="row grid-row">
           <div class="cm-single-col-column col-md-12 column-12">
               Column
           </div>
       </div>
       <div class="row grid-row">
           <div class="cm-full-body-below cc-optional col-md-12 column-12">
               (Optional) Body Full Below
           </div>
       </div>
   </div>
</div>
full.png
Single Column Condensed [Container Magic: single_column_condensed] (Optional areas may collapse)
(Optional) Body Full Above
Column
(Optional) Body Full Below
<div class="cm-single-col-condensed cm-magic">
   <div class="container grid-container">
       <div class="row grid-row">
           <div class="col-md-1 column-1 cm-left-margin">
           </div>
           <div class="cm-full-body-below cc-optional col-md-10 column-10">
               (Optional) Body Full Above
           </div>
           <div class="col-md-1 column-1 cm-right-margin">
           </div>
       </div>
       <div class="row grid-row">
           <div class="col-md-1 column-1 cm-left-margin">
           </div>
           <div class="cm-single-col-condensed-column col-md-10 column-10">
               Column
           </div>
           <div class="col-md-1 column-1 cm-right-margin">
           </div>
       </div>
       <div class="row grid-row">
           <div class="col-md-1 column-1 cm-left-margin">
           </div>
           <div class="cm-full-body-below cc-optional col-md-10 column-10">
               (Optional) Body Full Below
           </div>
           <div class="col-md-1 column-1 cm-right-margin">
           </div>
       </div>
   </div>
</div>
full.png
Single Column Condensed More [Container Magic: single_column_condensed_more] (Optional areas may collapse)
(Optional) Body Full Above
Column
(Optional) Body Full Below
<div class="cm-single-col-condensed-more cm-magic">
   <div class="container grid-container">
       <div class="row grid-row">
           <div class="col-md-2 column-2 cm-left-margin">
           </div>
           <div class="cm-full-body-below cc-optional col-md-8 column-8">
               (Optional) Body Full Above
           </div>
           <div class="col-md-2 column-2 cm-right-margin">
           </div>
       </div>
       <div class="row grid-row">
           <div class="col-md-2 column-2 cm-left-margin">
           </div>
           <div class="cm-single-col-condensed-more-column col-md-8 column-8">
               Column
           </div>
           <div class="col-md-2 column-2 cm-right-margin">
           </div>
       </div>
       <div class="row grid-row">
           <div class="col-md-2 column-2 cm-left-margin">
           </div>
           <div class="cm-full-body-below cc-optional col-md-8 column-8">
               (Optional) Body Full Below
           </div>
           <div class="col-md-2 column-2 cm-right-margin">
           </div>
       </div>
   </div>
</div>
full.png
Three Column [Container Magic: three_column] (Optional areas may collapse)
(Optional) Body Full Above
Column 1
Column 2
Column 3
(Optional) Body Full Below
<div class="cm-three-column cm-magic">
   <div class="container grid-container">
       <div class="row grid-row">
           <div class="cm-full-body-above cc-optional col-md-12 column-12">
               (Optional) Body Full Above
           </div>
       </div>
       <div class="row grid-row">
           <div class="cm-three-col-1 col-md-4 column-4">
               Column 1
           </div>
           <div class="cm-three-col-2 col-md-4 column-4">
               Column 2
           </div>
           <div class="cm-three-col-3 col-md-4 column-4">
               Column 3
           </div>
       </div>
       <div class="row grid-row">
           <div class="cm-full-body-below cc-optional col-md-12 column-12">
               (Optional) Body Full Below
           </div>
       </div>
   </div>
</div>
three_column.png
Two Column [Container Magic: two_column] (Optional areas may collapse)
(Optional) Body Full Above
Column 1
Column 2
(Optional) Body Full Below
<div class="cm-two-column cm-magic">
   <div class="container grid-container">
       <div class="row grid-row">
           <div class="cm-full-body-above cc-optional col-md-12 column-12">
               (Optional) Body Full Above
           </div>
       </div>
       <div class="row grid-row">
           <div class="cm-two-col-1 col-md-6 column-6">
               Column 1
           </div>
           <div class="cm-two-col-2 col-md-6 column-6">
               Column 2
           </div>
       </div>
       <div class="row grid-row">
           <div class="cm-full-body-below cc-optional col-md-12 column-12">
               (Optional) Body Full Below
           </div>
       </div>
   </div>
</div>
two_column.png
Two Column and Sidebar [Container Magic: two_column_plus_sidebar] (Optional areas may collapse)
(Optional) Body Full Above
Column 1
Column 2
Sidebar
(Optional) Body Full Below
<div class="cm-two-col-plus-sidebar cm-magic">
   <div class="container grid-container">
       <div class="row grid-row">
           <div class="cm-full-body-above cc-optional col-md-12 column-12">
               (Optional) Body Full Above
           </div>
       </div>
       <div class="row grid-row">
           <div class="cm-two-col-plus-sidebar-1 col-md-4 column-4">
               Column 1
           </div>
           <div class="cm-two-col-plus-sidebar-2 col-md-4 column-4">
               Column 2
           </div>
           <div class="col-md-1 column-1 cm-gutter">
           </div>
           <div class="cm-two-col-plus-sidebar-sidebar cm-sidebar col-md-3 column-3">
               Sidebar
           </div>
       </div>
       <div class="row grid-row">
           <div class="cm-full-body-below cc-optional col-md-12 column-12">
               (Optional) Body Full Below
           </div>
       </div>
   </div>
</div>
three_column.png
Two Column Condensed [Container Magic: two_column_condensed] (Optional areas may collapse)
(Optional) Body Full Above
Column 1
Column 2
(Optional) Body Full Below
<div class="cm-two-col-condensed cm-magic">
   <div class="container grid-container">
       <div class="row grid-row">
           <div class="col-md-1 column-1 cm-left-margin">
           </div>
           <div class="cm-full-body-below cc-optional col-md-10 column-10">
               (Optional) Body Full Above
           </div>
           <div class="col-md-1 column-1 cm-right-margin">
           </div>
       </div>
       <div class="row grid-row">
           <div class="col-md-1 column-1 cm-left-margin">
           </div>
           <div class="cm-two-col-condensed-1 col-md-5 column-5">
               Column 1
           </div>
           <div class="cm-two-col-condensed-2 col-md-5 column-5">
               Column 2
           </div>
           <div class="col-md-1 column-1 cm-right-margin">
           </div>
       </div>
       <div class="row grid-row">
           <div class="col-md-1 column-1 cm-left-margin">
           </div>
           <div class="cm-full-body-below cc-optional col-md-10 column-10">
               (Optional) Body Full Below
           </div>
           <div class="col-md-1 column-1 cm-right-margin">
           </div>
       </div>
   </div>
</div>
two_column.png
Two Column Highlight [Container Magic: two_column_light] (Optional areas may collapse)
(Optional) Body Full Above
Column 1
Column 2
(Optional) Body Full Below
<div class="cm-stripe cm-two-col-light cm-magic stripe bg-light">
   <div class="container grid-container">
       <div class="row grid-row">
           <div class="cm-full-body-above cc-optional col-md-12 column-12">
               (Optional) Body Full Above
           </div>
       </div>
       <div class="row grid-row">
           <div class="cm-two-col-light-1 col-md-6 column-6">
               Column 1
           </div>
           <div class="cm-two-col-light-2 col-md-6 column-6">
               Column 2
           </div>
       </div>
       <div class="row grid-row">
           <div class="cm-full-body-above cc-optional col-md-12 column-12">
               (Optional) Body Full Below
           </div>
       </div>
   </div>
</div>
two_column.png

Additional Pages

If you are building in-site documentation for your customers, have a look at the Frontend Dashboard theme.

Container Check requires Concrete CMS core version 9+ and is not compatible with v8 sites.