184 Contributors: 10 Tuesday, April 11, 2017
Licensed under: CC-BY-SA
Not affiliated with Stack Overflow
Rip Tutorial:
Roadmap: roadmap

Grid system


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.

Related Examples