Bootstrap columns conventions

Question

I tried to Google the question but couldn't find any related topic. What is better approach to using Bootstrap classes:

<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12"></div>

Or:

<div class="col-xs-12 col-md-6"></div>

Is it good or bad idea to omit column classes even if they are redundant?

it's a good idea, because in this way you don't use more classes than you need — MarcoSantino, Apr 10 '17 at 12:58

score 1 · Answer 1 · answered Apr 10 '17 at 12:54

As you already know, col-lg-6 and col-sm-12 are meaningless here as those will inherit the styles from col-md-6 and col-xs-12.

There's no harm in keeping the col-lg-6 and col-sm-12 - they offer some security in that it guarantees a large display will render col-lg-6 (in the event your col-md-6 is dynamically modified), but you'd be better off not including them in your HTML purely to make your HTML file size smaller.

score 1 · Accepted Answer · edited May 23 '17 at 12:17

Basically this has already been answered before.

The smaller grid classes also apply to larger screens unless overriden specifically by a larger breakpoint. For example, col-md-6 alone means 6 units on medium and up.

Therefore, you only need to use the class for the smallest device width you want to support.

Also, the col-xs-12 is implied since, columns will stack vertically (and become full-width) on xs screens unless you use a specific col-xs-{1-11} class in your HTML markup.

Bootstrap columns conventions

2 Answers2