O'Reilly logo

Bootstrap 4 Site Blueprints by Ian Whitley, David Cochran, Bass Jobsen

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Adding the logo image

Find the logo.png file in the assets/images folder. You may notice that its dimensions are large, 900 px wide. In our final design, it will be only 120 px 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 on 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 the html/includes/header.html file in your text editor.
  2. Search for this line within the navbar markup:
          <a class="navbar-brand"
           href="index.html">Bootstrappin'</a> 
    
  3. Replace the HTML from the previous step with the following image tag, including its ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required