Grid system
Main elements of grid system:
- Containers provide a means to center and horizontally pad your site’s contents.
- Rows are wrappers for columns. In a grid layout, content must be placed within columns and only columns may be immediate children of rows.
- Columns are used to place your content.
There are predefined classes for specifying the column width, or you can let the system assign the width.
The grid system is based on a flexible model. So you can use same classes for alignment.
Code example
1
2
3
Code example
1
2
3
| css class | description |
|---|---|
| container | Defines a responsive pixel width container. |
| container-fluid | Defines a container with width: 100% across all viewport and device sizes. |
| row | Defines a row of columns. |
| row-col-{num} | Specifies the number of columns in row. Useful for better render of your content and layout. Applies to a row element. |
| col | Defines a column. By defualt the width of the container is evenly distributed across the columns. |
| col-number col-{breakpoint}-{num} | Specifies the number of columns you’d like to use out of the possible 12 per row. So, if you want three equal-width columns across, you can use col-4. |
| col-{breakpoint}-auto | Sets the width of the column based on the natural width of its content. |
| no-gutters | Removes the gutters between columns. By default, a column has a 15px gutter on each side. |