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..container
has one fixed width for each screen size in bootstrap (xs,sm,md,lg);
Copy
Use
.container-fluid
for a full width container, spanning the entire width of your viewport..container-fluid
expands to fill the available width.
Copy
Depending on the width of the viewport that the webpage is being viewed on, the
container
class gives its div a specific fixed width. These lines don't exist in any form for container-fluid
, so its width changes every time the viewport width changes.
So for example, say your browser window is 1000px wide. As it's greater than the min-width of 992px, your
.container
element will have a width of 970px. You then slowly widen your browser window. The width of your .container
won't change until you get to 1200px, at which it will jump to 1170px wide and stay that way for any larger browser widths.
Your
.container-fluid
element, on the other hand, will constantly resize as you make even the smallest changes to your browser width.Web standards is the present and future in web design – the way all websites should be design and implemented. Websites created using web standards load faster, have better search engine ranking and are easier to update. All the websites I show here have been created this way.