bootstrap 4 pull-xs-right not working as expected

Question

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>

Answer 1

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/

Answer 2

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.