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