How does various cols differ in bootstrap

Question

I have a very basic question on bootstrap grid system. I have read the docs and tutorials, but this part does not get into my head.

col-sm-6

<div class="container">
  <div class="row">
    <div class="col-sm-6">
    </div>
     <div class="col-sm-6">
    </div>
  </div>
</div>

col-lg-6

<div class="container">
  <div class="row">
    <div class="col-lg-6">
    </div>
     <div class="col-lg-6">
    </div>
  </div>
</div>

1. sm targets for medium sized and tables
2. lg targets for larger desktops.

Both the grids work perfectly, Both are responsive and both works perfectly. Can anyone explain me the difference in both the approaches.

1. I want to understand what does these two in common and where do they differ?
2. Why would one want to build the grid layout in first approach and why would one choose the second one?.

Answer 1

To answer your question, they are the same thing. The classes differ by each screen size. In a small screen size, you may see something different then in a big screen size depending on the amount of columns you want. In better terms, you can combine the classes to keep a responsive layout responsive. I will attach a demo below for you to look at. But first let's take a look at the following layout:

HTML:

  <div class="row">
    <div class=" col-lg-6 blue2">
    </div>
     <div class=" col-lg-6 red2">
    </div>
  </div>

CSS:

.blue2 {
    background:blue;
    width: auto;
    height: 200px;
}
.red2 {
    background:red;
    width: auto;
    height: 200px;
}

The following will produce a specific layout for the large screens but will not follow the grid system for screens that are smaller. This is best seen through the next example:

HTML:

<div class="row">
    <div class=" col-lg-6 col-sm-6 col-md-6 col-xs-6 blue"></div>
    <div class=" col-lg-6 col-sm-6 col-md-6 col-xs-6  red"></div>
</div>

CSS:

.blue {
    background:blue;
    width: auto;
    height: 200px;
}
.red {
    background:red;
    width: auto;
    height: 200px;
}

This is the exact same CSS but I have added more classes to cover the different screen sizes. The classes are: col-md-6 and col-sm-6. Together, along with the original class demonstrated above: col-lg-6, they will maintain the exact layout through every screen size (I have even included extra small in this design).

This is best seen through the following DEMO. Just play with the screen size on the bottom right and it will make more sense.

Answer 2

The grid system is meant to target different device screen using Media Queries.

As an example is much more clear, lets analyse this one:

<div class="container">
  <div class="row">
    <div class="col-lg-3 col-sm-6 col-xs-12">
    </div>
    <div class="col-lg-3 col-sm-6 col-xs-12">
    </div>
    <div class="col-lg-3 col-sm-6 col-xs-12">
    </div>
    <div class="col-lg-3 col-sm-6 col-xs-12">
    </div>
  </div>
</div>

The first thing to know is that Bootstrap has a grid of 12 columns. When you add a class col-lg-x, x can be a number between 1 and 12 which tell how many columns you want your element to fill.

• On a large screen col-lg-x, where the width is ≥ 1200px (e.g. desktops), the four divs will be on the same line.
• On small screens col-sm-x, where the width is ≥ 750px (e.g. tablets), you will have two lines containing two div each
• On extra small screens col-xs-x, where the width is lower than 750px (e.g. phones), each div will be on a separate line.

There is also a col-md-x class to target devices where width is ≥ 750px, but since its not on this example the col-sm-6 will apply instead.

You can read more about Bootstrap Media queries on the documentation.

Edit: The media queries actually target the size of the window. So when you want to see how your page will appear on a smaller/larger device you just need to resize your browser.