Bootstrap's grid system consists of 12 units known as Columns (.col-*-*
CSS classes) that are used to layout content left-to-right across the viewport. Columns are contained within Rows (.row
CSS class) to create horizontal groups of columns. Rows are placed within a fixed or full-width Container (.container
or .container-fluid
, respectively) for proper alignment. Columns have padding that creates spacing (known as a "gutter") between the content in the columns.
Bootstrap 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 quickly creating page layouts through a series of rows and columns that house your content.