26

I have this html using bootstrap 4 utilities to pull the buttons to the right of the screen. And it does do this.

However, the buttons do not push down the content below it as expected. They end up overlayed on top of the content below.

If I do not use pull-xs-right then the buttons are left aligned, but they do push the items below.

Is there some other class I need to apply?

       <div class="pull-xs-right">
            <button click.delegate="saveEdit()"
                    type="submit"
                    class="k-button k-primary">
                Save
            </button>
            <button click.delegate="cancel()"
                    class="k-button">
                Cancel
            </button>
        </div>
Greg Gum
  • 33,478
  • 39
  • 162
  • 233

2 Answers2

55

In Bootstrap 4 .float-{sm,md,lg,xl}-{left,right,none} classes were added for responsive floats, and replaced .pull-left and .pull-right.

That means:

.pull-right was replaced by .float-right

.pull-left was replaced by .float-left

.pull-xs-right is wrong, replace .pull by .float the xs between pull and right stands for extra small which determines the size of the element. The following are the options to change the element size: {xs,sm,md,lg,xl} where xs = extra small, sm = small, md = medium, lg = large and xl = extra large

See: https://v4-alpha.getbootstrap.com/migration/

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
Sam Tomashi
  • 749
  • 7
  • 8
  • 2
    Thanks! I've lost 2 hours of my life on this... I'll look for migration docs sooner next time... – rtfminc Mar 21 '17 at 00:30
  • 9
    in https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css there is no `float-xs-right` but start from `sm` such as `float-sm-right` – nonopolarity Apr 13 '17 at 09:15
  • 1
    Sorry for the delay on marking this as the correct answer. I somehow missed this earlier. – Greg Gum Oct 02 '17 at 14:26
3

As mentioned above float replaces pull. So .float-right replaces .pull-right and .float-left replaces .pull-right. You can add -{sm,md,lg,xl} for different breakpoints for example .float-md-right will break on medium-sized screens. If you leave off the size then it will not break and will always float in the direction indicated.

Joshua Torres
  • 31
  • 4