Twitter Bootstrap column not right aligning

I am trying to have a row across my screen, with Login information on the left, and then some other info on the far right, right justified. This is my unsuccessful attempt:

<div class="container well">
    <div class="row">
        <div class="col-lg-6">
            @(Session["CurrentUserDisplay"] != null ? "Welcome, " + @Session["CurrentUserDisplay"] : "Not logged in")
        </div>
        <div class="col-lg-6 pull-right">Active Portfolio: @(Session["ActivePortfolioName"].ToString()) 
        </div>
    </div>
</div>

But the 2nd column is sitting in the middle of the row, so seems it's not right justified in the 'cell'. Can anyone guide me to get this right?

Solution 1:

Instead of pull-right use text-right.

text-right class aligns the content of that element to right by using text-align: right.

pull-right class aligns the element itself by using float:right.

Solution 2:

I think you need to use offset. Add the class col-md-offset-*

You can read more in doc: http://getbootstrap.com/css/#grid-offsetting

Solution 3:

Just to add a working example about where to put the class pull-right if you are in a panel body... the question is the class pull-right automatically delete the left and right margin (margin-left:-15px; margin-right:-15px), so we cannot just add the class to the elements without wrapping them with a row and col-lg-12.

I think pull-right is better than col-xx-offset-n because with the latter one, we don't know if the width of the elements to align are just the total width of the (12-n) columns.

<div class="panel panel-default">
    <div class="panel-heading">
        This is panel title
    </div>
    <div class="panel-body">
        <div class="row">
            ...
        </div>
        <div class="row">
            <div class="col-lg-12">
                <div class="pull-right">
                    <button ...></button>
                    <button ...></button>
                </div>
            </div>
        </div>
    </div>
</div>

The final result is:

+-----------------+
|  panel          |
+-----------------+------------------------------------------------+
|                                                                  |
|  This is panel heading.                                          |
|                                                                  |
+-------------------------------------------------------------------------+
|                                                                  |      |
|  row 1, for form elements.                                       |      |
|                                                                  |      |
|                                                                  |      |
|                                                                  |      +
|                                                                  |   panel-body
|                                                                  |      +
|                                                                  |      |
|                                                                  |      |
|                                                                  |      |
|                                                                  |      |
+----------------------------------------------+---------+---------+      |
|  row 2, only buttons to the right            | button1 | button2 |      |
+----------------------------------------------+---------+---------+------+