How to choose the container 960px wide and not to 1200px in Bootstrap

Question

How to choose the container 960px wide and not to 1200px in Bootstrap?

Are you using bootstrap 2 or bootstrap 3? – teewuane Nov 22 '13 at 21:30 — teewuane, Nov 22 '13 at 21:30

calofanas · Answer 1 · 2013-11-22T20:46:05.520

Bootstrap sets container width to 1170px on screens wider than 1200px.
For screens from 992px to 1200px width of container is set to 970px. You can read more about bootstrap's grid here
Now if you want to set container to 760px for large screens, you have to locate this and edit in bootstrap.css or add this code to your custom css:

@media (min-width: 1200px) {
  .container {
    width: 960px;
   }
}

and

@media (min-width: 992px) {
  .container {
    width: 960px;
   }
 }

Hope this helps

score 5 · Accepted Answer · answered Dec 20 '12 at 20:14

5

Do you just want a fixed width website? If so then then just don't include bootstrap-responsive.css. The default width for a fixed width container will be 960px.

Otherwise if you still want the responsive features but no 1200px container you will need to customize your bootstrap install. To do that:

Go to http://twitter.github.com/bootstrap/customize.html
Under the responsive section uncheck "Large desktops (>1200px)"
At the bottom of the page Click "customize and download" to get your custom bootstrap

answered Dec 20 '12 at 20:14

hajpoj

13,299
2
46
63

I did not understand, because if I customize the download as you say, I do not download the document bootsrap responsive. It 's normal? – Marco Gurnari Dec 20 '12 at 20:23
yeah. its fine. the responsive parts are added to the bootstrap.css and bootstrap.min.css files. If you replace all these files with all the old files you had, you should get your desired result. – hajpoj Dec 20 '12 at 20:27
You are very kind to explain to me, but apparently it does not work :) I substitute the file I downloaded bootsrap and in fact the container is resized to 960px But the site is no longer responsive thanks again – Marco Gurnari Dec 20 '12 at 20:40
that is weird....... Another option is have your old files and just remove everything contained in `@media (min-width: 1200px)` from the bootstrap and bootstrap-responsive css files I hadn't tried the customize bootstrap thing myself and assumed it would work fine.. but i guess not. – hajpoj Dec 20 '12 at 20:44

score 1 · Answer 3 · answered Dec 21 '12 at 05:24

1

This works for me.

!important is not recommended to use. but you can try.

.container, .container-fluid{
 width: 960px !important;
}

answered Dec 21 '12 at 05:24

Surinder ツ

1,778
3
16
27

score 0 · Answer 4 · answered Jan 14 '14 at 06:37

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

change @container-lg from ((1140px + @grid-gutter-width)) to ((940px + @grid-gutter-width)).
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.

score 0 · Answer 5 · answered Jan 15 '15 at 10:37

If you are using sass and bootstrap v3.3.1, just define these variable before importing bootstrap:

$grid-gutter-width: 20px;
$container-large-desktop: 940px + $grid-gutter-width;

For more info please check the variables source file: https://github.com/twbs/bootstrap-sass/blob/master/assets/stylesheets/bootstrap/_variables.scss

How to choose the container 960px wide and not to 1200px in Bootstrap

5 Answers5

Linked