0

I am pretty new in Twitter BootStrap and I have the following doubt.

I have clear how the BootStrap grid layout works so if I have something like this:

<div class="row">
    <div class="col-md-4">
    <div class="col-md-4">
    <div class="col-md-4">
</div>

simply means that I have a row divided into 3 columns of the 4 dimension (because the BootStrap grid layout is based on 12 columns)

My doubt is related to the md definition of these columns.

I know that I can use also something like <div class="col-xs-4">

What exatly is the difference between the col-md-4 class and the col-xs-4 class?

j08691
  • 204,283
  • 31
  • 260
  • 272
AndreaNobili
  • 40,955
  • 107
  • 324
  • 596
  • 2
    It's all explained in the docs. It relates to how it's supposed to behave on screens of different sizes. – Nicklas Pouey-Winger Oct 20 '15 at 14:55
  • Just read http://getbootstrap.com/css/#grid-options – j08691 Oct 20 '15 at 14:57
  • See the Docs > [Grid Options](http://getbootstrap.com/css/#grid-options) – vanburen Oct 20 '15 at 14:57
  • 2
    Possible duplicate of [What is the difference among col-lg-\*, col-md-\* and col-sm-\* in twitter bootstrap3?](http://stackoverflow.com/questions/19865158/what-is-the-difference-among-col-lg-col-md-and-col-sm-in-twitter-bootstra) – Marcelo Oct 20 '15 at 15:08

1 Answers1

5

Basically,

it will define the behavior of the columns in xl (extra large screens) and in md (medium screens);

Ex: when the screen is xl the columns will have the proportion where 12 is the sum of the columns, if the screen get smaller the columns will break. however, if you setup with md you can get the screen even smaller but the columns will no break until the dimensions:

  • xs (for phones)
  • sm (for tablets)
  • md (for desktops)
  • lg (for larger desktops)

reference: https://getbootstrap.com/examples/grid/

Alvaro Silvino
  • 9,441
  • 12
  • 52
  • 80