Bootstrap comes with several components and options for laying out your project.

There's the responsive container, the grid system,

media object, and utilities.

In the previous section, we used a container to wrap the content in our page.

Containers are the most basic layout component in Bootstrap.

Not only do they provide a foundation for

page layout, they're required when using the grid system.

As you'll soon learn, you can set a responsive fixed width container or

a fluid container.

And Bootstrap is developed to be mobile first.

So that means it serves the basic layout styles and

the minimal amount of code to style a page for a small mobile device first.

Then with media queries, it creates breakpoints which adjust the layout for

wider screens and devices.

So in its mobile first approach, Bootstrap uses five tiers of responsive breakpoints.

The default range is for layout in portrait phones, or extra small devices.

Then theres a media query range for

landscape phones, tablets, desktops, and large desktops.

So we have a lot of flexibility with building layouts.

Throughout the course, I'll refer to these media query breakpoints using the same

terms used in the Bootstrap docks.

Like the extra small, small,

medium, large, and extra large media query ranges, or breakpoints.

And Bootstrap uses the pixel unit in its media queries.

The extra small range is any view port or device with less than 576 pixels.

Then the small range is 576 pixels and up.

The medium range is 768 pixels and up.

Then we have the large range at 992 pixels and up, and

the extra large range at 1200 pixels and up.

So now that you're more familiar with the nuts and bolts of Bootstrap's grid system,

let's begin building the site.

Coming up next we'll start by creating a basic

grid layout using Bootstrap's grid system.