Twitter Bootstrap column not right aligning

Twitter Bootstrap

Twitter Bootstrap Problem Overview


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?

Twitter Bootstrap Solutions


Solution 1 - Twitter Bootstrap

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

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

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

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionCraigView Question on Stackoverflow
Solution 1 - Twitter BootstrapravisuhagView Answer on Stackoverflow
Solution 2 - Twitter BootstrapChristianView Answer on Stackoverflow
Solution 3 - Twitter BootstrapWesternGunView Answer on Stackoverflow