CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
Somk
Somk

Reputation: 12057

Bootstrap 100% width / Full width

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?

Upvotes: 10

Views: 60929

Answers (5)

JP Lew
JP Lew

Reputation: 4469

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.

Upvotes: 19

helloerik
helloerik

Reputation: 175

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

Upvotes: 3

lngs
lngs

Reputation: 698

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.

enter image description here

Upvotes: 3

George Katsanos
George Katsanos

Reputation: 14195

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.

Upvotes: 0

James Donnelly
James Donnelly

Reputation: 128856

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.

Upvotes: 7

Related Questions