History: Liquid-width section in page 19

Source of version: 3

{HTML(wiki="0")} <style> #middle.container {width: 100%;} .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} __Wide:__ {DIV(class="row wide-container")} {DIV(class="container")} {DIV(class="slider")} Web pages can be liquid-width (using 100% of the browser viewport from left to right) or fixed-width (using some part of the total width). Bootstrap uses a ''container'' class div to limit the width of the web page's content to 1170px (default) in the center of the screen. But sometimes, for the graphic design or other reason, we want to have one or more page sections that don't have this width limitation. This page demonstrates a method to have sections of the page that have backgrounds that are the full viewport width. This could be useful for a slider (image rotator/carousel) or other content, to make it stand out visually. {DIV} {DIV} {DIV} __Regular:__ {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 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. {DIV} {DIV} {DIV(class="row regular_2")} {DIV(class="container")} __The CSS rules for this page:__ {CODE()} {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} {CODE} {DIV} {DIV}

History

Enable pagination rows per page

HTML diff Side-by-side diff Side-by-side diff by characters Inline diff Inline diff by characters Full side-by-side diff Full side-by-side diff by characters Full inline diff Full inline diff by characters Unified diff Side-by-side view HTML diff Side-by-side diff Advanced

Information	Version
Fri 07 of Jun, 2019 05:21 GMT chibaguy Replaced broken content with link and note.	5
Wed 27 of Mar, 2019 18:08 GMT Torsten	4
Wed 27 of Mar, 2019 17:59 GMT Torsten	3
Wed 27 of Mar, 2019 17:56 GMT Torsten	2
Wed 27 of Mar, 2019 17:48 GMT Torsten Same page for Tiki19+ (due to BS3 -> BS4)	1

Select action to perform with checked... Remove OK