Integrating Bootstrap into Ruby on Rails 5.1.4

Question

I am trying to integrate bootstrap into ruby on the rails but with no success.

I am using the following gems:

 git_source(:github) do |repo_name| repo_name = "#{repo_name}/#{repo_name}" unless repo_name.include?("/") "https://github.com/#{repo_name}.git" end gem 'sass-rails', '~> 5.0' gem 'bootstrap-sass', '3.3.7' # Bundle edge Rails instead: gem 'rails', github: 'rails/rails' gem 'rails', '~> 5.1.4' # Use postgresql as the database for Active Record gem 'pg', '~> 0.18' # Use Puma as the app server gem 'puma', '~> 3.7' # Use SCSS for stylesheets # Use Uglifier as compressor for JavaScript assets gem 'uglifier', '>= 1.3.0' # See https://github.com/rails/execjs#readme for more supported runtimes # gem 'therubyracer', platforms: :ruby # Use CoffeeScript for .coffee assets and views gem 'coffee-rails', '~> 4.2' # Turbolinks makes navigating your web application faster. Read more: https://github.com/turbolinks/turbolinks gem 'turbolinks', '~> 5' # Build JSON APIs with ease. Read more: https://github.com/rails/jbuilder gem 'jbuilder', '~> 2.5'

and have imported @import "bootstrap-sprockets"; @import "bootstrap"; @import "bootstrap-sprockets"; @import "bootstrap"; into my custom.scss file.

I expected Bootstraps to start working its magic but nothing is happening. Thanks for any help!

Answer 1

Rails 5.1.4 does not come with jquery built in, but Bootstrap's functionality still requires jQuery.

Make sure you include the jquery gem and the bootstrap gem in your Gemfile .

# Gemfile
gem 'jquery-rails', '~> 4.3.1'
gem 'bootstrap', '~> 4.0.0.beta'

Also, make sure you add the following to app/assets/javascripts/application.js :

//= require jquery
//= require popper
//= require bootstrap

jQuery and Popper are dependencies for Bootstrap 4. Read more at https://getbootstrap.com/docs/4.0/getting-started/webpack/#importing-javascript

Hope this helps!

Answer 2

Have you added the following?

Require Bootstrap Javascripts in app/assets/javascripts/application.js

//= require jquery
//= require bootstrap-sprockets

Answer 3

You need to add gem “jquery-rails” in your Gemfile and then //= require jquery //= require jquery_ujs //= require bootstrap-sprockets in your application.js file. Also don't forget to run bundle install after you add your gem.

Answer 4

In my case it worked after adding this line in Gemfile . There should be some breaking change in sprockets 4.0 version.

gem 'sprockets', '~> 3.7.2'

Other than that, I followed instructions here https://github.com/twbs/bootstrap-sass#a-ruby-on-rails "If you're using Rails 5.1+ ..." part.