Adding the logo image

Find the logo.png file in the img folder. You may notice that its dimensions are large, 900px wide. In our final design, it will be only 120px wide. Because the pixels will be compressed into a smaller space, this is a relatively easy way to ensure that the image will look good in all devices, including retina displays. Meanwhile, the file size of the image, which has already been optimized for the Web, is only 19 KB.

So, let's put it in place and constrain its width.

1. Open index.html in your editor.

2. Search for this line within the navbar markup:

   <a class="navbar-brand" href="index.html">Bootstrappin'</a>

3. Replace Bootstrappin' with this image tag, including its alt and width attributes.

   <img src="img/logo.png" alt="Bootstrappin'" width="120">

   Tip

   Be sure to include the width attribute, setting its width to 120px. Otherwise, it will appear very large on the page.

4. Save index.html and refresh your browser. You should see the logo in place.

   

You may notice that the...