---
title: "What are the difference between col-, col-sm-, col-md-, col-lg-, col-xl-? Explain it with the help of an example."  
description: "What are the difference between col-, col-sm-, col-md-, col-lg-, col-xl-? Explain it with the help of an example."  
author: "Ethan Karla"  
published: 2021-07-28  
canonical: https://answers.mindstick.com/qa/93849/what-are-the-difference-between-col-col-sm-col-md-col-lg-col-xl-explain-it-with-the-help-of-an-example  
category: "web application"  
tags: ["web application development", "web development"]  
reading_time: 3 minutes  

---

# What are the difference between col-, col-sm-, col-md-, col-lg-, col-xl-? Explain it with the help of an example.

What are the [difference](https://yourviews.mindstick.com/story/5016/chia-vs-basil-seeds-what-s-the-difference) between col-, col-sm-, col-md-, col-lg-, col-xl-? [Explain](https://yourviews.mindstick.com/view/86025/content-created-for-humans-not-for-bots-explain-this-statement) it with the help of an example.

## Answers

### Answer by Ravi Vishwakarma

There are five classes used in Bootstrap Grid System.\

1. .col- (any device)
2. .col-xs (for phones)
3. .col-sm (for tablets)
4. .col-md (for desktops)
5. .col-lg (for larger desktops)
6. .col-xl ( for extra large device )

| ## Grid System | **Extra-small <576px** | **Small ≥576px** | **Medium ≥768px** | **Large ≥992px** | **Extra large ≥1200px** |
| --- | --- | --- | --- | --- | --- |
| **Max container width** | **None (auto)** | **540px** | **720px** | **960px** | **1140px** |
| **Class prefix** | **.col-** | **.col-sm-** | **.col-md-** | **.col-lg-** | **.col-xl-** |

## .col

## If we use the .col class in bootstrap it will always create in the column grid.

```
<div class='container'>
  <div class='row text-white'>
    <div class='col bg-primary'>.col</div>
    <div class='col bg-secondary'>.col</div>
    <div class='col bg-primary'>.col</div>
  </div>
</div>
```

## .col-sm-

If we use the .col-sm class in bootstrap. then window width size is ≥576px then it converts in the column and if the width is less than <576 then it converts in the row.

```
<div class='container'>  <div class='row text-white'>
    <div class='col-sm bg-primary'>.col</div>
    <div class='col-sm bg-secondary'>.col</div>
    <div class='col-sm bg-primary'>.col</div>  </div>
</div>
```

## .col-md-

### If we use the .col-md class in bootstrap. then window width size is ≥768px then it converts in the column and if the width is less than <768px then it converts in the row.

```
<div class='container'>
  <div class='row text-white'>
    <div class='col-md bg-primary'>.col</div>
    <div class='col-md bg-secondary'>.col</div>
    <div class='col-md bg-primary'>.col</div>
  </div>
</div>
```

## .col-lg-

If we use the .col-lg class in bootstrap. then window width size is ≥992px then it converts in the column and if the width is less than <992px then it converts in the row.

```
<div class='container'>
  <div class='row text-white'>
    <div class='col-lg bg-primary'>.col</div>
    <div class='col-lg bg-secondary'>.col</div>
    <div class='col-lg bg-primary'>.col</div>
  </div>
</div>
```

## .col-xl-

If we use the .col-xl class in bootstrap. then window width size is ≥1200px then it converts in the column and if the width is less than <1200px then it converts in the row.

```
<div class='container'>
  <div class='row text-white'>
    <div class='col-xl bg-primary'>.col</div>
    <div class='col-xl bg-secondary'>.col</div>
    <div class='col-xl bg-primary'>.col</div>
  </div>
</div>
```

\


---

Original Source: https://answers.mindstick.com/qa/93849/what-are-the-difference-between-col-col-sm-col-md-col-lg-col-xl-explain-it-with-the-help-of-an-example

Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.