Preview
Video Player
00:00
00:00
Column Sizing
6:52Learn Bootstrap's predefined classes for creating grid columns and controlling how columns display in a given breakpoint.
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