--- title: Grid System --- ## Grid System In a nutshell, the Bootstrap grid system helps you create responsive layouts. It comprises of a system of rows and columns that helps you structure your content. Rows are horizontal groups of columns, with a maximum of 12 columns per row. Within each row, the content is placed inside the columns and it can span anywhere between 1 to 12 columns. Bootstrap has five different types of grid tiers: Extra small, Small, Medium, Large, and Extra large. There is a breakpoint defined for each of these grid tiers. Bootstrap uses pixels to define the grid tier breakpoints. #### How it works ###### Container The container is the outer most element that will *contain* your grid, use `container` for a fixed width container in the middle of the screen (extra margin on larger screens) or `container-fluid` for full width. ```
``` ###### Row Use `row` to group your columns, this will keep everything lined up properly and help you structure your grid. ``` ``` ###### Columns Column classes indicate the number of columns you’d like to use out of the possible 12 per row. For example `col-sm-6` would mean your column would use up half the width of the `row` on a small screen, and `col-lg-4` would use up a third on a large screen. Here is how you would define a class prefix to use up one column width on the various screen sizes: - **Extra Small** `col-1` - **Small** `col-sm-1` - **Medium** `col-md-1` - **Large** `col-lg-1` - **Extra Large** `col-xl-1` ``` ``` #### Example A full width grid that has four columns, that each take up a full row on xs screens, half a row on sm and md screens, and a quarter of the width of the row on screens that are large and above. ```