13

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?

redshift
  • 4,815
  • 13
  • 75
  • 138

4 Answers4

52

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.

Chetan
  • 1,468
  • 1
  • 12
  • 15
Henry Neo
  • 2,357
  • 1
  • 24
  • 27
  • Henry, thank you for your answer. I just checked the documentation and only see the following: 'container-large-desktop' . You mentioned to change 'container-lg'. Are you sure that's the one to change? Perhaps this new version that was just released has a difference? Also, when a new version of BS is released, how would I safely update my files? – redshift Jan 31 '14 at 02:16
  • Hi @redshift, you are right.. see the release notes (https://github.com/twbs/bootstrap/releases), they just released v3.1.0 on 30 Jan 2014. Previously I mentioned 'container-lg' but that has been changed.. Now we have to change 'container-large-desktop' from ((1140px + @grid-gutter-width)) to ((940px + @grid-gutter-width)). Also remember to change 'grid-gutter-width' from 30px to 20px too. – Henry Neo Feb 04 '14 at 06:29
  • Speaking of how do we safely update our files when a new version of BS is released.. I think first, review the changes in that new version then upgrade to that new version, see what breaks and go from there to fix them. It could be tedious but with experience it gets easier. Also, you may not want to upgrade to each new BS version, instead choose only the substantial ones. that's my opinion.. thank u.. – Henry Neo Feb 04 '14 at 06:58
  • 1
    THanks! What about the media breakpoints. Do I mess with those? – redshift Feb 04 '14 at 12:09
  • hey, u can easily change the breakpoints as well (at http://getbootstrap.com/customize/).. just look for it :) – Henry Neo Feb 05 '14 at 01:39
4

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

@media (min-width: 811px) {    
    .container{
        width:810px;
    }
}
AnotherOther
  • 107
  • 1
  • 7
3

Bootstraps gridsystem is FLUID. This means it works in percentages.

So just set a width to page wrapper, and you are ready to go

HTML:

<body>
    <div class="page-wrapper">
        <!-- Your bootstrap grid/page markup here -->
    </div>
</body>

CSS:

.page-wrapper {
    width: 960px; /* Your page width */
    margin: 0 auto; /* To center your page within the body */
}
Dennis Johnsen
  • 107
  • 1
  • 5
0

The easiest way is to wrap everything in a container like this..

.container-fixed {
  margin: 0 auto;
  max-width: 960px;
}

http://bootply.com/94943

Or, you can go with LESS/custom build: http://getbootstrap.com/customize/

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
  • Will it apply to all other elements? (I mean nav-bars for example.) – artur grzesiak Nov 18 '13 at 20:46
  • If you put everything inside the container it will. – Carol Skelly Nov 18 '13 at 20:54
  • do not think though that putting nav-bars into .container is the proper way to go (but may be wrong) – artur grzesiak Nov 18 '13 at 21:11
  • The `navbar`s usually get wrapped in `container`. Look at the Bootstrap examples http://getbootstrap.com/getting-started/#examples. If you want to override all `container` you can do this: http://bootply.com/94967 -- Otherwise go with LESS. – Carol Skelly Nov 18 '13 at 21:51
  • 1
    I looked at the official Bootstrap documentation and saw this: http://getbootstrap.com/getting-started/#disable-responsive . Since I don't need the responsive feature, I can just disable it and then set the container width to 960px as mentioned step #2 of that link. What do ya'll think? – redshift Nov 19 '13 at 01:50