Matt Lambert

Check out my blog, or sign up to receive articles by email.

Creating Full Width Layouts in Bootstrap

By admin on July 2nd, 2014 in Bootstrap

The goal of this post is to start getting you to think differently about the types of layouts you can achieve with Bootstrap. You aren’t restricted to using the basic grid out of the box. It’s a good idea to think outside of the .container class to achieve different types of layouts for your page templates. Below, I go through a couple of examples on how you can do this by creating full width page elements.

Full Width Carousel

The carousel is a popular component on most websites. Quite often it’s the first thing you see on a homepage. Using the default Bootstrap syntax, the widest your carousel will be is the width of your .container. What if you want your images to stretch the width of the browser window? It’s actually quite easy, just remove the .container class <div>. Check out this codepen to see an example in action.

Using this technique is simple enough but you should add a little CSS to make the carousel sit properly in your layout. I’d start by assigning a custom class to the wrapping carousel <div>. You could also use the ID attached to the <div>, but I wouldn’t recommend using IDs in your stylesheet.

<div id="carousel-example" class="carousel slide myAwesomeCarousel" data-ride="carousel">

Now apply a few properties to your class so it flows properly in your page layout. Feel free to tweak the values to match the vertical rhythm of your theme.

.myAwesomeCarousel {
  margin-top: 40px;
  margin-bottom: 40px;
}

Full Width Background Colour

Another common technique is to have a section of the page have a full width background colour that differs from the primary background of the page. This is also pretty easy to achieve thinking outside the .container class. In this case, you want to wrap another <div> around your container and apply a background colour to it.

<div class="wrapper">
  <div class="container">
   ...
  </div>
</div>

Once you’ve setup your .wrapper class, you’ll want to apply a few properties. You won’t likely want the contents on the container to bump up to the horizontal top and bottom of your wrapper, so add some padding. You also need to apply a background colour.

.wrapper {
  padding-top: 40px;
  padding-bottom: 40px;
  background: grey;
}

I’ve setup a second codepen to demo this technique. Again, this is pretty easy to do but allows you to start applying a unique look to the Bootstrap framework.

If you’re interested in learning more advanced layout techniques for Bootstrap, you should check out my book Mastering Bootstrap. It’ll be available for purchase on July 8th, sign up for my newsletter to be notified when it launches and to receive the 1-day launch discount code.

Mastering Bootstrap – The complete guide to creating Bootstrap 3 themes. Learn More →

Like what you read? Check out my store over at Creative Market to support the blog and help keep the lights on. Files starting from only $2.