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

Question

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 1

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.

Solution 2

In twitter bootstrap 3 try the class pull-right

class="btn pull-right"

Solution 3

"pull-right" class may not be the right way because in uses "float: right" instead of text-align.

Checking the bootstrap 3 css file i found "text-right" class on line 457. This class should be the right way to align the text to the right.

Some code: For Bootstrap 3 & 4

<div class="row">
    <div class="col-xs-12">
        <div class="text-right">
            <button type="button" class="btn btn-default">Default</button>
        </div>
    </div>
</div>

For bootstrap 5

<div class="row">
    <div class="col">
        <div class="text-end">
            <button type="button" class="btn btn-secondary">Default</button>
        </div>
    </div>
</div>

Solution 4

Update 2019 - Bootstrap 4.0.0

The pull-right class is now float-right in Bootstrap 4...

    <div class="row">
        <div class="col-12">One <input type="button" class="btn float-right" value="test"></div>
        <div class="col-12">Two <input type="button" class="btn float-right" value="test"></div>
    </div>

http://www.codeply.com/go/nTobetXAwb

It's also better to not align the ul list and use block elements for the rows.

Is float-right still not working?

Remember that Bootstrap 4 is now flexbox, and many elements are display:flex which can prevent float-right from working. In some cases, the util classes like align-self-end or ml-auto work to right align elements that are inside a flexbox container like a Bootstrap 4 .row, Card or Nav.

Also remember that text-right still works on inline elements.

Bootstrap 4 align right examples

---

Bootstrap 3

Use the pull-right class.

Solution 5

Use button tag instead of input and use pull-right class.

pull-right class totally messes up both of your buttons, but you can fix this by defining custom margin on the right side.

<button class="btn btn-primary pull-right btn-sm RbtnMargin" type="button">Save</button>
<button class="btn btn-primary pull-right btn-sm"  type="button">Cancel</button>

Then use the following CSS for the class

.RbtnMargin { margin-left: 5px; }

View more solutions

Comments

[deltanovember]

For me this puts both list items on a single line

[chrisweb]

no need for custom css, as the other answer shows everything needed is included in the bootstrap

[OmniPotens]

@chrisweb What if you have some other plugins which share same CSS class unknown to you and conflicting issues, what do you do? Sit and watch than create a custom css and move on? The OP never specified if any other plugins were added that might share same css classes.

[ılǝ]

Not anymore, it was deprecated as of v 3.1 : getbootstrap.com/components/#dropdowns-alignment

[MartinS]

+1 for highlighting the change. But that depreciation is only for drop down menu which has been replaced by .dropdown-menu-right. Its has not been deprecated as a whole.

[ılǝ]

you are right, the documentation says we've deprecated .pull-right on dropdown menus

[ESP32]

I had to use pull-right in the outer btn-group div: <div class="btn-group pull-right">

[Tony Wall]

I think this is better than pull-right because it prevents the vertical content from collapsing on top of each other and avoids having to add more mark-up just to workaround that.

[peater]

pull-right is deprecated on dropdown-menu. It can still be used for other components.

[hashbrown]

pull-right uses float: right, thereby collapsing vertical contents on top of each other. Wrap the button with text-right DIV like this -<div class="text-right">button...</div>

[Paul Danelli]

Thank you. The problem with "pull-right" is that it removes any margins from the buttons. This maintains margins but moves the elements to right. Perfect!

[Zim]

What does this have to do with align right and buttons?

[Krystian Polska]

Why text-right must be in div containg this button instead of just class="btn btn-default text-right" in button???

[gdvalderrama]

I don't understand this answer. In the question the example code is already using pull-right.

[Ryan]

@guival I was wondering the same thing. stackoverflow.com/a/26546770/470749 implies that using button instead of input will make a difference.

[Zim]

They're working for me, but you shouldn't need to rely on the links. Read the answer for an explanation on how to align right.

[George]

If you could include an explanation to accompany the code it will assist the original poster.

[nima]

While this code may answer the question, providing additional context regarding how and/or why it solves the problem would improve the answer's long-term value. You can find more information on how to write good answers in the help center: stackoverflow.com/help/how-to-answer . Good luck 🙂

[AndPy]

float-end worked for me

[webtweakers]

This did the trick for me, but now (bootstrap 5) you'll have to use text-end.

[César León]

Answer updated, thanks!