What are the difference between col-lg and col-md in bootstrap3

Question

What are the difference between col-lg, col-md ,col-xs and col-sm grid system in in bootstrap 3.

In a bootstrap template they used <div class="col-lg-6 col-md-6 col-xs-12 col-sm-6"></div> only for one column grid. I am a beginner in Bootstrap.

Answer 1

When using Bootstrap those are the classes which are added for one column grid and correspond to extra small, small, medium and large devices.

.col-xs = *Extra small devices (ie Phones) (<768px)

.col-sm = Small devices (ie Tablets) (≥768px)

.col-md = Medium devices (ie laptops, or small desktops) (≥992px)

.col-lg = Large devices (ie Desktops) (≥1200px)*

This way through media queries you can allow to have only the right classes interpreted by the browser. If you surf that website from a tablet for example, you will see that the css properties which are actually applied in the browser are only the ones for the .col-sm class.

UPDATE

Also it's important to mention that those classes are used on a grid of 12 columns in total which is the grid system setup used by Bootstrap.

Therefore when you are using .col-sm-4 on an element it means that the element will take 4 columns out of 12 of the total width. Which logically means that if .col-sm-4 is used then only 3 elements per row can fit into the page on tablet.

For example, let's say we want to show some project cards for a portfolio:

<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3 card">
    <div class="card-wrapper">  
        <img src="img.jpg">
        <div class="overlay-text">
            <h5>Project 1</h5>
            <div class="labels">
                <label>Tech Stack</label>
                <h6>HTML5, CSS, JS</h6>
            </div>       
        </div>          
    </div> 
</div> 

Using class="col-xs-12 col-sm-6 col-md-4 col-lg-3" all at the same time is used to activate different CSS properties on an element when viewing the page on a particular device.

In other terms, if the user opens the site on a desktop, col-lg-3 means that a total of 4 cards will be displayed, when col-md-4 means a total of 3 cards, col-sm-6 a total of 2 cards and then col-xs-12 means on mobile only 1 card will with 100% width of the page.

Answer 2

All these tags, xs, sm, md and lg are the part of Bootstrap grid system. Bootstrap's grid system allows up to 12 columns across the page. Bootstrap's grid system is responsive, and the columns will re-arrange depending on the screen size: On a big screen it might look better with the content organised in three columns, but on a small screen it would be better if the content items were stacked on top of each other.

Tip: Remember that grid columns should add up to twelve for a row. More than that, columns will stack no matter the viewport.

Grid System Rules

Some Bootstrap grid system rules:

• Rows must be placed within a .container (fixed-width) or .container-fluid (full-width) for proper alignment and padding
• Use rows to create horizontal groups of columns
• Content should be placed within columns, and only columns may be immediate children of rows
• Predefined classes like .row and .col-sm-4 are available for quickly making grid layouts
• Columns create gutters (gaps between column content) via padding. That padding is offset in rows for the first and last column via negative margin on .rows
• Grid columns are created by specifying the number of 12 available columns you wish to span. For example, three equal columns would use three .col-sm-4

I would recommend going through this link and further linked pages for better understanding.

Answer 3

They added all those classes for one column grid in that template because those classes correspond to column extra small, small, medium and large devices.

.col-xs = *Extra small devices (ie Phones) (<768px)

.col-sm = Small devices (ie Tablets) (≥768px)

.col-md = Medium devices (ie laptops, or small desktops) (≥992px)

.col-lg = Large devices (ie Desktops) (≥1200px)*