Bootstrap grid system
In this chapter we will explain Bootstrap’s Grid System.
Bootstrap provides a responsive, mobile-first fluid grid system that is automatically divided into up to 12 columns as the screen or viewport size increases.
What is Grid?
Excerpted from Wikipedia:
In graphic design, a grid is a structure (usually a two-dimensional). It is widely used for design layout and content structure in print design. In web design, it is a method for quickly creating consistent layouts and using HTML and CSS effectively.
Simply put, grids in web design are used to organize content, make the website easy to navigate, and reduce the load on the user end.
What is Bootstrap Grid System?
Description of the grid system in the official Bootstrap documentation:
Bootstrap includes a responsive, mobile-first, fluid grid system that can change with the device or viewport. The size increases appropriately and extends to 12 columns. It contains predefined classes for simple layout options, as well as powerful mixin classes for generating more semantic layouts.
Let us understand the above statement. Bootstrap 3 is mobile-first, in the sense that Bootstrap code starts with components and grids on small screen devices (e.g. mobile, tablet) and then expands to components and grids on large screen devices (e.g. laptop, desktop).
Mobile-first strategy
Content
Determine what’s most important .
Layout
Prioritize designing with smaller widths.
Basic CSS is mobile-first, and media queries are for tablets and desktop computers.
Progressive Enhancement
Adds elements as the screen size increases.
#Responsive grid system As the screen or viewport size increases, the system will automatically divide it into up to 12 columns.
1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 | 1 |
4 | 4 | 4 | |||||||||
4 | 8 | ||||||||||
6 | 6 | ||||||||||
12 |
How the Bootstrap Grid System works
The Grid system creates page layouts through a series of rows and columns that contain content. Here's how the Bootstrap grid system works:
rows must be placed inside the .container class in order to get proper alignment and content padding.
Use rows to create horizontal groups of columns.
Content should be placed within columns, and only columns can be direct child elements of rows.
Predefined grid classes, such as .row and .col-xs-4, can be used to quickly create grid layouts. LESS mixin classes can be used for more semantic layouts.
Columns use padding to create gaps between column contents. The inner margin is negatived by the outer margin (margin) on .rows, which represents the row offset of the first column and the last column.
The grid system is created by specifying the twelve available columns that you want to span. For example, to create three equal columns, use three .col-xs-4.
Media Queries
Media queries are very fancy "conditional CSS rules". It only works with some CSS based on certain specified conditions. If those conditions are met, the corresponding style is applied.
Media queries in Bootstrap allow you to move, show and hide content based on the viewport size. The following media query is used in the LESS file to create key breakpoint thresholds in the Bootstrap grid system.
/* 超小设备(手机,小于 768px) */ /* Bootstrap 中默认情况下没有媒体查询 */ /* 小型设备(平板电脑,768px 起) */ @media (min-width: @screen-sm-min) { ... } /* 中型设备(台式电脑,992px 起) */ @media (min-width: @screen-md-min) { ... } /* 大型设备(大台式电脑,1200px 起) */ @media (min-width: @screen-lg-min) { ... }
We also sometimes include max-width in media query code to limit the impact of CSS to a smaller range of screen sizes.
@media (max-width: @screen-xs-max) { ... } @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... } @media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... } @media (min-width: @screen-lg-min) { ... }
A media query has two parts, first a device specification and then a size rule. In the above case, the following rules are set:
Let's look at the following line of code:
@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }
For all files with min-width: @screen-sm- min device, if the width of the screen is smaller than @screen-sm-max, some processing will be performed.
Grid Options
The following table summarizes how the Bootstrap grid system works across multiple devices:
Ultra-small device mobile phone (<768px) | Small device tablet (≥768px) | Medium Device Desktop (≥992px) | Large Device Desktop (≥1200px) | |
---|---|---|---|---|
Grid Behavior | Always Horizontal | Start with folding, the level above the breakpoint is horizontal | Start with folding, the level above the breakpoint is horizontal | Start with folding, the level above the breakpoint is horizontal |
Maximum container width | None (auto) | 750px | 970px | 1170px |
Class prefix | .col-xs- | .col-sm- | .col -md- | .col-lg- |
column quantity and | 12 | 12 | 12 | 12 |
Maximum column width | Auto | 60px | 78px | 95px |
Gap width | 30px (15px on each side of a column) | 30px (15px on each side of a column) | 30px (15px on each side of a column) | 30px (15px on each side of a column) |
Nestable | Yes | Yes | Yes | Yes |
Offset | Yes | Yes | Yes | Yes |
Column sorting | Yes | Yes | Yes | Yes |
Basic grid structure
The following is the basic structure of the Bootstrap grid:
<div class="container"> <div class="row"> <div class="col-*-*"></div> <div class="col-*-*"></div> </div> <div class="row">...</div> </div> <div class="container">....
Let us look at a few simple grid examples:
Example: Stacked Levels
Example: Medium and Large Devices
Examples: mobile phones, tablets, desktop computers
Responsive column reset
The following example contains 4 grids, but We cannot determine the position of the grid display when browsing on small devices.
In order to solve this problem, you can use the .clearfix class and responsive utilities, as shown in the following example:
Example
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 实例 - 响应式的列重置</title> <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"> <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <div class="row" > <div class="col-xs-6 col-sm-3" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> <div class="col-xs-6 col-sm-3" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut. </p> </div> <div class="clearfix visible-xs"></div> <div class="col-xs-6 col-sm-3" style="background-color: #dedef8; box-shadow:inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </div> <div class="col-xs-6 col-sm-3" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim </p> </div> </div> </div> </body> </html>
Run Instance»
Click the "Run Instance" button to view the online instance
Resize the window on the browser to view the changes, or See the results on your phone.
Offset Columns
Offset is a useful feature for more professional layouts. They can be used to make more space for columns. For example, the .col-xs=* classes do not support offsets, but they can achieve the effect simply by using an empty cell.
To use offsets on large screen displays, use the .col-md-offset-* classes. These classes will increase the left margin of a column by * columns, where * ranges from 1 to 11.
In the example below, we have <div class="col-md-6">..</div>, we will use .col-md-offset-3 class to center this div.
Instance
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 实例 - 偏移列</title> <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"> <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h1>Hello, world!</h1> <div class="row" > <div class="col-xs-6 col-md-offset-3" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p> </div> </div> </div> </body> </html>
Run instance»
Click the "Run instance" button to view the online instance
Nested Columns
To nest the default grid within content, add a new .row and add it to an existing . Add a set of .col-md-* columns within the col-md-* column. The nested row should contain a set of columns that cannot exceed 12 (in fact, there is no requirement that you have to occupy all 12 columns).
In the example below, the layout has two columns, and the second column is divided into two rows of four boxes.
Instance
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 实例 - 嵌套列</title> <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"> <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h1>Hello, world!</h1> <div class="row"> <div class="col-md-3" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> <h4>第一列</h4> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> </div> <div class="col-md-9" style="background-color: #dedef8;box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> <h4>第二列 - 分为四个盒子</h4> <div class="row"> <div class="col-md-6" style="background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> <p>Consectetur art party Tonx culpa semiotics. Pinterest assumenda minim organic quis. </p> </div> <div class="col-md-6" style="background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> <p> sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </div> </div> <div class="row"> <div class="col-md-6" style="background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> <p>quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </div> <div class="col-md-6" style="background-color: #B18904; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim.</p> </div> </div> </div> </div> </div> </body> </html>
Run instance»
Click the "Run instance" button to view the online instance
Column Ordering
Another great feature of the Bootstrap grid system is that you can easily write columns in one order and then display them in another order List.
You can easily change the built-in grid columns with the .col-md-push-* and .col-md-pull-* classes order, where * ranges from 1 to 11.
In the example below, we have a two-column layout, with the narrow left column acting as a sidebar. We will use the .col-md-push-* and .col-md-pull-* classes to swap the order of these two columns.
Instance
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Bootstrap 实例 - 列排序</title> <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css"> <script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h1>Hello, world!</h1> <div class="row"> <p>排序前</p> <div class="col-md-4" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> 我在左边 </div> <div class="col-md-8" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> 我在右边 </div> </div><br> <div class="row"> <p>排序后</p> <div class="col-md-4 col-md-push-8" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> 我在左边 </div> <div class="col-md-8 col-md-pull-4" style="background-color: #dedef8; box-shadow: inset 1px -1px 1px #444, inset -1px 1px 1px #444;"> 我在右边 </div> </div> </div> </body> </html>
Run instance»
Click the "Run instance" button to view the online instance