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

css twitter-bootstrap twitter-bootstrap-3 grid
Bravo picture Bravo · Jun 12, 2014 · Viewed 493k times · Source

I am confused with the grid system in the new Bootstrap, particularly these classes:

col-lg-*
col-md-*
col-xs-*

(where * represents some number).

Can anyone please explain the following:

  1. How that number is aligning the grids?

Answer

Shawn Taylor picture Shawn Taylor · Jun 12, 2014

Applies to Bootstrap 3 only.

Ignoring the letters (xs, sm, md, lg) for now,

Related questions

Bootstrap grid with fixed wrapper - Prevent columns from stacking up

As the title says I'm trying to use Bootstrap 3 grid system with a fixed wrapper. But when I resize the Browser the columns stack up even if the wrapper stays the same size? BTW: I'm using version 3 so that I …

Read More
Center a column using Twitter Bootstrap 3

How do I center a div of one column size within the container (12 columns) in Twitter Bootstrap 3? I want a div, with a class .centered to be centered within the container. I may use a row if there are multiple …

Read More
vertical-align with Bootstrap 3

I'm using Twitter Bootstrap 3, and I have problems when I want to align vertically two div, for example — JSFiddle link: The grid system in Bootstrap uses float: left, not display:inline-block, so the property vertical-align doesn't work. I tried using …

Read More