Bumbag comes with 5 defined breakpoints & their ranges:

min-mobile0px and above
max-mobile479px and below
min-tablet480px and above
max-tablet767px and below
min-desktop768px and above
max-desktop1023px and below
min-widescreen1024px and above
max-widescreen1199px and below
min-fullHD1200px and above
max-fullHD1440px and below

#Adding breakpoints to the theme

You are able to add your own breakpoints to the global theme:

import { Provider } from 'bumbag';
const theme = {
breakpoints: {
custom: 1000
<Provider theme={theme}>Hello world!</Provider>

#Using breakpoints

#With style props

Hello world
Editable example

#With applyTheme

You can set attribute values for certain breakpoints by specifying an object of breakpoint/value pairs:

Hello world
Editable example

#With styled

Hello world
Editable example



const theme = {
breakpoints: {
mobile: string,
tablet: string,
desktop: string,
widescreen: string,
fullHD: string,
// Plus your own definitions...
[key: string]: string,
// e.g. custom: 1000
On this page
Copyright © 2021 Jake Moxey