How to collapse navbar content for medium size screen using bootstrap 4

I have created a navbar using bootstrap 4 alpha, and would like to hide the content of the navbar with a ☰ (hamburger menu) when the site / page is viewed on a medium size screen.

As of right now, both the ☰ (hamburger menu) and the navbar content are displaying when I load the page with a medium size browser window.

Ideally, I would like to hide the navbar list items when the page loads, and just display the hamburger menu, and then display the list items once the hamburger menu is clicked. If it is clicked again, I would like to hide the items.

The code in question looks like the following, _nav.html.erb

<nav class="navbar navbar-full navbar-light bg-faded">
  <button class="navbar-toggler hidden-md-down" type="button" data-toggle="collapse" data-target="#nav-content">
    ☰
  </button>
  <div class="collapse navbar-toggleable-md" id="nav-content">
  <a class="navbar-brand" href="http://example.io">example.io</a>
  <ul class="nav navbar-nav">

<% if user_signed_in? %>

    <li class="nav-item"><a class="nav-link"<%= link_to current_user.email, edit_user_registration_path %></li>
    <li class="nav-item"><a class="nav-link"<%= link_to "Logout", destroy_user_session_path, method: :delete %></li>
    <% else %>

    <li class="nav-item">
    <a class="nav-link"<%= link_to "Sign Up", new_user_registration_path%>
    </li>

    <li class="nav-item"><a class="nav-link"<%= link_to "Login", new_user_session_path %>
    </li>

    <% end %>


    <li class="nav-item">
      <a class="nav-link" href="#">Gallery</a>
    </li>

    <li class="nav-item"><a class="nav-link"<%= link_to "About", about_path %></a>
    </li>

    <li class="nav-item">
      <a class="nav-link"<%= link_to "Contact", contact_path %></a>
    </li>

    <li class="nav-item">
      <a class="nav-link" href="#"><i class="fa fa-upload"></i> Uplodad Image</a>
    </li>

  </ul>
  <div class="form-inline pull-xs-right">
  <form class="input-group">
    <input class="form-control" type="text" placeholder="Search for...">
    <span class="input-group-btn">
    <button class="btn btn-success-outline" type="submit">
      <i class="fa fa-search"></i>
    </button>
    </span>
  </form>
</div>
</div>
</nav>

The following changes to _nav.html.erb solved my issue.

<nav class="navbar navbar-full navbar-light bg-faded">
  <button class="navbar-toggler hidden-lg-up" type="button" data-toggle="collapse" data-target="#nav-content">
    ☰ example.io
  </button>
  <div class="collapse navbar-toggleable-md" id="nav-content">
  <a class="navbar-brand" href="http://example.io">example.io</a>
  <ul class="nav navbar-nav">