Bootstrap offers responsive design, then why column have these classes: col-sm-* and col-lg-*

I always wondered while learning bootstrap that why the heck I have different versions of CSS classes while defining columns.

I went through a bunch of bootstrap docs and couldn't understand.

Question became confusion

The confusing aspect of this is the fact that BootStrap 3 is a mobile-first responsive system and fails to explain how this affects the col-xx-n hierarchy in that part of the Bootstrap documentation. This makes you wonder what happens on smaller devices if you choose a value for larger devices and makes you wonder if there is a need to specify multiple values. (You don't)

If you think of the columns starting out horizontally, then you can choose when you want them to stack.

Understand with Example

For example, if you start with columns: A B C

You decide when should they stack to be like this:

A

B

C

If you choose col-lg, then the columns will stack when the width is < 1200px.

If you choose col-md, then the columns will stack when the width is < 992px.

If you choose col-sm, then the columns will stack when the width is < 768px.

If you choose col-xs, then the columns will never stack.

On the other hand, if you think of the columns starting out stacked, then you can choose at what point they become horizontal:

If you choose col-sm, then the columns will become horizontal when the width is >= 768px.

If you choose col-md, then the columns will become horizontal when the width is >= 992px.

If you choose col-lg, then the columns will become horizontal when the width is >= 1200px.

References

https://stackoverflow.com/questions/19865158/what-is-the-difference-among-col-lg-col-md-and-col-sm-in-bootstrap

Like and Follow

It really encourages to write more if someone likes your post, so be sure to like it if you enjoyed it!

And Follow me to keep getting new exciting stuff like this!

Kim John
Json Grid <=Developed with love!