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?
This question is related to
twitter-bootstrap
twitter-bootstrap-3
bootstrap-4
twitter-bootstrap-2
Pull right was depreciated as of v3.1.0 . Just a heads up.
http://getbootstrap.com/components/#callout-dropdown-pull-right
"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>
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>
<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;
}
Apply pull-right
class for the button.
http://getbootstrap.com/css/#helper-classes-floats -> Helper classes
This link will help
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>
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>
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>
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; }
In twitter bootstrap 3 try the class pull-right
class="btn pull-right"
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
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 .btn
s 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>
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
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.
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.
<button>
element instead.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 :) )
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!
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.
Source: Stackoverflow.com