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 Building Forms With Bootstrap Structured Form Layouts with the Grid

Posted by Ga In Shin
Ga In Shin
9,930 Points

Question about col-lg

When .col-lg-12 is added to the label in the Expiration Date:

even when the screen size is not over "lg", the two select inputs go down the line. What is happening?

shouldn't they stay on the same line when the screen size is not over "lg" since the col-12 rule only applies after "lg"?

Also, when .col-lg-8 and .col-lg are added to month selector and year selector respectively, the selectors take up the whole line even when smaller than "lg", instead of acting as "inline-blocks" as they did before.

Can anyone help out?? :/

1 Answer

Michael Swain
Michael Swain
11,311 Points
Michael Swain
Michael Swain
11,311 Points

Elements are block-level by default, meaning they take up the entire width of the viewport / container and appear stacked on top of each other. It's only when you add bootstrap col classes that elements are accomodated on the same line based on the column width set e.g "col-lg-6". The bootstrap grid layout is activated once the minimum breakpoint is met (e.g large and extra large), otherwise elements will remain block-level by default.

Hope this helps!

Ga In Shin
Ga In Shin
9,930 Points

thanks a lot! :)