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
Brady Borkowski
7,495 PointsHaving 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.
2 Answers
Erick Luna
21,077 PointsI 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
7,495 PointsHey 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
21,077 PointsYou're welcome Brady, and happy coding!!!
Manjila Nakarmi
7,449 PointsManjila Nakarmi
7,449 PointsHello, 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.