What Are the Difference Between Col-Lg and Col-Md in Bootstrap3

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

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.

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

Updated 2020...

Bootstrap 5

In Bootstrap 5 (alpha) there is a new -xxl- size:

col-* - 0 (xs)

col-sm-* - 576px

col-md-* - 768px

col-lg-* - 992px

col-xl-* - 1200px

col-xxl-* - 1400px

Bootstrap 5 Grid Demo

Bootstrap 4

In Bootstrap 4 there is a new -xl- size, see this demo. Also the -xs- infix has been removed, so smallest columns are simply col-1, col-2.. col-12, etc..

col-* - 0 (xs)

col-sm-* - 576px

col-md-* - 768px

col-lg-* - 992px

col-xl-* - 1200px

Bootstrap 4 Grid Demo

Additionally, Bootstrap 4 includes new auto-layout columns. These also have responsive breakpoints (col, col-sm, col-md, etc..), but don't have defined % widths. Therefore, the auto-layout columns fill equal width across the row.

Bootstrap 3

The Bootstrap 3 grid comes in 4 tiers (or "breakpoints")...

Extra small (for smartphones .col-xs-*)
Small (for tablets .col-sm-*)
Medium (for laptops .col-md-*)
Large (for laptops/desktops .col-lg-*).

These grid sizes enable you to control grid behavior on different widths. The different tiers are controlled by CSS media queries.

So in Bootstrap's 12-column grid...

col-sm-3 is 3 of 12 columns wide (25%) on a typical small device width (> 768 pixels)

col-md-3 is 3 of 12 columns wide (25%) on a typical medium device width (> 992 pixels)

The smaller tier (xs, sm or md) also defines the size for larger screen widths. So, for the same size column on all tiers, just set the width for the smallest viewport...

<div class="col-lg-3 col-md-3 col-sm-3">..</div> is the same as,

<div class="col-sm-3">..</div>

Larger tiers are implied. Because col-sm-3 means 3 units on sm-and-up, unless specifically overridden by a larger tier that uses a different size.

xs(default) > overridden by sm > overridden by md > overridden by lg

Combine the classes to use change column widths on different grid sizes. This creates a responsive layout.

<div class="col-md-3 col-sm-6">..</div>

The sm, md and lg grids will all "stack" vertically on screens/viewports less than 768 pixels. This is where the xs grid fits in. Columns that use the col-xs-* classes will not stack vertically, and continue to scale down on the smallest screens.

Resize your browser using this demo and you'll see the grid scaling effects.

This article explains more about how the Bootstrap grid

Meaning of numbers in col-md-4, col-xs-1, col-lg-2 in Bootstrap

Applies to Bootstrap 3 only.

Ignoring the letters (xs, sm, md, lg) for now, I'll start with just the numbers...

the numbers (1-12) represent a portion of the total width of any div
all divs are divided into 12 columns
so, col-*-6 spans 6 of 12 columns (half the width), col-*-12 spans 12 of 12 columns (the entire width), etc

So, if you want two equal columns to span a div, write

<div class="col-xs-6">Column 1</div>
<div class="col-xs-6">Column 2</div>

Or, if you want three unequal columns to span that same width, you could write:

<div class="col-xs-2">Column 1</div>
<div class="col-xs-6">Column 2</div>
<div class="col-xs-4">Column 3</div>

You'll notice the # of columns always add up to 12. It can be less than twelve, but beware if more than 12, as your offending divs will bump down to the next row (not .row, which is another story altogether).

You can also nest columns within columns, (best with a .row wrapper around them) such as:

<div class="col-xs-6">
  <div class="row">
    <div class="col-xs-4">Column 1-a</div>
    <div class="col-xs-8">Column 1-b</div>
  </div>
</div>
<div class="col-xs-6">
  <div class="row">
    <div class="col-xs-2">Column 2-a</div>
    <div class="col-xs-10">Column 2-b</div>
  </div>
</div>

Each set of nested divs also span up to 12 columns of their parent div. NOTE: Since each .col class has 15px padding on either side, you should usually wrap nested columns in a .row, which has -15px margins. This avoids duplicating the padding and keeps the content lined up between nested and non-nested col classes.

-- You didn't specifically ask about the xs, sm, md, lg usage, but they go hand-in-hand so I can't help but touch on it...

In short, they are used to define at which screen size that class should apply:

xs = extra small screens (mobile phones)
sm = small screens (tablets)
md = medium screens (some desktops)
lg = large screens (remaining desktops)

Read the "Grid
Options"
chapter from the official Bootstrap documentation for more details.

You should usually classify a div using multiple column classes so it behaves differently depending on the screen size (this is the heart of what makes bootstrap responsive). eg: a div with classes col-xs-6 and col-sm-4 will span half the screen on the mobile phone (xs) and 1/3 of the screen on tablets(sm).

<div class="col-xs-6 col-sm-4">Column 1</div> <!-- 1/2 width on mobile, 1/3 screen on tablet) -->
<div class="col-xs-6 col-sm-8">Column 2</div> <!-- 1/2 width on mobile, 2/3 width on tablet -->

NOTE: as per comment below, grid classes for a given screen size apply to that screen size and larger unless another declaration overrides it (i.e. col-xs-6 col-md-4 spans 6 columns on xs and sm, and 4 columns on md and lg, even though sm and lg were never explicitly declared)

NOTE: if you don't define xs, it will default to col-xs-12 (i.e. col-sm-6 is half the width on sm, md and lg screens, but full-width on xs screens).

NOTE: it's actually totally fine if your .row includes more than 12 cols, as long as you are aware of how they will react. --This is a contentious issue, and not everyone agrees.

Difference between column type in bootstrap

These different column types are used for making a website responsive. All the CSS which responds to screen sizes greater than 1200px has the prefix lg (large) to it, screen sizes ranging from 992px to 1199px has the prefix md (medium), similarly sm (small) is for screen sizes 768px to 991px. Anything lesser than 768px falls under xs (extra small) category. Now if you have the code like this:

<div class="col-md-5 col-lg-4 col-sm-6 col-xs-12"></div>
<div class="col-md-5 col-lg-4 col-sm-6 col-xs-12"></div>
<div class="col-md-5 col-lg-4 col-sm-6 col-xs-12"></div>

In this case you will have 3 div's visible on a large screen, 2 div's on a medium screen, 2 on a smaller screen and 1 div on an extra small screen.
Each of the column type has been defined in a separate media query. So only one of the column type affects the div's width.

What is the difference between the col-md-4 class and the col-xs-4 class in BootStrap template?

Basically,

it will define the behavior of the columns in xl (extra large screens) and in md (medium screens);

Ex: when the screen is xl the columns will have the proportion where 12 is the sum of the columns, if the screen get smaller the columns will break. however, if you setup with md you can get the screen even smaller but the columns will no break until the dimensions:

xs (for phones)
sm (for tablets)
md (for desktops)
lg (for larger desktops)

reference:
https://getbootstrap.com/examples/grid/

Bootstrap 3 change Col-Nesting in MD/LG

Just swap the 2nd and 3rd div and add .pull-right like this

<div class="container">   <div class="row">
    <div class="col-md-12 col-lg-9 text-center">
      <h4>col-md-12 col-lg-9</h4>
    </div>
    <div class="col-sm-6 col-md-3 col-lg-3 text-center pull-right">
      <h4>col-sm-6 col-md-3 col-lg-3</h4>
      .<br>
      .<br>
      .<br>
      .<br>
      .<br>
      .<br>
      .<br>
      .<br>
    </div>
    <div class="col-sm-6 col-md-9 col-lg-9 text-center">
      <h4>col-sm-6 col-md-9 col-lg-9</h4>
      .<br>
      .<br>
      .<br>
      .<br>
    </div>    </div> </div>

Check demo

For clearing float, check clearfix

Understanding the grid classes ( col-sm-# and col-lg-# ) in Bootstrap 3

[UPDATE BELOW]

I took another look at the docs and it appears I overlooked a section which talks specifically about this.

The answers to my questions:

Yes, they are meant to apply only to specific ranges, rather than everything above a certain width.
Yes, the classes are meant to be combined.
It appears that this is appropriate in certain cases but not others because the col-# classes are basically equivalent to col-xsm-# or, widths above 0px (all widths).

Other than reading the docs too quickly, I think I was confused because I came into Bootstrap 3 with a "Bootstrap 2 mentality". Specifically, I was using the (optional) responsive styles (bootstrap-responsive.css) in v2 and v3 is quite different (for the better IMO).

UPDATE for stable release:

This question was originally written when RC1 was out. They made some major changes in RC2 so for anyone reading this now, not everything mentioned above still applies.

As of when I'm currently writing this, the col-*-# classes DO seem to apply upwards. So for example, if you want an element to be 12 columns (full width) for phones, but two 6 columns (half page) for tablets and up, you would do something like this:

<div class="col-xs-12 col-sm-6"> ... //NO NEED FOR col-md-6 or col-lg-6

(They also added an additional xs break point after this question was written.)

What Are the Difference Between Col-Lg and Col-Md in Bootstrap3