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

Radioactive

your css rule works, what is wrong with it? demo – Charland

Ok. Retried. It wasn't working earlier however that may have been down to some issues I'm having with LESS/Espresso/Codekit. My LESS files haven't been compiling correctly. However, now that it works, body aligns to the left instead of centre as before. Any suggestions? I've tried setting margin to auto for left and right. – Radioactive

@OllyF Wait, you want your "container" to be width 950px and not the complete document? I'm confused, twitters non-fluid container is width 940px by default, so its below your constraint. – Charland

My understanding is it's better if the body has a max-width, just in case I want to do something outside the container. Anyway, setting that aside, I'm dealing with a fluid container. When I set my container to fluid, it expands to the entire body width. That's why I'm trying to set a maximum width for the body. – Radioactive

@OllyF just remove the appropriate media query that deals with the offending width and you should be ok, or spring for a fixed container instead. – Charland

I'm not sure I understand how to identify or deal with the appropriate media query. I know it'll be in responsive.less. I don't know what I'm looking for or what to do with it though. – Radioactive

@OllyF modify this media query inside of the responsive css to the width you're looking for: @media (min-width: 768px) and (max-width: 979px) { .. }, in your case would be max-width:950px;. – Charland

Answer 1

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.

Pepe

Any idea how to change that without altering any bootstrap files? For example is there a way to modify this behavior in CSS after including Bootstrap? – Parthenope

You can have your own main less file that includes all your custom less files and bootstrap's less files. Your custom less file can overwrite whatever rules in bootstrap's less files. – Pepe

Better yet, just override the appropriate variables instead of the actual styles (see bootstrap/variables.less). – Annis

Answer 2

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

Handball

I changed .container-fluid to .container (I'm using that class instead of yours) and changed max-width to min-width and it worked! :) – Sidneysidoma

That doesn't work when you are using bootstrap elements such as navbar who's width is still defined under @media (max-width:1200px) – Monomerous

This works flawlessly well! It emulates Facebook layout, especially for the navbar. I think this should be the accepted answer. – Isopleth

Minimum hassle and maximum effect. – Conchita

Setting margin: auto is not required (anymore with Bootstrap 3). – Trixy

This took 5 seconds to implement, and still works as of Bootstrap 3.3.5. @Jan-PhilipGehrcke is also correct, the margin attributes are no longer needed, making it just .container-fluid { max-width: XXX%; } in whatever custom stylesheet you have. – Dusky

Best implementation imho is to use the existing breakpoints, that way if you ever adjust the breakpoint everything stays consistent, i.e.: max-width: map-get($grid-breakpoints, xl); for the "xl" breakpoint size (1200px by default)! – Tripartite

Answer 3

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

Jenness

Yes, but when he has imported this less file and he has all the css files in the application he can put the first div in the body tag like this: <div class="container-fluid"> and <div class="row-fluid"> and the whole container will be fluid. I think that this is his plan. I also recommend reading: scaffolding A pretty good example is provided there. – Palmitate

Answer 4

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!

Karachi

Answer 5

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.

Foundling