Some battling with the layout...

README.md

@@ -1,5 +1,7 @@
 # README
 
+[![Build Status](https://travis-ci.com/dlage/ss-calculator.svg?branch=master)](https://travis-ci.com/dlage/ss-calculator)
+
 This README would normally document whatever steps are necessary to get the
 application up and running.
 

app/javascript/stylesheets/application.scss

@@ -1,9 +1,25 @@
 @import 'toastr';
 
-body {
-  height: 100%;
-  padding-top: 5rem;
-}
 #toast-container {
   padding-top: 5rem;
+}
+.footer {
+  background-color: #f5f5f5;
+}
+
+main > .container {
+  padding: 60px 15px 0;
+}
+
+.footer {
+  background-color: #f5f5f5;
+}
+
+.footer > .container {
+  padding-right: 15px;
+  padding-left: 15px;
+}
+
+code {
+  font-size: 80%;
 }

app/views/layouts/_content.html.erb

@@ -1,5 +1,5 @@
-<main role="main" class="container">
-  <div class="text-center">
+<main role="main" class="flex-shrink-0">
+  <div class="container text-center">
     <%= yield %>
   </div>
 </main>

app/views/layouts/_footer.html.erb

@@ -0,0 +1,5 @@
+<footer class="footer py-3 fixed-bottom">
+  <div class="container">
+    <span class="text-muted">Place sticky footer content here.</span>
+  </div>
+</footer>

app/views/layouts/_top_navigation.html.erb

@@ -1,10 +1,11 @@
-<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
+<!-- Sticky navbar -->
+<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
   <a class="navbar-brand" href="#">Navbar</a>
-  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExampleDefault" aria-controls="navbarsExampleDefault" aria-expanded="false" aria-label="Toggle navigation">
+  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
     <span class="navbar-toggler-icon"></span>
   </button>
 
-  <div class="collapse navbar-collapse" id="navbarsExampleDefault">
+  <div class="collapse navbar-collapse" id="navbarSupportedContent">
     <ul class="navbar-nav mr-auto">
       <li class="nav-item active">
         <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
@@ -12,21 +13,24 @@
       <li class="nav-item">
         <a class="nav-link" href="#">Link</a>
       </li>
-      <li class="nav-item">
-        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
-      </li>
       <li class="nav-item dropdown">
-        <a class="nav-link dropdown-toggle" href="#" id="dropdown01" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Dropdown</a>
-        <div class="dropdown-menu" aria-labelledby="dropdown01">
+        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+          Dropdown
+        </a>
+        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
           <a class="dropdown-item" href="#">Action</a>
           <a class="dropdown-item" href="#">Another action</a>
+          <div class="dropdown-divider"></div>
           <a class="dropdown-item" href="#">Something else here</a>
         </div>
       </li>
+      <li class="nav-item">
+        <a class="nav-link disabled" href="#">Disabled</a>
+      </li>
     </ul>
     <form class="form-inline my-2 my-lg-0">
-      <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
-      <button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button>
+      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
+      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
     </form>
   </div>
 </nav>

app/views/layouts/application.html.erb

@@ -12,7 +12,9 @@
   <body>
 
   <%= render 'layouts/toasts' %>
-  <%= render 'layouts/top_navigation' %>
+  <header>
+    <%= render 'layouts/top_navigation' %>
+  </header>
   <%= render 'layouts/content' %>
   <%= render 'layouts/footer' %>
 

app/views/pages/home.html.erb

@@ -1,2 +1,3 @@
 <h1>Pages#home</h1>
 <p>Find me in app/views/pages/home.html.erb</p>
+<p>Find me in app/views/pages/home.html.erb</p>