How to get Bootstrap Javascript to work in Ruby on Rails 6

Question

Firstly, I realise this question has been asked multiple times before, however all of the answers I have seen haven't worked for me.

I have added bootstrap to my Rails app using the bootstrap gem, or at least I think I have. The css and styles for bootstrap are all there and working, but the javascript features are missing

I'm fairly new to Rails so I've probably missed something really obvious, I've attached the files I think are relevant below.

I have the following files, any suggestions or help will be greatly appreciated

gemfile

source 'https://rubygems.org'

ruby '2.7.0'
# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '~> 6.0.2', '>= 6.0.2.1'
# Use sqlite3 as the database for Active Record
gem 'sqlite3', '~> 1.4'
# Use Puma as the app server
gem 'puma', '~> 4.1'
# Use SCSS for stylesheets
gem 'sass-rails', '>= 6'
# Transpile app-like JavaScript. Read more: https://github.com/rails/webpacker
gem 'webpacker', '~> 4.0'
# 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.7'
# Use Redis adapter to run Action Cable in production
# gem 'redis', '~> 4.0'
# Use Active Model has_secure_password
# gem 'bcrypt', '~> 3.1.7'

# Use Active Storage variant
# gem 'image_processing', '~> 1.2'

# Reduces boot times through caching; required in config/boot.rb
gem 'bootsnap', '>= 1.4.2', require: false
# Use jquery as the JavaScript library
gem 'jquery-rails'
gem 'bootstrap', '~> 4.4', '>= 4.4.1'
gem 'devise'

group :development, :test do
# Call 'byebug' anywhere in the code to stop execution and get a debugger console
gem 'byebug', platforms: [:mri, :mingw, :x64_mingw]
end

group :development do
# Access an interactive console on exception pages or by calling 'console' anywhere in the code.
gem 'web-console', '>= 3.3.0'
gem 'listen', '>= 3.0.5', '< 3.2'
# Spring speeds up development by keeping your application running in the background. Read more: https://github.com/rails/spring
gem 'spring'
gem 'spring-watcher-listen', '~> 2.0.0'
end

group :test do
# Adds support for Capybara system testing and selenium driver
gem 'capybara', '>= 2.15'
gem 'selenium-webdriver'
# Easy installation and use of web drivers to run system tests with browsers
gem 'webdrivers'
end

# Windows does not include zoneinfo files, so bundle the tzinfo-data gem
gem 'tzinfo-data', platforms: [:mingw, :mswin, :x64_mingw, :jruby]

app/assets/stylesheets/applications.scss

/*
* This is a manifest file that'll be compiled into application.css, which will include all the files
* listed below.
*
* Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's
* vendor/assets/stylesheets directory can be referenced here using a relative path.
*
* You're free to add application-wide styles to this file and they'll appear at the bottom of the
* compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS
* files in this directory. Styles in this file should be added after the last require_* statement.
* It is generally better to create a new file per style scope.
*
*/
@import "bootstrap";
body {
    padding-top: 70px;
  }

app/assets/javascripts/application.js

// This is a manifest file that'll be compiled into application.js, which will include all the files
// listed below.
//
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
// or any plugin's vendor/assets/javascripts directory can be referenced here using a relative path.
//
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
// compiled file.
//
// Read Sprockets README (https://github.com/rails/sprockets#sprockets-directives) for details
// about supported directives.
//
//= require jquery
//= require jquery_ujs
//= require turbolinks
//= require bootstrap
//= require_tree .

user_2564298 · Answer

Since Rails 6 follow webpacker, you don't need to install a gem, do this instead

In your Rails home directory, run this command, to install jQuery, popper.js and bootstrap, jquery and popper.js are dependencies of bootstrap.

yarn add bootstrap@4.4.1 jquery popper.js

Then add this to your config/webpack/environment.js

const { environment } = require('@rails/webpacker') // already present

const webpack = require('webpack')
environment.plugins.append('Provide', new webpack.ProvidePlugin({
  $: 'jquery',
  jQuery: 'jquery',
  Popper: ['popper.js', 'default']
}))

module.exports = environment // already present

Then create a folder named src inside app/javascript/packs and then create application.scss file inside the newly created src folder

Add this line in the newly created application.scss file

@import '~bootstrap/scss/bootstrap';

And finally in app/javascript/packs/application.js file, add this

import 'bootstrap'
import './src/application.scss'

Restart your server, Bootstrap is installed and should run!

More info on Webpacker - https://prathamesh.tech/2019/08/26/understanding-webpacker-in-rails-6/

Hope that helps!

How to get Bootstrap Javascript to work in Ruby on Rails 6

1 Answers