CODEWITHSUNDEEP
csstwitter-bootstraptwitter-bootstrap-3
Rohan
Rohan

Reputation: 13771

What does the container class do in Twitter Bootstrap 3?

I have seen the .container class being used in multiple places but never understood the use for it. And there is also the .container-fluid class.

Can anyone explain the use of the container class with a brief example?

Upvotes: 1

Views: 616

Answers (3)

kurroman
kurroman

Reputation: 976

It´s simple. a div.container class apply a fixed with (applies margin auto) for containing the content you want inside. And this container is responsive so when you are in XS mode (mobile) the container width is 100%.

.container-fluid just apply a 100% width (full width) in all devices, so you will see your content spanning the entire width of your viewport.

The best way to check this is to create a simple html with a div and set it a background-color, then apply .container and .container-fluid to see the effect resizing your explorer.

Upvotes: 1

Suganth G
Suganth G

Reputation: 5156

Margin and width is the difference !!! 

 @media all and (min-width:992px) {
            .container {
                width: 970px;
            }
        }
        @media all and (min-width:768px) {
            .container {
                width: 750px;
            }
        }

           .container {
        padding-right: 15px;
        padding-left: 15px;
        margin-right: auto;
        margin-left: auto;
    }

        .container-fluid {
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

Normally container-fluid does not provide any margin in any kind of screen

But container provide particular margin in md and lg screen

REFERENCE

Upvotes: 0

jcruz
jcruz

Reputation: 718

The .container classes in bootstrap are just that, containers for your content. By using them, your content inside can take advantage of bootstrap grid system. These classes also add some stylings like padding, centering the container, and making it responsive.

from bootsrap

Containers

Bootstrap requires a containing element to wrap site contents and house our grid system. You may choose one of two containers to use in your projects. Note that, due to padding and more, neither container is nestable.

Use .container for a responsive fixed width container.

<div class="container">
  ...
</div>

Use .container-fluid for a full width container, spanning the entire width of your viewport.

<div class="container-fluid">
  ...
</div>

Upvotes: 0

Related Questions