Bootstrap’s 12-column grid system is a responsive layout system that allows developers to create responsive web designs easily. The grid system is based on a 12 column layout, which can be divided into any combination of columns, depending on the requirements of the web design.
Here’s how the Bootstrap 12 column grid system works:
- First, the developer needs to include the Bootstrap CSS and JavaScript files in their web page.
- The developer then creates a container div with the class “container” or “container-fluid“. The container div sets the maximum width for the content within it and centers it on the page.
- Next, the developer creates a row div with the class “row” inside the container div. The row div contains the columns.
- The developer then creates column divs with the class “col-” followed by a number from 1 to 12. For example, “col-6” creates a column that takes up 6 of the 12 available columns.
- The columns are placed inside the row div. The total number of columns inside a row div should always add up to 12.
- To create responsive designs, the developer can use additional classes such as “col-sm-“, “col-md-“, and “col-lg-” to specify different column sizes for different screen sizes. For example, “col-md-6” creates a column that takes up 6 of the 12 available columns on medium-sized screens.
- The developer can also use offset classes such as “offset-” to create empty space between columns.
- Finally, the developer can use the “push-” and “pull-” classes to reorder columns on the page for different screen sizes.
Overall, the Bootstrap 12 column grid system allows developers to create responsive web designs quickly and easily by dividing the page into columns that can be sized and positioned flexibly.