CODEWITHSUNDEEP
csstwitter-bootstrap
zubmic
zubmic

Reputation: 77

Bootstrap columns conventions

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?

Upvotes: 0

Views: 396

Answers (2)

Carol Skelly
Carol Skelly

Reputation: 362760

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.

Upvotes: 1

James Donnelly
James Donnelly

Reputation: 128796

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.

Upvotes: 1

Related Questions