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

Answer 1

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