Html Question posted in
Some basic documentation can be found here.

Html – col-n overrides col-sm but not col-sm-n for small screens

  1. When a cell is defined as:
<div class= "col-4 col-sm-2 col-md-4"> ... </div>

For small screens, the cell is taking 2/12th of the width (as per col-sm-2).

  1. But when a cell is defined as:
<div class= "col-4 col-sm col-md-4"> ... </div>

For small screens, the cell is taking 4/12th of the width (as per col-4).

I understand the first case, but not the second.
Why "col-sm" is not getting considered in second case for small screens?

I know that col-4 means 4/12th of the width for all screen size.
But in the first case, for small screens, col-4 got overridden by col-sm-2, then why not in second case col-4 got overridden by col-sm for small screens?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    After doing few hit and trials, I found that col-abc-n will override col-xyz. Even if xyz is larger than abc.

    For example, if a column is defined as:

    <div class= "col-md-5 col-lg"> ... </div>

    Even if col-lg generally means col-lg-12, for large screens (or extra large screens), width will be given according to col-md-5 and not col-lg.

    But if the column was defined as:

    <div class= "col-md-5 col-lg-12"> ... </div>

    For large or extra large screen, column will get width according to col-lg-12, i.e. 12/12 th width of the row.


  2. 0

    As you have not mentioned the space, col-sm will take the entire space instead of 2/12. It is important to mention the space if you wanna set it different for that div.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search