CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
greencucumber1
greencucumber1

Reputation: 33

Bootstrap align image in nav bar right

I'm unable to align an image on the right side of the nav bar.

Can you tell me why?

https://jsfiddle.net/2juzLktc/

<nav class="navbar navbar-inverse navbar-light">
<div class="container-fluid" id="div1">
 <a class="navbar-brand" href="#"><img src="http://www.clker.com/cliparts/T/G/b/7/r/A/red-dot-hi.png" width="150px" height="30px"></a>
    <ul class="nav navbar-nav navbar-right">
    <li><img src="https://cdn.pixabay.com/photo/2017/02/16/10/20/target-2070972_960_720.png" width="10%" id="eye" ></li>
    </ul>
</div>

Upvotes: 3

Views: 9271

Answers (4)

Phani Kumar M
Phani Kumar M

Reputation: 4588

Add pull-right class to your image like this and it will right align the image.

<ul class="nav navbar-nav navbar-right">
    <li><img class="pull-right" src="https://cdn.pixabay.com/photo/2017/02/16/10/20/target-2070972_960_720.png" width="10%" id="eye" ></li>
</ul>


<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-inverse navbar-light">
	<div class="container-fluid" id="div1">
	 <a class="navbar-brand" href="#"><img src="http://www.clker.com/cliparts/T/G/b/7/r/A/red-dot-hi.png" width="150px" height="30px"></a>
		<ul class="nav navbar-nav navbar-right">
		<li><img class="pull-right" src="https://cdn.pixabay.com/photo/2017/02/16/10/20/target-2070972_960_720.png" width="10%" id="eye" ></li>
		</ul>
	</div>
</nav>

Upvotes: 3

Thomas Allen
Thomas Allen

Reputation: 811

It could be something to do with not closing the img tags or the layout. I closed the img tags and edited the indenting and it works fine. Try something like this:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="/Dashboard/js/indexscript.js"></script>

<nav class="navbar navbar-inverse navbar-light">
    <div class="container-fluid" id="div1">
     <a class="navbar-brand" href="#">
       <img src="http://www.clker.com/cliparts/T/G/b/7/r/A/red-dot-hi.png" width="150px" height="30px" />
     </a>
        <ul class="nav navbar-nav navbar-right">
          <li>
            <img src="https://cdn.pixabay.com/photo/2017/02/16/10/20/target-2070972_960_720.png" width="10%" id="eye" />
          </li>
        </ul>
    </div>
</nav>

Upvotes: 0

amow
amow

Reputation: 2223

because the fiddle output window is too small.the float:left will be added to navbar-right only when @media (min-width: 768px).You can extend the width of fiddle output window to verify this.

Upvotes: 0

Anmol Sandal
Anmol Sandal

Reputation: 1488

.nav>li {
   text-align:right;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" >
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.js"></script>
<script src="/Dashboard/js/indexscript.js"></script>

<nav class="navbar navbar-inverse navbar-light">
	<div class="container-fluid" id="div1">
	 <a class="navbar-brand" href="#"><img src="http://www.clker.com/cliparts/T/G/b/7/r/A/red-dot-hi.png" width="150px" height="30px"></a>
		<ul class="nav navbar-nav navbar-right">
		<li><img src="https://cdn.pixabay.com/photo/2017/02/16/10/20/target-2070972_960_720.png" width="10%" id="eye" ></li>
		</ul>
	</div>
</nav>

Simply add text-align:right to li Ypu can review it on fiddle and the snippet below

https://jsfiddle.net/anmolsandal/2juzLktc/3/

Upvotes: 0

Related Questions