[html] Setting max width for body using Bootstrap

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;
}

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:

1. Create bootstrap-custom.css - As much as possible, I don't want to override my original bootstrap css.

2. 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 */
}

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";

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:

1. Create a css with priority over bootstrap-responsive.css
2. 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)
3. Paste it in your high priority css
4. 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!

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.