Implementation of Bootstrap web page layout grid

1. How the Bootstrap grid system works

1.1 Twelve Grid System
1.2 Bootstrap Grid System Tags
1.3 Bootstrap Grid System Rules

2. Cell width setting in Bootstrap grid system

2.1 Default equal width layout
2.2 Set the width of each column
2.3 Variable Width Columns
2.4 Automatically wrapping columns

3. Bootstrap grid responsive layout

3.1 What is responsive layout?
3.2 Bootstrap grid system screen size division
3.3 Bootstrap grid responsive layout example
3.4 If you do not want to respond

1. How the Bootstrap grid system works

1.1 Twelve Grid System

Grid is a grid in English. The reason why some places are grids and some places are grids is just because of different translation habits. The twelve-grid system means dividing the entire screen into twelve equal parts by width, and one part represents one twelfth of the screen width. Why is it divided into twelve equal parts instead of ten or other equal parts? This is because 12 is the least common multiple of 1, 2, 3, 4, and 6. According to experience, such a division is the most beautiful and practical. Of course, I have also seen 36-grid and 10-grid systems. From a usage perspective, they are indeed not as convenient as the 12-grid system.

In the twelve-grid system, if I want to divide the screen into left and right sides, with the left side occupying one-third and the right side occupying two-thirds, I can set the left width to 4 grids and the right to 8 grids. If I need half of each station on the left and right, I only need to set each to 6 grids. If I only need to set a page to fill the entire screen, I can directly set it to 12 grids. Look, isn’t it convenient?

1.2 Bootstrap Grid System Tags

The Bootstrap grid system designs three tags: container, row, and col:

Container is a container, which was introduced in detail in the previous section.
row means row, representing a horizontal row
col is a cell, representing each specific cell. There are three ways to write it: col, col-grid number (such as col-3), and col-screen size-grid number (such as col-md-3).

Below is a sample code that divides the screen into three equal-width units. You don’t need to delve into the specific code yet. You just need to have a brief understanding of the structure of the grid system, which we will explain in detail later.

<div class="container">
    <div class="row">
        <div class="col">
            First unit</div>
        <div class="col">
            The second unit</div>
        <div class="col">
            The third unit</div>
    </div>
</div>

1.3 Bootstrap Grid System Rules

Use row to create horizontal groups of columns.
There can be multiple rows within a page.
Rows must be placed inside a container in order to get proper alignment and padding.
Content should be placed within columns (col), and only columns can be direct children of rows.
Rows can be nested within columns, and rows within columns do not require containers because the column itself is a container.
You can directly use predefined grid classes, such as col-screen-size-grid-number, to quickly create grid layouts.
In the predefined class, there are 5 screen size values, which are mainly used for responsive design, see 3.1. The grid number is a number from 1 to 12, representing the screen width.

2. Cell width setting in Bootstrap grid system

2.1 Default equal width layout

If we don't set the width of each column, the default width of each column will be evenly distributed regardless of the number of columns, but if there are more than 12 columns in a row, unpredictable behavior will occur (I did a few tests for research purposes, you don't have to test this, if you want to layout more than 12, you can use a table). Below I give a piece of code, which I will use later, making some minor changes and not repeating it.

When using col or col-grid number to set the width, please set the window width to the maximum to preview the effect, otherwise it may cause effect deviation. In addition, we do not recommend this setting in actual applications. Please use responsive grid layout, even if you don’t want it to be responsive.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="keywords" content="">
    <meta name="description" content="">
    <link href="bootstrap5/bootstrap.min.css" rel="external nofollow" rel="stylesheet">
 
    <title>Grid System Demonstration</title>
  </head>
  <body>
  
    <div class="container">
        <div class="row">
            <div class="col">
                <h1>What is Bootstrap? </h1>
                <p>
                    When we are developing front-end pages, it would be a waste of time if we have to write every button, style, and browser compatibility code from scratch. So we need a framework to help us implement the basic part of a page and solve some tedious details, and we can customize it based on it. Bootstrap is such a concise, intuitive and powerful front-end development framework. As long as you learn and abide by its standards, even developers who have not learned web design can create very professional and beautiful pages, greatly improving work efficiency.
                </p>
            </div>
            <div class="col">
                <h1>What is Bootstrap? </h1>
                <p>
                    When we are developing front-end pages, it would be a waste of time if we have to write every button, style, and browser compatibility code from scratch. So we need a framework to help us implement the basic part of a page and solve some tedious details, and we can customize it based on it. Bootstrap is such a concise, intuitive and powerful front-end development framework. As long as you learn and abide by its standards, even developers who have not learned web design can create very professional and beautiful pages, greatly improving work efficiency.
                </p>
            </div>
            <div class="col">
                <h1>What is Bootstrap? </h1>
                <p>
                    When we are developing front-end pages, it would be a waste of time if we have to write every button, style, and browser compatibility code from scratch. So we need a framework to help us implement the basic part of a page and solve some tedious details, and we can customize it based on it. Bootstrap is such a concise, intuitive and powerful front-end development framework. As long as you learn and abide by its standards, even developers who have not learned web design can create very professional and beautiful pages, greatly improving work efficiency.
                </p>
            </div>
            <div class="col">
                <h1>What is Bootstrap? </h1>
                <p>
                    When we are developing front-end pages, it would be a waste of time if we have to write every button, style, and browser compatibility code from scratch. So we need a framework to help us implement the basic part of a page and solve some tedious details, and we can customize it based on it. Bootstrap is such a concise, intuitive and powerful front-end development framework. As long as you learn and abide by its standards, even developers who have not learned web design can create very professional and beautiful pages, greatly improving work efficiency.
                </p>
            </div>
            
        </div>
    </div>
 
     <script src="bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

The effect of this code is shown in the figure above. You can copy the following cell part a few more times to see the effect.

2.2 Set the width of each column

Try changing the col in the three <div class="col"> to col-3, col-6, col-3 or other values, as long as the sum of the three numbers is 12. Of course, you can also delete or add one or several cells, as long as the sum of the row is 12. Through such simple settings, the width of the cell can be modified very conveniently. The following figure shows the display effect when col is set to col-2, col-2, col-4, and col-4 respectively.

2.3 Variable Width Columns

If you are setting a cell value, if there are three cells and you only set one, the remaining two cells will divide the remaining space equally, so you can easily set a variable width column. As a reminder, the cell with a fixed value does not need to be in the front. For example, in code 2.1, you can set the second cell to occupy half of the screen (col-6), and the other cells to be evenly distributed.

2.4 Automatically wrapping columns

When a width value is set for each cell, the line will automatically wrap when the remaining space in a row no longer accommodates a cell.

In example 2.1, change the col in each of the four <div class="col"> to col-6 to see the effect.

In example 2.1, change the col in each of the four <div class="col"> to col-12 to see the effect.

In example 2.1, change the col in each of the four <div class="col"> to col-8 to see the effect.

It can be seen that although setting it to col-8 can also have one line per cell, the text only takes up 8/12 of the screen, or two-thirds, so if there are no special requirements, try to make the sum of the cell values in each row exactly 12.

3. Bootstrap grid responsive layout

3.1 What is responsive layout?

Regarding responsive layout, to put it simply, the page layout displayed is different when the screen size is different. For example, there is only one cell in a row when viewed on a mobile phone, two cells in a row when viewed on a tablet, and three cells when viewed on a computer. Bootstrap can easily achieve this function.

3.2 Bootstrap grid system screen size division

Look at the table below. Does it look familiar? It is exactly the same as the breakpoint rules, except that there is an extra xs. In fact, the default is xs, so it can be omitted directly. As you can see, Bootstrap divides the screen into 6 sizes through 5 breakpoints.

	xs <576px	sm ≥576px	md ≥768px	lg ≥992px	x ≥1200px	xxl ≥1400px
Container	None (auto)	540px	720px	960px	1140px	1320px
Screen size class prefix	.col-	.col-sm-	.col-md-	.col-lg-	.col-xl-	.col-xxl-

3.3 Bootstrap grid responsive layout example

In the example of 2.1, replace the four <div class="col"> with <div class="col-12 col-md-6 col-lg-4"> , change the browser window size and check the effect. This code means that when the width is <768px, there is only one column in a row (each column is 12 grids wide), when 768px<width<992px, there are two columns (each column is 6 grids wide), and when it is greater than 992px, there are 3 columns in each row (each column is 4 grids wide). Here is a video demonstration

Of course, you can also make it more detailed, such as <div class="col-12 col-sm-6 col-md-4 col-md-3 col-lg-2"> .

Here I'll tell you a little trick. If you want to display several columns in one row, the width is just 12 divided by a certain number. Haha, I guess you can guess it.

3.4 If you do not want to respond

If you want all browsers to have the same display effect and divide them into two columns, that is, you don’t want it to be responsive, then it’s very simple. You just need to set the same number of grids on all screens <div class="col-6 col-sm-6 col-md-6 col-md-6 col-lg-6 col-xl-6 col-xxl-6"> , so that it can be kept consistent on any screen.

This is the end of this article about the implementation of Bootstrap web page layout grid. For more relevant Bootstrap grid layout content, please search 123WORDPRESS.COM's previous articles or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in: