History: Liquid-width section in page

• «
• »

            {HTML(wiki="0")}<style>
#middle.container {width: 100%;}
.tiki .middle_outer {background: #28292b;} <- This is to add the dark background behind the wiki page icons (change language, etc.)
.wide-container {background: #28292b; color: #fff;}
.regular_1 {background: #f2f2f2; color: #333;}
.regular_2 {background: #fff; color: #333;} 

#col2 { display: none; }
</style>{HTML}

{DIV(class="row wide-container")}
{DIV(class="container")}
{DIV(class="slider")}
A slider (image rotator/carousel) or other content with a full-page-width background, etc. goes here.
{DIV}
{DIV}
{DIV}
{DIV(class="row regular_1")}
{DIV(class="container")}
On this page only, the Bootstrap container div that's the middle area of the page is 100% wide [it overrides the default container width (1170px in large screens, etc.)], and it holds the three divs that are also 100% wide and have colored backgrounds; each of these holds a Bootstrap container div whose width is the default width. This arrangement provides full-page-width color backgrounds, and is all responsive, etc.

The left column (in a two-column layout) is hidden to show this demonstration clearly.

{DIV}
{DIV}
{DIV(class="row regular_2")}
{DIV(class="container")}
Content for stories goes here.
{DIV}
{DIV}