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

Brady Borkowski
Brady Borkowski
7,495 Points

Having trouble understanding what's happening in the background when setting the columns' classes to ".col-sm"

I completely understand that this is telling the browser to display the columns at equal widths beginning at the SM breakpoint defined by Bootstrap, but I'm having trouble understanding what's happening to the columns at XS.

What I guess I mean is, what exactly are the columns reverting to while at the XS breakpoint? Does it make the columns take up the full width of their containers?

I'm sure it's a simple answer that will seem obvious once I read it, but I can't for the life of me figure out what exactly is actually happening before the SM breakpoint.

Manjila Nakarmi
Manjila Nakarmi
7,449 Points

Hello, When the display becomes smaller it is suggested to break the columns to take up 100% width. Bootstrap has high mobile compatibility so I think after the breakpoint it assigns 100%width to the columns so that the viewers can be comfortable.

2 Answers

Erick Luna
Erick Luna
21,076 Points

I think the three columns configuration is going to be applied only when the viewport gets the 540px wide or more, before that point the elements are going to be stacked with a width of 100%.

Brady Borkowski
Brady Borkowski
7,495 Points

Hey Erick, thanks for your response!

I've actually sorted it out by now (it just clicked one day while playing with it) but I'm glad that others who may be curious have an explanation now!

Erick Luna
Erick Luna
21,076 Points

You're welcome Brady, and happy coding!!!