Reputation: 391
This is the idea of what I want to do:
<div class="container-fluid">
<div class="row">
<div class="col-sm-2"></div>
<div class="col-sm-4"></div>
<div class="col-sm-4"></div>
<div class="col-sm-2"></div>
</div>
</div>
How would it work using offset?
Upvotes: 39
Views: 141103
Reputation: 1
In bootstrap 5 + check order column
<div class="col-lg-4 offset-lg-4"></div>
Upvotes: 0
Reputation: 362880
In Bootstrap 3, like this..
<div class="container-fluid">
<div class="row">
<div class="col-sm-4 col-sm-offset-2"></div>
<div class="col-sm-4"></div>
</div>
</div>
http://codeply.com/go/7wofwfzrH3
In Bootstrap 4, like this..
<div class="container-fluid">
<div class="row">
<div class="col-sm-4 offset-sm-2"></div>
<div class="col-sm-4"></div>
</div>
</div>
https://codeply.com/go/t5DTGwero8
Upvotes: 30
Reputation: 135
An example for Bootstrap 5 is below.
But note that offset
is used for margin-left
alignment. If you want to align items with margin-left
, you can use offset
classes. There are two types of offsets in Bootstrap 5: First is offset
from 1-12 and second is responsive classes like offset-sm
, offset-lg
, offset-md
.
It looks like this:
<div class="container-fluid">
<div class="row">
<div class="col-sm-2 offset-sm-2"></div>
<div class="col-sm-4 offset-sm-4"></div>
</div>
</div>
Upvotes: 3
Reputation: 9
I am using bootstrap 3. Below code is worked for me to shift div right.
<div class="col-lg-4 offset-lg-4"></div>
Upvotes: 1
Reputation: 327
The above doesn't work for me as I think the bootstrap classes have changed slightly.
<div class="col-md-4 offset-md-2">
Does work for me.
Hope this helps
Dave
Upvotes: 9
Reputation: 957
The offset works like a blank column that will stay before your column. For example, if you want a column that will have half of the size of the screen and will be exactly in the middle, you will have to do:
<div class="col-sm-6 col-sm-offset-3"></div>
A full row has 12 columns. This way you will have 6 columns (half of the row) and a offset of 3 columns. It will be exactly in the middle of the screen.
Take a look on Bootstrap documentation.
Upvotes: 57