Skip to content
Matthew Adams By Matthew Adams Co-Founder
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.



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.

Here's an example in our samples repo using Bootstrap 2.

Here's an example in our samples repo using Bootstrap 3.

Matthew Adams


Matthew Adams

Matthew was CTO of a venture-backed technology start-up in the UK & US for 10 years, and is now the co-founder of endjin, which provides technology strategy, experience and development services to its customers who are seeking to take advantage of Microsoft Azure and the Cloud.