Fluid Container in Bootstrap 3

css twitter-bootstrap less twitter-bootstrap-3

86,471

Solution 1

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>

Solution 2

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

Solution 3

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

Solution 4

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.

Solution 5

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

View more solutions

86,471

Author by

Hari Krishnan

I'm Harikrishnan - freelance website designer and developer specializing in User Interface Design and Development. I design and develop unique, clean and beautiful websites which comply with the latest web standards.

Updated on August 19, 2020

Comments

Hari Krishnan over 3 years

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.