Twitter Bootstrap column not right aligning
Twitter BootstrapTwitter 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 | |
+----------------------------------------------+---------+---------+------+