Adding header, footer and flash afterwards

You can go from this (left screenshot) to this (right screenshot), by doing this:

1. Add a flash messages library (izitoast in this case) to Gemfile

   gem 'izitoast'

2. Add "require iziToast" to application.css and application.js

3. Add this to application.html.erb just before the ending body tag

   <footer class="footer">
     <div class="container">
       <span class="text-muted">Place sticky footer content here.</span>
     </div>
   </footer>```

4. In application.html.erb, replace the <%= yield %> line with this expanded version:

    <header>
      <!-- Fixed navbar -->
      <nav class="navbar navbar-expand-md navbar-dark bg-dark">
        <a class="navbar-brand" href="#">Fixed navbar</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarCollapse">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
              <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Link</a>
            </li>
            <li class="nav-item">
              <a class="nav-link disabled" href="#">Disabled</a>
            </li>
          </ul>
          <form class="form-inline mt-2 mt-md-0">
            <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
            <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
          </form>
        </div>
      </nav>
    </header>

    <% flash.each do |type, message| %>
      <%
        next unless message
        level = case type
          when 'notice' then 'success'
          when 'alert'  then 'error'
          when 'info'   then 'info'
          when 'warn'   then 'warn'
        end
      %>
      <script>iziToast.show({position: 'center', message: '<%=j message.html_safe %>'});</script>
    <% end %>

    <div class="container pt-3">
      <div class="row justify-content-sm-center" >
        <div class="col-md-<%= yield(:container_width).presence || '4' %>">
          <%= yield %>
        </div>
      </div>
    </div>