javascript - bootstrap4 alpha3 js hamburger menu or modal not working in rails 4 -

i trying hamburger menu working in rails 4 bootstrap 4. menu shows however, dropdown portion of not working.i check other post on matter no avail.

navabarfile

<%# navbar begins %> <nav class="navbar navbar-light" role="navigation"> <button class="navbar-toggler hidden-sm-up" type="button" data- toggle="collapse" data-target="#collapsing-navbar"> &#9776; </button> <div class="collapse navbar-toggleable-xs" id="collapsing-navbar"> <a class="navbar-brand" href="http://example.herokuapp.com/">     <%= image_tag("greylogo.png", width: '180', height: '35', alt:'crededx', class: "logo") %>    </a>   <ul class="nav navbar-nav">   <li class="nav-item">     <a href="/messages" class="nav-link">messages</a>   </li>   <li class="nav-item">     <a href="/logout" class="nav-link">logout</a>   </li>   </ul>  </div> </nav> <%# navbar ends %>    

application.js

//= require jquery //= require jquery_ujs //= require bootstrap //= require_tree . 

a bootstrap 4 ruby gem ruby on rails (sprockets) , compass available at: https://github.com/twbs/bootstrap-rubygem

add bootstrap , autoprefixer gemfile, see https://github.com/twbs/bootstrap-rubygem/issues/29:

gem 'bootstrap', '~> 4.0.0.alpha3' gem 'autoprefixer-rails' source 'https://rails-assets.org'   gem 'rails-assets-tether', '>= 1.1.0' end 

run bundle install.

import bootstrap styles in app/assets/stylesheets/application.scss:

// custom bootstrap variables must set or import before bootstrap itself. @import "bootstrap"; 

add bootstrap javascript plugins, tether , jquery app/assets/js/application.js file:

//= require jquery //= require tether //= require bootstrap 

autoprefixer

create app/assets/stylesheets/browserslist, contains following browsers:

chrome >= 35 firefox >= 38 edge >= 12 explorer >= 9 ios >= 8 safari >= 8 android 2.3 android >= 4 opera >= 12 

see also: https://github.com/twbs/bootstrap-rubygem/pull/30