Bootstrap 100% width / Full width

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.