Using width 1170px with bootstrap.css (responsive)

Question

I noticed on the twitter docs for grid system it says the default grid is 940px but it is 1170px on the website. I gather it is using responsive to change the width as I am on a widescreen and higer resolution.

My question falls down to how do I use 1170px like in twitter docs. I can't seem to find any docs explaining how to change the width to 1170px like they have. Is this a custom build they have made but not released or just not updated the docs?

Any ideas how to implement this and have the correct grid customization vars for 1170px.

Thanks

Answer 1

They are using a @media query for that, which is not included by default in the bootstrap, you can read more about it here in their responsive layout documentation.

Important bit from their CSS:

@media (min-width: 1200px) {
  .span12, .container {
    width: 1170px;
  }
}

Excerpt from the page

Using the media queries

Bootstrap doesn't automatically include these media queries, but understanding and adding them is very easy and requires minimal setup. You have a few options for including the responsive features of Bootstrap:

1. Use the compiled responsive version, bootstrap-responsive.css
2. Add @import "responsive.less" and recompile Bootstrap
3. Modify and recompile responsive.less as a separate

Why not just include it? Truth be told, not everything needs to be responsive. Instead of encouraging developers to remove this feature, we figure it best to enable it.

Answer 2

As the documentations says, not everything needs to be responsive. Also, not everything needs to use fullscreen size... some layouts just need more blank space.

I've seen some websites taking off this media query excerpt (@media min-width: 1200px {...}) from the responsive stylesheet, but I couldn't tell if that's correct/recommended or a good workaround.