How to create a offset in Bootstrap 4

user_6729757 0
Viewed 34969

First of all Big apologies for my bad English.

I am using bootstrap version 4 beta version ( latest not alpha). It is good. But i'm wondering in the new version of bootstrap they removed offset class. I will thankful if someone give me the solution how can I make a offset using flexbox with any amount. I mean before I used .col-offset-2 this means offset 2 column, I want this with flexbox. Thank you

bootstrap-4 css html
3 Answers
user_79961390

The offset classes have been replace by margin classes. These are prefixed mr- for margin-right and ml- for margin-left.

The documentation demonstrates the use of ml-*-auto (where * is the target resolution -- eg lg or md.) This is the equivalent of setting margin-left: auto in your CSS, which is effectively saying "push this as far left as you can." By using both ml-*-auto and mr-*-auto, you can effectively center your columns.

This is the full list of prefixes for the auto property:

  • ml- margin left
  • mr- margin right
  • mb- margin bottom
  • mt- margin top
  • mx- horizontal margin (margin left + margin right)
  • my- vertical margin (margin top + margin bottom)
  • m- all margins

In addition to auto, you can specify the column widths -- ml-lg-2, etc.

So col-offset-2, which (I think) would shove the content left two spaces is equivalent to something like ml-2 or ml-lg-2.

user_4197050

Offset is replaced with ml-**-auto.

The below code will be 12 in sizes smaller than md, but 9 with an offset of 3 in sizes md and higher.. Because I have placed md inside ml-**-auto

    <div class="col-12 col-md-9 ml-md-auto">
        test
    </div>

See the official doc here https://getbootstrap.com/docs/4.0/layout/grid/#offsetting-columns

Also, there's also a really good answer here on how offset works in bootstrap 4 Offsetting columns is not working (Bootstrap v4.0.0-beta)

EDIT: 2018/10/25

Offset's were restored in Bootstrap 4 Beta 2. Here's an example:

<div class="row">
  <div class="col-md-4">.col-md-4</div>
  <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
user_85326560
Related