How to work with multiple bootstrap columns,

Question

In bootstrap 3, there are some types of columns col-Md-xx , col-Sm-xx, col-lg-xx

My question is, is there any pattern to be easy to develop with all these columns?

For example

"Whenever using col-Md-4 it is good practice to use col-Sm-6 and col-lg-10"

Some rule of the kind?

Answer 1

I usually think more about my content than my look.

This means that responsiveness is driven by the need for each block of content.

But looking at some of my pages, the following pattern is quite common:

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

This reason (1, 1:2, 1:3) seems very harmonic but this does not mean that Voce should use this as a rule.

Answer 2

I suggest taking out of your HTML code the function of organizing your grid.

All this can be done via LESS. I mean... download the project on Github and create an environment to work with the files LESS bootstrap.

From this, just add the grids and Rows in the classes that should have this behavior.

Example:

.thumbnails {
  .make-row(); 

  .thumbnails-item {
    .make-xs-column(12);
    .make-sm-column(4);
    .make-md-column(3);  
  }
 }

This will cause code maintenance and scalability to increase greatly.

Answer 3

It is a good practice to analyze your page in at least 4 sizes, Extra Small(Xs), Small(Sm), Medium(Md) and Wide(lg), so if you want to use only one class for example, col-Md-4 means that your element (div) will have a width of 4 columns starting (mobile first) medium-sized.

This means that in all other smaller sizes, the width of 12 columns will be set as there is a standard size that is 12.

If you do not want the size of 12 columns to be applied in a certain screen size it is recommended to include the size you find convenient.

Current browsers have tools to help analyze your page in various sizes. In Chrome and Firefox just press F12 to open a number of useful tools for this process.