Adding a navbar

The Create a new post and Logout links look like they need more work. The Bootstrap component that can handle this is the navbar.

The documentation is rather verbose about all the possibilities, so we will select only what we need, namely:

<nav class="navbar navbar-default">  
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <div class="navbar-collapse">
      <ul class="nav navbar-nav">
        <li>
          Link
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li>
          Link
        </li>
      </ul>
    </div>
  </div>
</nav>

Now we will substitute Brand with the name of the application (so now it's time to think of how you would like to name you app) and each Link with the Create a new post and Logout links, as follows:

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">Marine life</a>
    </div>
    <div class="navbar-collapse">
      <ul class="nav navbar-nav">
        <li>
          <%=link_to("Create a new post", new_post_path) %>
        </li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li>
          <%= link_to('Logout', destroy_user_session_path, method: :delete) %>
        </li>
      </ul>
    </div>
  </div>
</nav>

Finally, this is what we get:

You can notice that the navbar component is fairly smart and can adapt to different screen sizes, looking good even on mobile. This is great! Next, let's learn how to style the forms.