Extending a bootstrap container background to the edge of the page

Question

I'm designing a page built on Bootstrap 3, and I would like to try and recreate the following design:

I have paragraphs that I have put into a container, so that they stay centred on the page as it is resized. However, I would like to have certain rows have a coloured background that extends off to the sides as far as they go, as shown. I'm not sure if this is possible?

One method I have tried is switching to a container-fluid class for those rows, which goes to the edge of the screen. This sort of works, but I'm not sure if it is then possible to have the text inside stay inline with the other paragraphs as the page is resized? Really, the text should always have the consistent margins on the left and right sides for all of the blocks of text.

I don't think I would need content in the areas in the margin, so if a solution just involved using a standard container to hold the content, and another method to extend the background off to the side, that may work.

Here is a JSFiddle to start off with, including one of the orange boxes in a container-fluid, to demo that approach.

Answer 1

I'm not sure if this is the 'best' solution, but it is a solution nonetheless.

• Create a pseudo element for each coloured box (:before)
• Absolutely position that (relative to the coloured box - Bootstrap already sets position: relative on col-*-*).
• Set top and bottom values to 0 so it's always the correct height
• Set background colour to match box
• Give it a wide width to ensure it always covers the gutter (sides of .container) on wide screens
• For the left sided box, set left: -[width of psuedo element], for right sided box set right: -[width of pseudo element
• Finally, you'll need a page container set to overflow: hidden.

HTML

<div id="page">
    <div class="container">
        ...
    </div>
</div>

CSS

#page {
    overflow: hidden;
}    

.box-left:before,
.box-right:before {
    content: '';
    display: block;
    position: absolute;
    width: 999em;
    top: 0;
    bottom: 0;
}

.box-left:before {
    left: -999em;
    background: orange;
}

.box-right:before {
    right: -999em;
    background: lightblue;
}

DEMO