I host coding and preview here.
I would like to right-align my 2nd button, please show me how to do that.
Thanks.
I host coding and preview here.
I would like to right-align my 2nd button, please show me how to do that.
Thanks.
.navbar-btn { margin-right:6px; }
Apr 5, 2014 at 18:23
For Bootstrap 3, .navbar-right
does just that.
<ul class="nav navbar-nav navbar-right">
.
.
</ul>
navbar-right
does not work for me. Adding pull-right
to ul
does work.
Within the navbar in case of Bootstrap alignment happens a little differently.
For aligning elements to the right in the navbar put the required elements in a separate div and within it create a ul and add the required elements to the list.
To the div add a class .pull-right to align the elements right.
Sample Code:
<div class="pull-right">
<ul class="nav navbar-nav">
<li><button type="submit" class="btn navbar-btn btn-danger" name="logout" id="logout" value="Log Out">Log Out</button></li>
</ul>
</div>
If there are alignment issues with elements on the left of the navbar and a class .pull-left to that div
A DEMO HERE
Well, make that change.
.navbar-header{
width:100%;
}
Then place a class on the button that you want to put on the right side, for example right-side-button
then apply that class to the a
and edit in css that way:
.right-side-button{
float:right;
}
And you are done!