CODEWITHSUNDEEP
htmltwitter-bootstrapcss
Steven
Steven

Reputation: 19425

Why is bootstrap using fluid column width instead of fixed width?

I have the following basic code:

<div class="container">
    <div class="row">
        <div class="col-md-12">
            <div class="col-md-6">
                text here
            </div>
        </div>
    </div>
</div>

According to Bootstrap documentation, using the class container will used fixed width in px and using container-fluid will use %.

But when I look at the CSS source in Chrome developer tools, I see:

@media (min-width: 1200px) .container {width: 1170px;}
@media (min-width: 992px)  .col-md-12 {width: 100%;}
@media (min-width: 992px)  .col-md-6 { width: 50%;}

Why is Bootstrap using fluid grids instead of fixed grids?
I'm using Bootstrap version 3.3.6

Upvotes: 0

Views: 244

Answers (3)

David Wilkinson
David Wilkinson

Reputation: 5118

Using container-fluid doesn't really do much on the face of it - it simply inserts a pretty standard div which spans 100% width of its parent - which is default div behavior unless overriden... The special thing about container-fluid is that it has 15px of gutter / padding on both the left and right hand side (something that the row class compensates for with negative margins later down the line).

The container class on the other hand has fixed widths, which change according to the user's viewport. The container class also has 15px of padding on the left / right, which again is compensated for by a row class with negative margins on both side (-15px). When adding columns within a row, the columns themselves have 15px of padding on the left / right hand sides, so the gutter is restored.

Upvotes: 0

Casper Schobers
Casper Schobers

Reputation: 339

Bootstrap is used for Responsive design.

The container has a fixed width because when your screen is more than 1200px it will keep your page nice centered. when your screen width is under 768px the container width will be set to auto with a margin of 15px left and right of the container.

the columns are in % because they scale with the width of the device. So a div with class col-md-12 always will be the full width of the screen size or the width of the container when your screen is bigger than 768px. A div with col-md-6 will be 50% of your screen or container if the screen size is above default md value I believe this is 992px else the div is 100% of the screen width.

Upvotes: 0

RemyG
RemyG

Reputation: 496

The container has a fixed width, but the columns in it have a "fluid" width (which is fixed in reality, since the container has a fixed width).

If you use a container-fluid, the whole container will have a fluid width, so the columns inside it will too.

Upvotes: 3

Related Questions