Bootstrap 100% width / Full width - html

Question

I want to create a new website with Bootstrap and I need it to be 100% in width, but I do not want it to be fluid. At least not for now.
The issue I have is: using bootstrap standard limits you to 960px and with a fluid layout it is full width but behaves like a fluid layout should by moving elements to become stacked when the window is shrunk in size.
Is there a way to have 100% width with a static bootstrap layout?

Answer 1

This is easy to achieve in Bootstrap 3, just replace the .container div with your own:
.my-fluid-container {
padding-left: 15px;
padding-right: 15px;
margin-left: auto;
margin-right: auto;
}
Thanks to Erik Flowers for the heads-up:
http://www.helloerik.com/bootstrap-3-grid-introduction#fluid
UPDATE
Bootstrap 3 now offers a built-in fluid container class, just use <div class="container-fluid">. See docs.

Answer 2

100% width ... static
This is a bit of an oxymoron. A 100% width layout isn't static.
Bootstrap uses a .container class to set a predefined width. Increase this to your desired page width if you want it to be greater than it's default. Be careful though that the sizing of Bootstrap's span* and offset* classes will need their widths adjusted accordingly.

Answer 3

Just don't include the bootstrap-responsive.css in order to disable the responsive function.
If you don't want a .container gutter/margin you can put your content outside the container but keep in mind you must maintain your content layout by yourself(still can use grid but lost an ability to centering your content) and don't forget most of the Bootstrap component like .navbar need .container to control its width.
One of my work need a full screen carousel to holding all contents so I wrap my content with .container to center the content.

Answer 4

I can't quite figure out how to reply to the main question, but here's what you want OP
As said above, don't use .container, use your own class like:
.my-fluid-container {
padding-left: 15px;
padding-right: 15px;
margin-left: auto;
margin-right: auto;
}
Then when you build your grid, just use col-xs-* for the columns. You will now have a 100% width site that doesn't stack in the "mobile" view. Welcome to the 90's ;)

Answer 5

I guess what you mean is you don't want margin/padding on the sides. (that's the only way your message makes sense - a 100% width will take the full size of the screen so it will never be static - the size will change depending on how big the window is)
We don't have a use-case or JSFiddle from you so I can't give you exact code but you need to make sure your body has margin:0 and padding:0 and then look for the other divs with Firebug or Chrome Web Dev tools.
If you want your layout to be fluid but stop at a certain point growing, then you need to apply max-width:1000px (for example) to your body or your general container/wrapper element.