Bootstrap Grid Basic

Bootstrap Grids

Bootstrap Grid System

Bootstrap’s powerful grid system uses a series of containers, rows, and columns to lay out and align content. It’s built with flexbox and is fully responsive, allowing up to 12 columns across the page.

If you don’t want to use all 12 columns individually, you can group them to create wider columns. The grid adapts to screen sizes and orientations, ensuring your layout looks great on all devices.

Visualizing Column Spans:

span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1 | span 1

span 4          | span 4          | span 4

span 4          | span 8

span 6                    | span 6

span 12

Bootstrap’s grid system is responsive, and columns will re-arrange automatically (typically stacking vertically on smaller screens) depending on the screen size and the classes you use.

Grid Classes and Breakpoints

The Bootstrap 5 grid system has six responsive tiers (breakpoints):

• No infix (e.g., .col-6): Extra small devices (<576px) - This is the default, columns apply to xs and up unless overridden.
• sm (e.g., .col-sm-6): Small devices (≥576px)
• md (e.g., .col-md-6): Medium devices (≥768px)
• lg (e.g., .col-lg-6): Large devices (≥992px)
• xl (e.g., .col-xl-6): Extra large devices (≥1200px)
• xxl (e.g., .col-xxl-6): Extra extra large devices (≥1400px)

You can combine these classes to create dynamic and flexible layouts. For example, .col-12 .col-md-6 would make a column take full width on extra small screens, and half-width on medium screens and up.

Basic Structure of a Bootstrap Grid

The basic structure involves a .container or .container-fluid to wrap everything, followed by .row to create horizontal groups of columns, and finally .col-* classes for your content.

<div class="container">
  <div class="row">
    <div class="col">
      Column content
    </div>
    <div class="col">
      Column content
    </div>
  </div>
  <div class="row">
    <div class="col-sm-8">Column content (8 units on sm and up)</div>
    <div class="col-sm-4">Column content (4 units on sm and up)</div>
  </div>
</div>

First, create a row (<div class="row">). Then, add the desired number of columns using appropriate .col-{breakpoint}-{number} classes (e.g., .col-md-4) or auto-layout columns (.col). The numbers in column classes should ideally sum up to 12 for each row if you are manually sizing them.

Below are some examples of basic Bootstrap grid layouts.

Three Equal Columns (Responsive)

.col-md-4 (stacked on <md)
.col-md-4 (stacked on <md)
.col-md-4 (stacked on <md)

This example shows how to create three equal-width columns starting at medium devices (md) and scaling to larger screens. On small and extra-small devices, the columns will stack vertically.

<!DOCTYPE html>
<html lang="en">
<head>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container mt-3">
    <div class="row">
      <div class="col-md-4 p-2 bg-light border">.col-md-4</div>
      <div class="col-md-4 p-2 bg-light border">.col-md-4</div>
      <div class="col-md-4 p-2 bg-light border">.col-md-4</div>
    </div>
  </div>
</body>
</html>

Two Unequal Columns (Responsive)

.col-sm-4 (stacked on <sm)
.col-sm-8 (stacked on <sm)

This example shows two columns of varying widths, starting at small devices (sm) and scaling up. They will stack on extra-small devices.

<!DOCTYPE html>
<html lang="en">
<head>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container mt-3">
    <div class="row">
      <div class="col-sm-4 p-2 bg-info-subtle border">.col-sm-4</div>
      <div class="col-sm-8 p-2 bg-warning-subtle border">.col-sm-8</div>
    </div>
  </div>
</body>
</html>

	Tip: Explore further topics like auto-layout columns, column wrapping, reordering, and nesting in the official Bootstrap documentation to master the grid system.