History: Liquid-width section in page 19
Preview of version: 2
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 that reimposes 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.
The CSS rules for this page:
Copy to clipboard
{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;} #col1.col-md-9.col-md-push-3 {width: 100%; left: 0; } #col2 { display: none; } /* The following is optional to have the topbar, pagetop modules, error report area, page titles and first child paragraphs in page data behave similar to the containers (fixed width and centered) in the liquid-width content layout */ @media (min-width: 768px) { #middle .topbar_wrapper, #pagetop_modules, #error_report, .pagetitle, #page-data > p {width: 750px;} } @media (min-width: 992px) { #middle .topbar_wrapper, #pagetop_modules, #error_report, .pagetitle, #page-data > p {width: 970px;} } @media (min-width: 1200px) { #middle .topbar_wrapper, #pagetop_modules, #error_report, .pagetitle, #page-data > p {width: 1170px;} } #middle .topbar_wrapper, #pagetop_modules, #error_report, .pagetitle, #page-data > p { margin: auto; } </style> {HTML}