What is bootstrap's 12-grid system?

In bootstrap, the 12-grid system refers to dividing the page layout into 1 to 12 columns of equal width, defining the column width through proportion calculation, and defining the modular page layout method through the number of columns. , is a responsive, mobile-first grid system.

The operating environment of this tutorial: Windows 10 system, bootstrap version 3.3.7, DELL G3 computer

What is the 12-grid system of bootstrap

Bootstrap provides a responsive, mobile-first fluid grid system that automatically divides into up to 12 columns as the screen or viewport size increases.

What is Grid?

In graphic design, a grid is a structure (usually two-dimensional) consisting of a series of intersecting straight lines (vertical, horizontal) used to organize content. It is widely used for design layout and content structure in print design. In web design, it is a method for quickly creating consistent layouts and using HTML and CSS effectively.

Simply put, grids in web design are used to organize content, make the website easy to navigate, and reduce the load on the user end.

What is Bootstrap Grid System?

Bootstrap includes a responsive, mobile-first, fluid grid system that scales appropriately to 12 columns as the device or viewport size increases. It contains predefined classes for simple layout options, as well as powerful mixin classes for generating more semantic layouts.

The grid system refers to dividing the page layout into equal-width columns, and then modularizing the page layout by defining the number of columns. Bootstrap's grid system uses a 1-12 column pattern and uses proportional calculations to set the column widths you define.

For example, if you want to use a two-column layout mode for this row, then the width of each column is 50% of the outer container. No matter what device you use to browse, it will be displayed in this proportion. However, if the device width is smaller than the minimum width you set, the two columns will become one column side by side.

Bootstrap's grid system

Using the grid system in Bootstrap is very simple and convenient. You only need to introduce their already defined classes into your divs.

Let’s first take a look at several grid classes that can be used in Bootstrap:

1. .col-xs-* This is an ultra-small screen class (<768px), similar to mobile phones and other devices .

2. .col-sm-* This is a small screen device class (≥768px and

3. .col-md-* This is a medium device class (≥992px and

4. .col-lg-* This is a large device class (≥1200px).

Related recommendations: bootstrap tutorial

The above is the detailed content of What is bootstrap's 12-grid system?. For more information, please follow other related articles on the PHP Chinese website!