Bootstrap framework is one of the most popular front-end frameworks nowadays. Bootstra has powerful functions, is simple and easy to learn, and is in line with practical application scenarios. But it contains more content, novice often can not quickly master. Next, let’s make a brief summary of the Bootstra grid system:

What is the definition of a Bootstrap grid system?

Bootstrap includes a responsive, mobile-first, non-stationary grid system that can scale up to 12 columns as the device or viewport size increases. It includes predefined classes for simple layout options as well as powerful hybrid classes for generating more semantic layouts

From the above words, three aspects can be summarized simply:

1. Bootstrap3 takes precedence over mobile Settings

2. The Bootstrap grid system has a maximum of 12 columns

Bootstrap contains many predefined classes

In normal pages, when the browser shrinks to a certain extent, the page will misposition and distort. This will not happen in Bootstrap because it is adaptive.

Bootstrap Grid System related classes

The container class represents a grid. Using the Container class, you can get the alignment and padding styles of the default Bootstrap Settings.

\2. Use.row to create a row, which is divided into multiple columns.

\3. Use. Col -[screen style]-[percent] to order column elements to quickly create a grid.

\4. Content should be placed in columns, and only columns can be direct children of rows.


\5. Columns use padding to create gaps between column contents. The inner margin is obtained by taking a negative value of the margin on the. Rows column. Say: you want to reduce column spacing and write with a negative margin.

\6. The grid system is created by specifying twelve available columns that you want to span. For example, to create three equal columns, use three. Col-md-4.

Bootstrap Basic structure of the grid

< div class= “container” >// container

< div class= “row” >// Rows in the grid

< div class= “col–” >< /div>// column of direct elements under the line

< div class = “col -” > < / div >

< /div>

< div class = “row” >… < /div>

< /div>

< div class = “container” >

Grid options

The Bootstrap grid divides devices into four types:

Ultra small device (mobile phone), small device (tablet), medium device (laptop), large device (large size display) the total number of columns of each of the four devices cannot exceed 12.

Their columns are identified with different class prefixes.

Col-xs for ultra small devices

Col-sm for small equipment

Col-md for medium equipment

Col-lg – for large equipment

Regardless of the device, the spacing is 30px (padding-left of the column; 15 px and padding – right: 15 px;)

Steps to use a grid layout

\1. Import bootstrap libraries

It is like introducing an external style sheet, only this one is the bootstrap style sheet, which contains CSS and JS parts

\2. Add the bootstrap container

Write a div inside the body and add a Container class to the div. This class is very useful because it creates a centered area on the page that we can then put other elements inside. Container creates a neutral div box with a static width and a margin of Auto. Container takes precedence because it is responsive and calculates the best width to use based on the current screen width.

\3. Add row to container

We use row for landscape layout

\4. Add columns to row

This is like adding TD to tr after adding TR to the table.

The columns in the Row are what we had before.col-XS-6, which adds up to exactly 12 columns

The grid system is the core of Bootstrap, and it is because of the grid system that Bootstrap has such a powerful and responsive layout scheme.