BootstrapHow-ToBeginner · 3 min read

How to Use Offset in Bootstrap Grid for Layout Control

In Bootstrap grid, use offset-* classes to move columns to the right by a specified number of columns, creating empty space on the left. For example, offset-md-3 shifts a column 3 columns to the right on medium screens and larger.

📐

Syntax

The offset class pattern is offset-{breakpoint}-{number}, where:

breakpoint is optional and can be sm, md, lg, xl, or xxl.
number is how many columns to shift (from 1 to 11).

This class adds left margin to the column equal to the width of the specified number of columns.

html

<div class="row">
  <div class="col-md-4 offset-md-2">Content</div>
</div>

Output

A row with one column that starts after 2 empty columns on medium screens and larger.

💻

Example

This example shows a row with two columns. The first column is offset by 3 columns, so it starts after some empty space on the left.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Offset 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-md-4 offset-md-3 bg-primary text-white p-3">Offset Column</div>
      <div class="col-md-4 bg-secondary text-white p-3">Normal Column</div>
    </div>
  </div>
</body>
</html>

Output

A horizontal row with a blue box shifted right by 3 columns and a gray box next to it.

⚠️

Common Pitfalls

Common mistakes when using offsets include:

Using offset numbers that cause the total columns in a row to exceed 12, which breaks the layout.
Forgetting to use the correct breakpoint prefix, causing unexpected behavior on different screen sizes.
Trying to offset columns inside nested rows without proper structure.

html

<!-- Wrong: total columns exceed 12 -->
<div class="row">
  <div class="col-8 offset-5">Too wide and offset</div>
</div>

<!-- Right: total columns equal 12 or less -->
<div class="row">
  <div class="col-7 offset-4">Fits correctly</div>
</div>

Output

First example breaks layout; second example fits within the row.

📊

Quick Reference

Class	Effect
offset-1	Shift column right by 1 column
offset-2	Shift column right by 2 columns
offset-md-3	Shift column right by 3 columns on medium screens and up
offset-lg-4	Shift column right by 4 columns on large screens and up
offset-xl-5	Shift column right by 5 columns on extra large screens and up

✅

Key Takeaways

Use offset-* classes to add left margin and shift columns right in Bootstrap grid.

Ensure total columns plus offset do not exceed 12 to keep layout intact.

Add breakpoint prefixes like md to control offset on specific screen sizes.

Offsets create empty space on the left side of a column without adding extra elements.

Test your layout on different screen sizes to confirm offsets behave as expected.