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 · Accepted 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

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

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

bootstrap 3 has a class to align the text within a div   lt div class  text-right  gt    will align the text on the right   lt div class  pull-right  gt    will pull to the right all the content not only the text

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

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

[html] Twitter bootstrap float div right

Examples related to html

Examples related to css

Examples related to twitter-bootstrap