Search code examples
twitter-bootstraptwitter-bootstrap-3bootstrap-4twitter-bootstrap-2

How can I get my Twitter Bootstrap buttons to right align?

I have a simple demo here:

<ul>
    <li>One <input class="btn pull-right" value="test"></li>
    <li>Two <input class="btn pull-right" value="test2"></li>
</ul>

I have an unordered list and for each list item I wish to have text on the left and then a right aligned button. I have tried to use pull-right but this completely messes up the alignment. What am I doing wrong?

<link href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css" rel="stylesheet" />
<ul>
  <li>One <input class="btn pull-right" value="test"></li>
  <li>Two <input class="btn  pull-right" value="test2" </li>
</ul>

Solution

  • Insert pull-right into the class attribute and let bootstrap arrange the buttons.

    For Bootstrap 2.3, see: http://getbootstrap.com/2.3.2/components.html#misc > Helper classes > .pull-right.

    For Bootstrap 3, see: https://getbootstrap.com/docs/3.3/css/#helper-classes > Helper classes.

    For Bootstrap 4, see: https://getbootstrap.com/docs/4.0/utilities/float/#responsive

    The pull-right command was removed and replaced with float-right or in general to float-{sm,md,lg,xl}-{left,right,none}

    For Boostrap 5, see: https://getbootstrap.com/docs/5.0/utilities/float/

    The closest solution would be float-end.