Working with containers

The base of any Bootstrap layout is a container class. There are two types of containers you can choose to use. The first is .container-fluid, which is a full-width box and will stretch the layout to fit the entire width of the browser window.

There is some left and right padding added so the content doesn't bump right up against the browser edge:

The second option is the basic .container class, which will have a fixed width based on the size of your device's viewport. There are five different sizes in Bootstrap, with the following width values:

• Extra small <544px

• Small >544px

• Medium >768px

• Large >992px

• Extra large >1140px

Let's take a look at the markup for both container types. I'll start with the basic .container class:

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

That's pretty easy. Now let's look at the code for the fluid container:

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

Again, that is straightforward...