Skip to contentSkip to footer

If you want to be kept up to date with new articles, CSS resources and tools, join our newsletter.

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 for Bootstrap v5, Materialize, Bulma and 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.

Bootstrap v5

Open in Polypane Built into Polypane
  • -- 
  • sm576px
  • md768px
  • lg992px
  • xl1200px
  • xxl1400px
NameDescriptionMinimum width
--X-Smallnone
smSmall576px
mdMedium768px
lgLarge992px
xlExtra large1200px
xxlExtra extra large1400px

Find more information in the Bootstrap v5 documentation

Bulma

Open in Polypane Built into Polypane
  • mobile 
  • tablet769px
  • desktop1024px
  • widescreen1216px
  • fullhd1408px
NameMinimum width
mobilenone
tablet769px
desktop1024px
widescreen1216px
fullhd1408px

Find more information in the Bulma documentation

Chakra UI

  • below sm 
  • sm480px
  • md768px
  • lg992px
  • xl1280px
  • 2xl1472px
NameMinimum width
below smnone
sm30em
md48em
lg62em
xl80em
2xl96em

Find more information in the Chakra UI documentation

Foundation

  • Small 
  • Medium640px
  • Large1024px
  • Xlarge1200px
  • Xxlarge1440px
NameMinimum width
Smallnone
Medium640px
Large1024px
Xlarge (optional)1200px
Xxlarge (optional)1440px

Find more information in the Foundation documentation

Halfmoon

  • sm540px
  • md720px
  • lg960px
  • xl1140px
NameMinimum width
sm540px
md720px
lg960px
xl1140px

Find more information in the Halfmoon documentation

Ionic

  • xs 
  • sm576px
  • md768px
  • lg992px
  • xl1200px
NameMinimum width
xsnone
sm576px
md768px
lg992px
xl1200px

Find more information in the Ionic documentation

Mantine

  • xs500px
  • sm800px
  • md1000px
  • lg1200px
  • xl1400px
NameMinimum width
xs500px
sm800px
md1000px
lg1200px
xl1400px

Find more information in the Mantine documentation

Material UI

Open in Polypane Built into Polypane
  • xs 
  • sm600px
  • md960px
  • lg1280px
  • xl1920px
NameMinimum width
xsnone
sm600px
md960px
lg1280px
xl1920px

Find more information in the Material UI documentation

Materialize

NameMinimum width
snone
m600px
l992px
xl1200px

Find more information in the Materialize documentation

Open Props

  • xxs 
  • xs360px
  • sm480px
  • md768px
  • lg1024px
  • xl1400px
  • xxl1920px
NameMinimum width
xxs240px
xs360px
sm480px
md768px
lg1024px
xl1400px
xxl1920px

Find more information in the Open Props documentation

Semantic UI

  • mobile 
  • tablet768px
  • small monitor992px
  • large monitor1200px
NameMinimum width
mobilenone
tablet768px
small monitor992px
large monitor1200px

Find more information in the Semantic UI documentation

Skeleton

  • Mobile440px
  • Phablet550px
  • Tablet750px
  • Desktop1000px
  • Desktop HD1200px
NameMinimum width
Mobile440px
Phablet550px
Tablet750px
Desktop1000px
Desktop HD1200px

Find more information in the Skeleton documentation

Tailwind CSS (3.0)

Open in Polypane Built into Polypane
  • sm640px
  • md768px
  • lg1024px
  • xl1280px
  • 2xl1536px
NameMinimum width
sm640px
md768px
lg1024px
xl1280px
2xl1536px

Find more information in the Tailwind CSS documentation

UIKit

NameMinimum width
s640px
m960px
l1200px
xl1600px

Find more information in the UIKit documentation

Webflow

  • Mobile portrait and below478px
  • Mobile landscape and below767px
  • Tablet and below991px
  • Desktop (base)1024px
  • 1280px and above1280px
  • 1280px and above1440px
  • 1280px and above1920px
NameMinimum width
Mobile portrait and below478px
Mobile landscape and below767px
Tablet and below991px
Desktop (base)1024px
1280px and above1280px
1280px and above1440px
1280px and above1920px

Find more information in the Webflow documentation

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. 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 to created solid responsive websites.

Missing a CSS framework?

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

Build your next project with Polypane

  • Use all features on all plans
  • On Mac, Window and Linux
  • 14-day free trial – no credit card needed
Try for free
Polypane screenshot