English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Bootstrap grid system is the fastest and simplest way to create responsive web page layouts.
Bootstrap provides a responsive, mobile-first, fluid grid system. As the screen or viewport (viewport) size increases, the system automatically divides into a maximum of 12 columns.
We can also define the number of columns according to our own needs:
| 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 |
| 4 | 4 | 4 | |||||||||
| 4 | 8 | ||||||||||
| 6 | 6 | ||||||||||
| 12 | |||||||||||
Bootstrap 4 The grid system is responsive, and columns will automatically rearrange according to screen size.
Bootstrap 4containing predefined grid classes can quickly create grid layouts for different types of devices (such as mobile phones, tablets, laptops, and desktops, etc.). For example, you can use these .col-*class for vertical mode ultra-small devices create grid columns, similarly, you can use these .col-sm-*class for small screen devices (such as mobile phones in landscape mode), .col-md-*Medium screen devices (such as tablets), .col-lg-*Large devices (such as desktops) and .col-xl-*classes for creating grid columns for extra-large desktop screen.
Bootstrap 4 The grid system has the following 5 classes:
.col- For all devices
.col-sm- Tablet - Screen width is equal to or greater than 576px
.col-md- Desktop显示器 - Screen width is equal to or greater than 768px)
.col-lg- Large desktop显示器 - Screen width is equal to or greater than 992px)
.col-xl- Ultra-large desktop显示器 - Screen width is equal to or greater than 1200px)
Bootstrap4 Grid system rules:
Each grid row needs to be placed in a .container (fixed width) or .container-fluid (full-screen width) class containers, so that some margins and paddings can be automatically set.
Use rows to create horizontal groups of columns.
Content needs to be placed in columns, and only columns can be direct children of rows.
Predefined classes such as .row and .col-sm-4 It can be used to quickly create grid layouts.
columns through padding create gaps between column content. This gap is set by negative margins on the first row and the last column of the .rows class.
Grid columns are created by spanning the specified 12 columns to create. For example, to set three equal columns, you need to use three .col-sm-4 to set.
Bootstrap 3 and Bootstrap 4 The biggest difference is with Bootstrap 4 Now use flexbox (flexible box) instead of floats. One of the major advantages of Flexbox is that grid columns without specified widths are automatically set toEqual-width and equal-height columns 。 If you want to learn more about Flexbox, you can read our CSS Flexbox tutorial.
The following table summarizes how the Bootstrap grid system works on different devices:
| Extra small device <576px | Tablet ≥576px | Desktop显示器 ≥768px | Large desktop显示器 ≥992px | Ultra-large desktop显示器 ≥1200px | |
|---|---|---|---|---|---|
| Container maximum width | None (auto) | 540px | 720px | 960px | 1140px |
| Class prefix | .col- | .col-sm- | .col-md- | .col-lg- | .col-xl- |
| The number of columns and | 12 | ||||
| Gap width | 30px )(a column's sides are 15px) | ||||
| Nested | Yes | ||||
| Column sorting | Yes | ||||
The following classes can be used together to create more flexible page layouts.
The following code is the basic structure of Bootstrap 4 Basic grid structure:
<!-- First instance: Control the width of the columns and how they display on different devices --> <div class="row"> <div class="col-*-*></div> </div> <div class="row"> <div class="col-*-*></div> <div class="col-*-*></div> <div class="col-*-*></div> </div> <!-- Second instance: Or let Bootstrap automatically handle the layout --> <div class="row"> <div class="col"></div> <div class="col"></div> <div class="col"></div> </div>
First instance: Create a row (<div class="row">)。Then, add the necessary columns (.col-*-* ) is used to set the number of columns needed. The first instance is*) ) represents the responsive device: sm, md, lg, or xl, the second asterisk (*) represents a number, and the sum of the numbers in the same row is 12.
Second instance: Do not add numbers to each col Add numbers to the class, and Bootstrap will automatically handle the layout, making each column in the same row equal in width: two "col" , each one is 50% of the width. Three "col"Each one is 33.33% of the width, four "col"Each one is 25% of the width, and so on. Similarly, you can use .col-sm|md|lg|xl To set the responsive rules for the columns.
Next, let's take a look at the example.
<!DOCTYPE html> <html> <head> <title>Bootstrap 示例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container-fluid"> <h1Hello World!/h1> <p>Create three columns of equal width! Try adding a new class="col" div inside the div with class="row", and it will display four equal-width columns.</p> <div class="row"> <div class="col" style="background-color:lavender;">.col</div> <div class="col" style="background-color:orange;">.col</div> <div class="col" style="background-color:lavender;">.col</div> </div> </div> </body> </html>Test to see ‹/›
The following example demonstrates how to create equal-width responsive columns on tablets and larger screens. On mobile devices, where the screen width is less than 576px, four columns will be stacked vertically.:
<!DOCTYPE html> <html> <head> <title>Bootstrap 示例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container-fluid"> <h1Hello World!/h1>重置浏览器大小查效果。Test to see ‹/›
The following examples demonstrate how to create responsive columns of unequal width on tablets and larger screens. On mobile devices, where the screen width is less than 576Two columns will be stacked vertically when the width is 100px.:
<!DOCTYPE html> <html> <head> <title>Bootstrap 示例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container-fluid"> <h1Hello World!/h1>重置浏览器大小查效果。Test to see ‹/›
Tablet and Desktop 5<p>The following examples demonstrate the width of two columns on the display of desktop devices: 25%，the width on the right is 75%, and will be displayed stacked on small devices such as mobile phones.
<!DOCTYPE html> <html> <head> <title>Bootstrap 示例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container-fluid"> <h1The following examples demonstrate the width of two columns on the display of desktop devices:/h1> >Tablet and Desktop Grid Layout< 5<p>The following examples demonstrate the width of two columns on the display of desktop devices: 25%，the width on the right is 75%, and will be displayed stacked on small devices such as mobile phones. </p> <p>Resize the browser window to see the effect.</p> <div class="container-fluid"> <div class="row"> <div class="col-sm-3 col-md-6 bg-success"> w3codebox </div> <div class="col-sm-9 col-md-6 bg-warning"> Basic Tutorial Website </div> </div> </div> </div> </body> </html>Test to see ‹/›
The following examples show the width ratios of tablets, desktops, large desktop monitors, and extra-large desktop monitors respectively:25%/75%、50%/50%、33.33%/66.67%、16.67/83.33%, and will be displayed stacked on small devices such as mobile phones.
<!DOCTYPE html> <html> <head> <title>Bootstrap 示例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container-fluid"> <h1>Tablet, Desktop, Large Desktop Monitor, Extra-Large Desktop Monitor</h1> <p>The following examples show the width ratios of tablets, desktops, large desktop monitors, and extra-large desktop monitors respectively:25%/75%、50%/50%、33.33%/66.67%、16.67/83.33%, and will be displayed stacked on small devices such as mobile phones.</p> <p>Resize the browser window to see the effect.</p> <div class="container-fluid"> <div class="row"> <div class="col-sm-3 col-md-6 col-lg-4 col-xl-2 bg-success"> w3codebox </div> <div class="col-sm-9 col-md-6 col-lg-8 col-xl-10 bg-warning"> Basic Tutorial Website </div> </div> </div> </div> </body> </html>Test to see ‹/›
offset columns through offset-*-* class to set. The first asterisk ( * ) can be sm, md, lg, xl, indicating the type of screen device, the second asterisk ( * ) can be 1 to 11 numbers.
To use offsets on large screen monitors, please use .offset-md-* classes. These classes will increase the left outer margin (margin) of a column by * columns, where * The range is from 1 to 11.
For example: .offset-md-4 It is the .col-md-4 was shifted four columns to the right.
<!DOCTYPE html> <html> <head> <title>Bootstrap 示例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css"> <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script> <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script> <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script> </head> <body> <div class="container-fluid"> <h1>Offset Columns</h1> <p>.offset-md-4 It is the .col-md-4 Moved four columns to the right.</p> <div class="container-fluid"> <div class="row"> <div class="col-md-4 bg-success">.col-md-4</div> <div class="col-md-4 offset-md-4 bg-warning">.col-md-4 .offset-md-4</div> </div> <div class="row"> <div class="col-md-3 offset-md-3 bg-success">.col-md-3 .offset-md-3</div> <div class="col-md-3 offset-md-3 bg-warning">.col-md-3 .offset-md-3</div> </div> <div class="row"> <div class="col-md-6 offset-md-3 bg-success">.col-md-6 .offset-md-3</div> </div> </div> </div> </body> </html>Test to see ‹/›
We hope you have already learned the new Bootstrap 4Basics of the grid system. In the following chapters, you will learn how to use this flexbox grid system to create basic web layouts.