CSS breakpoints used by popular CSS frameworks
Tags: css, webdev, design
Published: 2020-08-06 13:36:44

When using a CSS framework it often doesn't matter what devices people use. These frameworks come with their own set of CSS breakpoints with components that work well with those breakpoints.

Even though it's usually best to choose your own breakpoints based on your own content (one of our [ground rules for responsive design](https://polypane.app/blog/responsive-design-ground-rules/)) using the framework-provided ones can be a real time saver.

## Breakpoints for each CSS Framework
A huge time saver when building websites with these frameworks are Polypane's workspace presets. Workspaces give you a pre-built set of panes and settings so you get a flying start when working on a site.

Workspace presets are built-in for Bootstrap, Bulma, Material UI and Tailwind CSS. You can find downloads for the others that you can import directly in Polypane.

Which breakpoints are used by each CSS framework? Find the lists below.

* [Bootstrap v4](#bootstrap-v4)
* [Bootstrap v5](#bootstrap-v5)
* [Bulma](#bulma)
* [Foundation](#foundation)
* [Ionic](#ionic)
* [Material UI](#material-ui)
* [Materialize](#materialize)
* [Semantic UI](#semantic-ui)
* [Skeleton](#skeleton)
* [Tailwind CSS](#tailwind-css)
* [UIKit](#uikit)


### ![](https://polypane.app/blogs/css-frameworks/bootstrap-v4.svg) Bootstrap v4

| Name | Description                           | Minimum width |
| :--- | :------------------------------------ | ------------: |
| xs   | Extra small devices (portrait phones) |        _none_ |
| sm   | Small devices (landscape phones)      |         576px |
| md   | Medium devices (tablet)               |         768px |
| lg   | Large devices (desktops)              |         992px |
| xl   | Extra large devices (large desktops)  |        1200px |

**Built into Polypane**. Find more information in the [Bootstrap documentation](https://getbootstrap.com/docs/4.5/layout/overview/#responsive-breakpoints)


### ![](https://polypane.app/blogs/css-frameworks/bootstrap-v5.svg) Bootstrap v5

| Name | Description        | Minimum width |
| :--- | :---------------- | ------------: |
| --   | X-Small           |        _none_ |
| sm   | Small             |         576px |
| md   | Medium            |         768px |
| lg   | Large             |         992px |
| xl   | Extra large       |        1200px |
| xxl  | Extra extra large |        1400px |

[Download workspace file for Bootstrap v5](https://polypane.app/workspace-downloads/Bootstrapv5.ppws). Find more information in the [Bootstrap v5 documentation](https://v5.getbootstrap.com/docs/5.0/layout/breakpoints/)

### ![](https://polypane.app/blogs/css-frameworks/bulma.svg) Bulma

| Name       | Minimum width |
| :--------- | ------------: |
| mobile     |        _none_ |
| tablet     |         769px |
| desktop    |        1024px |
| widescreen |        1216px |
| fullhd     |        1408px |

**Built into Polypane.** Find more information in the [Bulma documentation](https://bulma.io/documentation/overview/responsiveness/#breakpoints)


### ![](https://polypane.app/blogs/css-frameworks/foundation.svg) Foundation

| Name                 | Minimum width |
| :------------------- | ------------: |
| Small                |        _none_ |
| Medium               |         640px |
| Large                |        1024px |
| Xlarge _(optional)_  |        1200px |
| Xxlarge _(optional)_ |        1440px |

[Download workspace file for Foundation](https://polypane.app/workspace-downloads/Foundation.ppws). Find more information in the [Foundation documentation](https://get.foundation/sites/docs/media-queries.html#default-media-queries)

### ![](https://polypane.app/blogs/css-frameworks/ionic.svg) Ionic

| Name | Minimum width |
| :--- | ------------: |
| xs   |        _none_ |
| sm   |         576px |
| md   |         768px |
| lg   |         992px |
| xl   |        1200px |

[Download workspace file for Ionic](https://polypane.app/workspace-downloads/Ionic.ppws). Find more information in the [Ionic documentation](https://ionicframework.com/docs/layout/css-utilities#ionic-breakpoints)


### ![](https://polypane.app/blogs/css-frameworks/materialui.svg) Material UI

| Name | Minimum width |
| :--- | ------------: |
| xs   |        _none_ |
| sm   |         600px |
| md   |         960px |
| lg   |        1280px |
| xl   |        1920px |

**Built into Polypane** Find more information in the [Material UI documentation](https://material-ui.com/customization/breakpoints/#default-breakpoints)


### ![](https://polypane.app/blogs/css-frameworks/materialize.svg) Materialize

| Name | Minimum width |
| :--- | ------------: |
| s    |        _none_ |
| m    |         600px |
| l    |         992px |
| xl   |        1200px |

[Download workspace file for Materialize](https://polypane.app/workspace-downloads/Materialize.ppws). Find more information in the [Materialize documentation](https://materializecss.com/grid.html#grid-responsive)


### ![](https://polypane.app/blogs/css-frameworks/semantic.png) Semantic UI

| Name          | Minimum width |
| :------------ | ------------: |
| mobile        |        _none_ |
| tablet        |         768px |
| small monitor |         992px |
| large monitor |        1200px |

[Download workspace file for Semantic UI](https://polypane.app/workspace-downloads/SemanticUI.ppws). Find more information in the [Semantic UI documentation](https://semantic-ui.com/elements/container.html)

### ![](https://polypane.app/blogs/css-frameworks/skeleton.png) Skeleton

| Name       | Minimum width |
| :--------- | ------------: |
| Mobile     |         440px |
| Phablet    |         550px |
| Tablet     |         750px |
| Desktop    |        1000px |
| Desktop HD |        1200px |

[Download workspace file for Skeleton](https://polypane.app/workspace-downloads/Skeleton.ppws). Find more information in the [Skeleton documentation](http://getskeleton.com/#queries)



###  ![](https://polypane.app/blogs/css-frameworks/tailwind.svg) Tailwind CSS

| Name | Minimum width |
| :--- | ------------: |
| sm   |         640px |
| md   |         768px |
| lg   |        1024px |
| xl   |        1280px |

**Built into Polypane.** Find more information in the [Tailwind CSS documentation](https://tailwindcss.com/docs/breakpoints/)


### ![](https://polypane.app/blogs/css-frameworks/uikit.svg) UIKit

| Name | Minimum width |
| :--- | ------------: |
| s    |         640px |
| m    |         960px |
| l    |        1200px |
| xl   |        1600px |

[Download workspace file for UIKit](https://polypane.app/workspace-downloads/UIKit.ppws). Find more information in the [UIKit documentation](https://getuikit.com/docs/visibility#responsive)

### Increasing your productivity as a web developer

Using a CSS framework is one of the [8 ways to increase your productivity as a web developer](https://dev.to/polypane/8-ways-to-increase-your-productivity-as-a-web-developer-3871). Check out the other 7 ways to improve your productivity!

### Ground rules for responsive design

Though CSS frameworks help you with a lot of choices, building a solid responsive design still requires you to pay attention to other parts of your page and design. Read about the [ground rules for responsive design](https://polypane.app/blog/responsive-design-ground-rules/) to created solid responsive websites.

### Missing a CSS framework?

Are we missing your favorite CSS framework? Comment and we'll add it to the list!