Bootstrap col-md-offset-* not working

Question

I'm trying to add Bootstrap offset class in my code to achieve diagonal alignment like this:

But I don't know what offset should I use. I've tried couple of offsets to achieve this but no use.Text is covering whole jumbotron.Here is my code

Html:

<div class="jumbotron">
        <div class="container">
            <div class="row">
                <div>
                    <h2 class="col-md-4 col-md-offset-4">Browse.</h2>
                    <h2 class="col-md-4 col-md-offset-4">create.</h2>
                    <h2 class="col-md-4 col-md-offset-4">share.</h2>
                </div>
            </div>
        </div>
    </div>

CSS:

.jumbotron {
    height: 500px;
    width: 100%;
    background-image: url(img/bg.jpg);
    background-size: cover;
    background-position: center;
}

.jumbotron h2 {
    color: white;
    font-size: 60px;
}

.jumbotron h2:first-child {
    margin: 120px 0 0;
}

Please guide me.Thank you in advance.

Add text and break lines in one div with 'text-align: right' — marcin.g, Jul 13 '16 at 16:35
For me the 4.0.0-beta didn't work for offsets but then 4.0.0-beta.2 did work. Perhaps there was a bug there (ah, as per https://stackoverflow.com/a/46503532/8479). Note that now the offset classes in bootstrap v4 look like `offset-md-4` rather than `col-md-offset-4`. — Rory, Dec 11 '17 at 14:16
Looks like you want them to be right aligned. Using offset you are still at the mercy of browser display and zoom. Wouldn't it wiser to simply place a container div and right-align the three lines? — HaLeiVi, Jan 15 '18 at 05:46

score 186 · Answer 1 · edited Dec 12 '18 at 07:17

186

It works in bootstrap 4, there were some changes in documentation.We don't need prefix col-, just offset-md-3 e.g.

<div class="row">
   <div class="offset-md-3 col-md-6"> Some content...
   </div>
</div>

Here doc.

edited Dec 12 '18 at 07:17

Prashant Pokhriyal

3,727
4
28
40

answered Sep 26 '16 at 13:38

Vasyl Gutnyk

4,813
2
34
37

Is this still working? At the time I am unable to make the offset with and without col-* – EGS Aug 30 '17 at 08:24
hey, its hard to answer your question, add some code or snippet with your problem. – Vasyl Gutnyk Aug 30 '17 at 18:20
This solved my problem that I was working on for the last few hours. I was ready to not use the theme. Thanks!!! – r lo Mar 02 '18 at 23:46
1

Thanks! I can't even find it on the migrating from bootstrap 3 to 4 guide in their website... – Robert Tirta Mar 09 '20 at 01:32

score 28 · Accepted Answer · answered Jul 13 '16 at 17:04

I would not recommend utilizing the Grid system in this instance, as much as simply adding an increased padding for each <h2>. That being said, the way you would achieve this using col-*-offset-* would be as follows:

<div class="jumbotron">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <h2>One</h2>
            </div>

            <div class="col-md-11 col-md-offset-1">
                <h2>Two</h2>
            </div>

            <div class="col-md-10 col-md-offset-2">
                <h2>Three</h2>
            </div>
        </div>
    </div>
</div>

Essentially the first line must span the entire row (so -12). The second line must be offset by 1 column, so you offset by 1 and give it a total width of 11 columns (11+1 = 12) and so forth. Your offset is always enough to ensure that the total column count equals 12.

Got it. Thank you very much :) @RobertC – Aisha Salman Jul 13 '16 at 18:11 — Aisha Salman, Jul 13 '16 at 18:11

score 25 · Answer 3 · edited Jul 23 '17 at 17:58

25

Changing col-md-offset-* to offset-md-* worked for me

edited Jul 23 '17 at 17:58

Kick Buttowski

6,709
13
37
58

answered May 11 '17 at 16:34

sriram26

361
3
5

score 10 · Answer 4 · edited Feb 28 '19 at 12:49

10

In bootstrap 3 the format is

col-md-6 col-md-offset-3

For the same grid in Bootstrap 4 the format is

col-md-6 offset-md-3

edited Feb 28 '19 at 12:49

Suraj Rao

29,388
11
94
103

answered Feb 28 '19 at 12:41

Maravarman Manoharan

169
1
11

Thanks for this answer! Saw this and realized I was using bootstrap 3 and it helped me get the offset I wanted. – Jakotheshadows Apr 30 '19 at 17:05

score 6 · Answer 5 · answered Oct 26 '19 at 13:14

6

Kindly use offset-md-4 instead of col-md-offset-4 in bootstrap 4. It's little changes adopted in bootstrap 4.

For more info

answered Oct 26 '19 at 13:14

Anand Raja

2,676
1
30
35

score 2 · Answer 6 · answered Jul 13 '16 at 16:49

2

check this bootply

this is wrong because bootstrap using margin-left:**%

.jumbotron h2:first-child {
   margin: 120px 0 0;
}

answered Jul 13 '16 at 16:49

Cem Arguvanlı

643
10
15

score 1 · Answer 7 · answered Jul 13 '16 at 16:36

1

Should be :

<h2 class="col-md-4 col-md-offset-1">Browse.</h2>
<h2 class="col-md-4 col-md-offset-2">create.</h2>
<h2 class="col-md-4 col-md-offset-3">share.</h2>

answered Jul 13 '16 at 16:36

DjaouadNM

22,013
4
33
55

Corrected it. But still not working! Anyways, thank you! @MrGeek – Aisha Salman Jul 13 '16 at 18:08

Daniele Barresi · Answer 8 · 2016-07-13T18:21:50.340

Where's the problem

In your HTML all h2s have the same off-set of 4 columns, so they won't make a diagonal.

How to fix it

A row has 12 columns, so we should put every h2 in it's own row. You should have something like this:

<div class="jumbotron">
    <div class="container">
        <div class="row">
                <h2 class="col-md-4 col-md-offset-1">Browse.</h2>
        </div>
        <div class="row">
                <h2 class="col-md-4 col-md-offset-2">create.</h2>
        </div>
        <div class="row">
                <h2 class="col-md-4 col-md-offset-3">share.</h2>
        </div>
    </div>
</div>

An alternative is to make every h2 width plus offset sum 12 columns, so each one automatically wraps in a new line.

<div class="jumbotron">
    <div class="container">
        <div class="row">
                <h2 class="col-md-11 col-md-offset-1">Browse.</h2>
                <h2 class="col-md-10 col-md-offset-2">create.</h2>
                <h2 class="col-md-9 col-md-offset-3">share.</h2>
        </div>
    </div>
</div>

I edited my answer, 'cause I realized I had misinterpreted the question. Sorry. — Daniele Barresi, Jul 13 '16 at 17:26
Hey! it's still not working.By the way thanks :) @DanieleBarresi — Aisha Salman, Jul 13 '16 at 18:06
You're right. Edited to fix it. Now it works. I should point out that this only makes a diagonal on screens bigger than 992px, which is the `md` size. If you need it for every screen size, replace `md` with `xs`. — Daniele Barresi, Jul 13 '16 at 18:24

score 1 · Answer 9 · answered Sep 30 '17 at 14:14

1

Bootstrap 4 offset classes have been removed in Beta 1, but will be restored in Beta 2 - topic reference

answered Sep 30 '17 at 14:14

user947668

2,548
5
36
58

lionelsanou · Answer 10 · 2018-01-19T21:52:34.127

1

For now, If you want to move a column over just 4 column units for instance, I would suggest to use just a dummy placeholder like in my example below

<div class="row">
      <div class="col-md-4">Offset 4 column</div>
      <div class="col-md-8">
            //content
      </div>
</div>

edited Jan 19 '18 at 21:52

answered Jan 11 '18 at 05:09

lionelsanou

41
5

score 1 · Answer 11 · answered Jan 10 '21 at 11:58

<div class="jumbotron">
        <div class="container">
            <div class="row">
                <div>
                    <h2 class="col-md-4 offset-md-4">Browse.</h2>
                    <h2 class="col-md-4 offset-md-4">create.</h2>
                    <h2 class="col-md-4 offset-md-4">share.</h2>
                </div>
            </div>
        </div>
    </div>

You can try this.

score 0 · Answer 12 · answered Mar 15 '18 at 07:09

If you are ok with small tweak - we know that bootstrap works with a width of 12

<div class="row">
      <div class="col-md-1">
            Keep it blank it becomes left offset
      </div> 
      <div class="col-md-5">
      </div>
      <div class="col-md-5">
      </div>
      <div class="col-md-1">
            Keep it blank it becomes right offset
      </div
</div>

I am sure there is a better way to do this, but i was in a hurry so used this trick

Bootstrap col-md-offset-* not working

12 Answers12

Where's the problem

How to fix it

Linked