3

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?

enter image description here

Anshad Vattapoyil
  • 23,145
  • 18
  • 84
  • 132
brother
  • 7,651
  • 9
  • 34
  • 58

3 Answers3

9

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.

Bass Jobsen
  • 48,736
  • 16
  • 143
  • 224
  • Yes, but this still makes the columns and gutter the wrong width? The design specs i got says a picture in 4 columns is 300px wide - this would not happen with the current setup? – brother Oct 08 '13 at 07:50
  • could you add a screen of your design? See also http://getbootstrap.com/css/#grid the medium grid (970) has a max column width of ((970 - gutter /12)) 78px. 4 x 78 makes 312. including gutter. You could make your image fir by adding the class `img-responsive` maybe. – Bass Jobsen Oct 08 '13 at 08:16
  • I added a picture of the grid above. 940px width. 60px columns with 20px gutter. Possible? – brother Oct 08 '13 at 08:21
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

Snade
  • 166
  • 1
  • 4
0

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

@media (min-width: 1200px) {
}
Arun
  • 257
  • 1
  • 5
  • 22