# CSS breakpoints used by popular CSS frameworks

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.

Instead of configuring Polypane to show devices, you can configure it to show the breakpoints supported by the frameworks.

Polypane comes with [workspace presets](/docs/workspaces/) for [Bootstrap v5](#bootstrap-v5), [Materialize](#materialize), [Bulma](#bulma) and [Tailwind CSS](#tailwind-css). Adding other ones is as easy as downloading and importing a workspace file.

## Breakpoints for each CSS Framework

If you're using Polypane, You can create panes from the exact breakpoints and get the complete overview in a single browser, **something that no other browser can do.** Which breakpoints are used by each CSS framework? Find the lists below.

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

[Open in Polypane](polypane://polypane.app/exported-panes/?panesizes=%5B%7B%22width%22%3A320%2C%22title%22%3A%22--%22%7D%2C%7B%22width%22%3A576%2C%22title%22%3A%22sm%22%7D%2C%7B%22width%22%3A768%2C%22title%22%3A%22md%22%7D%2C%7B%22width%22%3A992%2C%22title%22%3A%22lg%22%7D%2C%7B%22width%22%3A1200%2C%22title%22%3A%22xl%22%7D%2C%7B%22width%22%3A1400%2C%22title%22%3A%22xxl%22%7D%5D) _Built into Polypane_

*   \-- 
    
*   sm_576px_
    
*   md_768px_
    
*   lg_992px_
    
*   xl_1200px_
    
*   xxl_1400px_
    

| 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 |

Find more information in the [Bootstrap v5 documentation](https://v5.getbootstrap.com/docs/5.0/layout/breakpoints/)

### ![](/blogs/css-frameworks/bulma.svg) Bulma

[Open in Polypane](polypane://polypane.app/exported-panes/?panesizes=%5B%7B%22width%22%3A414%2C%22title%22%3A%22mobile%22%7D%2C%7B%22width%22%3A769%2C%22title%22%3A%22tablet%22%7D%2C%7B%22width%22%3A1024%2C%22title%22%3A%22desktop%22%7D%2C%7B%22width%22%3A1216%2C%22title%22%3A%22widescreen%22%7D%2C%7B%22width%22%3A1408%2C%22title%22%3A%22fullhd%22%7D%5D) _Built into Polypane_

*   mobile 
    
*   tablet_769px_
    
*   desktop_1024px_
    
*   widescreen_1216px_
    
*   fullhd_1408px_
    

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

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

### ![Chakra UI](/blogs/css-frameworks/chakra.svg)

[Open in Polypane](polypane://polypane.app/exported-panes/?panesizes=%5B%7B%22width%22%3A375%2C%22title%22%3A%22below%20sm%22%7D%2C%7B%22width%22%3A480%2C%22title%22%3A%22sm%22%7D%2C%7B%22width%22%3A768%2C%22title%22%3A%22md%22%7D%2C%7B%22width%22%3A992%2C%22title%22%3A%22lg%22%7D%2C%7B%22width%22%3A1280%2C%22title%22%3A%22xl%22%7D%2C%7B%22width%22%3A1472%2C%22title%22%3A%222xl%22%7D%5D) [Download Workspace file](/workspace-downloads/ChakraUI.ppws)

*   below sm 
    
*   sm_480px_
    
*   md_768px_
    
*   lg_992px_
    
*   xl_1280px_
    
*   2xl_1472px_
    

| Name | Minimum width |
| :-- | --: |
| _below sm_ | _none_ |
| sm | 30em |
| md | 48em |
| lg | 62em |
| xl | 80em |
| 2xl | 96em |

Find more information in the [Chakra UI documentation](https://chakra-ui.com/docs/styled-system/features/responsive-styles)

### ![](/blogs/css-frameworks/foundation.svg) Foundation

[Open in Polypane](polypane://polypane.app/exported-panes/?panesizes=%5B%7B%22width%22%3A414%2C%22title%22%3A%22Small%22%7D%2C%7B%22width%22%3A640%2C%22title%22%3A%22Medium%22%7D%2C%7B%22width%22%3A1024%2C%22title%22%3A%22Large%22%7D%2C%7B%22width%22%3A1200%2C%22title%22%3A%22Xlarge%22%7D%2C%7B%22width%22%3A1440%2C%22title%22%3A%22Xxlarge%22%7D%5D) [Download Workspace file](/workspace-downloads/Foundation.ppws)

*   Small 
    
*   Medium_640px_
    
*   Large_1024px_
    
*   Xlarge_1200px_
    
*   Xxlarge_1440px_
    

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

Find more information in the [Foundation documentation](https://get.foundation/sites/docs/media-queries.html#default-media-queries)

### ![](/blogs/css-frameworks/halfmoon.svg) Halfmoon

[Open in Polypane](polypane://polypane.app/exported-panes/?panesizes=%5B%7B%22width%22%3A540%2C%22title%22%3A%22sm%22%7D%2C%7B%22width%22%3A720%2C%22title%22%3A%22md%22%7D%2C%7B%22width%22%3A960%2C%22title%22%3A%22lg%22%7D%2C%7B%22width%22%3A1140%2C%22title%22%3A%22xl%22%7D%5D) [Download Workspace file](/workspace-downloads/Halfmoon.ppws)

*   sm_540px_
    
*   md_720px_
    
*   lg_960px_
    
*   xl_1140px_
    

| Name | Minimum width |
| :-- | --: |
| sm | 540px |
| md | 720px |
| lg | 960px |
| xl | 1140px |

Find more information in the [Halfmoon documentation](https://www.gethalfmoon.com/docs/containers/)

### ![](/blogs/css-frameworks/ionic.svg) Ionic

[Open in Polypane](polypane://polypane.app/exported-panes/?panesizes=%5B%7B%22width%22%3A424%2C%22title%22%3A%22xs%22%7D%2C%7B%22width%22%3A576%2C%22title%22%3A%22sm%22%7D%2C%7B%22width%22%3A768%2C%22title%22%3A%22md%22%7D%2C%7B%22width%22%3A992%2C%22title%22%3A%22lg%22%7D%2C%7B%22width%22%3A1200%2C%22title%22%3A%22xl%22%7D%5D) [Download Workspace file](/workspace-downloads/Ionic.ppws)

*   xs 
    
*   sm_576px_
    
*   md_768px_
    
*   lg_992px_
    
*   xl_1200px_
    

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

Find more information in the [Ionic documentation](https://ionicframework.com/docs/layout/css-utilities#ionic-breakpoints)

### ![](/blogs/css-frameworks/mantine.svg) Mantine

[Open in Polypane](polypane://polypane.app/exported-panes/?panesizes=%5B%7B%22width%22%3A500%2C%22title%22%3A%22xs%22%7D%2C%7B%22width%22%3A800%2C%22title%22%3A%22sm%22%7D%2C%7B%22width%22%3A1000%2C%22title%22%3A%22md%22%7D%2C%7B%22width%22%3A1200%2C%22title%22%3A%22lg%22%7D%2C%7B%22width%22%3A1400%2C%22title%22%3A%22xl%22%7D%5D) [Download Workspace file](/workspace-downloads/Mantine.ppws)

*   xs_500px_
    
*   sm_800px_
    
*   md_1000px_
    
*   lg_1200px_
    
*   xl_1400px_
    

| Name | Minimum width |
| :-- | --: |
| xs | 500px |
| sm | 800px |
| md | 1000px |
| lg | 1200px |
| xl | 1400px |

Find more information in the [Mantine documentation](https://mantine.dev/styles/responsive/)

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

[Open in Polypane](polypane://polypane.app/exported-panes/?panesizes=%5B%7B%22width%22%3A320%2C%22title%22%3A%22xs%22%7D%2C%7B%22width%22%3A600%2C%22title%22%3A%22sm%22%7D%2C%7B%22width%22%3A960%2C%22title%22%3A%22md%22%7D%2C%7B%22width%22%3A1280%2C%22title%22%3A%22lg%22%7D%2C%7B%22width%22%3A1920%2C%22title%22%3A%22xl%22%7D%5D) _Built into Polypane_

*   xs 
    
*   sm_600px_
    
*   md_960px_
    
*   lg_1280px_
    
*   xl_1920px_
    

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

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

### ![](/blogs/css-frameworks/materialize.svg) Materialize

[Open in Polypane](polypane://polypane.app/exported-panes/?panesizes=%5B%7B%22width%22%3A320%2C%22title%22%3A%22s%22%7D%2C%7B%22width%22%3A600%2C%22title%22%3A%22m%22%7D%2C%7B%22width%22%3A992%2C%22title%22%3A%22l%22%7D%2C%7B%22width%22%3A1200%2C%22title%22%3A%22xl%22%7D%5D) [Download Workspace file](/workspace-downloads/Materialize.ppws)

*   s 
    
*   m_600px_
    
*   l_992px_
    
*   xl_1200px_
    

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

Find more information in the [Materialize documentation](https://materializecss.com/grid.html#grid-responsive)

### ![](/blogs/css-frameworks/openprops.svg) Open Props

[Open in Polypane](polypane://polypane.app/exported-panes/?panesizes=%5B%7B%22width%22%3A240%2C%22title%22%3A%22xxs%22%7D%2C%7B%22width%22%3A360%2C%22title%22%3A%22xs%22%7D%2C%7B%22width%22%3A480%2C%22title%22%3A%22sm%22%7D%2C%7B%22width%22%3A768%2C%22title%22%3A%22md%22%7D%2C%7B%22width%22%3A1024%2C%22title%22%3A%22lg%22%7D%2C%7B%22width%22%3A1400%2C%22title%22%3A%22xl%22%7D%2C%7B%22width%22%3A1920%2C%22title%22%3A%22xxl%22%7D%5D) [Download Workspace file](/workspace-downloads/Open-props.ppws)

*   xxs 
    
*   xs_360px_
    
*   sm_480px_
    
*   md_768px_
    
*   lg_1024px_
    
*   xl_1400px_
    
*   xxl_1920px_
    

| Name | Minimum width |
| :-- | --: |
| xxs | 240px |
| xs | 360px |
| sm | 480px |
| md | 768px |
| lg | 1024px |
| xl | 1400px |
| xxl | 1920px |

Find more information in the [Open Props documentation](https://open-props.style/#media-queries)

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

[Open in Polypane](polypane://polypane.app/exported-panes/?panesizes=%5B%7B%22width%22%3A414%2C%22title%22%3A%22mobile%22%7D%2C%7B%22width%22%3A768%2C%22title%22%3A%22tablet%22%7D%2C%7B%22width%22%3A992%2C%22title%22%3A%22small%20monitor%22%7D%2C%7B%22width%22%3A1200%2C%22title%22%3A%22large%20monitor%22%7D%5D) [Download Workspace file](/workspace-downloads/SemanticUI.ppws)

*   mobile 
    
*   tablet_768px_
    
*   small monitor_992px_
    
*   large monitor_1200px_
    

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

Find more information in the [Semantic UI documentation](https://semantic-ui.com/elements/container.html)

### ![](/blogs/css-frameworks/skeleton.png) Skeleton

[Open in Polypane](polypane://polypane.app/exported-panes/?panesizes=%5B%7B%22width%22%3A440%2C%22title%22%3A%22Mobile%22%7D%2C%7B%22width%22%3A550%2C%22title%22%3A%22Phablet%22%7D%2C%7B%22width%22%3A750%2C%22title%22%3A%22Tablet%22%7D%2C%7B%22width%22%3A1000%2C%22title%22%3A%22Desktop%22%7D%2C%7B%22width%22%3A1200%2C%22title%22%3A%22Desktop%20HD%22%7D%5D) [Download Workspace file](/workspace-downloads/Skeleton.ppws)

*   Mobile_440px_
    
*   Phablet_550px_
    
*   Tablet_750px_
    
*   Desktop_1000px_
    
*   Desktop HD_1200px_
    

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

Find more information in the [Skeleton documentation](http://getskeleton.com/#queries)

### ![](/blogs/css-frameworks/tailwind.svg) Tailwind CSS (3.0)

[Open in Polypane](polypane://polypane.app/exported-panes/?panesizes=%5B%7B%22width%22%3A640%2C%22title%22%3A%22sm%22%7D%2C%7B%22width%22%3A768%2C%22title%22%3A%22md%22%7D%2C%7B%22width%22%3A1024%2C%22title%22%3A%22lg%22%7D%2C%7B%22width%22%3A1280%2C%22title%22%3A%22xl%22%7D%2C%7B%22width%22%3A1536%2C%22title%22%3A%222xl%22%7D%5D) _Built into Polypane_

*   sm_640px_
    
*   md_768px_
    
*   lg_1024px_
    
*   xl_1280px_
    
*   2xl_1536px_
    

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

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

### ![](/blogs/css-frameworks/uikit.svg) UIKit

[Open in Polypane](polypane://polypane.app/exported-panes/?panesizes=%5B%7B%22width%22%3A640%2C%22title%22%3A%22s%22%7D%2C%7B%22width%22%3A960%2C%22title%22%3A%22m%22%7D%2C%7B%22width%22%3A1200%2C%22title%22%3A%22l%22%7D%2C%7B%22width%22%3A1600%2C%22title%22%3A%22xl%22%7D%5D) [Download Workspace file](/workspace-downloads/UIKit.ppws)

*   s_640px_
    
*   m_960px_
    
*   l_1200px_
    
*   xl_1600px_
    

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

Find more information in the [UIKit documentation](https://getuikit.com/docs/visibility#responsive)

### ![](/blogs/css-frameworks/webflow.svg) Webflow

[Open in Polypane](polypane://polypane.app/exported-panes/?panesizes=%5B%7B%22width%22%3A478%2C%22title%22%3A%22Mobile%20portrait%20and%20below%22%7D%2C%7B%22width%22%3A767%2C%22title%22%3A%22Mobile%20landscape%20and%20below%22%7D%2C%7B%22width%22%3A991%2C%22title%22%3A%22Tablet%20and%20below%22%7D%2C%7B%22width%22%3A1024%2C%22title%22%3A%22Desktop%20\(base\)%22%7D%2C%7B%22width%22%3A1280%2C%22title%22%3A%221280px%20and%20above%22%7D%2C%7B%22width%22%3A1440%2C%22title%22%3A%221280px%20and%20above%22%7D%2C%7B%22width%22%3A1920%2C%22title%22%3A%221280px%20and%20above%22%7D%5D) [Download Workspace file](/workspace-downloads/webflow.ppws)

*   Mobile portrait and below_478px_
    
*   Mobile landscape and below_767px_
    
*   Tablet and below_991px_
    
*   Desktop (base)_1024px_
    
*   1280px and above_1280px_
    
*   1280px and above_1440px_
    
*   1280px and above_1920px_
    

| Name | Minimum width |
| :-- | --: |
| Mobile portrait and below | 478px |
| Mobile landscape and below | 767px |
| Tablet and below | 991px |
| Desktop (base) | 1024px |
| 1280px and above | 1280px |
| 1280px and above | 1440px |
| 1280px and above | 1920px |

Find more information in the [Webflow documentation](https://university.webflow.com/lesson/intro-to-breakpoints)

### ![](/blogs/css-frameworks/angularmaterial.svg) Angular Material

[Open in Polypane](polypane://polypane.app/exported-panes/?panesizes=%5B%7B%22width%22%3A600%2C%22title%22%3A%22XSmall%22%7D%2C%7B%22width%22%3A960%2C%22title%22%3A%22Small%22%7D%2C%7B%22width%22%3A1280%2C%22title%22%3A%22Medium%22%7D%2C%7B%22width%22%3A1920%2C%22title%22%3A%22Large%22%7D%2C%7B%22width%22%3A2560%2C%22title%22%3A%22XLarge%22%7D%5D) [Download Workspace file](/workspace-downloads/Angular-Material.ppws)

*   XSmall_600px_
    
*   Small_960px_
    
*   Medium_1280px_
    
*   Large_1920px_
    
*   XLarge_2560px_
    

| Name | Minimum width |
| :-- | --: |
| XSmall | 600px |
| Small | 960px |
| Medium | 1280px |
| Large | 1920px |
| XLarge | 2560px |

Find more information in the [Angular Material documentation](https://material.angular.dev/cdk/layout/overview#predefined-breakpoints)

## 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](/blog/ways-to-increase-your-productivity-as-a-web-developer/). 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](/blog/responsive-design-ground-rules/) to created solid responsive websites.

## Missing a CSS framework?

Are we missing your favorite CSS framework? [Reach out](/support/) and we'll add it to the list!

---

Polypane is the browser built for developers and designers — try it at https://polypane.app.