The container is the root, or top-level element, in the grid. It holds one or more rows, which must be nested within the container, and the rows, in turn, can contain zero or more columns. To create a Bootstrap grid, we start off by creating a container—and to do that, we simply create a set of HTML div elements and assign the container class to the first div element.

Here is what this looks like in code:

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

Ha! Do you see why I mentioned the previous stuff about a container element? It's a messy way to try and explain it. So, let's rephrase that now using our new vernacular. 

To create a Bootstrap grid, start off by adding a container element like this:

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

Ah, that is much easier to say and read! OK, back to our regular scheduled program... 

There are two types of containers that you can have—and it is their class name that differentiates them from one another:

<!-- fixed-width container centered in the middle the viewport 
--> <div class="container"></div> 

<!-- full-width container that spans the entire viewport width (no margins) 
--> <div class="container-fluid"></div>