143

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>
dimo414
  • 47,227
  • 18
  • 148
  • 244
Justin
  • 42,716
  • 77
  • 201
  • 296

7 Answers7

106

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; 

  <div class="container">
     <div class="row-fluid">
      <div class="span6">
           <p>Text left</p>
      </div>
      <div class="span6 pull-right" style="text-align:right">
           <p>text right</p>
      </div>
  </div>
 </div>      
 </div>
the
  • 21,007
  • 11
  • 68
  • 101
Amit
  • 1,412
  • 1
  • 9
  • 12
  • unfrotunately `pull-right` was deprecated with version 3.1: getbootstrap.com/components/#dropdowns-alignment – ılǝ Jun 18 '15 at 10:57
  • 12
    @ılǝ "..we've deprecated .pull-right *on dropdown menus*." This doesn't apply to other pull-right usages. – user2864740 Dec 05 '15 at 22:07
86

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

Inaimathi
  • 13,853
  • 9
  • 49
  • 93
Billy Moat
  • 20,792
  • 7
  • 45
  • 37
  • 5
    Looks like they added utility classes for aligning text in [2.3](http://blog.getbootstrap.com/2013/02/07/bootstrap-2-3-released/): `.text-left`, `.text-center`, and `.text-right` – Eric Freese Feb 11 '13 at 09:52
  • 1
    @EricFreese - You're right - hadn't noticed that update - I've updated my answer. – Billy Moat Feb 11 '13 at 09:55
  • This shouldn't be the accepted answer. There's a built in bootstrap class called `pull-right` (credit to @Amit); IMO, it's cleaner to use a built-in Bootstrap class... and OP asked for that in his question – Kellen Stuart Aug 30 '18 at 16:18
78

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

ishimwe
  • 1,216
  • 12
  • 13
  • `text-right`, `text-left` and `text-center` works perfectly. And aligns the text with the container accordingly. – Anish Nair Sep 22 '15 at 09:25
  • thanks @BojanKogoj, indeed pull-right was deprecated for dropdown menus in v 3.1 : getbootstrap.com/components/#dropdowns-alignment – ılǝ Apr 19 '16 at 13:47
27

This does the trick, without the need to add an inline style

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

The answer is in nesting another <div> with the "pull-right" class. Combining the two classes won't work.

Bern
  • 7,808
  • 5
  • 37
  • 47
18
<p class="pull-left">Text left</p>
<p class="text-right">Text right in same line</p>

This work for me.

edit: An example with your snippet:

@import url('https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.css');
 .container {
    margin-top: 10px;
}
<div class="container">
    <div class="row-fluid">
        <div class="span6 pull-left">
            <p>Text left</p>
        </div>
        <div class="span6 text-right">
            <p>text right</p>
        </div>
    </div>
</div>
Kévin Berthommier
  • 1,402
  • 15
  • 15
3

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>
Faisal
  • 4,591
  • 3
  • 40
  • 49
1

Try it like this, hopefully, this is what you want.

<div class="float-end">Div floated to right</div>

BoxaBole
  • 51
  • 3