Offset columns in Bootstrap

Question

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?

score 50 · Accepted Answer · answered Jan 13 '17 at 01:24

50

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.

answered Jan 13 '17 at 01:24

Luiz Henrique

877
8
25

1

Thank you very much! That explained the concept well :) – sumguy Jan 13 '17 at 01:25
You are welcome! can you vote and accept the answer, please? – Luiz Henrique Jan 13 '17 at 01:31
25

In Bootstrap 4 use `offset-sm-3` instead of `col-sm-offset-3` – Ricardo D. Quiroga Jul 24 '18 at 01:59

Carol Skelly · Answer 2 · 2023-04-11T13:26:45.407

25

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

edited Apr 11 '23 at 13:26

answered Jan 13 '17 at 01:20

Carol Skelly

351,302
90
710
624

Thank you!! How come the second col-sm-4 didn't need an offset if I was trying to do "2 4 4 2"? – sumguy Jan 13 '17 at 01:28
@sumguy Offset columns add margins to left so in this case, first there is margin/space of col-2 then two div's of col-4 and then the remaining col-2 is the remaining space. Consider a parent of 100% and a child of 70%(random), so now you have 30% of free space/ empty column to right side. – divy3993 Jan 13 '17 at 03:12

score 8 · Answer 3 · answered Dec 06 '18 at 09:51

8

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

answered Dec 06 '18 at 09:51

demsley

319
3
6

score 1 · Answer 4 · answered Feb 19 '21 at 09:29

1

I am using bootstrap 3. Below code is worked for me to shift div right.

<div class="col-lg-4 offset-lg-4"></div>

answered Feb 19 '21 at 09:29

Akash Pawar

9
1

score 0 · Answer 5 · edited Dec 28 '22 at 00:25

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>

Offset columns in Bootstrap

5 Answers5