Considerations
Responsive design
Use responsive classes to define how the grid behaves at different screen sizes.
Breakpoints
Under the grid system, each column's width can be defined for a specific viewport size: mobile, tablet, desktop, widescreen and full HD.
Extra small devices (portrait phones)
Up to 576px
Small devices (landscape phones)
Between 576px to 768px
Medium devices (tablets)
Between 768px to 1024px
Desktops
Between 1024px to 1300px
Large Desktops / Wide Screens
Max width set to 1300px
(Replace 'container' class with 'container-fluid' to expand the page content to full width)
Grid
Grids are fundamental to the structure of content, affecting placements and spacing from individual components to pages. We use bootstrap's powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, five default responsive tiers, Sass variables and mixins, and dozens of predefined classes.
Last updated