How to get Twitter Bootstrap 3 to work with Rails 4 and Heroku

Question

I upgraded from Bootstrap 2.3.2 to 3 and now my dropdown menus no longer work. I've tried recompiling my assets for Heroku and have spent my coding time for the past couple days banging my head against a wall. Everything works in development, but not production. Here are the relevant files:

Gemfile:

    source 'https://rubygems.org'
ruby '2.0.0'

gem 'rails', '4.0.0'
gem 'bcrypt-ruby', '3.0.1'
gem 'faker', '1.1.2'
gem 'will_paginate', '3.0.4'
gem "will_paginate-bootstrap"

gem 'bootstrap-sass', github: 'thomas-mcdonald/bootstrap-sass'

group :development, :test do
  gem 'sqlite3', '1.3.8'
  gem 'rspec-rails', '2.13.1'
  gem 'guard-rspec', '2.5.0'
  gem 'spork-rails', '4.0.0'
  gem 'guard-spork', '1.5.0'
  gem 'childprocess', '0.3.9'
end

group :test do
  gem 'selenium-webdriver', '2.35.1'
  gem 'capybara', '2.1.0'
  gem 'factory_girl_rails', '4.2.1'
end

gem 'sass-rails', '~>4.0.1'
gem 'uglifier', '2.1.1'
gem 'coffee-rails', '4.0.0'
gem 'jquery-rails', '~>3.0.4'
gem 'turbolinks', '1.1.1'
gem 'jbuilder', '1.0.2'

group :doc do
  gem 'sdoc', '0.3.20', require: false
end

group :production do
  gem 'pg', '0.15.1'
  gem 'rails_12factor'
  gem 'rails_serve_static_assets'
end

Application.js:

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

If I put //= require bootstrap below the jquery or jquery_ujs requirements then the js breaks in development.

production.rb:

  config.cache_classes = true

  config.eager_load = true

  config.consider_all_requests_local       = false
  config.action_controller.perform_caching = true

  config.serve_static_assets = true

  config.assets.js_compressor = :uglifier

  config.assets.compile = true

  config.assets.digest = true

  config.assets.version = '1.0'

  config.force_ssl = true

  config.log_level = :info

  # Precompile additional assets.
  # application.js, application.css, and all non-JS/CSS in app/assets folder are already added.
  # config.assets.precompile += %w( search.js )

  config.i18n.fallbacks = true

  # Send deprecation notices to registered listeners.
  config.active_support.deprecation = :notify


  # Use default logging formatter so that PID and timestamp are not suppressed.
  config.log_formatter = ::Logger::Formatter.new

What am I missing?

ChrisBarthol ChrisBarthol · Accepted Answer · 2013-10-17T04:25:38

Sounds like an asset pipeline problem. I'd precompile assets locally making sure to delete them all, push to git, then compile again and push to git. Are there any errors in the console of your web browser? This question seems to come up quite a bit and you might want to have a look at these:

twitter bootstrap drop down suddenly not working

Javascript features work on localhost but not when deployed to Heroku

rails precompile Why javascript does not work locally but at heroku it works

Rails custom.css not working when deployed to Heroku

How to get Twitter Bootstrap 3 to work with Rails 4 and Heroku

3 Answers