Coding the private messages section

The next page that we are going to tackle is the private messages template. This is where you would come to send a direct message to one of your friends on the social network—a message that you want to keep private and hidden from other users. The left and right sidebars will remain the same; only the content of the center column will change.

Before we start, let's see what this page will look like:

Open the messages.ejs file and paste the page-header code at the top of the column:

<h1 class="page-header">
  Messages
  <span class="pull-right">
    <button class="btn btn-primary">New Message</button>
  </span>
</h1>

Note that in this header, I've added a <span> tag that is right aligned with a button inside of it. This is the button that a user would click on to start a new message. The span needs to be nested inside the <h1> tag as it's a block element, but we don't want to break the button onto a new line...