The Profile template

The last template that we need to create for our wiki is the Profile page. This template will reuse some of the classes that we have already set up and add a bit more to create a complete user profile page. Take a look at this screenshot to understand what we'll be building:

Adding an avatar

We're going to update our page title section to include a user avatar for this page. Update the <h1> tag to include an image, as shown in this example:

<h1><img src="http://fillmurray.com/36/36" width="36" height="36" alt="Avatar"> John Smith</h1>

Also make sure you change the page title to be your user's name. In this case, I'm using John Smith. After you've finished this, add the Edit button back to the inline list so that you can allow the user to edit their profile:

<li>
  <button type="button" class="btn btn-default">Edit</button>
</li>

This concludes the page title setup. Let's move on to the body of the page. It is going to use the...