Twitter bootstrap float div right

Question

What is the proper way in bootstrap to float a div to the right  I thought pull-right was the recommend way  but it is not working    x000D   x000D   import url  http   twitter github com bootstrap assets css bootstrap css    x000D    container   x000D      margin-top  10px  x000D    x000D   lt div class  container  gt  x000D       lt div class  row-fluid  gt  x000D           lt div class  span6  gt  x000D               lt p gt Text left lt  p gt  x000D           lt  div gt  x000D           lt div class  span6 pull-right  gt  x000D               lt p gt text right lt  p gt  x000D           lt  div gt  x000D       lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

bootstrap 3 has a class to align the text within a div

<div class="text-right">

will align the text on the right

<div class="pull-right">

will pull to the right all the content not only the text

User · Answer

lt p class  pull-left  gt Text left lt  p gt   lt p class  text-right  gt Text right in same line lt  p gt    This work for me   edit  An example with your snippet    x000D   x000D   import url  https   unpkg com bootstrap 3 3 7 dist css bootstrap css    x000D    container   x000D      margin-top  10px  x000D    x000D   lt div class  container  gt  x000D       lt div class  row-fluid  gt  x000D           lt div class  span6 pull-left  gt  x000D               lt p gt Text left lt  p gt  x000D           lt  div gt  x000D           lt div class  span6 text-right  gt  x000D               lt p gt text right lt  p gt  x000D           lt  div gt  x000D       lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

To float a div to the right pull-right is the recommend way  I feel you are doing things right may be you only need to use text-align right       lt div class  container  gt        lt div class  row-fluid  gt         lt div class  span6  gt              lt p gt Text left lt  p gt         lt  div gt         lt div class  span6 pull-right  style  text-align right  gt              lt p gt text right lt  p gt         lt  div gt     lt  div gt    lt  div gt          lt  div gt

User · Answer

You can assign the class name like text-center  left or right  The text will align accordingly to these class name  You don t need to make extra class name separately  These classes are built in BootStrap 3 and bootstrap 4   Bootstrap 3  v3 Text Alignment Docs   lt p class  text-left  gt Left aligned text  lt  p gt   lt p class  text-center  gt Center aligned text  lt  p gt   lt p class  text-right  gt Right aligned text  lt  p gt   lt p class  text-justify  gt Justified text  lt  p gt   lt p class  text-nowrap  gt No wrap text  lt  p gt    Bootstrap 4  v4 Text Alignment Docs   lt p class  text-xs-left  gt Left aligned text on all viewport sizes  lt  p gt   lt p class  text-xs-center  gt Center aligned text on all viewport sizes  lt  p gt   lt p class  text-xs-right  gt Right aligned text on all viewport sizes  lt  p gt    lt p class  text-sm-left  gt Left aligned text on viewports sized SM  small  or wider  lt  p gt   lt p class  text-md-left  gt Left aligned text on viewports sized MD  medium  or wider  lt  p gt   lt p class  text-lg-left  gt Left aligned text on viewports sized LG  large  or wider  lt  p gt   lt p class  text-xl-left  gt Left aligned text on viewports sized XL  extra-large  or wider  lt  p gt

User · Answer

This does the trick  without the need to add an inline style   lt div class  row-fluid  gt       lt div class  span6  gt           lt p gt text left lt  p gt       lt  div gt       lt div class  span6  gt           lt div class  pull-right  gt               lt p gt text right lt  p gt           lt  div gt       lt  div gt   lt  div gt    The answer is in nesting another  lt div gt  with the  pull-right  class  Combining the two classes won t work

User · Answer

You have two span6 divs within your row so that will take up the whole 12 spans that a row is made up of   Adding pull-right to the second span6 div isn t going to do anything to it as it s already sitting to the right   If you mean you want to have the text in the second span6 div aligned to the right then simple add a new class to that div and give it the text-align  right value e g    myclass       text-align  right        UPDATE   EricFreese pointed out that in the 2 3 release of Bootstrap  last week  they ve added text-align utility classes that you can use     text-left  text-center  text-right   http   twitter github com bootstrap base-css html typography

[html] Twitter bootstrap float div right

Examples related to html

Examples related to css

Examples related to twitter-bootstrap