Using bootstrap-sass in Rails, Bootstrap / Javascript not working

Question

trying to learn rails (and I'm still really early on in my development) but I've hit a wall and I'm scratching my head.

I'm trying to leverage bootstrap via bootstrap-sass, and it seems like when I use the default bootstrap navigation bar I can get the bar to render - but it's not interactive. It looks like javascript isn't working properly, but I'm not sure why.

My gemfile:

source 'https://rubygems.org'

gem 'rails'
gem 'bootstrap-sass'
gem 'sprockets'
gem 'sass-rails'
gem 'uglifier'
gem 'coffee-rails'
gem 'jquery-rails'
gem 'turbolinks'
gem 'jbuilder'

gem 'sdoc', '~> 0.4.0',          group: :doc


group :development do
  gem 'sqlite3'
  gem 'spring'
end

group :production do
  gem 'pg'
  gem 'rails_12factor'
end

application.css

  *= require_tree .
  *= require_self

app/javascripts/application.js

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

custom.css.scss

@import "bootstrap-sprockets";
@import "bootstrap";

config/application.rb

module FamilyLunch
   class Application < Rails::Application
     config.assets.precompile += %w(*.png *.jpg *.jpeg *.gif)
end

application.html.erb

<html>
<head>
  <title>Family Lunch | <%= yield(:title) %> </title>
  <%= stylesheet_link_tag    'application', media: 'all', 'data-turbolinks-track' => true %>
  <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
  <%= csrf_meta_tags %>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<%= render 'layouts/header' %>
<div class='container'>
    <% flash.each do |key, value| %> 
    <div class="alert alert-<%= key %>"><%= value %></div>
    <% end %> 
<%= yield %>
<%= render 'layouts/footer' %>
<%= debug(params) if Rails.env.development? %>
</div>

</body>
</html>

Add //= require bootstrap-sprockets to application.js.

vjdhama
– vjdhama

2014-12-29 22:10:29 +00:00
Commented Dec 29, 2014 at 22:10 — vjdhama
– vjdhama, Commented Dec 29, 2014 at 22:10
Ahh perfect. Oversight on my part.

sulleh
– sulleh

2014-12-29 22:13:27 +00:00
Commented Dec 29, 2014 at 22:13 — sulleh
– sulleh, Commented Dec 29, 2014 at 22:13

vjdhama · Accepted Answer · 2014-12-29 22:11:59Z

3

For the JavaScript you have to add //= require bootstrap-sprockets to application.js like this :

app/javascripts/application.js

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

answered Dec 29, 2014 at 22:11

vjdhama

5,1185 gold badges35 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Gil Perez · Accepted Answer · 2018-02-04 19:20:51Z

0

For Solidus create an app/assets/spree/frontend/all.js and include:

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

this will override the app/assets/application.js

answered Feb 4, 2018 at 19:20

Gil Perez

1,13512 silver badges14 bronze badges

Collectives™ on Stack Overflow

Using bootstrap-sass in Rails, Bootstrap / Javascript not working

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related