loading...
Cover image for CSS breakpoints used by popular CSS frameworks
Polypane

CSS breakpoints used by popular CSS frameworks

kilianvalkhof profile image Kilian Valkhof Originally published at polypane.app ・4 min read

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

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

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. Find more information in the Bootstrap v5 documentation

Bulma

Name Minimum width
mobile none
tablet 769px
desktop 1024px
widescreen 1216px
fullhd 1408px

Built into Polypane. Find more information in the Bulma documentation

Foundation

Name Minimum width
Small none
Medium 640px
Large 1024px
Xlarge (optional) 1200px
Xxlarge (optional) 1440px

Download workspace file for Foundation. Find more information in the Foundation documentation

Ionic

Name Minimum width
xs none
sm 576px
md 768px
lg 992px
xl 1200px

Download workspace file for Ionic. Find more information in the Ionic documentation

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

Materialize

Name Minimum width
s none
m 600px
l 992px
xl 1200px

Download workspace file for Materialize. Find more information in the Materialize documentation

Semantic UI

Name Minimum width
mobile none
tablet 768px
small monitor 992px
large monitor 1200px

Download workspace file for Semantic UI. Find more information in the Semantic UI documentation

Skeleton

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

Download workspace file for Skeleton. Find more information in the Skeleton documentation

Tailwind CSS

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

Built into Polypane. Find more information in the Tailwind CSS documentation

UIKit

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

Download workspace file for UIKit. Find more information in the UIKit 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? Comment and we'll add it to the list!

Posted on by:

kilianvalkhof profile

Kilian Valkhof

@kilianvalkhof

Building https://polypane.app to help every developer and designer build better websites, faster.

Polypane

A cross-platform developer browser to develop, debug and test sites and apps twice as fast. Make your sites and apps work everywhere and for everyone.

Discussion

markdown guide