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

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

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>
<p class="text-nowrap">No wrap text.</p>

Bootstrap 4

v4 Text Alignment Docs

<p class="text-xs-left">Left aligned text on all viewport sizes.</p>
<p class="text-xs-center">Center aligned text on all viewport sizes.</p>
<p class="text-xs-right">Right aligned text on all viewport sizes.</p>

<p class="text-sm-left">Left aligned text on viewports sized SM (small) or wider.</p>
<p class="text-md-left">Left aligned text on viewports sized MD (medium) or wider.</p>
<p class="text-lg-left">Left aligned text on viewports sized LG (large) or wider.</p>
<p class="text-xl-left">Left aligned text on viewports sized XL (extra-large) or wider.</p>

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

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

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

[html] Twitter bootstrap float div right

Bootstrap 3

Bootstrap 4

Examples related to html

Examples related to css

Examples related to twitter-bootstrap