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.
- Open
index.html
in your editor. - Search for this line within the navbar markup:
<a class="navbar-brand" href="index.html">Bootstrappin'</a>
- Replace
Bootstrappin'
with this image tag, including itsalt
andwidth
attributes.<img src="img/logo.png" alt="Bootstrappin'" ...
Get Bootstrap Site Blueprints now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.