Grid system
The grid is used to create specific layouts within an application’s content. It contains 5 types of media breakpoints that are used for targeting specific screen sizes or orientations, xs, sm, md, lg and xl.
Container
container
Container full width
container full-width
Row
row
Column
From 0px to infinite
col
col
Extra small (xs)
From 0px to infinite
col xs-1col xs-2col xs-3col xs-4col xs-1
col xs-1
col xs-1
col xs-1
col xs-1
col xs-2
col xs-2
col xs-3
col xs-1
col xs-4
Small (sm)
From 600px to infinite
col sm-1
col sm-1
col sm-1
col sm-1
col sm-1
col sm-1
col sm-1
col sm-1
col sm-2
col sm-2
col sm-2
col sm-2
col sm-3
col sm-3
col sm-3
col sm-4
col sm-4
col sm-5
col sm-3
col sm-6
col sm-2
col sm-7
col sm-1
col sm-8
Medium (md)
From 960px to infinite
col md-1
col md-1
col md-1
col md-1
col md-1
col md-1
col md-1
col md-1
col md-1
col md-1
col md-1
col md-1
col md-2
col md-2
col md-2
col md-2
col md-2
col md-2
col md-3
col md-3
col md-3
col md-3
col md-4
col md-4
col md-4
col md-5
col md-2
col md-5
col md-6
col md-6
col md-7
col md-5
col md-8
col md-4
col md-9
col md-3
col md-10
col md-2
col md-11
col md-1
col md-12
Large (lg)
From 1264px to infinite
col lg-1
col lg-1
col lg-1
col lg-1
col lg-1
col lg-1
col lg-1
col lg-1
col lg-1
col lg-1
col lg-1
col lg-1
col lg-2
col lg-2
col lg-2
col lg-2
col lg-2
col lg-2
col lg-3
col lg-3
col lg-3
col lg-3
col lg-4
col lg-4
col lg-4
col lg-5
col lg-2
col lg-5
col lg-6
col lg-6
col lg-7
col lg-5
col lg-8
col lg-4
col lg-9
col lg-3
col lg-10
col lg-2
col lg-11
col lg-1
col lg-12
Extra large (xl)
From 1904px to infinite
col xl-1
col xl-1
col xl-1
col xl-1
col xl-1
col xl-1
col xl-1
col xl-1
col xl-1
col xl-1
col xl-1
col xl-1
col xl-2
col xl-2
col xl-2
col xl-2
col xl-2
col xl-2
col xl-3
col xl-3
col xl-3
col xl-3
col xl-4
col xl-4
col xl-4
col xl-5
col xl-2
col xl-5
col xl-6
col xl-6
col xl-7
col xl-5
col xl-8
col xl-4
col xl-9
col xl-3
col xl-10
col xl-2
col xl-11
col xl-1
col xl-12