Use responsive classes to define how the grid behaves at different screen sizes.
Under the grid system, each column's width can be defined for a specific viewport size: mobile, tablet, desktop, widescreen and fullhd.
|Class (x can take values between 1 and 12)||Breakpoint|
||Up to 768px|
||Between 768px to 1023px|
||Between 1024px to 1215px|
||Between 1216px to 1407px|
||1408px and above|
Learn more about the grid system
By default, columns
col are stacked on top of each other on mobile.
To have columns displayed in a row on mobile, add the
is-mobile class to the
To display columns only on desktop (1024px) and above, add the
is-desktop class on the
Can't find a component?
Let us know what you need and we’ll be happy to look into it