O'Reilly logo

Twitter Bootstrap Web Development How-To by David Cochran

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

Creating a portfolio page (Must know)

Soon we will update the navigation bar to provide links to the pages we're creating. First, let's create two more pages. Next up, a portfolio page.

In this page, we'll place more emphasis upon images. To speed things up as we learn, we'll use placehold.it images, together with Twitter Bootstrap's handy styles for thumbnails, so that we may quickly organize a grid of images with headings and captions.

Getting ready

Let's get our new template file ready:

  1. Make a copy of about.html and rename it portfolio.html.
  2. Open portfolio.html in your editor.
  3. Update the title tag to read <title>Portfolio | My Bootstrap Site</title>.
  4. Update the h1 heading to read <h1>Portfolio</h1>.
  5. Save the file and open it in your browser.

How to ...

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