5

I have a question regarding bootstrap 3.0 classes order, now if I write the following where I am starting from sm till lg:-

<div class="col-sm-4 col-md-4 col-lg-4 address">

will it have any different if I change the class order as follow from lg to sm:-

<div class="col-lg-4 col-md-4 col-sm-4  address">

or the order does not matter ?

  • Why would you need more than one? Those classes are meant to be used separately are they not? Also, I would assume the first one that shows up in bootstrap.css is the one that would be used. – T0t3sMcG0t3s Jan 20 '16 at 04:19
  • Just skimmed this and looks like it's the last one in bootstrap.css or bootstrap.min.css that will be the one used. If two rules are equal in all of the above, the one declared last wins. CSS embedded in the html always come after external stylesheets regardless of the order in the html http://vanseodesign.com/css/css-specificity-inheritance-cascaade/ – T0t3sMcG0t3s Jan 20 '16 at 04:21
  • @t03smcg0t3s thanks for the reply.. Now you said that I should define only one class,,, but what if I want to have different col setting based on the screen size,, then it should support multiple class definitions,, is this correct??? –  Jan 20 '16 at 09:37
  • @JohnJohn You can have as many class as you want in single tag. While generating render-tree each css definition comes is applied, so all definition. Hence the last defined css property is being displayed. Check this fiddle for example. https://jsfiddle.net/errhunter/heertkud/ – Gaurav Gandhi Jan 21 '16 at 03:37
  • I am not good at explaining so above thing is not well explained. I advice you to read through https://developers.google.com/web/fundamentals/getting-started/?hl=en to learn more. – Gaurav Gandhi Jan 21 '16 at 03:38

1 Answers1

2

<div class="col-sm-4 col-md-4 col-lg-4 address">

and

<div class="col-lg-4 col-md-4 col-sm-4 address">

both will be work same. Check this example fiddle

Gaurav Gandhi
  • 3,041
  • 2
  • 27
  • 40
  • thanks for the reply,, but can you advice what is the rule that govern which class will have the effect??? I mean is it about the order of these classes inside the bootstrap.css ??or it is about the order of these classes inside the div??? –  Jan 20 '16 at 09:35
  • 1
    at a time only one of a class will be in-effect. It depends on what viewport you are in. If you viewing from Mobile device then `col-*-xs` will be in effect. Checkout this well-written answer for more information : http://stackoverflow.com/a/24177022/923426 – Gaurav Gandhi Jan 20 '16 at 09:40
  • ok thanks for the link ,, but if I say
    or
    will be exactly the same ?
     –  Jan 20 '16 at 11:13
  • 1
    Not at all, order is not important but *-xs-* and *-sm-* are all different class. so interchanging them will change the layout. For sure. – Gaurav Gandhi Jan 20 '16 at 11:27
  • sorry sorry I mean
    and
    will be the same ,, I mistyped the numbers ... sorry ??
     –  Jan 20 '16 at 13:14
  • Yes yes, `
    ` and `
    ` are one and the same. Just like looking with one eye, perception changes if you change eye, but the actual thing is at it was.
     – Gaurav Gandhi Jan 21 '16 at 03:29