100% width Twitter Bootstrap 3 template

Samia Ruponti picture Samia Ruponti · Aug 26, 2013 · Viewed 332.9k times · Source

I am a bootstrap newbie and I have a 100% wide template that I want to code with bootstrap. The first column begins at the left corner and I have a Google map the stretches to the rightmost. I thought I could do this with container-fluid class, but that doesn't seem to be available any longer. I have no idea how to achieve that layout with bootstrap 3. I am using the Geometry PSD template from themeforest, the link here if you want to see the layout : http://themeforest.net/item/geometry-design-for-geolocation-social-networkr/4752268

Answer

Zim picture Zim · Aug 26, 2013

For Bootstrap 3, you would need to use a custom wrapper and set its width to 100%.

.container-full {
  margin: 0 auto;
  width: 100%;
}

Here is a working example on Bootply

If you prefer not to add a custom class, you can acheive a very wide layout (not 100%) by wrapping everything inside a col-lg-12 (wide layout demo)

Update for Bootstrap 3.1

The container-fluid class has returned in Bootstrap 3.1, so this can be used to create a full width layout (no additional CSS required)..

Bootstrap 3.1 demo