Advertisement
Google Ad Slot: content-top
Bootstrap 5 Grid offset
In Bootstrap 5, the grid offset classes allow you to create space to the left of a column. This is helpful for centering columns, creating layouts with spacing, or just moving columns to a specific position in the row.
Example
<div class="row">
<div class="col-4 offset-4" style="background:pink">Responsive Column</div>
<div class="col-4" style="background:green">Responsive Column</div>
<div class="col-4" style="background:pink">Responsive Column</div>
</div>
Responsive Offset:
Here, the offset changes based on the screen size:
- On medium screens (
md), it offsets by 2 columns. - On large screens (
lg), it offsets by 4 columns.
Example
<div class="row">
<div class="col-4 offset-md-2 offset-lg-4" style="background:pink">Responsive Column</div>
<div class="col-4" style="background:green">Responsive Column</div>
<div class="col-4" style="background:pink">Responsive Column</div>
</div>