title: bootstrap 4 navbar not working in rails 5 app
body: <p>I'm migrating my static HTML/CSS/JS site to a Rails app. I'm using Bootstrap 4, and all the Bootstrap 4 functionality and CSS classes were working on the static page. Now in the Ruby app, the navbar isn't showing up at all.</p>
  
  <p>Am I missing a gem file? Is there a specific way to embed the style tags that I'm doing wrong?</p>
  
  <p>my gem file:</p>
  
  <pre><code>gem 'rails', '~&gt; 5.0.5'
  gem 'sqlite3'
  gem 'puma', '~&gt; 3.0'
  gem 'sass-rails', '~&gt; 5.0'
  gem 'uglifier', '&gt;= 1.3.0'
  gem 'coffee-rails', '~&gt; 4.2'
  gem 'bootstrap', '~&gt; 4.0.0.beta'
  gem 'font-awesome-rails', '~&gt; 4.7', '&gt;= 4.7.0.2'
  gem "autoprefixer-rails"
  gem 'jquery-rails'
  gem 'turbolinks', '~&gt; 5'
  gem 'jbuilder', '~&gt; 2.5'
  group :development, :test do
    # Call 'byebug' anywhere in the code to stop execution and get a 
  debugger console
    gem 'byebug', platform: :mri
  end
  
  group :development do
    gem 'web-console', '&gt;= 3.3.0'
    gem 'listen', '~&gt; 3.0.5'
    gem 'spring'
    gem 'spring-watcher-listen', '~&gt; 2.0.0'
  end
  gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]
  </code></pre>
  
  <p>my javascript requires:</p>
  
  <pre><code>//= require jquery
  //= require bootstrap
  //= require jquery_ujs
  //= require turbolinks
  //= require_tree .
  </code></pre>
  
  <p>my custom CSS:</p>
  
  <pre><code>.navbar-custom {
    border-radius: 0px;
    z-index: 16;
    box-shadow: 0 2px 3px 0 rgba(0,0,0, .4);
  }
  </code></pre>
  
  <p>my application.html.erb head:</p>
  
  <pre><code>&lt;%= stylesheet_link_tag    'application', media: 'all', 'data-
  turbolinks-track': 'reload' %&gt;
  &lt;%= javascript_include_tag 'application', 'data-turbolinks-track': 
  'reload' %&gt;
  </code></pre>
  
  <p>my application.html.erb navbar:</p>
  
  <pre><code>&lt;nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse navbar-custom"&gt;
    &lt;div class="container-fluid d-inline-flex"&gt;
  
      &lt;button type="button" class="navbar-toggler navbar-toggler-right" data-toggle="collapse" data-target="#navbarSupportedContent" aria-expanded="false"&gt;
        &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
        &lt;span class="navbar-toggler-icon"&gt;&lt;/span&gt;
        &lt;a class="navbar-brand justify-cotent-start" href="#home"&gt;&lt;%= image_tag "logo.png", size:"50" %&gt;&lt;/a&gt;
      &lt;/button&gt;
  
      &lt;a class="navbar-brand justify-cotent-start" href="#home"&gt;&lt;%= image_tag "logo.png", size:"50" %&gt;&lt;/a&gt;
      &lt;div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent"&gt;
        &lt;ul class="nav navbar-nav ml-auto" style="float: right"&gt;
          &lt;li class="nav-item"&gt;&lt;a class="nav-link" href="#about"&gt;about&lt;/a&gt;&lt;/li&gt;
          &lt;li class="nav-item"&gt;&lt;a class="nav-link" href="#events"&gt;events&lt;/a&gt;&lt;/li&gt;
          &lt;li class="nav-item"&gt;&lt;a class="nav-link" href="#gallery"&gt;gallery&lt;/a&gt;&lt;/li&gt;
          &lt;li class="nav-item"&gt;&lt;a class="nav-link" href="#music"&gt;music&lt;/a&gt;&lt;/li&gt;
          &lt;li class="nav-item"&gt;&lt;a class="nav-link" href="#press-kit"&gt;press kit&lt;/a&gt;&lt;/li&gt;
          &lt;li class="nav-item"&gt;&lt;a class="nav-link" href="#contact"&gt;contact&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>