How to create a offset in Bootstrap 4

Question

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

score 10 · Answer 1 · answered Jun 07 '18 at 08:04

10

You can use .offset- .offset-sm- .offset-md- .offset-lg- .offset-xl-

<div class="offset-2 col-8">
    test 
</div>

Here are some examples - http://formoid.com/articles/bootstrap-offset-example-961.html

answered Jun 07 '18 at 08:04

Araf Karim

109
1
3

score 9 · Answer 2 · answered Oct 04 '17 at 18:12

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.

score 5 · Answer 3 · edited Dec 12 '18 at 16:15

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>

How to create a offset in Bootstrap 4

3 Answers3