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>

Answer 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}

Answer 2

In twitter bootstrap 3 try the class pull-right

class="btn pull-right"

Answer 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:

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

Answer 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.

Answer 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; }

Answer 6

Adding to the accepted answer, when working within containers and columns that have built in padding from bootstrap, I sometimes have a full stretched column with a child div that does the pulling to be the way to go.

<div class="row">
  <div class="col-sm-12">
      <div class="pull-right">
            <p>I am right aligned, factoring in container column padding</p>
      </div>
  </div>
</div>

Alternately, have all your columns add up to your total number of grid columns (12 by default) along with having the first column be offset.

<div class="row">
  <div class="col-sm-4 col-sm-offset-4">
        This content and its sibling..
  </div>
  <div class="col-sm-4">
        are right aligned as a whole thanks to the offset on the first column and the sum of the columns used is the total available (12).
  </div>
</div>

Answer 7

Sorry for replying to an older already answered question, but I thought I'd point out a couple of reasons that your jsfiddle does not work, in case others check it out and wonder why the pull-right class as described in the accepted answer doesn't work there.

1. the url to the bootstrap.css file is invalid. (perhaps it worked when you asked the question).
2. you should add the attribute: type="button" to your input element, or it won't be rendered as a button - it will be rendered as an input box. Better yet, use the <button> element instead.
3. Additionally, because pull-right uses floats, you will get some staggering of the button layout because each LI does not have enough height to accommodate the height of the button. Adding some line-height or min-height css to the LI would address that.

working fiddle: http://jsfiddle.net/3ejqufp6/

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

(I also added a min-width to the buttons as I couldn't stand the look of a ragged right-justified look to the buttons because of varying widths :) )

Answer 8

Using the Bootstrap pull-right helper didn't work for us because it uses float: right, which forces inline-block elements to become block. And when the .btns become block, they lose the natural margin that inline-block was providing them as quasi-textual elements.

So instead we used direction: rtl; on the parent element, which causes the text inside that element to layout from right to left, and that causes inline-block elements to layout from right to left, too. You can use LESS like the following to prevent children from being laid out rtl too:

/* Flow the inline-block .btn starting from the right. */
.btn-container-right {
  direction: rtl;

  * {
    direction: ltr;
  }
}

and use it like:

<div class="btn-container-right">
    <button class="btn">Click Me</button>
</div>

Answer 9

In Bootstrap 4: Try this way with Flexbox. See documentation in getbootstrap

<div class="row">
  <div class="col-md">
    <div class="d-flex justify-content-end">
      <button type="button" class="btn btn-default">Example 1</button>
      <button type="button" class="btn btn-default">Example 2</button>
    </div>
  </div>
</div>

Answer 10

Pull right was depreciated as of v3.1.0 . Just a heads up.

http://getbootstrap.com/components/#callout-dropdown-pull-right

Answer 11

Apply pull-right class for the button. http://getbootstrap.com/css/#helper-classes-floats -> Helper classes

This link will help

Answer 12

Now you need to add .dropdown-menu-right to the existing .dropdown-menu element. pull-right is not supported anymore.

More info here http://getbootstrap.com/components/#btn-dropdowns

Answer 13

Can you try a custom CSS aside the bootstrap CSS to see if any changes. Try

.move-rigth{
    display: block;
    float: right;
}

If it works then you can try manipulating what you have or adding other formatting to this and achieving what you desire. Because you are using bootstrap doesn't mean if it doesn't offer you what you want then you just manage it. You are working with your codes and so you command it to do as you say. Cheers!

Answer 14

you can also use blank columns to give spaces on left

like

<div class="row">
    <div class="col-md-8"></div>  <!-- blank space increase or decrease it by column # -->
        <div class="col-md-4">
            <button id="saveedit" name="saveedit" class="btn btn-success">Save</button>
        </div>
</div>

Demo :: Jsfiddle demo

Answer 15

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

One way would be to apply this style to your list items in order to keep them inline

or

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

in CSS

li {
    line-height: 20px;
    margin: 5px;
    padding: 2px;
}

Answer 16

For Bootstrap 5:

Documentation: https://getbootstrap.com/docs/5.0/utilities/float/

use .float-end in the element for right alignment. You possibly have to add .clearfix in the parent element if you move ex a button to the right and don't want the following element to slide up.

Answer 17

From Bootstrap V3.3.1 the following CSS style will solve this issue

.modal-open{
    padding-right: 0 !important;
}

Note: I tried all the suggestions in posts above and all addresses older versions and do not provide a fix to newset bootstrap versions.

Answer 18

The problem is that you're using the buttons as part of your lists. And because the vertical margin between list items is too low to place the buttons in between it messes the alignments up. I would place one of the buttons on top of the list and another one beneath them so that it would look like what you expect!

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

Answer 19

<p align="right">
<button type="button" class="btn btn-primary">Submit</button>
</p>

Answer 20

for bootstrap 4 documentation

  <div class="row justify-content-end">
    <div class="col-4">
      Start of the row
    </div>
    <div class="col-4">
      End of the row
    </div>
  </div>