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