By Prashant Sharma


2017-08-12 13:44:27 8 Comments

I am using Boostrap 4(Bootstrap v4.0.0-beta) Beta and facing issues with offsetting columns. Earlier i used to do offset-md-* and it was working, with BS4 Beta this is removed according to docs. The new method mentioned in docs is using .ml-auto , when i try to use it with col-md-4 it is offsetting 4 columns. What i want is custom offsetting like

**<div class="col-md-4 offset-md-2"></div>**

I tried using

**<div class="col-md-4 ml-md-2"></div>**

but didn't work Is this is bug or there is another way to do it ?

Here is official docs about offsetting https://getbootstrap.com/docs/4.0/layout/grid/#offsetting-columns Bootstrap v4 Beta

3 comments

@Zim 2017-08-12 17:09:49

Bootstrap 4 offset classes were temporarily removed in Beta 1, but were restored in Beta 2.

The class names col-{breakpoint}-offset-* were replaced with offset-{breakpoint}-*

The new auto-margins also work for offsetting columns will move the column over as much as possible. So, it depends on how much you want to "push" the column to the right. If they're no other columns to the right of the col-md-4 it will go all the way if to right side of the row. Basically offset was relevant for floated columns but is no longer relevant now that Bootstrap 4 is flexbox.

If you want to move the col-md-4 over just 2 column units, the best way would be to use a dummy/placeholder column...

<div class="row">
      <div class="col-md-2"></div>
      <div class="col-md-4">
            ..
      </div>
</div>

https://www.codeply.com/go/SqrQIOAY7

If there are other col-md-4 to the right of the first, then ml-auto and mr-auto would work to center both columns...

<div class="row">
        <div class="col-md-4 ml-auto">
            .
        </div>
        <div class="col-md-4 mr-auto">
            .
        </div>
</div>

https://www.codeply.com/go/SqrQIOAY7n

If you want to center the col-md-4 then simply use mx-auto to create equal margins on both sides.


Note: specific column offsets will be restored as of Beta 2

@Prashant Sharma 2017-08-12 17:20:10

Thanks but this blank div with col-md-2 seems like a "Hack" no?, this is what i used before posting this question. I will use your 2nd solution as i have another col-md-4 to the right, i will let you know if this solves my issue.

@Zim 2017-08-12 17:23:29

It may seem like a hack, but it's the only solution now that the offsets have been replaced by auto margins.

@Prashant Sharma 2017-08-12 17:26:58

Thanks alot for your tip , your 2nd solution worked for me and i guess for time being i will use a blank div on other places till Bootstrap get something new for offsetting.

@BBaysinger 2017-12-12 00:11:39

I'm a little confused. You're saying offset is no longer relevant now that Bootstrap 4 is flexbox, but that they will be restored? Why would they restore them if they aren't relevant?

@BBaysinger 2017-12-12 00:12:29

Beta2 is out now. Has offset been restored?

@clamchoda 2018-01-02 22:09:18

Changing

offset-md-2

to:

col-md-offset-2

Worked for me

@fWd82 2018-06-03 23:40:28

No. This isn't working in Bootstrap v4.0.0-beta. as specified in question.

@Oliver Ni 2017-08-12 13:47:50

ml-md-auto sets margin-left: auto; for sizes md and above.

You can't set that to something like 2.

You need to do ml-md-auto.

@Prashant Sharma 2017-08-12 13:55:46

I am using Bootstrap v4 Beta , you provided doc link of Alpha version. Updated my question with link of docs.

@Prashant Sharma 2017-08-12 14:01:33

Oliver when i try to use ml-md-auto it offsets 4 columns, what i want is offsetting 2 columns but with having col-md-4

@Oliver Ni 2017-08-12 14:04:27

@PrashantSharma It will offset as much as it can. What you can do is set the next column to have that class as well to fix it.

Related Questions

Sponsored Content

1 Answered Questions

1 Answered Questions

[SOLVED] Why is the bootstrap 4 offset sample not working?

1 Answered Questions

Bootstrap columns bug

  • 2018-08-14 22:34:13
  • Daraka BG
  • 22 View
  • -1 Score
  • 1 Answer
  • Tags:   bootstrap-4

3 Answered Questions

[SOLVED] Bootstrap 4 column ordering usecase

  • 2018-06-22 02:34:28
  • Unconformed
  • 26 View
  • 0 Score
  • 3 Answer
  • Tags:   bootstrap-4

1 Answered Questions

[SOLVED] Bootstrap input-group-prepend not working

1 Answered Questions

[SOLVED] Vertical alignment of columns in bootstrap 4

1 Answered Questions

[SOLVED] Hiding Columns in Bootstrap 4 Beta

1 Answered Questions

Vertically center form of Bootstrap 4

2 Answered Questions

[SOLVED] Offsetting columns in Bootstrap v4

0 Answered Questions

CSS bootstrap : How offset works in bootstrap

Sponsored Content