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
Video Player
00:00
00:00
00:00
- 2x 2x
- 1.75x 1.75x
- 1.5x 1.5x
- 1.25x 1.25x
- 1.1x 1.1x
- 1x 1x
- 0.75x 0.75x
- 0.5x 0.5x
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
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up-
Aakash Srivastav
Full Stack JavaScript Techdegree Student 11,638 Points1 Answer
View all discussions for this video
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
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 there's 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 upYou need to sign up for Treehouse in order to set up Workspace
Sign up