Twitter Bootstrap Question posted in

How to add a logo to a Twitter bootstrap navbar?

I have a logo which has the dimension of 2829 × 1913 and it is a PNG. How do i fit it into a navbar bootstrap?

Here’s the code

<div class="navbar-header">
      <a class="navbar-brand" href="/">
        <img src="startupclone202.png">
      </a>
    </div>

enter image description here

How do i change the project name to my own logo that is 2829 × 1913 to a nicely fit logo?

Tags:

2

Answers


  1. 0

    To insert image in navbar use this code:

    <nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">
        <img alt="Brand" src="...">
      </a>
    </div>
  </div>
</nav>

    For the image download GIMP and resize it, is too big.

    Login or Signup to reply.
  2. 0

    For that first you have to resize the image then You can try the following code for the navbar.

    <div class="navbar navbar-fixed-top">
       <div class="navbar-inner">
         <div class="container">
            <a class="navbar-brand" href="index.html"> <imgsrc="images/xyz.jpg"></a>

    For that you have to add following css

    .navbar-brand > img {
      max-height: 100%;
      height: 100%;
      -o-object-fit: contain;
      object-fit: contain;
    }
         </div>
       </div>
     </div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search