[Solved] Can someone explain me Bootstrap’s grid “sequence”?

by


According to your question, you see 3 classes used, there are 4 basic classes –

  1. col-lg-x , 2. col-md-x , 3. col-sm-x , 4. col-xs-x.
  1. -lg –> Large desktops.
  2. -md –> laptops/desktops.
  3. -sm –> tablets.
  4. -xs –> mobile screens.

And “-x” stands for numeric value of width in terms of blocks, ranging between 1 and 12.

Our screen is basically divided into 12 parts by the bootstrap (in every screen size – lg, md, sm, xs)
12 being the whole screen in all the cases.

So, you can choose the amount of block space width you want to assign to some block based on the screen size.

So, if you choose –

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

you are telling your browser to allow the <div> to have 

// col-lg-8 -- 8 blocks of space on large screens
// col-xs-12 -- 12 (whole screen) of space on small(mobile) screens
// col-md-6 6 blocks (half the screen) in medium sized screens (laptops/desktops)

ALSO
They are the classes , no sequence matter at all.

solved Can someone explain me Bootstrap’s

grid “sequence”?