Understanding Bootstrap 5 Grid

Bootstrap 5’s grid system is a powerful and flexible way to layout and align content. It uses a 12-column layout that can be adjusted for different screen sizes (responsive design) using predefined classes. The grid system is built on flexbox and provides an easy way to structure your page.

Basic Concepts:

Containers: These are the wrappers for the rows and columns. Bootstrap has two types: .container (fixed-width) and .container-fluid (full-width).
Rows: A row (.row) is a horizontal group of columns.
Columns: Columns are the building blocks of the grid. You define columns with the class .col and use numbers to specify how many of the 12 available columns the element should span (e.g., .col-6 for half-width columns).

Practical Example:

Let’s create a simple layout with 3 columns, where each column takes up 4 out of the 12 columns in a row (3 equal-width columns).

Example: A Simple 3-Column Layout

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap Grid Example</title>
  <!-- Bootstrap 5 CSS CDN -->
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>

  <!-- Container to hold the grid -->
  <div class="container">
    <!-- Row inside the container -->
    <div class="row">
      <!-- Column 1: takes 4 out of 12 columns -->
      <div class="col-4">
        <div class="p-3 border bg-light">Column 1</div>
      </div>
      <!-- Column 2: takes 4 out of 12 columns -->
      <div class="col-4">
        <div class="p-3 border bg-light">Column 2</div>
      </div>
      <!-- Column 3: takes 4 out of 12 columns -->
      <div class="col-4">
        <div class="p-3 border bg-light">Column 3</div>
      </div>
    </div>
  </div>

  <!-- Bootstrap 5 JS and Popper.js -->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Explanation of the Code:

Container (.container): This wraps the grid and centers it on the page. You can also use .container-fluid to make the grid take up the full width of the screen.
Row (.row): This creates a new horizontal row. Rows contain columns, and each row must be inside a container.
Columns (.col-4): Bootstrap divides the row into 12 equal parts. Each column takes a number of these parts. In this case, each .col-4 takes 4 out of the 12 available columns, so three .col-4 columns fit into one row evenly (4 + 4 + 4 = 12).
Responsive Design: Bootstrap allows you to control column sizes for different screen sizes. For example:
- .col-sm-6: 6 columns on small screens (576px and up).
- .col-md-4: 4 columns on medium screens (768px and up).
- .col-lg-3: 3 columns on large screens (992px and up).

Responsive Example: One column on small screens, three columns on larger screens

<div class="container">
  <div class="row">
    <!-- This will be full-width on small screens and 4 columns (1/3 width) on medium screens and above -->
    <div class="col-sm-12 col-md-4">
      <div class="p-3 border bg-light">Column 1</div>
    </div>
    <div class="col-sm-12 col-md-4">
      <div class="p-3 border bg-light">Column 2</div>
    </div>
    <div class="col-sm-12 col-md-4">
      <div class="p-3 border bg-light">Column 3</div>
    </div>
  </div>
</div>

In this responsive example:

On screens smaller than 576px (col-sm-12), each column takes the full width.
On screens 768px and larger (col-md-4), the columns each take up 4 out of 12 columns (1/3 of the row).

This demonstrates how Bootstrap's grid system adapts to different screen sizes while maintaining a clean and flexible layout.

kingluddite/bootstrap-5-grid.md

Basic Concepts:

Practical Example:

Example: A Simple 3-Column Layout

Explanation of the Code:

Responsive Example: One column on small screens, three columns on larger screens