Bootstrap Grid System and Screen Types

<div class="row">
  <div class="col-sm-4">Box1</div>
  <div class="col-sm-4">Box2</div>
  <div class="col-sm-4">Box3 </div>
</div>

As you know, Bootstrap is used to design mobile and many independent, responsive web sites compatible with various screens. If you're wondering how it does this, I can tell you that the key is its use of the grid system.

When designing a site with Bootstrap, we divide the site into columns, and Bootstrap repositions these columns according to the screen size, ensuring the layout fits perfectly.

Let's now look at how this grid structure works. The grid structure in Bootstrap always works so that it can be divided into parts with a total of 12. In other words, we divide the horizontal width of the site into 12 pieces and arrange the parts accordingly. 

You can think of these columns as 3 + 6 + 3 = 12. For example, if you divide the site so that there is 300px on the left, 600px in the center, and 300px on the right, this means the width of the screen is 1200px. If you try to open this Bootstrap page on a smaller screen, it will rearrange the 300px on the left to the top, center the 600px column, and move the other 300px to the bottom, ensuring the screen fits perfectly.

Bootstrap developers have set 12 as a standard and built the system around it. As long as you do not exceed 12 when designing your site with Bootstrap, you can assign numbers in any way you wish.

3 3 3 3

4 4 4

5 5 2

It doesn't matter, you can distribute the numbers in any way as long as you do not exceed 12. You can even distribute as 1 1 1 1 1 .. 1 if you like.

The "sm" part you see in the sample Bootstrap code above denotes screen types and indicates it's for small screens – in fact, "sm" is short for "small" in English. Let's have a closer look at these screen types.

For example, when designing a site for computer screens, you will create your site based on the "lg" screen type, but if you want to design for mobile, you can use the "xs" screen type.

However, with the advent of HTML5's screen scaling system, even "lg" and "md" are usable for mobile screens nowadays.