WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

Bootstrap Grids


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's grid system is responsive, and columns are automatically rearranged based on screen size.


Grid class

bootstrap 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 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 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 is that bootstrap 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.

Basic Structure of a Bootstrap Grid

The below example is a basic structure of a Bootstrap grid:

<div class="row">
  <div class="col-*-*"></div>
</div>
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>
<div class="row">
  ...
</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

.col-sm-5
.col-sm-5
.col-sm-5

The below example will show how to get a three equal-width columns starting at tablets and scaling to large desktops. where mobile phones the columns will be automatically stack:

Example

<div class="row">
  <div class="col-sm-5">.col-sm-5</div>
  <div class="col-sm-5">.col-sm-5</div>
  <div class="col-sm-5">.col-sm-5</div>
</div>
Try it Yourself »

Unequal width responsive columns

.col-sm-6
.col-sm-10

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-6">.col-sm-6</div>
  <div class="col-sm-10">.col-sm-10</div>
</div>
Try it Yourself »