Bootstrap Grid systems (grid system)

Bootstrap Grid systems (grid system)

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

What is a grid (grid)

Excerpt from Wikipedia:

In graphic design, a grid is a structure (usually two-dimensional) composed of intersecting lines (vertical, horizontal) of a series of organizational content, which is widely used in design layouts and content structures in print designs, and is a method for creating consistent layouts and efficient use of HTML and CSS in Web design.

In simple words, grids in web design are used to organize content, make the site easier to navigate, and reduce the load on the user side.

What is a bootstrap grid system (Grid sytem)

Bootstrap the description of the grid system in the official documentation:

The bootstrap includes a responsive, mobile-first, non-fixed grid system that can be automatically divided into up to 12 columns as the screen or viewport size increases.

Bootstrap mobile device first means that the bootstrap code starts from a small device (such as a phone, tablet) and then expands on components and networks on large screen devices (laptops, desktops).

Mobile device First Policy

1, content: Decide what is the most important.

2, Layout: Priority to design the smallest device, the basic CSS is mobile device first, media query is for tablets or laptops and desktop computers.

3. Progressive enhancement: Add elements as the screen size increases.

How the bootstrap grid system (grid sytem) works

The grid system creates a page layout with a series of rows or columns containing content, and the following lists how the bootstrap grid system works

1. The line must be placed in a container in the. Containet class class to obtain the appropriate alignment (Alignmeng) and padding (padding)

2. Use rows to create a horizontal group of columns

3, the content is appropriately placed in the column, and only the column can be the direct child element of the row

4. Predefined grid classes, such as:. Row and col-xs-4, which can be used to quickly create style layouts

5. The column creates a gap of content through the padding (padding). The padding is negative from the margin (margin) on the . Rows , which represents the row offsets for the first and last columns.

6. The grid system is created by specifying what you want across 12 available columns. For example, to create three equal columns, use three . col-xs-4.

Media Enquiry

Media queries are a very chic "conditional CSS rule" that applies only to some CSS based on certain rules, and if the condition is met, the style is applied.

Media queries in bootstrap allow you to move, display, and hide content based on viewport size

Bootstrap Grid systems (grid system)