Grid system of 4.BOOTSTRAP-CSS

How the 1.Bootstrap grid system works

The grid system creates a page layout with a series of rows and columns containing content. The following is a list of how the Bootstrap grid system works:

• The row must be placed within the . Container class to obtain the appropriate alignment (alignment) and padding (padding).
• Use rows to create a horizontal group of columns.
• Content should be placed in a column, and only columns can be direct child elements of the row.
• Predefined grid classes, such as . Row and . Col-xs-4, can be used to quickly create a grid layout. The less hybrid class can be used for more semantic layouts.
• Columns create gaps between column contents by padding (padding). The padding is negative from the margin (margin) on the . Rows , which represents the row offsets for the first and last columns.
• The grid system is created by specifying the 12 available columns that you want to span. For example, to create three equal columns, use three . col-xs-4.

Offset column

Offset is a useful feature for a more professional layout. They can be used to make more room for the column. For example, the. col-xs=* class does not support offsets, but they can be implemented simply by using an empty cell.

In order to use offsets on large-screen displays, use the . col-md-offset-* class. These classes increase the left margin (margin) of a column by the column, where the * range is from 1 to one.

In the following example, we have <div class= "col-md-6"; </div> We will use the . col-md-offset-3 class to center the Div.

Nested columns

In order to nest the default grid in the content, add a new . Rowand add a set of . col-md-* columns within an existing . col-md-* column. Rows that are nested should contain a set of columns that cannot exceed 12 (in fact, you do not have to fill 12 columns).

Bootstrap Grid system Another perfect feature is that you can easily write columns in one order, and then display the columns in a different order.

You can easily change the order of the built-in grid columns with the . col-md-push-* and . col-md-pull-* classes, where the * range is from 1 to 11< /c13>.

In the following example, we have two columns of layout, the left column is very narrow, as the sidebar. We will use the . col-md-push-* and . col-md-pull-* classes to swap the order of the two columns.

Grid system of 4.BOOTSTRAP-CSS