Containers

The first thing I do on every site is determine wether or not I want some content to fit within the bootstrap grid using a special class called a container. It's quite possibly the most important tag in Bootstrap. Let's take a peek.

Containers

• container max-width
• container-fluid 100%
• container{-BR} 100%->breakpoint
  • BR: sm ≥576px md ≥768px lg ≥992px
    xl ≥1200px xxl≥1200px fluid 100%

There are three versions of the container class, the simplest version is to just use the container class. It will make your content stick to certain positions as the window gets wider. If the content is less than 576 pixels, then it be at 100% width.

The second is the container-fluid class, it makes the content 100% of the width of the browser, but has a small margin of 16 pixels on each side.

There's also a set of breakpoint controlled containers. They will have a width of 100% until they reach the specified breakpoint. So for example the container-lg will be 100% width until it reaches the large breakpoint, which is 992pixels. It will stick at that and bigger size, again with a margin of 16 pixels on each side.

Metrics

Try it

Here's a list of how the breakpoints work in detail, but seriously, let's take a look at a practical example because this much math makes my head hurt.

You'll be able to see that the breakpoints stick at certain widths. Also, note that if you want something like our image to be the full width of the browser, you just don't put it in a container.