What is the difference among col-lg-*, col-md-* and col-sm-* in Bootstrap?

Question

What is the difference among col-lg-* , col-md-* and col-sm-* in Twitter Bootstrap?

Answer 1

Let's un-complicate Bootstrap!

Notice how the col-sm occupies the 100% width (in other terms breaks into new line) below 576px but col doesn't. You can notice the current width at the top center in gif.

Here comes the code:

    

        
col
        
col
        
col
    
    

        
col-sm
        
col-sm
        
col-sm
    

Bootstrap by default aligns all the columns(col) in a single row with equal width. In this case three col will occupy 100%/3 width each, whatever the screen size. You can notice that in gif.

Now what if we want to render only one column per line i.e give 100% width to each column but for smaller screens only? Now comes the col-xx classes!

I used col-sm because I wanted to break the columns into separate lines below 576px. These 4 col-xx classes are provided by Bootstrap for different display devices like mobiles, tablets, laptops, large monitors etc.

So,col-sm would break below 576px, col-md would break below 768px, col-lg would break below 992px and col-xl would break below 1200px

Note that there's no col-xs class in bootstrap 4.

This pretty much sums-up. You can go back to work.

---

But there's bit more to it. Now comes the col-* and col-xx-* for customizing width.

Remember in the above example I mentioned that col or col-xx takes the equal width in a row. So if we want to give more width to a specific col we can do this.

Bootstrap row is divided into 12 parts, so in above example there were 3 col so each one takes 12/3 = 4 part. You can consider these parts as a way to measure width.

We could also write that in format col-* i.e. col-4 like this :

  
col
  
col
  
col

And it would've made no difference because by default bootstrap gives equal width to col (4 + 4 + 4 = 12).

But, what if we want to give 7 parts to 1st col, 3 parts to 2nd col and rest 2 parts (12-7-3 = 2) to 3rd col (7+3+2 so total is 12), we can simply do this:

  
col-7
  
col-3
  
col-2

and you can customize the width of col-xx-* classes also.

    
col-sm-7
    
col-sm-3
    
col-sm-2

How does it look in the action?

What if sum of col is more than 12? Then the col will shift/adjust to below line. Yes, there can be any number of columns for a row!

        
col-12
        
col-9
        
col-6
        
col-6
    

What if we want 3 columns in a row for large screens but split these columns into 2 rows for small screens?

    
col-12 col-sm TOP
    
col col-sm
    
col col-sm

You can play around here: https://jsfiddle.net/JerryGoyal/6vqno0Lm/