Drifter Drifter - 5 months ago 14
CSS Question

How to properly use Bootstrap 3 grid property

I am using Bootstrap 3 in few of my projects, especially the container-fluid class to make my page to display properly in all devices automatically. I know the following regarding the col-xx class: xs for < 768px, sm for >- 768px, md >= 992px and lg for >= 1200px. Let us say I have the following code:

<div class="container-fluid">
<div class="row">
<div class="col-sm-4">
Content 1
</div>
<div class="col-sm-8">
Content 2
</div>
</div>
</div>


I believe in smart phones both Content 1 and 2 will occupy full screen and In all other devices Content 1 will occupy 4 columns and Content 2 will occupy 8 columns. If so, what is the need for md and lg? Probably I don't understand the concept correctly. Instead, should I use class="col-sm-2 col-md-2 col-lg-2" and class="col-sm-8 col-md-8 col-lg-8" in both the div's so that it will work fine in all devices?

Thanks

Answer

Bootstrap has 4 breakpoints:

  1. Phones (<768px)
  2. Tablets (≥768px)
  3. Desktops (≥992px)
  4. Large desktops (≥1200px)

Your code means that you have 2 columns on tablets, desktops and large desktops and 1 column on phones.

If you look at the code in bootstrap.css:

@media (min-width: 768px) {
  .col-sm-4 {
    width: 33.33333333%;
  }
  .col-sm-8 {
    width: 66.66666667%;
  }
}

@media (min-width: 992px) {
  .col-md-4 {
    width: 33.33333333%;
  }
  .col-md-8 {
    width: 66.66666667%;
  }
}

So you don't need to add col-md-4 and col-md-8 classes if you have col-sm classes (because they have the same values).

You can change width of your columns on different screen sizes, for example:

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-4 col-md-8">
      Content 1
    </div>
    <div class="col-sm-8 col-md-4">
      Content 2
    </div>
  </div>
</div>

This code means that you will have 1 column on phones and two columns on other screens but on tablets you will have 4-8 (right column wider) and on desktops and large desktops 8-4 (left column wider).

Comments