Coding the friends section

Time to start the final template of this project and the book! The last page that we'll cover is a friends page for our social networking website. It will include a list of all our friends, their bios or descriptions, and a way to delete them:

Like the previous templates, the left and right sidebars won't be changed for this one. We'll only need to edit the middle column, so open up friends.ejs and insert this page-header code at the top of the column:

<h1 class="page-header">
  Friends
  <span class="pull-right"><small>134 Friends</small></span>
</h1>

I'm using the same pattern here as that of the other page headers. But within the <span> tag on this <h1> tag, we are going to use the <small> tag to indicate the number of friends the user has. A <small> tag with a header tag in Bootstrap provides some built-in styles you can take advantage of.

Adding a friend entry

As in the previous templates, let's dissect...