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

Elena Man
Elena Man
21,092 Points
Posted by Elena Man
Elena Man
21,092 Points

Bootstrap grid class

I noticed that some examples on Bootstrap site regarding grids have two sets of classes :<div class="col col-lg-2">

Why is there both 'col' and 'col-lg-2'? What is the difference between using both classes and only the second class?

2 Answers

Aakash Srivastav
seal-mask
.a{fill-rule:evenodd;}techdegree
Aakash Srivastav
Full Stack JavaScript Techdegree Student 11,638 Points
Aakash Srivastav
.a{fill-rule:evenodd;}techdegree
Aakash Srivastav
Full Stack JavaScript Techdegree Student 11,638 Points

Hey Elena Man , the second class i,e col-lg-2 is bootstrap defined class . If you will not use col-lg-2 , you div's will not be aligned side by side at large viewport . So , that's specific to bootstrap.
Let's come to first class i,e col . It is user defined class and used widely in designing grid or columns . It gives you freedom to put your on styles . Suppose , there is any style that you want to give on all the columns , you can use .col class because that will be common class among all the classes.

So, in one sentence , .col is user defined to give him more freedom to design the columns or grids. While , .col-lg-2 i bootstrap defined class used to put two div's side by side at large viewport
Hope it helps :)

Elena Man
Elena Man
21,092 Points
Elena Man
Elena Man
21,092 Points

Thank you! It actually cleared things out for me!

koivma
koivma
4,117 Points
koivma
koivma
4,117 Points

If you would use just "col" class, columns will be aligned side by side. If you would have 5 different "col" classes inside "row" div, they would be with equal width.

If you would have

<div class="col col-lg-2"></div>
<div class="col col-lg-8"></div>
<div class="col col-lg-2"></div>

Then col-lg-8 would be much larger if viewport width is greater than 992px, but when it's less than 992px all three classes would be with same width.

You can take a look at bootstrap docs. https://getbootstrap.com/docs/4.0/layout/grid/#equal-width