search
HomeWeb Front-endBootstrap TutorialAn in-depth analysis of the grid system in Bootstrap

An in-depth analysis of the grid system in Bootstrap

Sep 13, 2021 pm 06:46 PM
bootstrapgrid system

This article will introduce you to the web page layout grid system in Bootstrap, and understand the working principle, cell width setting and responsive layout method of the Bootstrap grid system. I hope it will be helpful to everyone. !

An in-depth analysis of the grid system in Bootstrap

1. How the Bootstrap grid system works

1.1 Twelve grid system

Grid is grid, English Grid, the reason why some places are grids and some places are rasters is just that the translation habits are different. The twelve grid system means that the entire screen is divided into twelve equal parts according to the width, and one equal part represents one-twelfth of the screen width. Why is it divided into twelve equal parts, rather than ten equal parts or other equal parts? As for parts, this is because 12 is the least common multiple of 1, 2, 3, 4, and 6. According to experience, this division is the most beautiful and practical. Of course, I have also seen 36-grid and 10-grid systems. From the perspective of use, they are indeed not as convenient as 12-grid systems. [Related recommendation: "bootstrap Tutorial"]

In the twelve-grid system, if I want to divide the screen into left and right sides, the left side takes up one-third and the right side takes up three-thirds Second, you can set the left width to 4 grids and the right width to 8 grids. If I need half of the left and right sides, I just need to set each to 6 grids. If I only need to set one page to fill the screen, I can directly set it to 12 grids. Look, isn’t it very convenient?

1.2 Bootstrap grid system tags

Bootstrap grid system design has three tags, namely container, row, col:

  • Container is a container. In the previous section, it was introduced in detail.
  • 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), col-screen size-number of grids (such as col-md-3).

The following is a sample code that divides the screen into three equal-width units. There is no need to delve into the specific code writing method. You only need to briefly understand the structure of the grid system. We will cover it later. Detailed description.

<div class="container">
    <div class="row">
        <div class="col">
            第一个单元
        </div>
        <div class="col">
            第二个单元
        </div>
        <div class="col">
            第三个单元
        </div>
    </div>
</div>

1.3 Bootstrap Grid System Rules

  • Use rows to create horizontal groups of columns.

  • There can be multiple rows in one page.

  • Rows must be placed inside a container to obtain proper alignment and padding.

  • Content should be placed within a column (col), and only columns can be direct child elements of rows.

  • Rows can also be nested within a column. Rows within a column do not need a container because the column itself is a container.

  • You can directly use predefined grid classes, such as col-screen size-number of grids, to quickly create grid layouts.

  • In the predefined class, the screen size has 5 values, mainly used for responsive design, see 3.1. The grid number is a number from 1 to 12, which represents the width of the screen.

2. Cell width settings in the Bootstrap grid system

2.1 Default equal-width layout

If we do not set the width of each column, the default number of columns will be evenly distributed, but if there are more than 12 columns in a row, unpredictable phenomena will occur ( I did a few tests for research. You don’t need to test this. If you want to layout more than 12, you can use a table). I will give a piece of code below. I will continue to use this code with some minor changes, so I won’t give it again.

When using col, col-grid number to set the width, please set the window width to the maximum for the preview 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 to be responsive.

<!doctype html>
<html>
  <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="stylesheet">
 
    <title>网格系统演示</title>
  </head>
  <body>
  
    <div>
        <div>
            <div>
                <h1 id="Bootstrap是什么">Bootstrap是什么?</h1>
                <p>
                    我们在开发前端页面的时候,如果每一个按钮、样式、处理浏览器兼容性的代码都要自己从零
                    开始去写,那就太浪费时间了。所以我们需要一个框架,帮我们实现一个页面的基础部分和解
                    决一些繁琐的细节,只要在它的基础上进行个性化定制就可以了。Bootstrap 就是这样一个简
                    洁、直观、强悍的前端开发框架,只要学习并遵守它的标准,即使是没有学过网页设计的开发
                    者,也能做出很专业、美观的页面,极大地提高了工作效率。
                </p>
            </div>
            <div>
                <h1 id="Bootstrap是什么">Bootstrap是什么?</h1>
                <p>
                    我们在开发前端页面的时候,如果每一个按钮、样式、处理浏览器兼容性的代码都要自己从零
                    开始去写,那就太浪费时间了。所以我们需要一个框架,帮我们实现一个页面的基础部分和解
                    决一些繁琐的细节,只要在它的基础上进行个性化定制就可以了。Bootstrap 就是这样一个简
                    洁、直观、强悍的前端开发框架,只要学习并遵守它的标准,即使是没有学过网页设计的开发
                    者,也能做出很专业、美观的页面,极大地提高了工作效率。
                </p>
            </div>
            <div>
                <h1 id="Bootstrap是什么">Bootstrap是什么?</h1>
                <p>
                    我们在开发前端页面的时候,如果每一个按钮、样式、处理浏览器兼容性的代码都要自己从零
                    开始去写,那就太浪费时间了。所以我们需要一个框架,帮我们实现一个页面的基础部分和解
                    决一些繁琐的细节,只要在它的基础上进行个性化定制就可以了。Bootstrap 就是这样一个简
                    洁、直观、强悍的前端开发框架,只要学习并遵守它的标准,即使是没有学过网页设计的开发
                    者,也能做出很专业、美观的页面,极大地提高了工作效率。
                </p>
            </div>
            <div>
                <h1 id="Bootstrap是什么">Bootstrap是什么?</h1>
                <p>
                    我们在开发前端页面的时候,如果每一个按钮、样式、处理浏览器兼容性的代码都要自己从零
                    开始去写,那就太浪费时间了。所以我们需要一个框架,帮我们实现一个页面的基础部分和解
                    决一些繁琐的细节,只要在它的基础上进行个性化定制就可以了。Bootstrap 就是这样一个简
                    洁、直观、强悍的前端开发框架,只要学习并遵守它的标准,即使是没有学过网页设计的开发
                    者,也能做出很专业、美观的页面,极大地提高了工作效率。
                </p>
            </div>
            
        </div>
    </div>
 
     <script src="bootstrap5/bootstrap.bundle.min.js" ></script>
  </body>
</html>

An in-depth analysis of the grid system in Bootstrap

The effect of this code is shown in the picture above. You can copy a few more cells below to see the effect.

              <div class="col">
                <h1 id="Bootstrap是什么">Bootstrap是什么?</h1>
                <p>
                    我们在开发前端页面的时候,如果每一个按钮、样式、处理浏览器兼容性的代码都要自己从零
                    开始去写,那就太浪费时间了。所以我们需要一个框架,帮我们实现一个页面的基础部分和解
                    决一些繁琐的细节,只要在它的基础上进行个性化定制就可以了。Bootstrap 就是这样一个简
                    洁、直观、强悍的前端开发框架,只要学习并遵守它的标准,即使是没有学过网页设计的开发
                    者,也能做出很专业、美观的页面,极大地提高了工作效率。
                </p>
            </div>

An in-depth analysis of the grid system in Bootstrap

2.2 Set the width of each column

Try to add three is replaced with col-3, col-6, col-3 or other values. In short, 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 one row is 12. Through such a simple setting, the width of the cell can be modified very conveniently. The picture below shows the display effect after setting col to col-2, col-2, col-4, col-4 respectively

An in-depth analysis of the grid system in Bootstrap

2.3 Variable-width columns

If you set the cell value, if there are three cells and only one is set, the remaining The two cells below will divide the remaining space equally, making it easy to set up variable-width columns. As a reminder, the cell where the fixed value is set does not need to be in front. For example, in the 2.1 code, you can set the second cell to occupy the entire screen (col-6), and the other cells are evenly distributed.

An in-depth analysis of the grid system in Bootstrap

2.4 Automatically wrap columns

When each cell has a width value set, when In a row, when the remaining space no longer accommodates a cell, it will automatically wrap.

  • In the example of 2.1, replace the col in the four <div class="col"> with col-6 to see the effect. <p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/image/569/508/978/1631529707575018.png?x-oss-process=image/resize,p_40" class="lazy" title="1631529707575018.png" alt="An in-depth analysis of the grid system in Bootstrap"></p> <ul style="list-style-type: disc;"><li>## Take the example of 2.1 and replace the four <p></p> <div class="col">## Change the col in # to col-12 to see the effect. <code>

    An in-depth analysis of the grid system in Bootstrap

    ## Take the example of 2.1 and replace the four
      ## Change the col in # 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 12/8 of the screen. That is two-thirds, so if there are no special requirements, try to add the cell values ​​​​in each row to exactly 12.

      An in-depth analysis of the grid system in Bootstrap

      3. Bootstrap grid responsive layout

      3.1 What is responsive layout

      Regarding responsive layout, simply speaking, it means that the page layout displayed is different when the screen size is different. For example, when viewing on a mobile phone, there is only one cell in a row, when viewing on a tablet, there are two cells in a row, and when viewing on a computer, there are three. Bootstrap can easily implement this function.

      3.2 Screen size division of Bootstrap grid system

      Look at the table below. Is it familiar? It is exactly the same as the breakpoint regulations. It’s just 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 size types through 5 breakpoints.

      xsmdlgxlxxl540px720px960px1140px1320pxScreen size class prefix

      3.3 Bootstrap Grid Responsive Layout Example

      Take the example of 2.1 and replace the four <div class="col"> are replaced with <code><div class="col-12 col-md-6 col-lg-4">, change the browser window size and check the effect. The meaning of this code is When <p><img src="/static/imghwm/default1.png" data-src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d0d333468f544f4c93537e842e7d7db6~tplv-k3u1fbpfcp-watermark.awebp?x-oss-process=image/resize,p_40" class="lazy" alt="An in-depth analysis of the grid system in Bootstrap" ></p> <p>Of course you can also change the points to be more detailed and change to<code><div class="col-12 col-sm-6 col-md-4 col-md-3 col-lg-2">. <p>Here is a little trick. If you want to display several columns in one row, the width is just divided by 12. Haha, I guess you can think of it too. </p> <p><strong><span style="font-size: 18px;">3.4 If you don’t want to respond</span></strong></p> <p>If you want all browsers to display the same effect, divide them into two columns, that is, you don’t want to To make it display responsively, it is very simple. You can set the number of grids under all screens to the same value<code><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 consistent on any screen. <blockquote> <p>Original address: https://juejin.cn/post/6970846739293011998#heading-9</p> <p>Author: I Lao Liu</p> </blockquote> <p>More programming For related knowledge, please visit: <a href="https://www.php.cn/course.html" target="_blank" textvalue="编程视频">programming video</a>! ! </p> </div>

                                                                                                                  ≥576px
      ≥768px
      ≥992px
      ≥1200px
      ≥1400px

      Container container
      None (auto)
      .col-
      .col-sm- .col-md- .col-lg- .col-xl- .col-xxl-

The above is the detailed content of An in-depth analysis of the grid system in Bootstrap. For more information, please follow other related articles on the PHP Chinese website!

Statement
This article is reproduced at:掘金--俺老刘. If there is any infringement, please contact admin@php.cn delete
Understanding the Bootstrap Grid System for Responsive Web DesignUnderstanding the Bootstrap Grid System for Responsive Web DesignMay 14, 2025 am 12:07 AM

Bootstrap'sgridsystemiseffectiveduetoits12-columnlayoutandresponsiveclasses,allowingforflexibleandmaintainabledesigns.Toleverageit:1)Userowsandcolumnswithclasseslikecol-md,col-sm,andcol-lgfordifferentscreensizes.2)Simplifylayoutsbyavoidingexcessivene

Bootstrap Grid System: A Comprehensive Guide to Responsive LayoutsBootstrap Grid System: A Comprehensive Guide to Responsive LayoutsMay 13, 2025 pm 04:17 PM

BootstrapGridSystemisessentialforcreatingresponsivelayouts.1)Itusescontainers,rows,andcolumnsbasedona12-columnlayout.2)CSSflexboxandmediaqueriesensureflexibilityacrossscreensizes.3)Classeslikecol-xs,col-sm,col-md,andcol-lgcontrollayoutchanges.4)Avoid

Bootstrap: Applications and Advantages ExplainedBootstrap: Applications and Advantages ExplainedMay 10, 2025 am 12:18 AM

Bootstrap is a front-end framework for quickly building responsive websites. Its advantages include: 1. Rapid development: leverage predefined styles and components. 2. Consistency: Provide a unified design style. 3. Responsive design: The built-in grid system is adapted to various devices. Bootstrap simplifies the web development process through CSS classes and JavaScript plug-ins.

Bootstrap: Simplifying Responsive Web DevelopmentBootstrap: Simplifying Responsive Web DevelopmentMay 09, 2025 am 12:13 AM

Bootstrap simplifies the development process mainly through its raster system, predefined components and JavaScript plug-ins. 1. The grid system allows for flexible layout, 2. Predefined components such as buttons and navigation bars simplify style design, 3. JavaScript plug-in enhances interactive functions and improves development efficiency.

Bootstrap: The Key to Responsive Web DesignBootstrap: The Key to Responsive Web DesignMay 08, 2025 am 12:24 AM

Bootstrap is an open source front-end framework developed by Twitter, providing rich CSS and JavaScript components, simplifying the construction of responsive websites. 1) Its grid system is based on a 12-column layout, and the display of elements under different screen sizes is controlled through class names. 2) The component library includes buttons, navigation bars, etc., which are easy to customize and use. 3) The working principle depends on CSS and JavaScript files, and you need to pay attention to handling dependencies and style conflicts. 4) The usage examples show basic and advanced usage, emphasizing the importance of custom functionality. 5) Common errors include grid system calculation errors and style coverage, which require debugging using developer tools. 6) Performance optimization recommendations only introduce necessary components and customize samples using preprocessors

Bootstrap: A Powerful Framework for Web DesignBootstrap: A Powerful Framework for Web DesignMay 07, 2025 am 12:05 AM

Bootstrap is an open source front-end framework developed by the Twitter team to simplify and speed up the web development process. 1.Bootstrap is based on HTML, CSS and JavaScript, and provides a wealth of components and tools for creating modern user interfaces. 2. Its core lies in responsive design, implementing various layouts and styles through predefined classes and components. 3.Bootstrap provides predefined UI components, such as navigation bars, buttons, forms, etc., which are easy to use and adjust. 4. Examples of usage include creating a simple navigation bar and advanced collapsible sidebar. 5. Common errors include version conflicts, CSS overwrites and JavaScript errors, which can be used through the version management tool.

The Power of Bootstrap in React: A Detailed LookThe Power of Bootstrap in React: A Detailed LookMay 06, 2025 am 12:06 AM

Bootstrap can be integrated in React in two ways: 1) CSS and JavaScript files using Bootstrap; 2) Use the React-Bootstrap library. React-Bootstrap provides encapsulated React components, making using Bootstrap in React more natural and efficient.

Using Bootstrap Components in React: A Step-by-Step TutorialUsing Bootstrap Components in React: A Step-by-Step TutorialMay 05, 2025 am 12:09 AM

There are two ways to use Bootstrap components in React projects: 1) CSS and JavaScript of the original Bootstrap; 2) Use libraries designed specifically for React such as react-bootstrap or reactstrap. 1) Install Bootstrap through npm and introduce its CSS file in the entry file, and then use the Bootstrap class name in the React component. 2) After installing react-bootstrap or reactstrap, directly use the React components it provides. Use these methods to quickly build a responsive UI, but pay attention to style loading and JavaScript

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

SublimeText3 Linux new version

SublimeText3 Linux new version

SublimeText3 Linux latest version

SAP NetWeaver Server Adapter for Eclipse

SAP NetWeaver Server Adapter for Eclipse

Integrate Eclipse with SAP NetWeaver application server.

MinGW - Minimalist GNU for Windows

MinGW - Minimalist GNU for Windows

This project is in the process of being migrated to osdn.net/projects/mingw, you can continue to follow us there. MinGW: A native Windows port of the GNU Compiler Collection (GCC), freely distributable import libraries and header files for building native Windows applications; includes extensions to the MSVC runtime to support C99 functionality. All MinGW software can run on 64-bit Windows platforms.

DVWA

DVWA

Damn Vulnerable Web App (DVWA) is a PHP/MySQL web application that is very vulnerable. Its main goals are to be an aid for security professionals to test their skills and tools in a legal environment, to help web developers better understand the process of securing web applications, and to help teachers/students teach/learn in a classroom environment Web application security. The goal of DVWA is to practice some of the most common web vulnerabilities through a simple and straightforward interface, with varying degrees of difficulty. Please note that this software