Skip to main content

Grid System in Bootstrap 5

Bootstrap Grid System​

The grid system allows you to create responsive layouts by dividing the page into rows and columns.

You can use a combination of containers, rows, and columns to structure your content and control its positioning and responsiveness.

Here's an overview of how the Bootstrap 5 grid system works:

Containers​

  • Bootstrap provides two types of containers: .container and .container-fluid.
  • The .container class creates a fixed-width container that is centered horizontally on the page.
  • The .container-fluid class creates a full-width container that spans the entire width of the viewport.

Rows​

  • Rows are used to contain columns within a container.
  • Create a row using the .row class.

Columns​

  • Columns are used to divide the horizontal space within a row.
  • Columns are specified by applying classes such as .col or .col-{breakpoint}-{number} to a <div> element.
  • The grid system is based on a 12-column layout.
  • You can use different column classes to define the column width at different breakpoints.
  • For example, .col-6 specifies a column that occupies 6 out of 12 columns, and .col-lg-4 specifies a column that occupies 4 out of 12 columns on large screens and above.

As an example:

Editor

Loading...