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

Tweaking the columns and their content

Let's fine-tune the blocks of content under the three headings Welcome!, Recent Updates, and Our Team:

  1. First, let's add the arrow-circle icon to the button in each of these three blocks. Recall that we're using Font Awesome for our icon selection.
  2. Visit the Font Awesome documentation at http://fortawesome.github.io/Font-Awesome/icons/. You'll find the icon that we're after:
    Tweaking the columns and their content
  3. In the html/pages/index.html file, add an i tag with the appropriate classes inside each link. Here is the first one, which I've spaced out by adding an extra carriage return between elements:
     <p> <a class="btn btn-primary pull-right" href="#"> ...

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