Bootstrap Column Classes by Example

Question

The Bootstrap docs over at W3 Schools (which are otherwise flawless and amazing!) don't do a great job of explaining when to use the various column classes. They just describe these classes with:

xs (for phones - screens less than 768px wide)
sm (for tablets - screens equal to or greater than 768px wide)
md (for small laptops - screens equal to or greater than 992px wide)
lg (for laptops and desktops - screens equal to or greater than 1200px wide)

But then they never make it clear (at least to me) as to when I should be using sm vs xs, etc. To me its strange that Bootstrap even offers these classes since I thought the whole point was for Bootstrap to look uniform and consistent and then just automatically respond when the screen size changes...so making behavior flexible based on the user's device is not something I think a CSS framework would be exposing to the API developer...

Either way, what's the difference between this:

<div class="row">
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-4">.col-sm-4</div>
</div>

and this:

<div class="row">
  <div class="col-xs-4">.col-xs-4</div>
  <div class="col-md-4">.col-md-4</div>
  <div class="col-lg-4">.col-lg-4</div>
</div>

and this:

<div class="row">
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-lg-8">.col-lg-8</div>
</div>

? In other words, if all the column widths have to add up to 12 anyway, what's the difference between declaring them as xs vs sm vs md vs lg?

If you declare a class e.g. "lg" it would only be applied when you screen size is over 992px. — ochs.tobi, Mar 05 '18 at 11:07
I would stick with the [official Bootstrap docs](http://getbootstrap.com/). The W3 schools docs are erroneous and misleading in the grid explanation. And, `col-*` [*don't* need to add up to exactly 12](https://stackoverflow.com/questions/19732763/bootstrap-3-row-can-i-have-columns-add-up-to-more-then-12) in each `.row` — Carol Skelly, Mar 05 '18 at 12:30

score 2 · Accepted Answer · edited May 22 '18 at 20:27

When using Bootstrap, you can use different classes for different devices. Let's use the example below:

<div class="row">
    <div class="col-lg-4 col-md-6 col-sm-12">Column 1</div>
    <div class="col-lg-4 col-md-6 col-sm-12>Column 2</div>
    <div class="col-lg-4 col-sm-6 col-sm-12">Column 3</div>
</div>

While you are on a large device (screens equal to or greater than 1200px wide) your screen will be filled with 3 columns in a row.

When using a medium device (screens equal to or greater than 992px wide) your first 2 columns will be next to each other with a width of 50%. And the 3th column will be underneath it with a width of 100%.

When visiting the website using a smaller device (screens equal to or greater than 768px wide) all columns will have a width of 100%.

This way you can use one line of code, and declare the right sizes for all devices.

Thank you!!! **Finally**, someone who was able to explain this with a reasonable example, thank you so much, makes perfect sense!!! When SO allows me to give you the green check in a few mins, it's all yours! — smeeb, Mar 05 '18 at 11:09

score 0 · Answer 2 · answered Mar 05 '18 at 11:04

The purpose is to allow different layouts on different devices. For example, if you wanted to have a column be full width (12) on a mobile device but only take up a 3rd (4) of the screen on a desktop device.

As far as I am aware, they don't need to add up to 12, 12 is just what is considered to be one row.

see https://getbootstrap.com/docs/4.0/layout/grid/

Nadun Kulatunge · Answer 3 · 2018-03-05T11:44:26.503

Let's first start with numbers after xs,md,lg..

In bootstrap, these numbers represent columns. All the divs are divided into 12 columns.

col-md-6 spans 6 columns out of 12(Half of the screen width) and when it is col-md-12 it takes the entire width of the screen of a medium sized screen(md). (≥ 992px)

So, if you want three equal columns to span a div, write (for small screens)

<div class="row">
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-4">.col-sm-4</div>
  <div class="col-sm-4">.col-sm-4</div>
</div>

if you want three unequal columns to span that same width, you could write:

<div class="col-sm-2">Column 1</div>
<div class="col-sm-4">Column 2</div>
<div class="col-sm-6">Column 3</div>

In these examples the number of columns always add up to 12. In the above example 2+4+6=12

When it comes to xs,sm,md,lg 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)

Usually, we assign multiple classes for a single div, so it behaves according to the user's device screen size. For example

<div class="row">
  <div class="col-xs-6 col-sm-4">.col-xs-4</div>
  <div class="col-xs-6 col-sm-8">.col-md-4</div>
</div>

The above row with classes col-xs-6 and col-sm-4 will span half the screen for mobile screens< 768px and 1/3 of the screen size on tablets (sm)>=576px

score 0 · Answer 4 · answered Mar 05 '18 at 11:07

the difference between the classes are the different screen sizes. Take a look here: https://getbootstrap.com/docs/4.0/layout/grid/#grid-options

.col- = Extra small <576px
.col-sm- = Small >=576px
.col-md- = Medium >=768px
.col-lg- = Large >=992px
.col-xl- = Extra large >=1200px

Bootstrap Column Classes by Example

4 Answers4