Loading...
 
Skip to main content

History: Liquid-width section in page

Preview of version: 8

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.


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}

History

Advanced
Information Version
Tue 12 of Nov, 2019 06:09 GMT-0000 Gary Cunningham-Lee div.side-col-toggle-container also hidden by in-document CSS. 16
Tue 12 of Nov, 2019 06:07 GMT-0000 Gary Cunningham-Lee Added in-document CSS to hide left column. 15
Tue 12 of Nov, 2019 05:55 GMT-0000 Gary Cunningham-Lee Resaving page to see if CSS will take effect. 14
Mon 11 of Nov, 2019 12:56 GMT-0000 Gary Cunningham-Lee 13
Mon 11 of Nov, 2019 12:54 GMT-0000 Gary Cunningham-Lee Text updated. 12
Mon 11 of Nov, 2019 12:41 GMT-0000 Gary Cunningham-Lee Updated the text. 11
Mon 11 of Nov, 2019 12:23 GMT-0000 Gary Cunningham-Lee Page content updated to use Plugin Layout. 10
Fri 07 of Jun, 2019 05:24 GMT-0000 Gary Cunningham-Lee Replaced broken content with link and note. 9
Sun 27 of Mar, 2016 12:56 GMT-0000 luciash d' being ?‍♂️ oops, wrong order ;) 8
Sun 27 of Mar, 2016 12:53 GMT-0000 luciash d' being ?‍♂️ little improvement 7
Sun 27 of Mar, 2016 08:30 GMT-0000 Gary Cunningham-Lee Unneeded CSS rule removed. 6
Sun 27 of Mar, 2016 08:18 GMT-0000 Gary Cunningham-Lee Improved content. 5
Sun 27 of Mar, 2016 08:06 GMT-0000 Gary Cunningham-Lee View CSS used for page. 4
Sun 27 of Mar, 2016 07:58 GMT-0000 Gary Cunningham-Lee Fixed typo, 3
Sun 27 of Mar, 2016 07:54 GMT-0000 Gary Cunningham-Lee Corrected CSS for #col1 width and position. 2
Sun 27 of Mar, 2016 07:47 GMT-0000 Gary Cunningham-Lee Page created. 1

Layout

Subscribe to Tiki Newsletters!

Delivered fresh to your email inbox!
Newsletter subscribe icon
Don't miss major announcements and other big news!
Contribute to Tiki

Site Config