What is the difference among col-lg-*, col-md-* and col-sm-* in Bootstrap?
What is the difference among col-lg-* , col-md-* and col-sm-* in Twitter Bootstrap?
Answer
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 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
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