Justin Justin - 6 months ago 172
CSS Question

Twitter bootstrap float div right

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.



@import url('http://twitter.github.com/bootstrap/assets/css/bootstrap.css');
.container {
margin-top: 10px;
}

<div class="container">
<div class="row-fluid">
<div class="span6">
<p>Text left</p>
</div>
<div class="span6 pull-right">
<p>text right</p>
</div>
</div>
</div>




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