Fluid Container in Bootstrap 3

css twitter-bootstrap less twitter-bootstrap-3
Hari Krishnan picture Hari Krishnan · Nov 5, 2013 · Viewed 85.1k times · Source

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.

Answer

Brad Christie picture Brad Christie · Nov 5, 2013

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>

Related questions

Styling Twitter's Bootstrap 3.x Buttons

Twitter's Bootstrap 3 buttons are limited in colors. By default there will be 5 7 colors (default primary, error, warning, info, success and link) See: Every button got 3 state (default, active and disabled) How to add more colors or create custom buttons? This …

Read More
Correct way to create rounded corners in Twitter Bootstrap

I've just started with Twitter Bootstrap and here is one question. I am creating custom <header> block, and I want it's bottom corners to be rounded. Is there any "correct" way to do this by using predefined classes, …

Read More
Use table row coloring for cells in Bootstrap

Twitter Bootstrap offers classes to color table rows like so: <tr class="success"> I like the color choice and the class naming. Now what I would like to do, is to re-use these classes and apply them on …

Read More