Bootstrap - How to add logo to navbar class?

Question

I would like to add a logo to the top navigation bar in the navbar brand. I would like it to scale with the size of the viewport, so I use the img-responsive2 class.

It seems that both the image and the text in the navbar brand are wrapped to the next line.

This page can be viewed at http://digitalponddesign.com/dev/

Thanks in advance for your help.

Here is my code:

HTML

<h2 class="navbar-brand brand-name"> <a href="index.html"><img class="img-responsive2" src="images/DigitalPondlogo.png">DigitalPond</a> </h2> 

CSS

 .navbar { margin: 10px 0; } .navbar-default { background-color: #fff; border-color: #fff; } .brand-name { font-family: 'Josefin Slab', serif; font-size: 47px; font-weight: bold; color: #444; text-decoration: none; } .nav-container { padding-top: 8px; } .navbar-custom { font-size: 20px; background-color: #FFF; } 

Answer 1

I found the solution in another thread that works - use the pull-left class:

  <a href="#" class="pull-left"><img src="/path/to/image.png"></a> 

Thanks to Michael in this thread:

Bootstrap - How to add logo to navbar class?

Answer 2

You can simply display the text and image as inline blocks so that they do not drain. using floats such as pull-left / pull-right can cause unwanted problems, so they should be used sparingly

 <a class="navbar-brand" href="#"> <img src="mylogo.png" style="display: inline-block;"> <span style="display: inline-block;">My Company</span> </a> 

Answer 3

For those using the beta version of bootstrap 4, you can add max-width to your navigation link to have control over the size of your logo with the img-fluid class on the image element.

  <a class="navbar-brand" href="#" style="max-width: 30%;"> <img src="images/logo.png" class="img-fluid"> </a> 

Answer 4

I suggest you use an image or text. So, delete the text and add it to your image (possibly using Photoshop). Then use 100% width and height for the image. he will do the trick. because the image can be changed based on the container. But you have to manually resize the text. If you can provide a violin, I can help you with that.

Answer 5

 <a class="navbar-brand" href="#" style="padding:0px;"> <img src="mylogo.png" style="height:100%;"> </a> 

To include text:

 <a class="navbar-brand" href="#" style="padding:0px;"> <img src="mylogo.png" style="height:100%;display:inline-block;"><span>text</span> </a> 

Answer 6

Enter the image and give height:100%;width:auto , and then just change the height of the navigation bar itself to resize the image. There is a really good example in codedeath. https://codepen.io/bootstrapped/pen/KwYGwq