Offsetting
Offset classes push a column to the right by leaving empty columns before it.
In this page:
Syntax
<div class="row">
<div class="col-md-6 offset-md-3">centered column</div>
</div>Offsetting
.offset-md-3 adds three empty columns of margin on the left of the element, from md upward. Combined with a column width it centres or positions content. In Bootstrap 5 you can also use margin utilities like ms-auto to push columns.
Note:
col-md-6 offset-md-3 centres a half-width column.
Example: Offsetting
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body class="p-3">
<div class="container text-center">
<div class="row mb-2"><div class="col-md-4 offset-md-4 bg-primary text-white">col-md-4 offset-md-4 (centred)</div></div>
<div class="row mb-2"><div class="col-md-3 bg-secondary text-white">col-md-3</div><div class="col-md-3 offset-md-3 bg-secondary text-white">offset-md-3</div></div>
<div class="row"><div class="col-4 bg-success text-white">col-4</div><div class="col-4 ms-auto bg-success text-white">ms-auto</div></div>
</div>
</body>
</html>Live Example
Related Topics
Common Mistakes
- Using Bootstrap 3 style col-md-offset
- Offset plus width above 12
- Forgetting the breakpoint
Chapter Summary
- offset-{bp}-n adds n empty columns
- Width plus offset must fit in 12
- ms-auto pushes to the right
- Uses the same breakpoints
🔒
Chapter Quiz — Complete all 7 topics to unlock
0/7 topics done
Complete these topics first: