Let's talk about the grid system in Bootstrap 4

This article will take you through the grid system in Bootstrap. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

Bootstrap4’s grid system

Bootstrap provides a responsive, mobile-first fluid grid system that changes with the screen or viewport As the (viewport) size increases, the system will automatically divide it into up to 12 columns.

Bootstrap 4’s grid system is responsive and columns automatically rearrange based on screen size.

Related recommendations: "bootstrap Tutorial"

Grid Class

Bootstrap 4 Grid The system has the following 5 classes:

.col- for all devices
.col-sm- tablet- screen width equal to or greater than 576px
.col-md- desktop monitor- screen width equal to or Larger than 768px)
.col-lg-Large desktop monitor-Screen width equal to or larger than 992px)
.col-xl-Extra-large desktop monitor-Screen width equal to or larger than 1200px)

Grid system rules

Bootstrap4 grid system rules:

Each row of the grid needs to be placed in a set .container (fixed width) or .container- fluid (full screen width) class container, so that some margins and padding can be automatically set.

Use rows to create horizontal column groups.

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 can be used to quickly make grid layouts.

Columns create gaps between column contents by padding. This gap is offset by setting the first row and last column via negative margins on the .rows class.

Grid columns are created by spanning the specified 12 columns. For example, to set three equal columns, you need to use three .col-sm-4 to set.

The biggest difference between Bootstrap 3 and Bootstrap 4 is that Bootstrap 4 now uses flexbox (flexible box) instead of float. One of the great things about Flexbox is that grid columns that don't have a specified width are automatically set to equal width and height. 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:

The basic structure of the Bootstrap 4 grid

<!-- 第一个例子：控制列的宽度及在不同的设备上如何显示 -->
<div>
  <div></div>
</div>
<div>
  <div></div>
  <div></div>
  <div></div>
</div>
 
<!-- 第二个例子：或让 Bootstrap 者自动处理布局 -->
<div>
  <div></div>
  <div></div>
  <div></div>
</div>

第一个例子：创建一行(<div>)。
然后， 添加是需要的列( .col-*-* 类中设置)。 
第一个星号 (*) 表示响应的设备: sm, md, lg 或 xl, 
第二个星号 (*) 表示一个数字, 同一行的数字相加为 12。

第二个例子: 不在每个 col 上添加数字，
让 bootstrap 自动处理布局，同一行的每个列宽度相等： 
两个 "col" ，每个就为 50% 的宽度。
三个 "col"每个就为 33.33% 的宽度，
四个 "col"每个就为 25% 的宽度，
以此类推。同样，你可以使用 .col-sm|md|lg|xl 来设置列的响应规则。<p><span style="font-size: 16px;"><strong>Create equal width columns, Bootstrap automatic layout</strong></span></p>
<pre class="brush:php;toolbar:false"><div>
  <div>.col</div>
  <div>.col</div>
  <div>.col</div>
</div>

Equal-width responsive columns

The following example demonstrates how to create equal-width responsive columns on tablets and larger screens. On mobile devices, that is, when the screen width is less than 576px, the four columns will be stacked one above the other:

<div>.col-sm-3</div>
<div>.col-sm-3</div>
<div>.col-sm-3</div>
<div>.col-sm-3</div>

Unequal-width responsive columns

The following example demonstrates creating responsive columns of unequal width on tablets and larger screens. On mobile devices, that is, when the screen width is less than 576px, the two columns will be stacked on top of each other:

<div>
  <div>.col-sm-4</div>
  <div>.col-sm-8</div>
</div>

Tablet and desktop

The following example demonstrates that on a desktop monitor, the width of the two columns each accounts for 50%. If it is on a tablet, the width of the left column is 25% and the width of the right column is 75%. On small devices such as mobile phones, the columns will be stacked.

<div>
  <div>
    <div>
      <p></p>
    </div>
    <div>
      <p></p>
    </div>
  </div>
</div>

Tablet, desktop, large desktop monitor, extra large desktop monitor

##The following examples are used in tablet, desktop, large desktop monitor, extra large desktop monitor The width ratios are: 25%/75%, 50%/50%, 33.33%/66.67%, 16.67/83.33%, which will be displayed stacked on small devices such as mobile phones.

<div>
  <div>
    <div>
      <p></p>
    </div>
    <div>
      <p></p>
    </div>
  </div>
</div>

Offset column

The offset column is set through the offset-

- class. The first asterisk (*) can be sm, md, lg, xl, indicating the screen device type, and the second asterisk (*) can be a number from 1 to 11.

To use offsets on large screen displays, use the .offset-md-* classes. These classes increase the left margin of a column by * columns, where * ranges from 1 to 11.

For example: .offset-md-4 moves .col-md-4 four columns to the right.

<div>
  <div>.col-md-4</div>
  <div>.col-md-4 .offset-md-4</div>
</div>
<div>
  <div>.col-md-3 .offset-md-3</div>
  <div>.col-md-3 .offset-md-3</div>
</div>
<div>
  <div>.col-md-6 .offset-md-3</div>
</div>

For more programming-related knowledge, please visit:

Programming Video! !