Learn with us

Sure! The Bootstrap 5 grid system is based on a 12-column layout, allowing you to create responsive and flexible grid structures for your web pages. Here’s an overview of how to use the grid system in Bootstrap 5:

1. Container:
   To start using the grid system, you need to wrap your content within a container. There are two types of containers in Bootstrap 5:

• .container: Creates a responsive container with a fixed width based on the device’s screen size.
• .container-fluid: Creates a full-width container that spans the entire width of the viewport.

1. Rows:
   Inside the container, you’ll define rows using the .row class. Rows act as horizontal containers for columns. Each row can contain up to 12 columns.
2. Columns:
   Columns are the building blocks of the grid system and are defined using the .col class. You can specify the number of columns a particular element should occupy within a row by using the col-{breakpoint}-{number} class.

The {breakpoint} refers to the screen size at which the column layout should change, and the {number} determines the number of columns to occupy. The available breakpoints in Bootstrap 5 are:

• xs (extra small): Mobile devices (<576px)
• sm (small): Tablets (≥576px)
• md (medium): Desktops (≥768px)
• lg (large): Large desktops (≥992px)
• xl (extra large): Extra-large desktops (≥1200px)
• xxl (extra-extra large): Extra-extra-large desktops (≥1400px)

For example, to create a two-column layout where each column occupies 6 columns on medium and larger screens, you can use the following classes:

<div class="container">
  <div class="row">
    <div class="col-md-6">Column 1</div>
    <div class="col-md-6">Column 2</div>
  </div>
</div>

4. Offset and Order:
   Bootstrap 5 also provides classes to offset columns and control their order within a row. The offset classes allow you to push columns to the right by a specified number of columns. The order classes enable you to change the order of columns for different screen sizes.

Here’s an example of using offset and order classes:

<div class="container">
  <div class="row">
    <div class="col-md-6">Column 1</div>
    <div class="col-md-6 col-md-offset-3">Column 2 (offset by 3 columns)</div>
    <div class="col-md-4 order-md-3">Column 3 (order 3 on medium and larger screens)</div>
    <div class="col-md-4 order-md-1">Column 4 (order 1 on medium and larger screens)</div>
    <div class="col-md-4 order-md-2">Column 5 (order 2 on medium and larger screens)</div>
  </div>
</div>

These are the basic concepts of the Bootstrap 5 grid system. By combining rows, columns, offsets, and order classes, you can create flexible and responsive grid layouts to structure your web content effectively. Remember to include the necessary Bootstrap 5 CSS file in your project for the grid system to work properly.

Grid Options

The following table summarizes how the Bootstrap 5 grid system works across different screen sizes: