What's the difference between col-md-x, col-xs-x, col-sm-x, col-lg-x?

I didn't fully get the grasp of what the difference was between col-md-x, col-xs-x, col-sm-x, col-lg-x. In short, I'd like to think about this as a how big the column is depending on the screen size.

  1. col-xs-x - phone
  2. col-sm-x - tablets
  3. col-md-x - laptops
  4. col-lg-x - screns

What are the implications then?

If we want to two columns independently of the screen size we would want to col-xs-6

Column 1
Column 2

But if we want the thing to break (to make responsive design) we would use e.g.

(The demo isn't going to work if you are reading it on a tablet.)

Column 1
Column 2

This way if you make the window smaller, you will get two long rows as oppose to two columns.

Leave Comment

Your email address will not be published.

Please type the characters of this captcha image in the input box

Please type the characters of this captcha image in the input box