---
title: "Differences between col-, col-sm-, col-md-, col-lg-, col-xl-"
description: "Differences between col-, col-sm-, col-md-, col-lg-, col-xl-"
author: "Ethan Karla"
published: 2021-07-28
updated: 2021-07-28
canonical: https://www.mindstick.com/forum/156595/differences-between-col-col-sm-col-md-col-lg-col-xl
category: "bootstrap"
tags: ["bootstrap", "responsive design"]
reading_time: 3 minutes
---
# Differences between col-, col-sm-, col-md-, col-lg-, col-xl-
What are the [differences](https://www.mindstick.com/articles/12918/cat-5e-vs-cat-6a-understanding-the-major-differences) between col-, col-sm-, col-md-, col-lg-, col-xl-?\
## Replies
### Reply by Anonymous User
While Bootstrap uses ems or rems to define most sizes, px is used for grid breakpoints and container widths. This is because the width of the viewport is in pixels and does not change with font size.
See how aspects of the Bootstrap Grid System work on multiple devices with a handy table :
| **Extra small** | **Max container width** | **Class prefix** | **# of columns** |
| --- | --- | --- | --- |
| <576px Small | None (auto) | .col- | 12 |
| ≥576px Medium | 540px | .col-sm- | 12 |
| ≥768px Large | 720px | .col-md- | 12 |
| ≥992px Extra large | 960px | .col-lg- | 12 |
| ≥1200px | 1140px | .col-xl- | 12 |
\
Here is the example for the responsive grid columns :
```
Hello, world!