INSTALL BOOTSTRAP

Install using yarn

Click Here

$ yarn add jquery@3.5.1 bootstrap@4.5.0 popper.js@1.16.0

>> Next, set to read jquery.

config/webpack/environment.js

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

const webpack = require('webpack')

environment.plugins.prepend('Provide',

    new webpack.ProvidePlugin({

        $: 'jquery/src/jquery',

        jQuery: 'jquery/src/jquery',

        Popper: 'popper.js'

    })

)

module.exports = environment

>> Next, set the Bootstrap CSS to be loaded.

Create a stylesheets directory under app/javascript . Create an application.scss file under it and write the following code.

[app / javascript / stylesheets / application.scss]

@import '~bootstrap/scss/bootstrap';

>> Next, set to read JS of Bootstrap.

Add the following code to app/javascript/packs/application.js.

[app / javascript / packs / application.js]

import 'bootstrap';

import '../stylesheets/application';

>> Finally, change link to pack app/views/layouts/application.html.erb as follows.

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

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