Grid
Last updated
Last updated
Bootstrap grid includes a responsive, mobile first fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts
Grid systems are used for creating page layouts through a series of rows and columns that house your content. Here's how the Bootstrap grid system works:
You must start with row
There are pre-define classes of columns starting from 1 to 12, example col-md-1
to col-md-12
Each of these value represent a percentage of the screen, 1 being the smallest and 12 being 100%
You can create different grid pattern that finally forms 12
eg :
There different grids for different screen sizes, "col-md" md stands for medium screen, the following table explains
EXTRA SMALL DEVICES PHONES (<768PX)
SMALL DEVICESTABLETS (≥768PX)
MEDIUM DEVICESDESKTOPS (≥992PX)
LARGE DEVICESDESKTOPS (≥1200PX)
Grid behavior
Horizontal at all times
Collapsed to start, horizontal above breakpoints
Container width
None (auto)
750px
970px
1170px
Class prefix
.col-xs-
.col-sm-
.col-md-
.col-lg-
# of columns
12
Column width
Auto
~62px
~81px
~97px
Gutter width
30px (15px on each side of a column)
Nestable
Yes
Offsets
Yes
Column ordering
Yes