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.

Device	Breakpoint
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.

Please refer to bootstrap layouts for more information on grid and breakpoints.