CODEWITHSUNDEEP
lesstwitter-bootstrap-3
redshift
redshift

Reputation: 5217

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

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?

Upvotes: 13

Views: 43503

Answers (4)

Henry Neo
Henry Neo

Reputation: 2347

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.

Upvotes: 52

AnotherOther
AnotherOther

Reputation: 107

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

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

Upvotes: 4

Dennis Johnsen
Dennis Johnsen

Reputation: 107

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 */
}

Upvotes: 3

Carol Skelly
Carol Skelly

Reputation: 362430

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/

Upvotes: 0

Related Questions