Can you explain the grid system in Bootstrap and how it works?

The grid system in Bootstrap is a flexible and responsive layout system that allows you to create complex layouts using a series of rows and columns. It is based on a 12-column layout, which means that each row is divided into 12 equal-width columns.

Each column is defined by a .col-* class, where * is a number from 1 to 12, representing the width of the column as a percentage of the total row width. For example, .col-6 would create a column that is 50% of the total row width. You can also use classes such as .col-sm-* and .col-md-* to specify different column widths for different screen sizes.

Rows are defined by a .row class, and they are used to hold the columns. Each row must have a total of 12 columns or less, otherwise, it will overflow.

Here is an example of how you would use the grid system to create a layout with two equal-width columns:

<div class="container"> <div class="row"> <div class="col-6">Column 1</div> <div class="col-6">Column 2</div> </div> </div>

You can also use classes such as .offset-* to add space between columns, .align-self-* to change the alignment of a single column and .order-* to change the order of columns for different screen sizes.

It's worth noting that Bootstrap 4 introduced a new grid system that uses a flexbox layout, which allows for more flexibility and control over the grid.