How to add multiple logos in Bootstrap navbar? - html

Question

I want to add two logos to my bootstrap navbar, but I also want them to be responsive (i.e. I want them to get smaller, not stacked when I decrease the screen size). Here's the navbar code I have been working on-
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="navbar-header">
<a class="navbar-brand" href="#">
<img alt="Brand" id="brand1" src="img/image.png">
</a>
<a class="navbar-brand" href="#">
<img alt="Brand" id="brand2" src="img/image2.png">
</a>
</div>
</div>
</nav>
Any help would be greatly appreciated!

Answer 1

I have created the example of having two logo side by side.
Please check the working example at CODEPEN
HTML:
<nav class="navbar navbar-default">
<div class="container-fluid">
<div class="nav-header">
<div class="row">
<div class="col-sm-4">
<div class="row">
<div class="col-xs-6">
<a class="navbar-brand" href="#">
<img alt="Brand" id="brand2" src="http://www.kratosuk.com/wp-content/uploads/2013/07/joomla-logo.png" class="img img-responsive">
</a>
</div>
<div class="col-xs-6">
<a class="navbar-brand" href="#">
<img alt="Brand" id="brand1" class="img img-responsive" src="http://www.kratosuk.com/wp-content/uploads/2013/07/drupal-logo.png">
</a>
</div>
</div>
</div>
</div>
</div>
</nav>
CSS:
.navbar-brand {
display: inline-block;
float: none;
font-size: 18px;
height: 100%;
padding: 0;
vertical-align: middle;
}
I hope it helps you
Enjoy :)

Answer 2

The 'img-reponsive' class should help you.
<img alt="Brand" id="brand1" src="img/image.png" class="img-responsive">
Hope it helped you :)