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.
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-*
- 576pxcol-md-*
- 768pxcol-lg-*
- 992pxcol-xl-*
- 1200pxcol-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-*
- 576pxcol-md-*
- 768pxcol-lg-*
- 992pxcol-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
Define bootstrap col-md-** in ways other than inline
Bootstrap is only a framework; you're free to adapt however you would like. Simply apply the styling that Bootstrap gives to its selectors to your own, and you'll be able to modify to suit.
Bootstrap's col-
selectors simply apply different styling to elements at given breakpoints.
col-xs-
correlates tomax-width: 768px
(only affecting phones)..col-sm-
correlates tomin-width: 768px
..col-md-
correlates tomin-width: 992px
..col-lg-
correlates tomin-width: 1200px
.
Keep in mind that as of Bootstrap 3, they use mobile-first design, so the order of the media queries is very important (due to equal specificity)! Always start with the smallest media query, and work upwards to the largest media query (akin to the term 'mobile-first').
You can craft your own media queries to give the same effect as Bootstrap, while cutting down on the required HTML by combining various Bootstrap logic classes in your own classes:
/* Purely for visibilty */.div-alpha { height: 100px; border: 1px solid black;}
* { box-sizing: border-box;}
.row { margin-left: 15px; margin-right: 15px;}
.row::after, .row::before { display: table; content: " ";}
.row::after { clear: both; }
*::after, *::before { box-sizing: border-box;}
.div-alpha { float: left; position: relative; min-height: 1px; padding-right: 15px; padding-left: 15px;}
/* .col-xs- */@media (max-width: 768px) { .div-alpha { width: 100%; }}
/* .col-sm- */@media (min-width: 768px) { .div-alpha { width: 66.66666666%; }}
/* .col-md- */@media (min-width: 992px) { .div-alpha { width: 50%; }}
/* .col-lg- */@media (min-width: 1200px) { .div-alpha { width: 33.33333333%; }}
<div class="row"> <div class="div-alpha"></div> <div class="div-alpha"></div> <div class="div-alpha"></div> <div class="div-alpha"></div> <div class="div-alpha"></div></div>
Why use multiple col-[lg|md|sm|xs]- in bootstrap?
Because we can get it right for all devices for eg small devices , medium devices, small devices, xtra small devices
Xs - extra small device
Md - medium device
Sm- small device
`col-xs-*` not working in Bootstrap 4
col-xs-*
have been dropped in Bootstrap 4 in favor of col-*
.
Replace col-xs-12
with col-12
and it will work as expected.
Also note col-xs-offset-{n}
were replaced by offset-{n}
in v4.
Related Topics
Css3 Cross Browser Linear Gradient
When Will an ≪A≫ Tag Not Inherit Color Attribute of Parent Tag
Full-Screen Responsive Background Image
What Are the Default Top, Left, Botton or Right Values When Position:Absolute Is Used
CSS - Center Two Images in CSS Side by Side
Chrome Developer Tools: How to Find Out What Is Overriding a CSS Rule
Percentage Padding/Margin on Grid Item Ignored in Firefox
How to Center an Image If It's Wider Than Its Container
Css 3 Shape: "Inverse Circle" or "Cut Out Circle"
How to Remove the Outline Around Hyperlinks Images
Ie11 - Does a Polyfill/Script Exist For CSS Variables
Ie7 Z-Index Issue - Context Menu
Using Variables in Property Names in Less (Dynamic Properties/Property Name Interpolation)
How to Style the Resize Grabber of Textarea