twitter-bootstrap - Bootstrap 3 - 940px width grid?

Question

I am using Bootstrap 3 on a new project. The layout is to be a 940px max width (desktop etc), 12 col (60px column, 20px gutter).

I've set .container to a max-width: 940px; but this makes the grid off, for some reason. This gives me 50px column with 30px gutter. So i need to cut down the gutter to 20px and add the 10px to the column.

But how do i do that?

Answer 1

Use:

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

Note: 970 minus 30px (gutter) makes 940px for your design.

update

See: http://bootply.com/86257

Set @grid-gutter-width to 20px; and recompile bootstrap.

In this case your .container /.row will have a width of 960px. Defined in variabless.less: @container-desktop: ((940px + @grid-gutter-width));

Note if setting @container-large-desktop: @container-desktop in variables.less i don't need the media query above.

Answer 2

The best option is to use the original LESS version of bootstrap (get it from github).

Open variables.less and look for // Media queries breakpoints

// Large screen / wide desktop
@screen-lg:                  1200px; // change this
@screen-lg-desktop:          @screen-lg;

Change the last breakpoint to 9999px for example, and this will prevent this breakpoint to be reached, so your site always load the previous media query:

@screen-md:                  992px; // this one has 940px container
@screen-desktop:             @screen-md;

To change the column width and gutter, scroll a little bit down in the same file and look for

// Grid system
// --------------------------------------------------

// Number of columns in the grid system
@grid-columns:              12;
// Padding, to be divided by two and applied to the left and right of all columns
@grid-gutter-width:         30px;
// Point at which the navbar stops collapsing
@grid-float-breakpoint:     @screen-tablet; 

Here you can configure it

And finally, ofcource compile bootstrap.less file in css.

Cheers

Answer 3

You must comment the following section in bootstrap.responsive.css for start 940 view

@media (min-width: 1200px) {
}