Bootstrap - How to add a logo to navbar class

Question

I would like to add a logo to the top navbar within the navbar-brand  I would like it to scale with the viewport size so I m using img-responsive2 class   It appear that both the image and the text in the navbar-brand are wrapping to the next line   This page can be viewed at http   digitalponddesign com dev   Thanks in advance for you help   Here is my code   Html      lt h2 class  navbar-brand brand-name  gt          lt a href  index html  gt  lt img class  img-responsive2                src  images DigitalPondlogo png  gt DigitalPond lt  a gt      lt  h2 gt    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

User · Answer

You can just display both the text and image as inline-blocks so that they dont stack  using floats like pull-left pull-right can cause undesired issues so they should be used sparingly   lt a class  navbar-brand  href     gt     lt img src  mylogo png  style  display  inline-block   gt     lt span style  display  inline-block   gt My Company lt  span gt   lt  a gt

User · Answer

For those using bootstrap 4 beta you can add max-width on your navbar link to have control on the size of your logo with img-fluid class on the image element     lt a class  navbar-brand  href     style  max-width  30    gt       lt img src  images logo png  class  img-fluid  gt    lt  a gt

User · Answer

I found a solution on another thread that works - use the pull-left class     lt a href     class  pull-left  gt  lt img src   path to image png  gt  lt  a gt     Thanks to Michael in this thread   Bootstrap - How to add a logo to navbar class

User · Answer

Use a image style width and height 100    This will do the trick  because the image can be resized based on the container   Example    lt a class  navbar-brand  href     style  padding  4px margin auto  gt   lt img src  images logo png  style  height 100  width  auto   title  mycompanylogo  gt  lt  a gt

User · Answer

Enter the image and give height 100  width auto then just change the height of navbar itself to resize image  There is a really good example in codepen  https   codepen io bootstrapped pen KwYGwq

User · Answer

I would suggest you to use either an image or text  So  Remove the text and add it in your image using Photoshop  maybe    Then  Use a width and height 100  for the image  it will do the trick  because the image can be resized based on the container  But  you have to manually resize the text  If you can provide the fiddle  I can help you achieve this

User · Answer

lt a class  navbar-brand  href     style  padding 0px   gt     lt img src  mylogo png  style  height 100    gt   lt  a gt    For including a text    lt a class  navbar-brand  href     style  padding 0px   gt     lt img src  mylogo png  style  height 100  display inline-block   gt  lt span gt text lt  span gt   lt  a gt

[twitter-bootstrap] Bootstrap - How to add a logo to navbar class?

Examples related to twitter-bootstrap