Grids Basic

Bootstrap Grids

Grid System

Bootstrap uses Flexbox for its grid layout, supporting up to 12 columns across the entire page.

If you don't need to use all 12 columns separately, you can combine multiple columns to form broader sections.

span 1

span 4

span 8

span 6

span 12

The grid system is responsive, and the columns will re-arrange automatically depending on the screen size.

Make sure that the sum adds up to 12 or fewer (it is not required that you use all 12 available columns).

Grid Classes

The Bootstrap 5 grid system has six classes:

.col- (extra small devices - screen width less than 576px)

.col-sm- (small devices - screen width equal to or greater than 576px)

.col-md- (medium devices - screen width equal to or greater than 768px)

.col-lg- (large devices - screen width equal to or greater than 992px)

.col-xl- (xlarge devices - screen width equal to or greater than 1200px)

.col-xxl- (xxlarge devices - screen width equal to or greater than 1400px)

The classes above can be combined to create more dynamic and flexible layouts.

<!-- Control the column width, and how they should appear on different devices -->
<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>

<div class="row">
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
  <div class="col-*-*"></div>
</div>

<!-- Or let Bootstrap automatically handle the layout -->
<div class="row">
  <div class="col"></div>
  <div class="col"></div>
  <div class="col"></div>
</div>

Class	Breakpoint	Description
`.col`	Auto	Auto-distributes available space evenly
`.col-sm-3`	Small (≥576px)	Occupies 3 of 12 columns on small and larger screens

The example below demonstrates how to make four columns with equal width starting from tablet-sized screens and up to extra-large desktops. On smaller screens (less than 576px), these columns will stack vertically by default.

Responsive Columns

Output :

Two Unequal Responsive Columns

.col-sm-4

.col-sm-8

This example demonstrates how to create two columns of different widths starting from tablet-sized screens and adjusting up to large desktop displays.

Output :

« Previous Next »