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
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
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 leftmr-
margin rightmb-
margin bottommt-
margin topmx-
horizontal margin (margin left + margin right)my-
vertical margin (margin top + margin bottom)m-
all marginsIn 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
.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With