QUICK TIP
- To achieve a full-width background, utilize multiple individual
.container elements
- Enclose the desired
.container elements in a wrapping div
- Apply a CSS background to the enclosing div
Helpful Examples: Basic: https://jsfiddle.net/vLhc35k4/, Container with borders: https://jsfiddle.net/vLhc35k4/1/
HTML Code:
<div class="container">
<h2>Section 1</h2>
</div>
<div class="specialBackground">
<div class="container">
<h2>Section 2</h2>
</div>
</div>
CSS Styling:
.specialBackground{ background-color: gold; /*customize as needed*/ }
FURTHER DETAILS
AVOID NESTING CONTAINERS
Despite common recommendations, nested containers are not recommended.
They are not intended for nesting purposes (Refer to "Containers" section in the documentation)
OPERATING PRINCIPLE
The div element is a block-level element that automatically spans the full width of the document body - this facilitates achieving full-width backgrounds. Additionally, it adopts the height of its content by default.
Bootstrap containers do not need to be exclusively direct children of the body; they serve as containers with predefined padding and potentially fixed widths based on screen size.
If a standard grid .container possesses a predetermined width, it will be horizontally centered automatically.
Thus, it makes no difference whether it is placed:
- Directly within the body
- Within a basic
div which is a direct child of the body.
By "basic" div, we refer to an elemental div lacking any CSS modifications such as border adjustments, padding alterations, specific dimensions, positioning changes, or content-sized adjustments. Essentially, just an HTML element styled with display: block; CSS and perhaps additional background styling.
Nevertheless, adding vertical-oriented CSS attributes like height or padding should not disrupt the bootstrap grid system :-)
Bootstrap's Consistent Implementation
...Evident throughout the official Bootstrap website and notably showcased in the "JUMBOTRON" example:
http://getbootstrap.com/examples/jumbotron/