Breakpoint
Conditionally display content based on screen width
Breakpoint
Go to top
Bifrost uses some default viewport width values for responsive breakpoints.
Breakpoint names
| Name | small | medium | large | xl | xxl |
|---|---|---|---|---|---|
| Screen width | 600px | 960px | 1280px | 1600px | 1920px |
CSS class names
| CSS classname | Displayed for screens | Devices |
|---|---|---|
.to-small | up to 600px wide | Mobile Portrait |
.from-small | 600px and wider | Mobile Landscape Tablet Desktop |
.to-medium | up to 960px wide | Mobile Tablet Portrait |
.from-medium | 960px and wider | Tablet Landscape Desktop |
.to-large | up to 1280px wide | Mobile Tablet Small Desktop |
.from-large | 1280px and wider | Medium-XL Desktop |
.to-xl | up to 1600px wide | Mobile Tablet Small-Medium Desktop |
.from-xl | 1600px and wider | Large-XL Desktop (Fixed sidebar) |
.to-xxl | up to 1920px wide | Mobile Tablet Small-Large Desktop |
.from-xxl | 1920px and wider | XL Desktop |
Examples
Try resizing your window to test the demos below:
to-small (0px-599px)
from-small (600px +)
to-medium (0px-959px)
from-medium (960px +)
to-large (0px-1279px)
from-large (1280px +)
You can combine one .from-* class and a .to-* class to display only when
between two breakpoints.
to-small (0px-599px)
from-small to-medium (600px-959px)
from-medium (960px +)