CODEWITHSUNDEEP
htmltwitter-bootstrapoffset
sumguy
sumguy

Reputation: 391

Offset columns in Bootstrap

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

Answers (6)

Ridha Rahmi
Ridha Rahmi

Reputation: 1

In bootstrap 5 + check order column

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

Upvotes: 0

Carol Skelly
Carol Skelly

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

IMRAN H
IMRAN H

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

Akash Pawar
Akash Pawar

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

demsley
demsley

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

Luiz Henrique
Luiz Henrique

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

Related Questions