How can I get my Twitter Bootstrap buttons to right align

Question

I have a simple demo here   http   jsfiddle net HdeZ3 1    lt ul gt       lt li gt One  lt input class  btn pull-right  value  test  gt  lt  li gt       lt li gt Two  lt input class  btn pull-right  value  test2  gt  lt  li gt   lt  ul gt    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

User · Answer

In Bootstrap 4  Try this way with Flexbox  See documentation in getbootstrap   lt div class  row  gt     lt div class  col-md  gt       lt div class  d-flex justify-content-end  gt         lt button type  button  class  btn btn-default  gt Example 1 lt  button gt         lt button type  button  class  btn btn-default  gt Example 2 lt  button gt       lt  div gt     lt  div gt   lt  div gt

User · Answer

Apply pull-right class for the button  http   getbootstrap com css  helper-classes-floats -  Helper classes  This link will help

User · Answer

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

User · Answer

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      lt div class  row  gt     lt div class  col-sm-12  gt         lt div class  pull-right  gt               lt p gt I am right aligned  factoring in container column padding lt  p gt         lt  div gt     lt  div gt   lt  div gt    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      lt div class  row  gt     lt div class  col-sm-4 col-sm-offset-4  gt          This content and its sibling      lt  div gt     lt div class  col-sm-4  gt          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      lt  div gt   lt  div gt

User · Answer

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    lt div class  row  gt       lt div class  col-xs-12  gt           lt div class  text-right  gt               lt button type  button  class  btn btn-default  gt Default lt  button gt           lt  div gt       lt  div gt   lt  div gt

User · Answer

Update 2019 - Bootstrap 4 0 0  The pull-right class is now float-right in Bootstrap 4          lt div class  row  gt           lt div class  col-12  gt One  lt input type  button  class  btn float-right  value  test  gt  lt  div gt           lt div class  col-12  gt Two  lt input type  button  class  btn float-right  value  test  gt  lt  div gt       lt  div gt    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

User · Answer

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    lt div class  btn-container-right  gt       lt button class  btn  gt Click Me lt  button gt   lt  div gt

User · Answer

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

User · Answer

you can also use blank columns to give spaces on left   like    lt div class  row  gt       lt div class  col-md-8  gt  lt  div gt    lt  -- blank space increase or decrease it by column   -- gt           lt div class  col-md-4  gt               lt button id  saveedit  name  saveedit  class  btn btn-success  gt Save lt  button gt           lt  div gt   lt  div gt    Demo    Jsfiddle demo

User · Answer

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      the url to the bootstrap css file is invalid   perhaps it worked when you asked the question   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  lt button gt  element instead  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    lt ul gt     lt li gt One  lt input type  button  class  btn pull-right  value  test   gt  lt  li gt     lt li gt Two  lt input type  button  class  btn pull-right  value  test2   gt  lt  li gt   lt  ul gt     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

User · Answer

lt ul gt       lt li class  quot span4 quot  gt One  lt input class  quot btn btn-small quot  value  quot test quot  gt  lt  li gt       lt li class  quot span4 quot  gt Two  lt input class  quot btn btn-small quot  value  quot test2 quot  gt  lt  li gt   lt  ul gt   One way would be to apply this style to your list items in order to keep them inline or  lt ul gt       lt li gt One  lt input class  quot btn quot  value  quot test quot  gt  lt  li gt       lt li gt Two  lt input class  quot btn quot  value  quot test2 quot  gt  lt  li gt   lt  ul gt   in CSS li       line-height  20px      margin  5px      padding  2px

User · Answer

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   lt ul gt   lt input class  quot btn pull-right quot  value  quot test quot  gt   lt li gt One lt  li gt    lt li gt Two lt  li gt   lt input class  quot btn pull-right quot  value  quot test2 quot  gt    lt  ul gt

User · Answer

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    lt button class  btn btn-primary pull-right btn-sm RbtnMargin  type  button  gt Save lt  button gt   lt button class  btn btn-primary pull-right btn-sm   type  button  gt Cancel lt  button gt    Then use the following CSS for the class   RbtnMargin   margin-left  5px

User · Answer

Pull right was depreciated as of v3 1 0   Just a heads up   http   getbootstrap com components  callout-dropdown-pull-right

User · Answer

In twitter bootstrap 3 try the class pull-right  class  btn pull-right

User · Answer

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

User · Answer

for bootstrap 4 documentation     lt div class  row justify-content-end  gt       lt div class  col-4  gt        Start of the row      lt  div gt       lt div class  col-4  gt        End of the row      lt  div gt     lt  div gt

User · Answer

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

[twitter-bootstrap] How can I get my Twitter Bootstrap buttons to right align?

Examples related to twitter-bootstrap

Examples related to twitter-bootstrap-3

Examples related to bootstrap-4

Examples related to twitter-bootstrap-2