Bootstrap 4 Pull-Xs-Right Not Working as Expected

bootstrap 4 pull-xs-right not working as expected

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/

What happened to the .pull-left and .pull-right classes in Bootstrap 4?

Back in 2016 when this question was originally asked, the answer was:

$('.pull-right').addClass('pull-xs-right').removeClass('pull-right')

But now the accepted answer should be Robert Went's.

pull-right replacement in bootstrap 4 does not work

I managed to make it work with your situation using classes col and float-right together. Here is plunker and in your fiddle. But usually, just float-right is enough.

 <div class="col float-right">                
     <div class="dropdown actionButtons float-right">
     //your content
   </div>
</div>

And if you need to move only menu, wrap col-sm-12(md, lg what you need) and use float-right in example (see this fiddle).

 <div class="col-md-12"> </div>

Bootstrap pull-right not working as expected

Your form-group is aligned as far to the right as possible – but the content within it is not. You have only 4+4+2 wide columns in there, so you are “two columns short”, in the 12-column grid used by bootstrap.

You might want to simply offset the first one of those by 2, by adding col-xs-offset-2 class – then the alignment should be closer to what you want to achieve.

Bootstrap button/pills stops working if the parent has class pull-right

Just remove the pull-right class from first col-sm-6 and move first section to second and second section to first place. Hope it will fix your issue.

Formatted Code:

<div class="row">

  <div class="col-sm-6 wow fadeInLeftBig animated animated" data-animation-delay="200"  style="visibility: visible;">
    <h3 class="section-heading">Full Responsive</h3>
    <div class="sub-title lead3">Lorem ipsum dolor sit atmet sit dolor greand fdanrh<br> sdfs sit atmet sit dolor greand fdanrh sdfs</div>
    <p class="lead">
      In his igitur partibus duabus nihil erat, quod Zeno commuta rest gestiret. Sed virtutem ipsam inchoavit, nihil ampliusuma. Scien tiam pollicentur, uam non erat mirum sapientiae lorem cupido patria esse cariorem. Quae qui non vident, nihilamane umquam
      magnum ac cognitione.
    </p>

    <p><a role="button" href="#" class="btn btn-embossed btn-primary">View Details</a>
      <a role="button" href="#" class="btn btn-embossed btn-info">Visit Website</a></p>
  </div>

  <div class="col-sm-6  wow fadeInRightBig animated animated" style="visibility: visible;">
    <img alt="Sample Image" src="img/ipad.png" class="img-responsive ">
    <ul class="col-xs-4 col-xs-offset-4 nav nav-pills pull-right" id="cardFlipPills">
      <li class="active" id="pill-Front"><a href="#vCard-viewer">Front</a></li>
      <li id="pill-back"><a href="#vCard-viewer">Back</a></li>
    </ul>
    <p class="btn btn-success">Submit</p>
  </div>
</div>

`col-xs-*` not working in Bootstrap 4

col-xs-* have been dropped in Bootstrap 4 in favor of col-*.

Replace col-xs-12 with col-12 and it will work as expected.

Also note col-xs-offset-{n} were replaced by offset-{n} in v4.

---

Related Topics