Bootstrap 3 Full Width, Fluid Layout

Back in Bootstrap version 2.3.2 it was easy to make a 100% fluid width website because the developers had a class strictly for full width layouts BUT when they updated to version 3.0.3, they removed the “container-fluid” class. Even in the Twitter Boostrap 3 docs they mention that you must place your .row class within either a .container or .container-fluid div but the .container-fluid CSS in version 3.0.3 DOESN’T EXIST! And this is causing a LOT of confusion.

** UPDATE **
Thanks ghporras for pointing out that in version 3.1.1 the ‘container-fluid’ class has indeed returned.

But if you’re still using 3.0.3, here’s the code you need to achieve a beautiful, full width layout (and it’s really easy):

Add this to your style.css file:

.container-fluid {
     padding-left: 15px;
     padding-right: 15px;
}

And here’s an example of the .container-fluid class within your HTML/PHP:

<div class="container-fluid">
  <div class="row">
    <div class="container">
      <div class="col-lg-12">
        <div class="row">
          // Add Content Here
        </div>
      </div>
    </div>
  </div>
</div>