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>

Meso

Why is this question tagged with twitter-bootstrap-3 and twitter-bootstrap-2 as well as twitter-bootstrap? – Bacteriology

Because it's relevant to all versions since 3/2013 – Constituency

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}

---

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

The closest solution would be float-end.

Quotha

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

@guival I was wondering the same thing. https://mcmap.net/q/73972/-how-can-i-get-my-twitter-bootstrap-buttons-to-right-align implies that using button instead of input will make a difference. – Wesle

float-end worked for me – Counterman

Answer 2

In twitter bootstrap 3 try the class pull-right

class="btn pull-right"

Labe

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

+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. – Labe

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

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

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> – Glycoside

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

Soften

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. – Vashtee

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! – Studio

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

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

Answer updated, thanks! – Sucy

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.

Constituency

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. – Constituency

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

Craner

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>

Endor

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

Kress

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>

Engaged

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>

Domesticate

Answer 10

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.

Vaientina

Answer 11

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

This link will help

Subsidence

Answer 12

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

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

Plantaineater

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

Answer 13

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

Slipover

Answer 14

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

Cornelia

For me this puts both list items on a single line – Meso

Answer 15

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!

Satinwood

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

@Unreality 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. – Satinwood

Answer 16

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

Gimmick

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.

Euhemerize

Answer 18

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

Carpetbagger

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

Answer 19

For bootstrap 5.1.3 the attribute float-end works for me:

<div class="row mt-2 float-end">
    <div class="col-md-12">
        <button class="btn btn-warning" >Do something else</button>
        <button class="btn btn-primary ml-2">Do primary action</button>
    </div>
</div>

Councillor

Answer 20

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>

Bombardon

Answer 21

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>

Ophiolatry

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

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 🙂 – Waistband