0
0
Bootsrapmarkup~5 mins

Offset columns in Bootsrap

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
Introduction

Offset columns help you move content to the right without adding empty columns. It creates space on the left side of a column.

You want to center a smaller column inside a larger row.
You need to create space between columns without empty content.
You want to align a column away from the left edge on larger screens.
You want to create a layout with uneven spacing easily.
You want to push a column to the right for better visual balance.
Syntax
Bootsrap
<div class="col-md-offset-3 col-md-6">Content</div>

Use col-{breakpoint}-offset-{number} to move a column right by that many grid columns.

Replace {breakpoint} with screen size like sm, md, lg.

Examples
This moves the column 2 columns to the right on medium screens, centering an 8-column wide block.
Bootsrap
<div class="row">
  <div class="col-md-offset-2 col-md-8">Centered content</div>
</div>
On small screens, this column is pushed right by 1 column, leaving space on the left.
Bootsrap
<div class="row">
  <div class="col-sm-offset-1 col-sm-10">Content with small offset</div>
</div>
On large screens, the column is pushed 3 columns right, making it centered in a 12-column grid.
Bootsrap
<div class="row">
  <div class="col-lg-offset-3 col-lg-6">Large screen offset</div>
</div>
Sample Program

This example shows a blue box that is pushed to the right by 3 columns on medium screens, making it centered in the row.

Bootsrap
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Offset Columns Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/css/bootstrap.min.css" rel="stylesheet">
  <style>
    .box {
      background-color: #5bc0de;
      color: white;
      padding: 1rem;
      text-align: center;
      border-radius: 0.25rem;
    }
  </style>
</head>
<body>
  <div class="container">
    <h2>Offset Columns Demo</h2>
    <div class="row">
      <div class="col-md-offset-3 col-md-6 box">
        This column is offset by 3 columns on medium screens.
      </div>
    </div>
  </div>
</body>
</html>
OutputSuccess
Important Notes

Offset classes only work inside a .row container.

Bootstrap 3 uses col-md-offset-* syntax; Bootstrap 4 and 5 use offset-md-*.

Offsetting helps create balanced layouts without empty columns.

Summary

Offset columns move content right by empty grid columns.

Use col-{breakpoint}-offset-{number} in Bootstrap 3.

Offsets help center or space columns easily.