Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS Bootstrap Basics Responsive Layouts With the Bootstrap Grid Column Sizing

Richard Verbraak
Richard Verbraak
7,739 Points
Posted by Richard Verbraak
Richard Verbraak
7,739 Points

Can anyone help me explain media queries and Bootstrap?

I'm confused as to how adding col-sm resizes the columns to a one column layout in smaller devices/screens.

I didn't completely understand media queries earlier with min-width and max-width. It didn't really click for me. So if someone could explain this a bit better I'd appreciate it.

I'm guessing when you use .col it sets columns to auto and when using .col-sm it says that the columns that are rendered on screens below 576px, have their width not set to auto, but to a width predefined in Bootstrap.

I just don't get what the underlying code is with sm and md prefixes. How and why do the columns resize to a one column layout automatically when appling that prefix.

1 Answer

Steven Parker
Steven Parker
231,275 Points
Steven Parker
Steven Parker
231,275 Points

It sounds like you already suspect that the secret to the way the Bootstrap classes work is that they are implemented using media queries. That's all handled "behind the scenes" for you so all you do is choose the classes. You could read the Boostrap code, but I don't recommend it because it is extensive and extremely dense.

I think of Bootstrap as a class-driven styling package in a "black box". If you're really curious you can read the code and/or peek with the browser dev tools. But I find it most useful by just following the API instructions and "leaving the box shut". :wink:

Richard Verbraak
Richard Verbraak
7,739 Points
Richard Verbraak
Richard Verbraak
7,739 Points

Yes I tried reading the documentation and all, but it was like you said, a lot of info. Now I know it uses media queries and maybe I formulated my question badly. What I am actually asking is, how do these media queries work? Inside Bootstrap and even outside of using Bootstrap.

I don't really understand what you're saying with media queries like:

min-width: 576px

or

max-width: 1000px

Guil just types col-md and this means do something something for screens that are medium size AND above. But what is it doing? I don't get how that changes the columns width to have 3 columns side by side and suddenly change anything below the medium size.

In his example the columns suddenly were stacked, but nowhere did he specify: Do something for screens that are small and change the layout to a stacked column. He only specified doing something for medium sizes and larger.

I feel like I'm missing something so obvious but I guess I didn't pay enough attention when media queries came up earlier in the courses.

Steven Parker
Steven Parker
231,275 Points
Steven Parker
Steven Parker
231,275 Points

Media queries control when certain CSS rules take effect based on a test expression. As an example, a test expression of "min-width: 576px" means that the rules only apply when the window width is at least 576 pixels wide. Similarly, "max-width: 1000px" causes the rules to only apply when the window is 1000 pixels or less.

Media queries are usually placed last in the CSS file so that when they apply, their rules will override any other CSS rules that set the same properties.

What Bootstrap does is to establish rules for the various classes within media queries, so that they will have different effects based on the screen size.