BootstrapHow-ToBeginner · 3 min read

How to Create Responsive Grid in Bootstrap Easily

Use Bootstrap's container, row, and col classes to create a responsive grid. Specify column sizes with breakpoint prefixes like col-sm-4 or col-lg-6 to control layout on different screen widths.

📐

Syntax

Bootstrap's grid uses a container to hold rows, rows to hold columns, and columns to hold content. Columns use classes like col, col-sm-*, col-md-*, col-lg-*, and col-xl-* to define width at different screen sizes.

container: Wraps the grid and centers content.
row: Creates a horizontal group of columns.
col-*: Defines column width; * is a number from 1 to 12 representing fraction of row width.
Breakpoints: sm (≥576px), md (≥768px), lg (≥992px), xl (≥1200px).

html

<div class="container">
  <div class="row">
    <div class="col-sm-4">Column 1</div>
    <div class="col-sm-4">Column 2</div>
    <div class="col-sm-4">Column 3</div>
  </div>
</div>

Output

Three equal columns side by side on small screens and larger, stacked on extra small screens.

💻

Example

This example shows a responsive grid with three columns that stack on extra small screens and sit side by side on small screens and larger.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Bootstrap Responsive Grid Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
  <div class="container mt-4">
    <div class="row">
      <div class="col-12 col-sm-4 bg-primary text-white p-3">Column 1</div>
      <div class="col-12 col-sm-4 bg-secondary text-white p-3">Column 2</div>
      <div class="col-12 col-sm-4 bg-success text-white p-3">Column 3</div>
    </div>
  </div>
</body>
</html>

Output

On small screens and larger, three colored columns appear side by side. On extra small screens, columns stack vertically.

⚠️

Common Pitfalls

Common mistakes when creating responsive grids in Bootstrap include:

Not wrapping row inside a container, causing layout issues.
Forgetting to use breakpoint prefixes, so columns don't respond to screen size changes.
Using column widths that don't add up to 12, which can break the layout.
Placing content directly inside row without columns, which breaks the grid.

html

<!-- Wrong: Missing container and columns -->
<div class="row">
  <div>Content 1</div>
  <div>Content 2</div>
</div>

<!-- Right: Proper container and columns -->
<div class="container">
  <div class="row">
    <div class="col-6">Content 1</div>
    <div class="col-6">Content 2</div>
  </div>
</div>

Output

The first block breaks layout; the second block shows two equal columns inside a container.

📊

Quick Reference

Class	Description
container	Centers and pads the grid content
row	Creates a horizontal group of columns
col	Auto width column, fills available space
col-1 to col-12	Fixed width columns (1/12 to 12/12 of row)
col-sm-*	Column width on small screens (≥576px)
col-md-*	Column width on medium screens (≥768px)
col-lg-*	Column width on large screens (≥992px)
col-xl-*	Column width on extra large screens (≥1200px)

✅

Key Takeaways

Wrap your grid in a container for proper alignment and padding.

Use row to group columns horizontally.

Specify column widths with breakpoint prefixes like col-sm-4 to make grids responsive.

Columns inside a row should add up to 12 for a full row width.

Test your grid on different screen sizes to ensure responsiveness.