Starting with Rails 6, Webpacker is the default JavaScript compiler.

A new app/javascripts directory to hold all the js/css

Install bootstrap

yarn add bootstrap jquery popper.js

jQuery is a dependency of bootstap and popper.js is a dependency for bootstrap tooltip

Adding jquery to global scope

config/webpack/enviornment.js

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

environment.plugins.prepend('Provide',
  new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
  })
)

module.exports = environment

Adding bootstrap to application.js

app/javascript/packs/application.js

import "../stylesheets/application"

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

import 'bootstrap/js/src/tooltip'
import 'bootstrap/js/src/alert'
// import other bootstrap js modules

import './main'
// import custom.js

window.$ = window.jQuery = $ // make $ available in console for debugging

Enable bootstrap tooltip and alert

app/javascript/packs/main.js

// Wait for turbolinks load event
$(document).on('turbolinks:load', () => {
  $('[data-toggle="tooltip"]').tooltip()
  $('.alert').alert()
})

Add bootstrap css

app/javascript/stylesheets/application.scss

$primary: #757575; // Override bootstrap variables
$light: #e9ecef;

@import 'bootstrap';
@import 'custom.css';

Add lastly

layouts/application.html.erb.

replace stylesheet_link_tag with stylesheet_pack_tag to use css from webpacker

And there you have it 🙂