Why is the Twitter Bootstrap “fixed” layout NOT fixed?

Question

The Twitter Bootstrap site reads as follows:

The default and simple 940px-wide, centered layout for just about any website or page provided by a single <div class="container"> .

Quote from http://twitter.github.com/bootstrap/scaffolding.html#layouts

That's exactly what I have in my HTML but when I inspect the element, I see this CSS apply to it:

.container, .navbar-fixed-top .container, .navbar-fixed-bottom .container {
    width: 1170px;
}

By the way, if I override that CSS rule by adding...

div.container{
  width:940px;
}

Then the elements inside the div.container are wider than the div.container itself and look out of place.

So, why is the Twitter Bootstrap "fixed" layout NOT fixed? and how can I make it fixed?

Answer 1

Update

In newer version of bootstrap, since 2.1.0 (I think) you can modify the responsive grid sizes in variables.less : source on github

So if you are compiling your CSS from Less, you can modify those variables. Otherwise, the solution below is still valid.

---

This is because you included the responsive layout. Check the doc

If you look at this file github responsive-1200px-min.less (2.0.4) or github responsive-1200px-min.less (2.1.0)

You can see that

 @gridColumnWidth: 70px; // First parameter @gridGutterWidth: 30px; // Second parameter 

Which gives 70*12 + 30*(12-1) = 1170px (12 being the @gridColumns ).

So if you want the static, non-responsive, 940px wide grid, you have to remove the bootstrap-reponsive.css file from your includes.

As for the RoR equivalent of that, any input is appreciated.

Answer 2

Are you sure you have an up to date version of Twitter Bootstrap ? My bootstrap.css says (line 197):

.container,
.navbar-fixed-top .container,
.navbar-fixed-bottom .container {
    width: 940px;
}

As you mention you are using twitter-bootstrap-rails the vendor/toolkit/twitter/bootstrap/variables.less states:

// Default 940px grid
// -------------------------
@gridColumns:             12;
@gridColumnWidth:         60px;
@gridGutterWidth:         20px;
@gridRowWidth:            (@gridColumns * @gridColumnWidth) + (@gridGutterWidth * (@gridColumns - 1));

Thats the standard files right from the https://github.com/seyhunak/twitter-bootstrap-rails

You might be using some other version of it?

Answer 3

I think your miss understanding the term fixed for bootstrap. When Bootstrap mentions fixed they mean it doesn't re-size the width of the content based on the size of the browser, but Fluid will.

So if you change the container, you should also change the default width of the row class. ie: .row { width: 940px; } .row { width: 940px; }

you might have to do so with other classes as well. Bootstrap also provides a customization page here

Hope that helps,