CODEWITHSUNDEEP
csstwitter-bootstrap
johnny
johnny

Reputation: 19755

If I use .container-fluid in Bootstrap 3, does that mean I need to use grid classes?

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?

Upvotes: 0

Views: 2713

Answers (3)

Carol Skelly
Carol Skelly

Reputation: 362780

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.

Upvotes: 3

isherwood
isherwood

Reputation: 61114

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.

Upvotes: 1

Mustafa Usama
Mustafa Usama

Reputation: 1

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

see: Container-fluid vs .container

Upvotes: -1

Related Questions