0

I've read several of the SO answers to what .container and .container-fluid are, but what I am missing is simple. Do I use column classes like col-xs-6, col-md-9, etc., if I am using .container-fluid? Both resize and .container does it specific sizes, which is why I use the col-x-x classes, but .container-fluid resizes everything all the time, so does .container-fluid take care of the column sizing automatically and I "trust" it gets it right?

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
johnny
  • 19,272
  • 52
  • 157
  • 259

3 Answers3

3

The container-fluid is used to contain the grid (row + col-*) but can be used for other things such as headings, tables, etc..

So no, container-fluid is not a replacement for columns, it's a holder of columns. The only difference between container-fluid and container is that the container is not full-width on larger screens. The container is a fixed width that's centered with large margins on the sides. container-fluid doesn't resize, it's always 100% width. Container demo

If you want to use the responsive grid (rows and columns), you need to use container or container-fluid like this..

<div class="container-fluid">
    <div class="row">
        (one or more col-*-* here)
    </div>
</div>

Or

<div class="container">
    <div class="row">
        (one or more col-*-* here)
    </div>
</div>

Read this article for a complete explanation.

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
  • But how does it handle the columns at the different sizes? I trust it? That the documentation I am guessing. – johnny Sep 07 '16 at 16:55
  • `container-fluid` doesn't really "handle" the columns any differently. The columns handle their own width/resizing. However if you consider that `col-md-4` is a 33% width column, 33% of full width (`container-fluid`) will obviously be wider than 33% of a fixed width (`container`) on larger screens. – Carol Skelly Sep 07 '16 at 17:09
  • So I really do not need the col classes in container-fluid? – johnny Sep 07 '16 at 17:15
  • No. If you're using the grid (row + col's) you use either `container` or `container-fluid`. – Carol Skelly Sep 07 '16 at 17:23
1

Containers exist mostly to 1) limit page width and 2) provide padding for rows. Fluid containers only do the latter. If you aren't using rows, you may not need containers. However, if you're using columns you should be using rows and containers for better, more controllable structure.

isherwood
  • 58,414
  • 16
  • 114
  • 157
-1

Yes, you can because the .container-fluid is used as container but the difference is in responsive sizes.

see: Container-fluid vs .container

Community
  • 1
  • 1
Mustafa Usama
  • 1
  • 1
  • 1
    Welcome to StackOverflow. Visit the help center to learn how to write a good answer: http://stackoverflow.com/help/how-to-answer. Thanks. – vijayst Sep 07 '16 at 17:04