CODEWITHSUNDEEP
csstwitter-bootstrap
thomas
thomas

Reputation: 1174

Align a bootstrap navbar to the right

I'm trying to move my navbar to the right, tried both navbar-right, and pull-right, but all I get is something like this -

enter image description here

<div class="container" >
<h1 align="center"><a href="#">My Site</a></h1>
<div class="container" >
<ul class="nav nav-tabs navbar-right" >
  <li class="active"><a href="#">tab1</a></li>
  <li><a href="#">tab2</a></li>
  <li><a href="#">tab3</a></li>
  <li><a href="#">tab4</a></li>  
 </ul>
</div>
<br>
Hello

</div>

So there are 2 problems here - The grey line underneath the tabs is much shorter, and the tabs themselves aren't aligned properly - I want "tab1" to be the rightmost one, and correspondingly "tab4" the leftmost one.

I get the same results for navbar-right and pull-right. How can this be fixed?

Thanks!

Upvotes: 3

Views: 11445

Answers (5)

lawrence gumbo
lawrence gumbo

Reputation: 21

Using Bootstrap 5 you can simple add justify-content-end to the <ul> class

<div class="container" >
<h1 align="center"><a href="#">My Site</a></h1>
<div class="container" >
  <ul class="nav nav-tabs justify-content-end" >
    <li class="active"><a href="#">tab1</a></li>
    <li><a href="#">tab2</a></li>
    <li><a href="#">tab3</a></li>
    <li><a href="#">tab4</a></li>  
  </ul>
</div>
<br>
Hello

Upvotes: 0

Samus_
Samus_

Reputation: 2993

I've added the following rules to solve the problem without losing the border on the ul or reordering the markup:

.nav-tabs-right       { text-align: right; }
.nav-tabs-right > li  { display: inline-block; float: none; }

you can apply that to .nav-tabs directly but I prefer to create a separate class to replace .navbar-right

Upvotes: 4

balexandre
balexandre

Reputation: 75083

you can easily have that behavior by just extending the Bootstrap.

enter image description here

Demo on JSBin: http://jsbin.com/zaniz/1/edit?html,css,output

all I did was added a right-to-left class to the <ul> and the CSS Style should be:

.right-to-left li { float: right; }

Upvotes: 11

Matthew Shine
Matthew Shine

Reputation: 463

I just added a float: right; (equal to pull-right) style to the <ul> and it seemed to produce the desired output, as for the tab1 being the rightmost one, it's probably best to reorder your markup to say:

<ul class="nav nav-tabs navbar-right" >
    <li class="active"><a href="#">tab4</a></li>
    <li><a href="#">tab3</a></li>
    <li><a href="#">tab2</a></li>
    <li><a href="#">tab1</a></li>  
</ul>

Upvotes: 1

sumitb.mdi
sumitb.mdi

Reputation: 990

You can try this; if you want that gray line to cover the entire page horizontly

<div class="container" >
<h1 align="center"><a href="#">My Site</a></h1>
<div class="container" >
<ul class="nav nav-tabs" >
  <li class="active pull-right" ><a href="#">tab1</a></li>
  <li class="pull-right"><a href="#">tab2</a></li>
  <li class="pull-right"><a href="#">tab3</a></li>  
  <li class="pull-right"><a href="#">tab4</a></li>  
</ul>
</div>
<br>
Hello

</div>

Upvotes: 2

Related Questions