All you want to know about the bootstrap grid system is here


Bootstrap framework is one of the most popular front-end frameworks. Bootstrap is powerful, easy to learn, and very suitable for practical application scenarios. But it contains a lot of content, novices often can not quickly master. Next, let’s make a brief summary of the bootstra grid system

What is the definition of bootstrap grid system?

Bootstrap includes a responsive, mobile device first, unfixed grid system, which can be appropriately expanded to 12 columns with the increase of device or view size. It includes predefined classes for simple layout options and powerful hybrid classes for generating more semantic layouts

Three aspects can be sorted out from the above words

1. Bootstrap 3 is a mobile priority

2. Bootstrap grid system up to 12 columns

3. Bootstrap contains many predefined classes

In the page we usually write, if the browser shrinks to a certain extent, the page will be dislocated and deformed. This is not true in bootstrap because it is adaptive.

Bootstrap grid system related classes

\1. The container class represents the grid. Using the container class, you can get the alignment and padding styles of bootstrap default settings.

\2. Use. Row to create a row, and each row is divided into multiple columns.

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

\4. Contents should be placed in columns, and only columns can be direct child elements of rows.


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

\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.

The basic structure of bootstrap grid

< div class = “container” > / / container

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

< div class=”col-”>< / div > / / direct element column under row

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

< /div>

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

< /div>

< div class=”container”>

Grid options

Bootstrap grid divides devices into four types

Super small devices (mobile phones), small devices (tablets), medium-sized devices (laptops) and large devices (large monitors) can not exceed 12

Their columns are identified by different class prefixes.

. col XS for ultra small equipment

. col SM for small equipment

. col MD for medium equipment

. col LG for large equipment-

No matter what kind of equipment, their gap is 30px; 15px and padding- right:15px; )

To work with grid layouts

\1. Introduce the library needed by bootstrap

It’s like introducing an external style sheet, but this is a bootstrap style sheet, which includes CSS and JS

\2. Add bootstrap container

Write a div in the body and add a container class for the Div. this class is very useful. It can create a middle area in the page, and then we put other elements in it. It is equal to creating a middle div box with static width and margin value of auto. The priority of container is that it is responsive. It will calculate the best width to use based on the width of the current screen.

\3. Add row to the container

We use row for horizontal layout

\4. Add columns in row

It’s like adding td to tr after adding tr to the table.

The columns in row are our previous. Col-xs-6, which add up to exactly 12 columns

The grid system is the core of bootstrap. It is precisely because of the grid system that bootstrap has such a powerful responsive layout scheme.

Recommended Today

Web push service based on netty socket IO

In web projects, it is a common business requirement for servers to push messages to web pages. The push technology of PC can be realized by establishing a long connection with socket. In traditional web services, the client sends a request and the server gives a response. But now the intuitive requirement is to allow […]