Setting max width for body using Bootstrap

Question

I m building my first site with Twitter Bootstrap and experimenting with fluid layouts  I ve set my container to be fluid  now the content inside takes up the full page width and adapts as I resize the browser   The design I m working on was created for a maximum width of  950px   I ve checked variables less and responsive less  and the Bootstrap documentation  I can t quite work out how to make this happen    I also tried adding the following to my style css   body       max-width  950px

User · Answer

You don t have to modify bootstrap-responsive by removing  media  max-width 1200px       My application has a max-width of 1600px  Here s how it worked for me    Create bootstrap-custom css  - As much as possible  I don t want to override my original bootstrap css  Inside bootstrap-custom css  override the container-fluid by including this code    Like this      set a max-width for horizontal fluid layout and make it centered     container-fluid     margin-right  auto    margin-left  auto    max-width  1600px     or 950px

User · Answer

In responsive less  you can comment out the line that imports responsive-1200px-min less      Large desktops   import  responsive-1200px-min less     Like so      Large desktops      import  responsive-1200px-min less

User · Answer

I don t know if this was pointed out here  The settings for  container width have to be set on the Bootstrap website  I personally did not have to edit or touch anything within CSS files to tune my  container size which is 1600px  Under Customize tab  there are three sections responsible for media and the responsiveness of the web    Media queries breakpoints  Grid system Container sizes   Besides Media queries breakpoints  which I believe most people refer to  I ve also changed  container-desktop to  1130px    grid-gutter-width  and  container-large-desktop to  1530px    grid-gutter-width   Now  the  container changes its width if my browser is scaled up to  1600px and  1200px  Hope it can help

User · Answer

Unfortunately none of the above solved the problem for me   I didn t want to edit the bootstrap-responsive css so I went the easy way    Create a css with priority over bootstrap-responsive css Copy all the content of the  media  min-width  768px  and  max-width  979px   line 461 with latest bootstrap version 2 3 1 as of today  Paste it in your high priority css In your css  put  media  min-width  979px  in the place where it said  media  min-width  768px  and  max-width  979px  before  This sets the from 768 to 979 style to everything above 768    That s it  It s not optimal  you will have duplicated css  but it works 100  perfect

User · Answer

Edit  A better way to do this is    Create your own less file as a main less file   like bootstrap less     Import all bootstrap less files you need   in this case  you just need to Import all responsive less files but responsive-1200px-min less  If you need to modify anything in original bootstrap less file  you just need to write your own less to overwrite bootstrap s less code   Just remember to put your less code file after  import      bootstrap s less file            Original  I have the same problem  This is how I fixed it   Find the media query    media  max-width 1200px        Remove it   I mean the whole thing   not just  media  max-width 1200px    Since the default width of Bootstrap is 940px  you don t need to do anything    If you want to have your own max-width  just modify the css rule in the media query that matches your desired width

[html] Setting max width for body using Bootstrap

Examples related to html

Examples related to twitter-bootstrap

Examples related to css