Analysis of the Usage of bootstrap Grid System

The realization principle of grid system is very simple. Only by defining the container size, dividing 12 parts equally (there are also 24 parts or 32 parts equally, but 12 parts are the most common), then adjusting the inner and outer margins, and finally combining with media query, a powerful responsive grid system is made. The grid system in the Bootstrap framework divides the container into 12 equal parts.

Working principle

1. The data row (. row) must be contained in the container (. container) to give it proper alignment and inner spacing (padding). Such as:

<div class="container">
 <div class="row"></div>
</div>

2. You can add columns (. column) to a row (. row), but the total number of columns cannot exceed the total number of bisected columns, such as 12. Such as:

<div class="container">
 <div class="row">
   <div class="col-md-4"></div>
   <div class="col-md-8"></div>
 </div>
</div> 

3. The content should be placed within the column container (column), and only the column (column) can be a direct child of the row container (. row)

4. Create the spacing between columns by setting the inner spacing (padding). The inner distance (padding) is then counteracted by setting a negative outer distance (margin) for the first and last columns

Can this media query realize:
The widths vary for different browser resolutions: Auto, 750px, 970px, and 1170px
css source code:

.container {
 padding-right: 15px;
 padding-left: 15px;
 margin-right: auto;
 margin-left: auto;
 @media (min-width: 768px) {
 .container {
 width: 750px;
 }
 @media (min-width: 992px) {
 .container {
 width: 970px;
 }
 @media (min-width: 1200px) {
 .container {
 width: 1170px;
 }

Basic usage

The grid system is used for layout, which is actually a combination of columns. The Bootstrap framework uses different grid styles for different screen sizes

1. Column composition

The simple understanding of column composition is to change numbers to merge columns (principle: the total number of columns cannot exceed 12)
Implementing column combinations is straightforward, involving only two CSS features: float and percentage of width.

/* Make sure all columns float left */
.col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 {
 float: left;
 }

---------------------------------------------------------------------------------
/* Define the width of each column combination (percentage used) */
 .col-md-12 {
 width: 100%;
 }
 .col-md-11 {
 width: 91.66666667%;
 }
 .col-md-10 {
 width: 83.33333333%;
 }
 .col-md-9 {
 width: 75%;
 }
 .col-md-8 {
 width: 66.66666667%;
 }
 .col-md-7 {
 width: 58.33333333%;
 }
 .col-md-6 {
 width: 50%;
 }
 .col-md-5 {
 width: 41.66666667%;
 }
 .col-md-4 {
 width: 33.33333333%;
 }
 .col-md-3 {
 width: 25%;
 }
 .col-md-2 {
 width: 16.66666667%;
 }
 .col-md-1 {
 width: 8.33333333%;
 }

Column offset

We don't want two adjacent columns next to each other, but we don't want to use margin or other technical means. At this time, you can use the column offset (offset) function. Using column offset is also very simple, just add the class name "col-md-offset-*" to the column element (where the asterisk represents the number of column combinations to be offset), and the column with this class name will be offset to the right. For example, you add "col-md-offset-4" to the column element to indicate that the column moves to the right by 4 column widths.

<div class="container">
 <div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-2 col-md-offset-4"> Column moves to the right 4 Spacing of columns </div>
  <div class="col-md-2">.col-md-3</div>
 </div>
 <div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 col-md-offset-4"> Column moves to the right 4 Spacing of columns </div>
 </div>
</div>

The implementation principle is very simple, that is, using 1/102 (1/12) margin-left. Then there are as many margin-left as there are offset.

css source code:

 .col-md-offset-12 {
 margin-left: 100%;
}
 .col-md-offset-11 {
 margin-left: 91.66666667%;
 }
 .col-md-offset-10 {
 margin-left: 83.33333333%;
 }
 .col-md-offset-9 {
 margin-left: 75%;
 }
 .col-md-offset-8 {
 margin-left: 66.66666667%;
 }
 .col-md-offset-7 {
 margin-left: 58.33333333%;
 }
 .col-md-offset-6 {
 margin-left: 50%;
 }
 .col-md-offset-5 {
 margin-left: 41.66666667%;
 }
 .col-md-offset-4 {
 margin-left: 33.33333333%;
 }
 .col-md-offset-3 {
 margin-left: 25%;
 }
 .col-md-offset-2 {
 margin-left: 16.66666667%;
 }
 .col-md-offset-1 {
 margin-left: 8.33333333%;
 }
 .col-md-offset-0 {
 margin-left: 0;
 }

However, there is one detail to be noted. When using "col-md-offset-*" to offset columns to the right, ensure that the total number of columns and offset columns does not exceed 12, otherwise the column will be displayed with broken lines

Column sorting

Column sorting is actually changing the direction of columns, that is, changing the left and right floating, and setting the floating distance. In the grid system of the Bootstrap framework, this is done by adding the class names "col-md-push-" and "col-md-pull-" (where the asterisk represents the number of column combinations moved).

The left side occupies 4 columns wide and the right side occupies 8 columns wide;

<div class="container">
 <div class="row">
 <div class="col-md-4">.col-md-4</div>
 <div class="col-md-8">.col-md-8</div>
 </div>
</div>
----------------------- Interchange these two positions --------------------------------------------------
<div class="container">
 <div class="row">
 <div class="col-md-4 col-md-push-8">.col-md-4</div>
 <div class="col-md-8 col-md-pull-4">.col-md-8</div>
 </div>
</div>

//  Implementation principle: 
.col-md-pull-12 {
 right: 100%;
 }
 .col-md-pull-11 {
 right: 91.66666667%;
 }
 .col-md-pull-10 {
 right: 83.33333333%;
 }
 .col-md-pull-9 {
 right: 75%;
 }
 .col-md-pull-8 {
 right: 66.66666667%;
 }
 .col-md-pull-7 {
 right: 58.33333333%;
 }
 .col-md-pull-6 {
 right: 50%;
 }
 .col-md-pull-5 {
 right: 41.66666667%;
 }

 .col-md-pull-4 {
 right: 33.33333333%;
 }

 .col-md-pull-3 {
 right: 25%;
 }

 .col-md-pull-2 {
 right: 16.66666667%;
 }
 .col-md-pull-1 {
 right: 8.33333333%;
 }
 .col-md-pull-0 {
 right: 0;
 }

 .col-md-push-12 {
 left: 100%;
 }
 .col-md-push-11 {
 left: 91.66666667%;
 }
 .col-md-push-10 {
 left: 83.33333333%;
 }
 .col-md-push-9 {
 left: 75%;
 }
 .col-md-push-8 {
 left: 66.66666667%;
 }
 .col-md-push-7 {
 left: 58.33333333%;
 }
 .col-md-push-6 {
 left: 50%;
 }
 .col-md-push-5 {
 left: 41.66666667%;
 }
 .col-md-push-4 {
 left: 33.33333333%;
 }
 .col-md-push-3 {
 left: 25%;
 }
 .col-md-push-2 {
 left: 16.66666667%;
 }
 .col-md-push-1 {
 left: 8.33333333%;
 }
 .col-md-push-0 {
 left: 0;
 }

Nesting of columns

You can add one or more rows (row) containers to a column, and then insert columns in that row container (using columns as described earlier in 1). But in the row container (row) in the column container, when the width is 100%, it is the width of the current outer column.

<div class="container">
 <div class="row">
  <div class="col-md-8">    

    My inside is nested 1 Grid 
   <div class="row">
    <div class="col-md-6">col-md-6</div>
    <div class="col-md-6">col-md-6</div>
   </div>

  </div>
  <div class="col-md-4">col-md-4</div>
 </div> 
</div>