Bootstrap 3 - Set Container Width to 940px Maximum for Desktops

Question

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

User · Answer

If if doesn t work then use   Important    media  min-width  1200px       container       width  970px  important

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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      lt link type  text css  rel  stylesheet  href   css bootstrap css    gt   lt link type  text css  rel  stylesheet  href   css custom css    gt    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

[twitter-bootstrap-3] Bootstrap 3 - Set Container Width to 940px Maximum for Desktops?

Examples related to twitter-bootstrap-3