Bootstrap grid system uses a series of containers, rows, and columns to layout and align content. It’s built with flexbox and is fully responsive. This Bootstrap Grid System allows up to 12 columns across the page. You can use each of them individually or combine them together for wider columns. All combinations of values summing up to 12 can be used.
Grid Classes:
- .col-xl- This class is used for extra large(xlarge) screen size devices (screen width equal to or greater than 1200px).
- .col-lg- This class is used for large screen size devices (screen width greater than or equal to 992px).
- .col-md- This class is used for medium screen size devices (screen width greater than or equal to 768px).
- .col-sm- This class is used for small screen devices (screen width greater than or equal to 576px).
- .col- This class is used for extra small screen devices (screen width less than 576px).
Components of Grid System:
- Container: A container is used to center and horizontally arrange your site content. For a responsive pixel width use .container class or .container-fluid for width: 100% across all viewport and device sizes.
- Row: Rows are placed within the container or container-fluid for proper alignment. Rows contain one or more columns.
- Columns: Grid columns are created by defining the twelve available columns you wish to span. For example, three equal columns would use three col-lg-4.
Equal Columns:
By using .col class, you can create equal width columns for all devices (extra small, small, medium, large, and extra large).
Equal and Responsive Columns:
The following example will show you how to create three column layouts for large and small devices. Wherever the screen size less than or equal to 576px the columns will automatically become horizontal.
Unequal and Responsive Columns:
The following example will show you how to create three unequal columns. Wherever the screen size less than or equal to 576px the columns will automatically become horizontal.