Rails 4 + bootstrap set up assets - ruby-on-rails

Question

I am trying to setup bootstrap on Rails4 using bootstrap-sass and I am getting this famous error:
Sprockets::FileNotFound - couldn't find file 'bootstrap'
(in app/assets/javascripts/application.js:16):
I have tried following:
twitter/bootstrap in application.js
gem 'bootstrap-sass', '~> 3.1.0' is outside group assets
Also tried bunch of other things on internet
I have spend lot of time taking different suggestions from other posts. How do I systematically debug this , how to setup bootstrap-sass ?
p.s:
Also been trying to get twitter-bootstrap-rails working with no luck.
Here are some files
application.js
//= require jquery
//= require jquery_ujs
//= require js-routes
//= require bootstrap
//= require_tree .
//= require bootstrap-slider
application.css.scss
*= require jquery.ui.core
*= require jquery.ui.theme
*= require_self
*= require bootstrap-slider
*= require_tree .
*= stub active_admin
*/
#import "bootstrap";
Gemfile
source 'https://rubygems.org'
ruby '2.0.0'
gem 'rails', '4.0.0'
gem 'sass-rails'
gem 'coffee-rails', git: 'git://github.com/rails/coffee-rails.git'
gem 'uglifier', '>= 1.0.3'
gem 'jquery-ui-rails'
gem 'font-awesome-sass'
gem 'less-rails'
gem 'therubyracer', :platform=>:ruby
#gem 'twitter-bootstrap-rails'
gem 'jquery-rails'
#gem 'jquery_mobile_rails'
gem 'js-routes'
gem 'cancan'
gem 'devise'
gem 'figaro'
gem 'haml-rails'
gem 'pg'
gem 'rolify'
gem 'sendgrid'
gem 'simple_form'
gem 'thin'
gem 'rake'
#To use db for storing cookies instead cookie-store
gem 'activerecord-session_store', github: 'rails/activerecord-session_store'
group :development do
gem 'better_errors'
#gem 'binding_of_caller', :platforms=>[:mri_19, :rbx]
#Commenting out platforms part, because may be that's stopping this to be used on the dev machine'
gem 'binding_of_caller'
gem 'guard-bundler'
gem 'guard-rails'
gem 'guard-rspec'
gem 'html2haml'
gem 'quiet_assets'
gem 'rb-fchange', :require=>false
gem 'rb-fsevent', :require=>false
gem 'rb-inotify', :require=>false
# Required with Rails panel chrome extension. This Gem should come after better_errors gem
gem 'meta_request'
end
group :development, :test do
gem 'factory_girl_rails'
gem 'rspec-rails'
gem 'pry-byebug'
gem 'pry-stack_explorer'
gem 'pry-rails'
gem 'pry-debugger'
end
group :test do
gem 'capybara'
gem 'database_cleaner'
gem 'email_spec'
end
group :production do
gem 'rails_12factor'
end
gem 'high_voltage'
#Linkedin Logins
gem "linkedin"
gem "omniauth"
gem "omniauth-linkedin"
gem "omniauth-facebook"
#postgres use hstore in active record
#gem 'activerecord-postgres-hstore'
gem 'state_machine'
gem "ruby-graphviz"
#payments
#gem 'stripe',:git => 'https://github.com/stripe/stripe-ruby'
#gem 'anjlab-bootstrap-rails', :require => 'bootstrap-rails', :github => 'anjlab/bootstrap-rails'
gem 'newrelic_rpm'
gem 'pgbackups-archive'
gem 'pg_search'
gem 'acts-as-taggable-on'
#gem 'activeadmin' , github: 'gregbell/active_admin'
gem "activeadmin", git: "https://github.com/gregbell/active_admin"
gem 'kaminari'
gem 'bootstrap-slider-rails'
gem 'bootstrap-sass', '~> 3.1.0'

Answer 1

Installing the Bootstrap Gem
1.) Add the Bootstrap Gem:
gem 'bootstrap-sass'
2.) Understand The Application.css File
app/assets/stylesheets/application.css
Application.css takes all the other files in your /stylesheets directory and combines them for when you run your app.
3.) Create a New SCSS File (app/assets/stylesheets/bootstrap_and_customization.css.scss)
#import 'bootstrap';
4.) Require Bootstrap's JavaScript
...
//= require jquery
//= require jquery_ujs
//= require bootstrap <--
//= require turbolinks
//= require_tree .
5.) Rails Assets
group :production do
gem 'rails_12factor'
end
6.) Bundle Install & Restart Server
Thats should be it !

Answer 2

On one of my projects (Rails 4.1) I had to include the bootstrap directly (not sass). Maybe it will give a hint on making the saas version work. So below are steps to include the bootstrap directly:
Download and and extract the bootstrap to
Rails.root/vendor/assets/bootstrap
Create file Rails.root/vendor/assets/javascripts/bootstrap.js file with contents like this:
//= require ../bootstrap/js/bootstrap.js
Now the most important part to make icons work. The font file urls have to be overridden for the Glyphicons Halflings font. Also asset_path helper has to be used. So create file Rails.root/vendor/assets/stylesheets/bootstrap.css.erb file with contents like this.
/*
=require ../bootstrap/css/bootstrap.css
*/
#font-face {
font-family: 'Glyphicons Halflings';
src: url("<%= asset_path 'glyphicons-halflings-regular.eot' %>");
src: url("<%= asset_path 'glyphicons-halflings-regular.eot?#iefix' %>") format('embedded-opentype'), url("<%= asset_path 'glyphicons-halflings-regular.woff2' %>") format('woff2'), url("<%= asset_url 'glyphicons-halflings-regular.woff' %>") format('woff'), url("<%= asset_path 'glyphicons-halflings-regular.ttf' %>") format('truetype'), url("<%= asset_path 'glyphicons-halflings-regular.svg#glyphicons_halflingsregular' %>") format('svg');
}
Now require bootstrap in the application.js and application.css
application.js
//= require bootstrap
application.css
*= require bootstrap
And finally let assets pipeline be aware of the fonts path and additional extensions to precompile. In the application.rb add:
config.assets.paths << Rails.root.join("vendor", "assets", "bootstrap", "fonts")
config.assets.precompile += %w( *.eot *.svg *.ttf *.woff *.woff2 )
After that RAILS_ENV=production rake assets:precompile should show that is has recognized font files and copied them to the public assets folder.
Then to test if it works in production enable serving static assets (in production.rb: config.serve_static_assets = true) and RAILS_ENV=production rails s

Answer 3

I ended up using bootstrap from a hosted CDN
%link{href: "//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css", rel: "stylesheet"}/
%link{href: "//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" , rel: "stylesheet"}/
%link{href: "//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css", rel: "stylesheet"}/

Answer 4

I had exactly the same error. The solution was to change in:
config/environments/production.rb
The line
config.serve_static_assets = false
to
config.serve_static_assets = true
I'm not exactly aware of what this line does, but my workteam had the same problem on a project, and they changed this line, and it worked.

Answer 5

Try this:
Open config/application.rb, add the following line:
config.assets.precompile += %w(*.png *.jpg *.jpeg *.gif)
In your config.ru file, add
require 'bootstrap-sass'
Rename your application.css.scss to something else e.g. custom_bootstrap.css.scss. I have no idea why it makes a difference but it did in my case.
Also, from what I understand, by default bootstrap-sass does not require you to add
//require bootstrap
to your application.js. Apparently it breaks some kind of functionality.

Answer 6

i had the same issue :couldn't find file 'bootstrap-sprockets' with type 'application/javascript'
The only solution was to comment off in the Gemfile
gem 'sass-rails', '~> 5.0' and add instead
gem 'sass-rails', '>= 3.2'
hope this helps other members

Answer 7

The fix for me was two parts ... my correct list first ... but the list alone wasn't the fix!
gem 'sass-rails', '~> 5.0'
gem 'bootstrap-sass', '~> 3.3.0'
gem 'uglifier', '>= 1.3.0'
gem 'coffee-rails', '~> 4.1.0'
Then I had a gemfile.Lock issue ... if anyone else can't get the files to load & doesn't want to use the CDN...check your gemfile.Lock & see what versions are compiled off the gemfile (one is input for us as dev's & the other is what is actually ran by the framework - it will cause issues if you try to modify gemfile.lock).
To resolve the gemfile lock...close the gemfile & gemfile.Lock
I had to first delete the items in question from the "gemfile".
I did a "gem install <name of gemfile>" I wanted for each of them.
Then open the gemfile & gemfile.Lock to check results. Note, you still have to do all the configuration bootstrap etc requires for each of these. It doesn't hurt to run a rails assets:precompile either.
Note: The rails assets:precompile is a rails 5 command.

Answer 8

add to Gemfile
gem 'font-awesome-rails'
do bundle install
add to application.css
*= require font-awesome
and, restart rails server.