Bootstrap with rails 6

Question

I'm trying to get bootstrap to work in my rails 6 web application but It won't work. I've followed multiple tutorials on youtube and on here but nothing seems to work. Any help where I might be going wrong will be greatly appreciated.

Gemfile: (First half that includes bootstrap)

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

ruby '2.6.5'
gem 'jquery-rails'
gem 'coffee-script-source', '~> 1.11', '>= 1.11.1'

# Bundle edge Rails instead: gem 'rails', github: 'rails/rails'
gem 'rails', '~> 6.0.2', '>= 6.0.2.2'
# 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 'bootstrap-sass', '~> 3.4.1'
gem 'sass-rails', '>= 6'

Application.js:

require("@rails/ujs").start()
require jquery
require bootstrap-sprockets
require("turbolinks").start()
require("@rails/activestorage").start()
require("channels")

Application.scss:

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

This is the result when i run it:

Answer 1

I believe in Rails 6, the accepted way to add Bootstrap is through Webpack. You can run yarn add bootstrap jquery popper.js in your terminal. Then, add this to your environment.js file between the existing const and module.exports calls:

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

Then, in your app/javascript/packs/application.js add this line:

require("bootstrap/dist/js/bootstrap")

And, finally, in your app/assets/stylesheets/application.css add this line:

@import "bootstrap/scss/bootstrap";