Example of a full-width bleed using Bootstrap 3
In my previous post, I listed some top tips for getting started with bootstrap, and then produced a basic example layout with box-outs, sidebars and bleeds.
One of the most common questions that has come from that post is "how do I achieve a section with a full-width bleed (e.g. for a full-width background), part way down a page?"
Something that looks roughly like this:
We're going to deal with that now. Here's the basic recipe:
No-one said you are limited to only one container on a page
That's the secret sauce.
No-one said you can't put one container inside another
This is the extra slice of cheese.
No-one said you have to put rows and spans in a container
This is the dangerous amount of jalapeno you sneak in under some shredded lettuce.
If you're looking for a full-width background, for example, then you want to nest containers like this to provide a responsive pseudo-fixed-width container (which will appear inline with the rest of your responsive pseudo-fixed-width content), embedded within a full-width responsive background layer.
(Bootstrap3)
(Bootstrap2)
By adding multiple <container> elements, you can mix-and-match full width and pseudo-fixed-width sections, up and down the page.
Of course, in any container, you can also throw in some completely custom HTML - you don't need to follow the grid system at all if that doesn't suit.
