Let's talk about the grid layout in Bootstrap and see how to align vertically and horizontally-Bootstrap Tutorial-php.cn

This article will take you through the grid layout inBootstrap, and look at the vertical alignment and horizontal alignment. I hope it will be helpful to you!

Let's talk about the grid layout in Bootstrap and see how to align vertically and horizontally

1. Bootstrap Grid Layout

In the previous section we introduced the grid in Bootstrap, and the grid is used in web page layout is a key and difficult point. Layout is the starting point and foundation of web design. You must spend time to understand it. At least understand the content of the tutorial I wrote, because what I wrote is the most commonly used and basic. Of course, for a web designer with a certain foundation, I believe these contents can be understood at a glance. Today we will learn more about grid layout. [Related recommendations: "bootstrap Tutorial"]

This section involves some functions in the general-purpose flexible box (Flex).

2. Vertical alignment

2.1 Set vertical alignment in the row tag

By setting the row Addalign-items-start,align-items-center,align-items-endto the tag to change the vertical alignment of the row in the container, as above The three labels are top alignment, center alignment, and bottom alignment. The following is a demo code and renderings. The css code in the code sets the background color and spacing for easy viewing of the effect.

         垂直对齐演示

Copy after login

Lets talk about the grid layout in Bootstrap and see how to align vertically and horizontally

2.2 Set vertical alignment in col tag

By addingin col tag align-self-start,align-self-center,align-self-endcan change the vertical alignment of the column in the row, the above three labels are the top Alignment, center alignment, bottom alignment. The following is a demo code and renderings. The css code in the code sets the background color and spacing for easy viewing of the effect.

         垂直对齐演示

Copy after login

Lets talk about the grid layout in Bootstrap and see how to align vertically and horizontally

3. Horizontal alignment

##3.1 Set vertical alignment in row tag

By adding

justify-content-start,justify-content-center,justify-content-end, # in the row tag ##justify-content-around,justify-content-between,justify-content-evenlycan change the horizontal alignment of columns within a row. The following is a demo code and renderings. The css code in the code sets the background color and spacing for easy viewing of the effect.

Copy after login

For more programming-related knowledge, please visit:

Programming Video! !
The above is the detailed content of Let's talk about the grid layout in Bootstrap and see how to align vertically and horizontally. For more information, please follow other related articles on the PHP Chinese website!