Bootstrap 5 Integration with rails 6.1

bootstrap-5-integration-with-rails-6.1.md

Install following packages with yarn

yarn add bootstrap
yarn add @popperjs/core

Next, we need to import bootstraps to our application.js

import "bootstrap"
import "../stylesheets/application"

Import bootstrap css to - app/javascript/stylesheets/application.scss

@import '~bootstrap/scss/bootstrap';

Next add following to app/views/layouts/application.html.erb

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

Now add following config/webpack/environment.js

const webpack = require('webpack')

environment.plugins.append('Provide', new webpack.ProvidePlugin({
  Popper: ['@popperjs/core', 'default']
}))