34

I am adding a whole new section to a website using Twitter Bootstrap 3, however the container cannot go wider than 940px in total for Desktop - as it will throw out the Header and Footer {includes}.

So 940px works out at 12 x 60 = 720px for the columns and 11 x 20 = 220px for the gutters. Fair enough, but how do you input these into Bootstrap 3 as there is 'no' @ColumnWidth field/setting in the Customize section?

I have tried by setting the @container-lg-desktop and @container-desktop both to 940px - but it doesn't work.

ubique
  • 1,212
  • 3
  • 17
  • 28

5 Answers5

94

There is a far easier solution (IMO) in Bootstrap 3 that does not require you to compile any custom LESS. You just have to leverage the cascade in "Cascading Style Sheets."

Set up your CSS loading like so...

<link type="text/css" rel="stylesheet" href="/css/bootstrap.css" />
<link type="text/css" rel="stylesheet" href="/css/custom.css" />

Where /css/custom.css is your unique style definitions. Inside that file, add the following definition...

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

This will override Bootstrap's default width: 1170px setting when the viewport is 1200px or bigger.

Tested in Bootstrap 3.0.2

Frank Koehl
  • 3,104
  • 2
  • 29
  • 37
  • How do I do it when I need to declare all in the single css file, for instance inside CodePen? It doesn't seem to work, even with the `!important` tag. – chiffa Feb 22 '16 at 02:07
  • If everything exists in a single file, I believe you can make it work by simply ensuring that the definitions I outline above for `custom.css` end up at the *very bottom* of the file. That should ensure they get applied last. Not tested, YMMV. – Frank Koehl Feb 22 '16 at 15:46
  • I tested that in the CodePen without success unfortunately. I'll try to figure it out, thank you for your response. – chiffa Feb 22 '16 at 15:51
  • 1
    I think that should be "max-width: 970px;" – James Feb 27 '16 at 20:08
  • @James, no it should not -- https://github.com/twbs/bootstrap/blob/master/dist/css/bootstrap.css#L1601 – Frank Koehl Mar 07 '16 at 15:59
  • 1
    @FrankKoehl Right you are. Thanks for the link. – James Mar 07 '16 at 21:31
16

In the first place consider the Small grid, see: http://getbootstrap.com/css/#grid-options. A max container width of 750 px will maybe to small for you (also read: Why does Bootstrap 3 force the container width to certain sizes?)

When using the Small grid use media queries to set the max-container width:

@media (min-width: 768px) { .container { max-width: 750px; } }

Second also read this question: Bootstrap 3 - 940px width grid?, possible duplicate?

12 x 60 = 720px for the columns and 11 x 20 = 220px

there will also a gutter of 20px on both sides of the grid so 220 + 720 + 40 makes 980px

there is 'no' @ColumnWidth

You colums width will be calculated dynamically based on your settings in variables.less. you could set @grid-columns and @grid-gutter-width. The width of a column will be set as a percentage via grid.less in mixins.less:

.calc-grid(@index, @class, @type) when (@type = width) {
  .col-@{class}-@{index} {
    width: percentage((@index / @grid-columns));
  }
}

update Set @grid-gutter-width to 20px;, @container-desktop: 940px;, @container-large-desktop: @container-desktop and recompile bootstrap.

Community
  • 1
  • 1
Bass Jobsen
  • 48,736
  • 16
  • 143
  • 224
  • The Small Grid is way too small for this project as need to achieve 940px the same as the rest of the site. Your reference to a 'duplicate' - I tried this before posting my question and it does not solve the issue? Thx. – ubique Oct 18 '13 at 14:53
  • Hi - bit confused here!? You have 'container-desktop' written twice, one with a value of 940px and the other without? – ubique Oct 19 '13 at 13:49
  • 1
    yes, you have to set `@container-large-desktop` to the same value as ` @container-desktop` both to 940px or `@container-large-desktop: @container-desktop`. Which mean the same as `@container-large-desktop` = `@container-desktop` – Bass Jobsen Oct 19 '13 at 18:01
  • I have already tried setting the 'container-desktop' & 'container-large-desktop' both to 940px - and it does not work. I wonder if the 'Media queries breakpoints' are having an impact?? – ubique Oct 19 '13 at 18:54
  • Thanks for your help on this - I found that my template style.css was over-riding the .container width as the link was above the bootstrap.css in the ''. – ubique Oct 21 '13 at 10:29
7

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

Find this code and change the breakpoint value:

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

Change it to 9999px for example, and this will prevent the breakpoint to be reached, so your site will always load the previous media query which has 940px container

Snade
  • 166
  • 1
  • 4
5

If you don't wish to compile bootstrap, copy the following and insert it in your custom css file. It's not recommended to change the original bootstrap css file. Also, you won't be able to modify the bootstrap original css if you are loading it from a cdn.

Paste this in your custom css file:

@media (min-width:992px)
    {
        .container{width:960px}
    }
@media (min-width:1200px)
    {
        .container{width:960px}
    }

I am here setting my container to 960px for anything that can accommodate it, and keeping the rest media sizes to default values. You can set it to 940px for this problem.

Mohamed Elgharabawy
  • 366
  • 4
  • 12
1

If if doesn't work then use "!Important"

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

ziaprog
  • 1,497
  • 1
  • 10
  • 11