What is the difference among col-lg-*
, col-md-*
and col-sm-*
in Twitter Bootstrap?
Css – the difference among col-lg-*, col-md-* and col-sm-* in Bootstrap
bootstrap-4cssresponsive-designtwitter-bootstraptwitter-bootstrap-3
Related Topic
- Css – What’s the difference between SCSS and Sass
- Css – Font scaling based on width of container
- Css – Center a column using Twitter Bootstrap 3
- Css – Change navbar color in Twitter Bootstrap
- Css – How to make Bootstrap columns all the same height
- Html – sr-only in Bootstrap 3
- Html – vertical-align with Bootstrap 3
- Twitter-bootstrap – the difference between Bootstrap .container and .container-fluid classes
Best Answer
Updated 2020...
Bootstrap 5
In Bootstrap 5 (alpha) there is a new
-xxl-
size:col-*
- 0 (xs)col-sm-*
- 576pxcol-md-*
- 768pxcol-lg-*
- 992pxcol-xl-*
- 1200pxcol-xxl-*
- 1400pxBootstrap 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 simplycol-1
,col-2
..col-12
, etc..col-*
- 0 (xs)col-sm-*
- 576pxcol-md-*
- 768pxcol-lg-*
- 992pxcol-xl-*
- 1200pxBootstrap 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")...
.col-xs-*
).col-sm-*
).col-md-*
).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
ormd
) 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
means3 units on sm-and-up
, unless specifically overridden by a larger tier that uses a different size.xs
(default) > overridden bysm
> overridden bymd
> overridden bylg
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
andlg
grids will all "stack" vertically on screens/viewports less than 768 pixels. This is where thexs
grid fits in. Columns that use thecol-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