Free UI/UX design course

Learn how to create exceptional designs by reading my new tutorial.

Start learning

Containers

Containers are the most basic layout element in Bootstrap and are required when using default grid system. Containers are used to contain, pad, and (sometimes) center the content within them. Although containers can be nested, most layouts do not require a nested container.

This is what the container looks like in code:

        
            

        <div class="container">

        </div>

Nothing special. Just a div with class container.

But now let's check how containers will behave in our Bootstrap project that we started in the previous lesson.

Add the following code to your project, directly below the opening <body> tag.

        
            

        <div class="container" style="height: 500px; background-color: red">

        </div>

Note: For demonstration purposes, we added an inline CSS to the container that gives it a height of 500px and a red color.

This is only to allow you to visually observe the change in the behavior of the container, because by default it would be invisible (by default the container has no color and its height is adjusted to its content - and if there is no content, it has no height). We'll remove this inline CSS later.

After adding this code to your project, save the file and refresh your browser. You should see a red rectangle with white margins on the sides. This is our container. Isn't it beautiful? :)

Now slowly reduce the browser window size. When you get below 576 pixels you will see that the margins are completely gone and the container is 100% of the available width.

This is a very desirable behavior that allows us to create responsive layouts, adapted to both large desktop screens and small ones for mobile devices.

As you can easily guess, margins are needed on large screens, but there is no room for them on small ones - that's why Bootstrap containers adjust their width to the width of the screen.

This boundary point of 576 pixels (px), below which the margins disappear and the container stretches to full width, is called a breakpoint. This is a very important term and we will refer to it often.

Breakpoints are the triggers in Bootstrap for how your layout responsive changes across device or viewport sizes.

Thanks to breakpoints, Bootstrap gives us a lot of flexibility and allows us to decide from what screen width our container (as well as other layout elements, which we will learn later) remove the margins and stretch to full width.

Have a look at the table below:

Extra small
<576px 		Small
≥576px 		Medium
≥768px 		Large
≥992px 		X-Large
≥1200px 		XX-Large
≥1400px
.container 100% 540px 720px 960px 1140px 1320px
.container-sm 100% 540px 720px 960px 1140px 1320px
.container-md 100% 100% 720px 960px 1140px 1320px
.container-lg 100% 100% 100% 960px 1140px 1320px
.container-xl 100% 100% 100% 100% 1140px 1320px
.container-xxl 100% 100% 100% 100% 100% 1320px
.container-fluid 100% 100% 100% 100% 100% 100%

Can you see this parts -sm , -md, -lg etc., added to the container class? They represent breakpoints (sm for small, md for medium, lg for large, etc.) and define below which width the margins are removed and the container begins to stretch the full available width (i.e. 100% of the width given in the table).

The default container (i.e. the container class, without any additional characters) has a breakpoint of 576px wide. If you want to make the container convert to full width on screens less than, for example, 992px wide, you need to add xl fragment to the container class.

Then it should looks like this:

        
            

        <div class="container-xl">

        </div>

Now in your project change our container to an container with the xl breakpoint and again gradually reduce the width of the screen. You will see the margins disappear much sooner than before.

        
            

        <div class="container-xl" style="height: 500px; background-color: red">

        </div>

And if you want your container to stretch to full width always, regardless of the breakpoint (i.e. on both small and large screens), use the container-fluid class.

        
            

        <div class="container-fluid">

        </div>

And that's it for now when it comes to containers. Wasn't that hard for such a useful thing, don't you think?

Now change the container in your project to the default one. Leave the inline CSS for now, as we'll need it in the next lesson.

        
            

        <div class="container" style="height: 500px; background-color: red">

        </div>

If something was unclear to you, let me know on twitter!

Demo and source code for this lesson
John Doe

About author

Michal Szymanski
@ascensus_mdb

Co Founder at MDBootstrap / Listed in Forbes „30 under 30" / Open-source enthusiast / Dancer, nerd & book lover.

Author of hundreds of articles on programming, business, marketing and productivity. In the past, an educator working with troubled youth in orphanages and correctional facilities.