Why does my bootstrap in Rails 6 not work?

Question

I want to have a modal/popup in my Rails app. In the end even with a slide/carousel. I followed a couple of tutorials but all don't work. For example: CrashingChandelier. Also the many issues on stack overflow didn't help because most of them handle a js file.

This courses says it can use Bootstrap-modal without using Javascript files. Although it should be simple, I can't fix it and I don't know how to debug it. So please help me.

This is the index.html.erb with a button and a Modal.

<!-- BUTTON -->
<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

<!--MODAL-->

<div class="modal fade" id="myModal">
  <div class="modal-dialog">
      <div class="modal-content">
          <div class="modal-header">
            <div class="pull-left"><h4>Your picture gallery</h4></div>
              <button type="button" class="close" data-dismiss="modal" title="Close">
                <span class="glyphicon glyphicon-remove"></span>
              </button>
          </div>
    <div class="modal-body">

      <p>hello, world!</p>

    </div><!--end modal-body-->
        <div class="modal-footer">
        <div class="pull-left">
        </div>
          <button class="btn-sm close" type="button" data-dismiss="modal">Close</button>
      </div><!--end modal-footer-->
    </div><!--end modal-content-->
  </div><!--end modal-dialoge-->
</div><!--end myModal-->

This is my application.scss

/*
 *
 */

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

This is my application.js:

require("@rails/ujs").start()
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")

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

This is my Gemfile:

source 'https://rubygems.org'
git_source(:github) { |repo| "https://github.com/#{repo}.git" }

ruby '2.6.3'

# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '~> 6.0.3', '>= 6.0.3.4'

# Database

# Use postgresql as the database for Active Record
gem 'pg', '>= 0.18', '< 2.0'

# Server

# Use Puma as the app server
gem 'puma', '~> 4.1'

# Layout
gem 'bootstrap-sass', '3.4.1'
gem 'jquery-rails'

# Popups
gem 'popper_js'

# Use SCSS for stylesheets
gem 'sass-rails', '>= 6'
# Manipulate images
gem 'image_processing',           '1.9.3'
gem 'mini_magick',                '4.9.5'

# Security

# Use Active Model has_secure_password
gem 'bcrypt'

# 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 Storage variant
# gem 'image_processing', '~> 1.2'

# Reduces boot times through caching; required in config/boot.rb
gem 'bootsnap', '>= 1.4.2', require: false


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.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'
  gem 'minitest'
  gem 'minitest-reporters'
  gem 'guard'
  gem 'guard-minitest'

  gem 'rails-controller-testing'
end

group :production do
  gem "aws-sdk-s3", require: false
end

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

If I turn the '<div class="modal fade" id="myModal”>’ into class=“modal show” I can see the modal. The close button doesn’t function though.

It seems this all must be enough to get at least a popup/modal

EDIT: Maybe there is something wrong with the javascript?

I put <script> function myFunction() { alert(“Alert!”); } </script> in the view to check if javascript works and nothing happened.

Can anyone tell me how to get javascript working?

Answer 1

If you are using Rails 6, do not use

gem 'bootstrap-sass', '3.4.1'
gem 'jquery-rails'

You need to install bootstrap via yarn and webpacker. Here's how:

1. console:

yarn add jquery popper.js bootstrap
mkdir app/javascript/stylesheets
echo > app/javascript/stylesheets/application.scss

2. environment.js:

const { environment } = require('@rails/webpacker')
const webpack = require("webpack")
environment.plugins.append("Provide", new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    'window.jQuery': 'jquery',
    Popper: ['popper.js', 'default']
  }))
module.exports = environment

3. add (not replace) in application.html.erb:

= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' 

4. application.js:

import 'bootstrap/dist/js/bootstrap'
import 'bootstrap/dist/css/bootstrap'
require("stylesheets/application.scss")

Now you can go to bootstrap docs/modals and copypaste a modal and it will work.

Source

06/2021 Update: Bootstrap 5 + Rails 6

console

yarn add bootstrap@next
yarn add @popperjs/core

application.js

import 'bootstrap/dist/js/bootstrap'
import "bootstrap/dist/css/bootstrap";

Nothing else needed. That's it!