Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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
19,669 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
19,669 Points

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