3

What used to be:

<div class="row">
  <div class="col-sm-2 col-sm-offset-3"> ... </div>
</div>

Became:

<div class="row">
  <div class="col-xs-2 offset-xs-3"> ... </div>
</div>

in Bootstrap v4 Alpha. Now, that I've updated the website to v4 Beta offset-xs-3 doesn't seem to be working anymore: https://getbootstrap.com/docs/4.0/layout/grid/#offsetting-columns.

How do I offset by a specified amount of columns in v4 Beta?

https://codepen.io/Deka87/pen/prVLyE

sdvnksv
  • 9,350
  • 18
  • 56
  • 108
  • Look at the documentation you linked to. _"we no longer have v3’s style of offset classes. Instead, use margin utilities like .mr-auto"_ – Turnip Aug 22 '17 at 11:16
  • What is your desired output on it? – Raphael Cunha Aug 22 '17 at 11:16
  • What do you mean by "specified amount"? Set up a jsFiddle if you can, with an example. I believe the documentation you linked in pretty clear. – Dimitris Damilos Aug 22 '17 at 11:17
  • @DimitrisDamilos, included an example code in the questions. This is exactly what `offset-sm-x` and `col-sm-offset-x` did in previous versions. – sdvnksv Aug 22 '17 at 11:19
  • @Turnip, this will align the col on the left side, please see an example in the question. – sdvnksv Aug 22 '17 at 11:20
  • @RBCunhaDesign, I've added an example and a Codepen. – sdvnksv Aug 22 '17 at 11:29
  • @sdvnksv, why in the world do you want to offset 3 columns? Is it to center something else? – Raphael Cunha Aug 22 '17 at 11:32
  • 1
    @RBCunhaDesign, millions of use cases for that. Things are not always either in the center, or on the right or left sides. This is exactly why they had `col-sm-offset-X` or `offset-sm-X`. – sdvnksv Aug 22 '17 at 11:35

2 Answers2

0

Is this what you need, https://jsfiddle.net/5L49z51y/1/?

<div class="row">
  <div class="col-sm-2 ml-sm-auto mr-sm-auto"> Here </div>
</div>
Dimitris Damilos
  • 2,363
  • 5
  • 23
  • 46
  • 1
    No, this aligns it in the center. I want it to move by two - three - four columns to the right depending on the case. If you've ever used `.col-sm-offset-X` or `offset-sm-X` you should have an idea of what I want. – sdvnksv Aug 22 '17 at 11:33
-1

I know this is not pretty, but since Bootstrap v4-beta took the offsetting by number out of the game, you can add an empty column before and making it however many columns you want to offset the next one.

[class*="col-"] {
  background-color: #eee;
}
.row {
  background-color: #f9f9f9;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container-fluid">
  <div class="row">
    <div class="col-sm-3"></div>
    <div class="col-sm-2">
      .col-sm-2 offseted by 3 columns
    </div>
  </div>
</div>
Raphael Cunha
  • 1,084
  • 6
  • 9