-6

I see divs on projects like <div class="col-lg-8 col-xs-12 col-md-6> and I wanted to know why there's 3 grid classes instead of 1. Is it for mobile?? But how the browser will decode which one is for mobile? Is there a specific classes sequence <div class="(PC) col-lg-8 (LAPTOPS) col-xs-12 (MOBILE)col-md-6>?

And If I use the col-offset option, it will offset all the classes or just the class before it?

Thanks in advance!

Lucaz Nunes
  • 35
  • 1
  • 8
  • 2
    http://getbootstrap.com/css/#grid Please look to following link. It has explanation. – xxCodexx May 30 '17 at 14:26
  • 2
    I'm voting to close this question as off-topic because this information can be found in the documentation – Pete May 30 '17 at 14:29
  • Also see https://stackoverflow.com/questions/19865158/what-is-the-difference-among-col-lg-col-md-and-col-sm-in-bootstrap/19865627#19865627 – Carol Skelly May 30 '17 at 14:46
  • @Pete You're right, but the way that It was explained here wasn't explained on the documentation. I read it and didn't understand. That's why I had to write and post the question here. – Lucaz Nunes May 31 '17 at 08:59
  • @Pete Yes, I understood the reply and then understood the documentation. You can close the question. Thank you, sir. – Lucaz Nunes Jun 01 '17 at 14:31

3 Answers3

2

GO HERE FOR MORE INFORMATION

https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp

Grid Classes The Bootstrap grid system has four classes:

xs (for phones)

sm (for tablets)

md (for desktops)

lg (for larger desktops)

The classes above can be combined to create more dynamic and flexible layouts.

Tip: Each class scales up, so if you wish to set the same widths for xs and sm, you only need to specify xs.

Nadir Laskar
  • 4,012
  • 2
  • 16
  • 33
0

The browser won't decode that stuff, it's the Js's files of Bootstrap which will care of it, for the browsers.

// LG - larger computer
// MD - computer
// SM - tablet
// XS - smartphone

If you inspect with your inspector theses class, you'll see for example that col-8 correspond to :

.col-8 {
    width: 50%;
    max-width: 50%;
}

So it takes 50% width of his parent. And if your set a class at col-4, it will be at 50% less width than col-8, so :

.col-4 {
    width: 25%;
    max-width: 25%;
}

When you add "sm", it mean that it will be triggered only for mobile, "md" for tablet.

Pierre Météyé
  • 143
  • 1
  • 1
  • 10
0

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.

cske
  • 2,233
  • 4
  • 26
  • 24
Ashutosh Jainvi
  • 16
  • 3