Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
In this video, we'll begin laying the foundation for the site's content and components, using Bootstrap's grid system and layout options.
Resources
Bootstrap comes with several components
and options for laying out your project.
0:00
There's the responsive container,
the grid system,
0:05
media object, and utilities.
0:11
In the previous section, we used a
container to wrap the content in our page.
0:14
Containers are the most basic
layout component in Bootstrap.
0:18
Not only do they provide a foundation for
0:22
page layout, they're required
when using the grid system.
0:24
As you'll soon learn, you can set
a responsive fixed width container or
0:27
a fluid container.
0:31
And Bootstrap is developed
to be mobile first.
0:33
So that means it serves
the basic layout styles and
0:36
the minimal amount of code to style
a page for a small mobile device first.
0:38
Then with media queries, it creates
breakpoints which adjust the layout for
0:43
wider screens and devices.
0:47
So in its mobile first approach, Bootstrap
uses five tiers of responsive breakpoints.
0:49
The default range is for layout in
portrait phones, or extra small devices.
0:54
Then theres a media query range for
1:00
landscape phones, tablets,
desktops, and large desktops.
1:02
So we have a lot of flexibility
with building layouts.
1:06
Throughout the course, I'll refer to these
media query breakpoints using the same
1:09
terms used in the Bootstrap docks.
1:13
Like the extra small, small,
1:15
medium, large, and extra large
media query ranges, or breakpoints.
1:17
And Bootstrap uses the pixel
unit in its media queries.
1:22
The extra small range is any view port or
device with less than 576 pixels.
1:26
Then the small range is 576 pixels and up.
1:33
The medium range is 768 pixels and up.
1:38
Then we have the large range
at 992 pixels and up, and
1:41
the extra large range at 1200 pixels and
up.
1:46
So now that you're more familiar with the
nuts and bolts of Bootstrap's grid system,
1:50
let's begin building the site.
1:54
Coming up next we'll
start by creating a basic
1:56
grid layout using Bootstrap's grid system.
1:59
You need to sign up for Treehouse in order to download course files.
Sign up