Fluid Container in Bootstrap 3

33

votes

How to make fluid container in bootstrap 3?

In bootstrap 2.3.2 .container-fluid class is there. But now in bootstrap 3 it is missing and there is only .container class. Please help me.

csstwitter-bootstraplesstwitter-bootstrap-3

Don't use .container just begin with a .row>.col-*-n (.container-fluid is redundant to a .row) – Brad Christie

Bootstrap 3 In other words, is using Bootstraps 2.3.2's fluid behaviour as default for it's column structures. – MackieeE

@BradChristie wouldn't leaving out the .container make the contents of the row start all the way to the left (when viewing on md or lg), vs having some padding on the left and right? – ganders

33

votes

Bootstrap 3.0 moved to a "mobile first" approach. .container is really only there in instances where you need/want a boxy layout. but, if you exempt the div.container-fluid entirely, you're left with a fluid layout by default.

for example, to have a two-column fluid layout, simply use:

<body>
  <header>...</header>
  <div style="padding:0 15px;"><!-- offset row negative padding -->
    <div class="row">
      <div class="col-md-6">50%</div>
      <div class="col-md-6">50%</div>
    </div>
  </div>
  <footer>...</footer>
</body>

21

votes

The 2.x .container-fluid was replaced by .container in Bootstrap 3.x (http://getbootstrap.com/getting-started/#migration), so the .container is fluid, but it's not full width.

You can use the row as a fluid container, but you must tweak it a little to avoid a horizontal scroll bar. Excerpt from the docs (http://getbootstrap.com/css/#grid)..

"Folks looking to create fully fluid layouts (meaning your site stretches the entire width of the viewport) must wrap their grid content in a containing element with padding: 0 15px; to offset the margin: 0 -15px; used on .rows."

More on changes in 3.x: http://bootply.com/bootstrap-3-migration-guide

Demo: http://bootply.com/91948

UPDATE for Bootstrap 3.1

container-fluid has returned again in Bootstrap 3.1. Now container-fluid can be used to create a full width layout: http://www.bootply.com/116382

13

votes

This was introduced in v3.1.0: http://getbootstrap.com/css/#grid-example-fluid

Commit #62736046 added ".container-fluid variation for full-width containers and layouts".

4

votes

I simply setup the following CSS rule where any row that is a child of container-fluid will no longer have a negative margin that offsets the grid system.

.container-fluid > .row {
    margin-left: 0;
}

I will test further to see if this creates any issues with other fixed width grid layouts.

1

votes

There are good answers here, so I will try to avoid my self repeating with my following points on the subject:

.container-fluid was removed in 3.0 but now it's back in 3.4 (this info is in reply but I wanted to put it on answer)
To get latest version go here or use Nuget.
Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding.
For latest info on Container please go here for Bootstrap CSS

Fluid Container in Bootstrap 3

5 Answers