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

Solution 1:

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

Solution 2:

Edit

A better way to do this is:

1. Create your own less file as a main less file ( like bootstrap.less ).

2. Import all bootstrap less files you need. (in this case, you just need to Import all responsive less files but responsive-1200px-min.less)

3. 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.