WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

Bootstrap 4 - Grid System


Bootstrap provides a responsive, mobile device-first streaming grid system. As the size of the screen or viewport increases, the system will automatically divide into a maximum of 12 columns.

We can also define the number of columns according to our needs:

1 1 1 1 1 1 1 1 1 1 1 1
4 4 4
4 8
6 6
12

Bootstrap 4's grid system is responsive, and columns are automatically rearranged based on screen size.


Grid class

Bootstrap 4 grid 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 is 768px or more)
  • .col-lg- large desktop monitor-screen width equal to or greater than 992px)
  • .col-xl- Large desktop monitor-screen width equal to or greater than 1200px)

Grid system rules

Bootstrap4 grid system rules:

  • Each line of the grid needs to be placed in a container with the .container (fixed width) or .container-fluid (full screen width) class, so that it can automatically Set some padding and padding.
  • Use rows to create horizontal column groups.
  • Content needs to be placed in columns, and only columns can be direct children of a row.
  • Predefined classes like . row and . col-sm-4 can be used to quickly make grid layouts.
  • Columns create gaps between column contents by padding. This gap sets the offset of the first and last rows by a negative margin 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 it.
  • The biggest difference between Bootstrap 3 and Bootstrap 4 is that Bootstrap 4 now uses flexbox instead of floating. A great advantage of Flexbox is that grid columns without a specified width will automatically be set to equal width and contour 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:

Ultra-small device
<576px
Tablet
≥576px
Desktop monitor
≥768px
Large desktop display
≥992px
Large desktop monitor
≥1200px
Maximum container width None (auto) 540px 720px 960px 1140px
class prefix .col- .col-sm- .col-md- .col-lg- .col-xl-
Number of columns and 12
Gap width 30px (15px on each side of a column)
Nestable Yes
Column sorting Yes

The following classes can be used together to create more flexible page layouts.


Bootstrap 4 grid basic structure

The following code is the basic structure of the Bootstrap 4 grid:

Bootstrap4 grid basic structure

<!--First example: control column width and how to display it 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 example: Or let Bootstrap handle the layout automatically--> <div class="row"> <div class="col"></div> <div class="col"></div> <div class="col"></div> </div>

First example: create a line(<div class="row">). Then, add the required columns ( .col-*-* classes). First asterisk (*) Responding device: sm, md, lg or xl, the second asterisk (*) represents a number, and the numbers on the same line add up to 12.

Second example: Do not add numbers to each col , let bootstrap automatically handle the layout, and each column of the same row is equal in width: two "col" , Each with a width of 50%. Three "col" are each 33.33% wide, four "col" are each 25% wide, and so on. Similarly, you can use .col-sm | md | lg | xl to set the response rule for the column.

Next we can look at examples.

Create equal width columns, Bootstrap auto layout

Example

<div class="row"> <div class="col">.col</div> <div class="col">.col</div> <div class="col">.col</div> </div>

Same-width responsive columns

The following examples demonstrate how to create responsive columns of equal width on tablets and larger screens. On mobile devices, when the screen width is less than 576px, the four columns will be stacked on top of each other :

Example

<div class="col-sm-3">.col-sm-3</div> <div class="col-sm-3">.col-sm-3</div> <div class="col-sm-3">.col-sm-3</div> <div class="col-sm-3">.col-sm-3</div>

Unequal width responsive columns

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

Example

<div class="row"> <div class="col-sm-4">.col-sm-4</div> <div class="col-sm-8">.col-sm-8</div> </div>

Tablet and desktop

The following example demonstrates that the width of the two columns on the desktop display is 50% each. If it is on the tablet side, the width on the left is 25% and the width on the right is 75%. On small devices such as mobile phones, Stacked display.

Example

<div class="container-fluid"> <div class="row"> <div class="col-sm-3 col-md-6"> <p>welookups</p> </div> <div class="col-sm-9 col-md-6"> <p>Novice Tutorial</p> </div> </div> </div>

Flat, desktop, large desktop monitor, large desktop monitor

The width ratios of the following examples on the flat panel, desktop, large desktop display, and large desktop display are: 25% /75%, 50% /50%, 33.33% /66.67%, 16.67 /83.33%, and And other small devices will be stacked.

Example

<div class="container-fluid"> <div class="row"> <div class="col-sm-3 col-md-6 col-lg-4 col-xl-2"> <p>welookups</p> </div> <div class="col-sm-9 col-md-6 col-lg-8 col-xl-10"> <p>welookups</p> </div> </div> </div>

Offset column

The offset column is set by the offset-*-* classes. The first asterisk (*) can be sm, md, lg, xl , which indicates the screen device type, and the second asterisk (*) can be 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 the * range is from 1 to 11 .

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

Example

<div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div> </div> <div class="row"> <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div> <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div> </div> <div class="row"> <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div> </div>