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>
|
 |
Left Sidebar 3 [Container Magic: left_sidebar_3] (Optional areas may collapse)
<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 3 with gutter [Container Magic: left_sidebar_3_gap] (Optional areas may collapse)
<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 4 [Container Magic: left_sidebar_4] (Optional areas may collapse)
<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 4 with gutter [Container Magic: left_sidebar_4_gap] (Optional areas may collapse)
<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 5 [Container Magic: left_sidebar_5] (Optional areas may collapse)
<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>
|
|
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>
|
 |
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>
|
|
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>
|
|
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>
|
|
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>
|
|
Right Sidebar 3 [Container Magic: right_sidebar_3] (Optional areas may collapse)
<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 3 with gutter [Container Magic: right_sidebar_3_gap] (Optional areas may collapse)
<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 4 [Container Magic: right_sidebar_4] (Optional areas may collapse)
<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 4 with gutter [Container Magic: right_sidebar_4_gap] (Optional areas may collapse)
<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 5 [Container Magic: right_sidebar_5] (Optional areas may collapse)
<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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
 |
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 and Sidebar [Container Magic: two_column_plus_sidebar] (Optional areas may collapse)
<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>
|
|
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 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>
|
|