Difference between col-lg and col-md and col-xs

Nov 10 2014

Difference between col-lg and col-md and col-xs


The Bootstrap 3 grid comes in 4 sizes. Tiny (for smartphones .col-xs-), Small (for tablets .col-sm-), Medium (for laptops .col-md-) and Large (for laptops/desktops .col-lg-). The 3 grid sizes enable you to control grid behavior on different devices like desktop, laptops, tablet, smartphone, etc..,

List of sizes:

  1. Extra small devices Phones (<768px)
  2. Small devices Tablets (≥768px)
  3. Medium devices Desktops (≥992px)
  4. Large devices Desktops (≥1200px)

Syntax of a Bootstrap column class name:

. {prefix} - {when to collapse} - {number of grid columns to occupy}

  1. The prefix in the above is col, indicating that the element is a part of the Bootstrap column system.
  2. The when to collapse option ( xs, sm, md or lg) indicate at what width the columns should stop being displayed inline and collapse to be positioned above each other instead.
  3. The number of grid columns to occupy indicates how large portion of the whole row the classable element should occupy. A whole row is made up of a total of 12 columns in Bootstrap.

The collapsing widths are currently defined as follows:

  1.     xs - the grid is horizontal at all times, the container is styled as width: auto, meaning it will take up all the space currently available.
  2.     sm - the grid is horizontal past a breaking point of 750px of width.
  3.     md - ibid (as previously), but from 970px.
  4.     lg - ibid, but from 1170px.

Leave a Reply