Bootstrap 3: How to set default grid to 960px width?

Question

I'm working with Bootstrap 3 and the client wants the website container width to be set to 960px. Do I directly edit the CSS file or what is the best way to do this? I heard something about "Less". Do I customize the download? Thanks!

Update: the site does NOT need to be responsive, so I can disable that responsive-ness and just add the 960px width to the CSS and be done with it or does this cause problems elsewhere?

Answer 1

For Bootstrap3, you can customize it to get 960px by default (http://getbootstrap.com/customize/)

1. change @container-large-desktop from ((1140px + @grid-gutter-width)) to ((940px + @grid-gutter-width)).
2. change @grid-gutter-width from 30px to 20px.

then download your custom version of bootstrap and use it. It should be 960px by default now.

Answer 2

I wanted the max width to be 810px, so I used a media query like this:

@media (min-width: 811px) {    
    .container{
        width:810px;
    }
}