I have tried every tutorial and every guide but I am not able to integrate bootstrap in my rails app
I have tried bootstrap-sass gem, bootstrap CDN, bootstrap gem
Ruby on Rails version
5.2.0
Ruby version 2.2.6
EXACTLY FOLLOWED THESE TUTORIALS AND HAVE ACHIEVED 0 RESULTS:
for bootstrap sass
https://github.com/twbs/bootstrap-sass
for bootstrap https://github.com/twbs/bootstrap
tried using bootstrap CDN
https://www.bootstrapcdn.com/
I have been stuck on this for weeks, tried solving it on my own, followed many blog posts and StackOverflow answers and tried everything.
Is it a problem with rails 5.2 version? or my operating system windows 10
is there a gem missing in my gem file?
EDIT: I can run bundle install successfully, adding CDN in my head tag in application.html.erb does not solve my problem
The problem I am facing is that I cant use bootstrap no matter what method I try
GEM FILE :
source 'https://rubygems.org'
git_source(:github) { |repo| "https://github.com/#{repo}.git" }
ruby '2.2.6'
gem 'rails', '~> 5.2.0'
gem 'sqlite3'
gem 'puma', '~> 3.11'
gem 'coffee-script-source', '1.8.0'
gem 'bootstrap-sass', '~> 3.3.7'
gem 'sass-rails', '~> 5.0'
gem 'jquery-rails'
gem 'uglifier', '>= 1.3.0'
gem 'duktape'
gem 'coffee-rails', '~> 4.2'
gem 'turbolinks', '~> 5'
gem 'jbuilder', '~> 2.5'
gem 'bootsnap', '>= 1.1.0', require: false
Maybe try this one:
1) Gemfile
# Add these gems. Rails is not including jQuery by default.
# You need to include it to use all bootstrap options.
gem 'bootstrap'
gem 'jquery-rails'
2) app/assets/javascripts/application.js
jquery3, popper, and bootstrap are the ones for bootstrap
//= require jquery3
//= require popper
//= require bootstrap
//= require rails-ujs
//= require turbolinks
//= require_tree .
3) app/assets/stylesheets/application.scss
#import 'bootstrap'; // assuming you changed to SCSS from CSS
4) Run bundle and restart your server
This is a working repo with Rails 5.2 and Bootstrap 4
https://github.com/HoracioChavez/bootstrap-sample
Tested on macOS
You can try this example. It works for me in my project.
In your Gemfile:
gem 'bootstrap-sass'
gem 'jquery-rails'
In your app/assets/javascripts/application.js
//= require rails-ujs
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap-sprockets
//= require_tree .
In your /app/assets/stylesheets/application.scss
*= require_tree .
*= require_self
*/
#import "bootstrap-sprockets";
#import "bootstrap";
After you install all gems and make above configurations you can try to test your bootstrap work with this bootstrap dropdown button. Hope it helps you.
Also, please note, that I used bootstrap 3 and worked on Linux Ubuntu.
for rails v5.2.0.
All you need is to ensure you have the gem 'bootstrap-sass' AND gem 'jquery-rails' in the gem file. Bootstrap requires JQuery. Back in other
rails versions i.e v4.x you would have to include alot of other
gems but not anymore in this version they are the default except the bootstrap-sass and jquery-rails gem.
run bundle install to install the gems
Then change the default manifest file app/assets/stylesheets/application.css
filename to app/assets/application.scss(.sass) because we need to
import (load and execute) said file, css cant do that also because the line we intend to include is sass syntax not css syntax.
include #import"bootstrap" in the stylesheet manifest file (application.scss) and prepend //= require jquery in application.js. This affects affects the app/views/layouts/application.html.erb the standard place for all your layout used by all templates in the controller. In older versions here you would have to require other extensions eg. turbolink in order for bootstrap to work effectively and efficiently but no in this version.
Your done. All your web pages are now bootstrap integrated.
No matter what I do, I always get the error
/home/xyz/.rbenv/versions/2.3.1/lib/ruby/gems/2.3.0/gems/bootstrap-sass-3.3.7/lib/bootstrap-sass/engine.rb:11:in `block in <class:Engine>': uninitialized constant Sprockets::Rails::VERSION (NameError)
when restarting the rails server after installing the bundle. I've tried to change version numbers, delete the .lock file and so on, but nothing is working. I'm using Rails 4.2.6.
Here's my Gemfile:
source 'https://rubygems.org'
ruby "2.3.1"
gem 'rails_12factor'
gem 'rails', '4.2.6'
gem 'sprockets-rails'
gem 'pg', '~> 0.15'
gem 'simple_form'
gem 'clockpicker-rails'
gem 'momentjs-rails', '>= 2.9.0'
gem 'bootstrap3-datetimepicker-rails', '~> 4.17.37'
gem "font-awesome-rails"
gem 'bootstrap-sass', '~> 3.3.6'
gem 'sass-rails', '~> 4.0.0'
gem 'bootflat-rails' # flat UI skin for bootstrap
application.css.scss:
#import 'bootstrap-sprockets';
#import 'bootstrap';
#import 'bootflat';
#import 'font-awesome';
#import 'bootstrap/clockpicker';
#import 'bootstrap-datetimepicker';
application.js:
//= require jquery
//= require jquery_ujs
//= require bootstrap-sprockets
//= require icheck.min
//= require bootstrap/clockpicker
//= require moment
//= require bootstrap-datetimepicker
//= require turbolinks
//= require_tree .
I've read many similar questions but none of the answers helped me or caused even more problems. It really should'nt be that hard but I just can't figure out what the problem is.
Run this command:
bundle update sprockets-rails
can anyone help me? I already did everything to install Bootstrap on my Ruby on Rails application, however continues to appear without bootstrap format.
I have Rails 4.2.5.1
in gemfile I added, and ran bundle install
gem 'bootstrap-sass', '~> 3.3.6'
gem 'sass-rails', '>= 3.2'
in app/assets/stylesheets I have application.scss with:
#import "bootstrap-sprockets";
#import "bootstrap";
and in assets/javascript I have application.js with:
//= require jquery
//= require jquery_ujs
//= require bootstrap-sprockets
//= require_tree .
Please, follow these instructions:
Include following gems in your Gemfile
gem 'twitter-bootstrap-rails', git: 'git://github.com/seyhunak/twitter-bootstrap-rails.git'
gem 'therubyracer'
gem 'less-rails'
Run the following commands:
bundle
rails g bootstrap:install less
Reference: https://github.com/seyhunak/twitter-bootstrap-rails
I'm attempting to implement bootstrap into my app and I keep getting a couple errors that I've never received when starting apps before. I browsed for an answer and the only answers I keep finding are to remove the assets part of the Gemfile which I don't have and to restart the server which I've done several times with no luck. Below are the errors and my files. Please let me know if something else needs to be provided. Thank you!
Browser Error:
File to import not found or unreadable: bootstrap-sprockets
Rails Server Warnings:
/Users/tucker/.rvm/gems/ruby-2.2.1/gems/bootstrap-sass-3.3.6/lib/bootstrap-sass/version.rb:2: warning: already initialized constant Bootstrap::VERSION
/Users/tucker/.rvm/gems/ruby-2.2.1/gems/bootstrap-4.0.0.alpha3/lib/bootstrap/version.rb:2: warning: previous definition of VERSION was here
/Users/tucker/.rvm/gems/ruby-2.2.1/gems/bootstrap-sass-3.3.6/lib/bootstrap-sass/version.rb:3: warning: already initialized constant Bootstrap::BOOTSTRAP_SHA
/Users/tucker/.rvm/gems/ruby-2.2.1/gems/bootstrap-4.0.0.alpha3/lib/bootstrap/version.rb:3: warning: previous definition of BOOTSTRAP_SHA was here
Gemfile:
source 'https://rubygems.org'
gem 'rails', '4.2.5'
group :production do
gem 'pg'
gem 'rails_12factor'
end
group :development do
gem 'sqlite3'
end
gem 'sass-rails', '~> 5.0'
gem 'uglifier', '>= 1.3.0'
gem 'coffee-rails', '~> 4.1.0'
gem 'jquery-rails'
gem 'turbolinks'
gem 'bootstrap'
gem 'figaro'
gem 'pry'
gem 'jbuilder', '~> 2.0'
gem 'sdoc', '~> 0.4.0', group: :doc
gem 'bootstrap-sass'
group :development, :test do
gem 'byebug'
gem 'web-console', '~> 2.0'
gem 'spring'
gem 'rspec-rails'
gem 'shoulda'
gem 'faker'
gem 'factory_girl_rails'
end
Application.js:
//= require jquery
//= require bootstrap-sprockets
//= require jquery_ujs
//= require turbolinks
//= require_tree .
Application.scss:
...
*= require_tree .
*= require_self
*/
#import "bootstrap-sprockets";
#import "bootstrap";
I see you have gem 'bootstrap' and gem 'bootstrap-sass' in your gemfile. If you delete one of them, run bundle and follow the installation instructions on the respective github site then the sprockets should work. Also mine application.scss file is usually without the require part.
1º) Install the following gems in your Gemfile:
gem 'bootstrap-sass', '~> 3.3.6'
gem 'autoprefixer-rails'
2º) Issue the following command:
mv app/assets/stylesheets/application.css app/assets/stylesheets/application.css.sass
3º) Edit pp/assets/stylesheets/application.css.sass and append the following lines:
#import "bootstrap-sprockets"
#import "bootstrap"
4º) Edit your app/assets/javascripts/application.js file and be sure it has the following lines:
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap-sprockets
//= require_tree .
5º) Now run
bundle install
And you are ready! This recipe always works for me and it is in this site.
Hope it helps!
Problem : file to import not found or unreadable bootstrap-sprockets
#import "bootstrap-sprockets";
#import "bootstrap";
...........
solution :
gem 'rails', '5.0.0.1'
gem 'bootstrap-sass', '3.3.6'
do bundle install
then restart your rails server
I am suddenly getting this error in development and in production on deployment.
custom.css.scss
#import "bootstrap-sprockets";
#import "bootstrap";
error (in production)
rake aborted!
Sass::SyntaxError: File to import not found or unreadable: bootstrap-sprockets.
Load paths:
/srv/www/myapp/releases/20141001060418/app/assets/images
/srv/www/myapp/releases/20141001060418/app/assets/javascripts
/srv/www/myapp/releases/20141001060418/app/assets/stylesheets
/srv/www/myapp/releases/20141001060418/vendor/assets/javascripts
/srv/www/myapp/releases/20141001060418/vendor/assets/stylesheets
After making changes to Gemfile, do not forget to restart the server with rails s
Restarting the rails server worked like a charm! :D
I solved this issue by upgrading bootstrap-sass
gem 'bootstrap-sass', '3.2.0.2'
Please restart you rails server after every changes in Gemfile
rails server
For the Sass version of Bootstrap 5 in versions of rails before 6
use
gem `bootstrap`
For Sass versions of Bootstrap 3 and 2 Make sure you don't have
gem 'bootstrap' # Remove this line
gem 'bootstrap-sass'
It should just be
gem 'bootstrap-sass'
I solved it in following steps:
List item
copying the "bootstrap.css" in my "app/assets/stylesheets/ (it was missing)
gem install autoprefixer-rails (also modify Gemfile)
gem install sprockets (also modify Gemfile)
bundle install
RESTART server (not just refreshing page)
This is how I solved the issue.
Go to Bootstrap for Sass Github page and follow the instructions:
Add the following to the Gemfile
gem 'bootstrap-sass', '~> 3.3.6'
gem 'sass-rails', '>= 3.2'
Run the command
bundle install
Start/restart the server
rails s
Also, make sure the file has .scss extension (or .sass for Sass syntax). If you have just generated a new Rails app, it may come with a .css file instead. If this file exists, it will be served instead of Sass, so rename it.
Then, remove all the *= require_self and *= require_tree . statements from the sass file. Instead, use #import to import Sass files.
I have observed the same behaviour. In my case i have removed the version of the gem 'bootstap-sass' and it worked. There might be compatibility issue with the gem version which was causing the problem.
Gem file
gem 'bootstrap-sass'
After making changes in the gem file perform following commands:
bundle install
If the server is already running then stop it by "CTRL+C" and start the server again
rails s
In your Gemfile you need to add the bootstrap-sass gem, and ensure that the sass-rails gem is present - it is added to new Rails applications by default.
gem 'bootstrap-sass', '3.3.7'
gem 'sass-rails', '5.0.6'
gem 'rails', '5.0.0'
bundle install and restart your server to make the files available through the pipeline.
Import Bootstrap styles in app/assets/stylesheets/application.scss:
// "bootstrap-sprockets" must be imported before "bootstrap" and "bootstrap/variables"
#import "bootstrap-sprockets";
#import "bootstrap";
bootstrap-sprockets must be imported before bootstrap for the icon fonts to work.
Make sure the file has .scss extension (or .sass for Sass syntax). If you have just generated a new Rails app, it may come with a .css file instead. If this file exists, it will be served instead of Sass, so rename it:
$ mv app/assets/stylesheets/application.css TO:
app/assets/stylesheets/application.scss
Then, remove all the *= require_self and *= require_tree . statements from the sass file. Instead, use #import to import Sass files.
e.g
*= require_tree .
*= require_self
To:
#import require_tree .
#import require_self
Do not use *= require in Sass or your other stylesheets will not be able to access the Bootstrap mixins or variables.
Bootstrap JavaScript depends on jQuery. If you're using Rails 5.1+, add the jquery-rails gem to your Gemfile:
gem 'jquery-rails'
$ bundle install
Require Bootstrap Javascripts in
app/assets/javascripts/application.js:
//= require jquery
//= require bootstrap-sprockets
bootstrap-sprockets and bootstrap should not both be included in
application.js
.
bootstrap-sprockets provides individual Bootstrap Javascript files (alert.js or dropdown.js, for example), while bootstrap provides a concatenated file containing all Bootstrap Javascripts.
This will fix the error
Copied #github
This error mostly comes in rails 3.2.x versions.
If you are using rails version 3.2 you have to specify a special version in your gem file like below:
gem 'rails', '3.2.0'
gem 'bootstrap-sass', '3.2.0.2'
It will resolve the problem for rails -v '3.2.0'
put this in gem file
gem 'bootstrap-sass', '~> 3.3.5'
gem 'sass-rails', '>= 3.2'
then run $ bundle install
Restart the server.
If you get this message when running integration tests, make sure that your asset gems are included in the test group.
For example, change:
group :assets do
gem 'sass-rails', '~> 5.0.3'
gem 'uglifier', '>= 1.3.0'
end
To:
group :assets, :test do
gem 'sass-rails', '~> 5.0.3'
gem 'uglifier', '>= 1.3.0'
end
I had the same problem
sass::syntaxerror: file to import not found or unreadable: config/variables.
, I opened a new css file (I called it custom.css) then copied all the css to the file. On application.css I removed the
#import "config/variables" plus all the other #imports
This worked for me, I hope it does work for you too!
make sure you run the following commands after adding this gem to your Gemfile
put this inside your Gemfile
gem "bootstrap-sprockets", "~>3.3"
gem "bootstrap"
now stop your server and run the following:
bundle install
rails server
to restart your server. Refresh your browser and you should see changes reflect immediately.
In production you may have to run this command to precompile your assets:
bundle exec bin/rake assets:precompile
It worked for me. Hope this was helpful.
I was also facing the similar error in development environment:
Error Image
I solved this problem by-
In my gemfile, I added them -
gem 'bootstrap', '~> 4.2.1'
gem 'jquery-rails'
In application.js file,add these -
//= require jquery3
//= require popper
//= require bootstrap-sprockets
In the file with .scss extension, simply add -
#import "bootstrap";
After that, just run bundle install
I encountered that kind of issue.
If you can see lower version of bootstrap-sass than 3.4.1 in "Gemfile.lock",
please upgrade bootstrap-sass gem version.
I was able to fix the issue by changing the (.css) to (.scss). Then in there I just have this..
*= require_tree .
*= require_self
#import "bootstrap";
I also have #import "boostrap" in the application.js file. This is just how it worked for me - not a 100% proper fix - it works though.
I solved My Issue By Removing
gem 'bootstrap'