Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed Bootstrap Basics!
You have completed Bootstrap Basics!
Preview
Learn Bootstrap's predefined classes for creating grid columns and controlling how columns display in a given breakpoint.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Bootstrap's mobile first grid
is based on a 12 column layout
0:00
that adjusts according to the five media
query ranges you learned about earlier.
0:04
With Bootstrap's column sizing classes,
you specify how columns display
0:09
at different break points,
or on different devices.
0:13
Currently, our columns are displayed
as three equal width columns
0:17
in all the break points.
0:21
That's because the col class
displays grids that are the same
0:23
from the smallest of
devices to the largest.
0:27
Since the grid was built using Flex Box,
0:30
grid columns without a set width will
automatically layout with equal widths.
0:33
Notice when you resize the browser,
the columns become too narrow and
0:39
the third column even drops
down to the bottom of the page.
0:44
So I like to display different column
widths for different screen sizes.
0:48
For example, a one column layout
on extra small devices, and
0:53
a three column layout on wider devices.
0:57
So, Bootstrap has break point specific
column classes you can use to quickly set
1:00
the size of grid columns
at a given break point.
1:05
So, the column prefixes you see here
indicate the different grid tiers,
1:07
and earlier you learned that Bootstrap has
five grid tiers, one for each responsive
1:11
break point at extra small, small,
medium, large, and extra large.
1:16
So with these prefixes, you can create
columns for different size displays, for
1:20
example, .col- for
extra small displays and wider,
1:25
.col-sm- for smaller displays
like phones in landscape view.
1:28
Then there's .col-md- for
medium displays like tablets.
1:34
Then .col-lg- for
larger desktop displays, and
1:39
finally .col-xl- for
extra large desktop display.
1:42
So I like to display three equal width
columns starting in the small break point.
1:47
Thanks to Flex Box columns without
a set width, or without a number in
1:53
its column class, will automatically
layout with equal widths.
1:58
So setting each of the three column
classes to col-sm, or small,
2:03
Automatically creates equal width
columns in the small break point and up.
2:13
So our layout is now responsive.
2:19
We see a one column layout in
the extra small break point,
2:22
then it switches to an equal width three
column layout in the small break point,
2:25
all the way up to the extra
large break point.
2:30
Keep in mind that you don't have to add
column classes for every break point.
2:33
Bootstrap's responsive classes are
additive, for example, the sm prefix in
2:39
our column classes means that the column
width applies to small devices and up.
2:44
That's why the three columns appear
stacked in the extra small range,
2:49
then when viewed in the small range
the columns line up horizontally, and
2:54
continue to scale up all the way
to the extra large break point.
2:58
So because there are no other classes,
with size prefixes,
3:02
this side by side layout will apply to
all devices from small to extra large.
3:05
Now to indicate a specific number of
columns, you'd like a column to span,
3:11
out of the possible 12,
use a number in the column prefix.
3:16
So for example,
if I want this first column to be wider,
3:20
in the small break point range,
I can add the number I want it to
3:25
span here in the column class,
let's say 6, with "col-sm -6".
3:30
And again, because the grid uses
flexbox when you set the width of
3:36
one column the sibling columns
automatically resize around it.
3:41
But I really like the compositional
balance of the equal-width column layout I
3:49
had earlier, so
I'll remove the size from the class.
3:53
The columns still appear too
narrow in the small break point,
4:01
making the content difficult to read.
4:05
The layout will look better if the columns
were stacked in the extra-small, and
4:08
small, break points.
4:12
Well, this is an easy adjustment.
4:13
I can simply change all three
4:15
column prefixes from col-sm,
4:20
to col-md, or medium.
4:25
And that looks a little better.
4:31
The columns are laid out side by side when
the viewport reaches the medium break
4:33
point, given the content
a comfortable reading line length.
4:37
Now if you still think that
the columns are too narrow,
4:40
you can set the prefix to col-lg,
or column large,
4:44
which displays the columns horizontally
in the large and extra large range only.
4:47
I like that better.
5:08
Finally, you can apply multiple grid
classes to a column to create layouts that
5:10
are even more dynamic, and
define grids for different screen sizes.
5:15
For example, I can set a different
column layout for extra large desktops.
5:19
So in the extra large break point,
I'll set the first column
5:24
to span the width of six columns
with the class col-xl-6.
5:29
And now on extra large devices, the first
column containing the image is twice
5:37
as wide as the other two columns, which
resize to accommodate this wider column.
5:43
You can use this layout in your design.
5:49
But again, I prefer the balanced
equal width column layout.
5:51
So I'll stick with just the col-lg
class for all three columns.
5:55
Finally, Chrome's developer tools has
a handy feature called device mode,
6:02
that lets you preview and
6:07
test your responsive designs by emulating
different screen sizes and resolutions.
6:08
To open it,
bring up Chrome dev tools by clicking
6:13
the top-right menu icon >
More Tools > Developer Tools.
6:17
And to enable device mode and
start testing your layout,
6:22
simply click the Toggle device mode
icon next to the Inspect icon,
6:26
and now you can simulate
different device widths without
6:31
relying on changing your browser
window width manually or
6:35
without the hassle of switching
between multiple devices.
6:40
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