The grid system in Bootstrap
Introduction to the
The grid system is used to create a page layout with a series of rows and columns into which your content can be placed. Here is the working principle of the Bootstrap grid system:
The row must be contained in.container or.container-fluid to give it proper aligment and padding. Row creates a set of columns horizontally. Your content should be placed inside a column, and only a column can be a direct child of a row. Predefined classes like.row and.col-XS-4 can be used to quickly create raster layouts. Mixins defined in the Bootstrap source code can also be used to create semantic layouts. Create a gutter between columns by setting the padding attribute for the “column”. The padding for the.container element is offset by setting a negative margin for the.row element, which indirectly cancels out the padding for the column contained in the row element. A negative margin is why the following example is highlighted outwards. The contents of the grid column are arranged in a row. Columns in a grid system indicate the range they span by specifying values from 1 to 12. For example, three columns of equal width can be created using three.col-XS-4. If a row contains a column greater than 12, the elements of the extra column are grouped on a separate row as a whole. The grid class applies to devices with screen width greater than or equal to the size of the cut-off point and overrides the grid class for small screen devices. Therefore, applying any.col-md-* raster class to the element works on devices with screen width greater than or equal to the size of the cut-off point, and overwrites the raster class for small screen devices. Therefore, applying any.col-LG -* to elements does not exist and also affects large screen devices. By studying the following examples, you can apply these principles to your code.
What is a grid system?
Bootstrap provides a responsive, mobile-first streaming grid system that automatically divides into up to 12 columns as the screen or viewport size increases. It includes predefined classes that are easy to use, as well as powerful mixins for generating more semantic layouts.
Lattice parameters
1. If you want your content to be displayed on your phone, you can call.col-xs-.
2. If you want your content to be displayed on a tablet then you can call.col-sm-.
3. If you want your content to be displayed on PC then you can call.col-md-.
Use rules
Column:
2. You can add columns (.col) to rows (.row), but the total number of columns cannot exceed 12.
Ex. :
3. The concrete content should be placed inside the column container (COL), and only the column (COL) can be a direct child of the.row container.
4. Create the spacing between columns by setting the padding. The padding is then offset by setting a negative margin for the first and last columns.
The instance
Create a 12 grid system:
Note: Change. Container to. Container-fluid to change the fixed width to 100%. . Container: Center the container, with a margin of 15px by default on both sides. “Container -fluid” :
The column offset
Columns can be offset to the right using the.col-md-offset-* class. These classes actually add a margin to the left of the current element by using the * selector. For example, the.col-md-offset-4 class shifts the 1 element to the right by the width of four columns.
Nested columns
To nest content again using the built-in raster system, you can add a new.row element and a series of.col-sm-* elements to existing.col-sm-* elements. A nested row can contain no more than 12 columns (there is no requirement that you fill all 12 columns).
Column sorting
You can easily change the order of columns by using the.col-md-push-* and.col-md-pull-* classes.
