Bootstrap's mobile first grid is based on a 12 column layout

that adjusts according to the five media query ranges you learned about earlier.

With Bootstrap's column sizing classes, you specify how columns display

at different break points, or on different devices.

Currently, our columns are displayed as three equal width columns

in all the break points.

That's because the col class displays grids that are the same

from the smallest of devices to the largest.

Since the grid was built using Flex Box,

grid columns without a set width will automatically layout with equal widths.

Notice when you resize the browser, the columns become too narrow and

the third column even drops down to the bottom of the page.

So I like to display different column widths for different screen sizes.

For example, a one column layout on extra small devices, and

a three column layout on wider devices.

So, Bootstrap has break point specific column classes you can use to quickly set

the size of grid columns at a given break point.

So, the column prefixes you see here indicate the different grid tiers,

and earlier you learned that Bootstrap has five grid tiers, one for each responsive

break point at extra small, small, medium, large, and extra large.

So with these prefixes, you can create columns for different size displays, for

example, .col- for extra small displays and wider,

.col-sm- for smaller displays like phones in landscape view.

Then there's .col-md- for medium displays like tablets.

Then .col-lg- for larger desktop displays, and

finally .col-xl- for extra large desktop display.

So I like to display three equal width columns starting in the small break point.

Thanks to Flex Box columns without a set width, or without a number in

its column class, will automatically layout with equal widths.

So setting each of the three column classes to col-sm, or small,

Automatically creates equal width columns in the small break point and up.

So our layout is now responsive.

We see a one column layout in the extra small break point,

then it switches to an equal width three column layout in the small break point,

all the way up to the extra large break point.

Keep in mind that you don't have to add column classes for every break point.

Bootstrap's responsive classes are additive, for example, the sm prefix in

our column classes means that the column width applies to small devices and up.

That's why the three columns appear stacked in the extra small range,

then when viewed in the small range the columns line up horizontally, and

continue to scale up all the way to the extra large break point.

So because there are no other classes, with size prefixes,

this side by side layout will apply to all devices from small to extra large.

Now to indicate a specific number of columns, you'd like a column to span,

out of the possible 12, use a number in the column prefix.

So for example, if I want this first column to be wider,

in the small break point range, I can add the number I want it to

spin here in the column class, let's say 6, with "col-sm -6".

And again, because the grid uses flexbox when you set the width of

one column the sibling columns automatically resize around it.

But I really like the compositional balance of the equal-width column layout I

had earlier, so I'll remove the size from the class.

The columns still appear too narrow in the small break point,

making the content difficult to read.

The layout will look better if the columns were stacked in the extra-small, and

small, break points.

Well, this is an easy adjustment.

I can simply change all three

column prefixes from col-sm,

to col-md, or medium.

And that looks a little better.

The columns are laid out side by side when the viewport reaches the medium break

point, given the content a comfortable reading line length.

Now if you still think that the columns are too narrow,

you can set the prefix to col-lg, or column large,

which displays the columns horizontally in the large and extra large range only.

I like that better.

Finally, you can apply multiple grid classes to a column to create layouts that

are even more dynamic, and define grids for different screen sizes.

For example, I can set a different column layout for extra large desktops.

So in the extra large break point, I'll set the first column

to span the width of six columns with the class col-xl-6.

And now on extra large devices, the first column containing the image is twice

as wide as the other two columns, which resize to accommodate this wider column.

You can use this layout in your design.

But again, I prefer the balanced equal width column layout.

So I'll stick with just the col-lg class for all three columns.

Finally, Chrome's developer tools has a handy feature called device mode,

that lets you preview and

test your responsive designs by emulating different screen sizes and resolutions.

To open it, bring up Chrome dev tools by clicking

the top-right menu icon > More Tools > Developer Tools.

And to enable device mode and start testing your layout,

simply click the Toggle device mode icon next to the Inspect icon,

and now you can simulate different device widths without

relying on changing your browser window width manually or

without the hassle of switching between multiple devices.