Bootstrap uses a grid system based on CSS Flexbox which organizes content in rows or columns. As seen in the previous exercise, Bootstrap also uses rows and columns and in this exercise we’ll learn about the essential Bootstrap container. Using the Bootstrap grid also allows for responsive design, in other words, a website’s layout can change based on the user’s screen size. Read more about grid at Bootstrap’s grid documentation.
Bootstrap uses classes to apply CSS rulesets — these rulesets dictate the layout and styling of the element. To create a container, necessary for Bootstrap’s grid, we assign a class of "container" to a <div> like so:
The <div> from the example above becomes a Bootstrap container which has a width relative to a user’s screen size, becomes horizontally centered, and has a left and right margin.
If we wanted the container to take up the entire width of the screen we can assign a class of "container-fluid":
Knowing how to use documentation is important. We can always check what classes to add using Bootstrap’s grid documentation.
Note: the Bootstrap site uses CSS notation for classes, which entails having a . before a class name like .example-class-name.
Instructions
Note that we’ve added some styling in a local CSS file, style.css to add a background color, a border, and a font color to the <div>s without adding more Bootstrap classes. This will be a common theme in the following exercises. We’ve given containers a solid black border and a teal/green background color.
In index.html there are two <div>s in the <body>. Add a class of "container" to the first <div>. Run your code to see how size of the container changes.
Assign the second <div> a class of "container-fluid" to see how it compares to the first <div>.
You will have to resize the browser to see a noticeable difference. To resize the browser, you can click and drag the left edge of the browser or click on the expand icon: 
.