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?
For Bootstrap3, you can customize it to get 960px by default (http://getbootstrap.com/customize/)
- change @container-large-desktop 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.
I wanted the max width to be 810px, so I used a media query like this:
@media (min-width: 811px) {
.container{
width:810px;
}
}
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 */
}
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/