How to add bootstrap 4 to your Rails 6 application?

Hello Folks!

In the newer version of rails, Rails 6 sprockets are removed and webpacker has been introduced. And because of this change the javascript folder from app/assets/ has been removed and a now all javascript required for your application should be place at new location inside your app folder. Now all your javascript should be in app/javascripts.

Now to add bootstrap 4 inside your Rails 6 application you have to follow steps given below:

1. Add Bootstrap and related dependencies to your Rails app using yarn

Since bootstrap 4 is dependent on Jquery and popper.js so we also need to add these dependencies as well. Run following command to add all at once:

                
                  yarn add bootstrap@4.3.1 jquery popper.js

After running this command your package.json should have these dependencies included:

                
                  
                    "dependencies": {
                      ................
                      "bootstrap": "4.3.1",
                      "jquery": "^3.5.1",
                      "popper.js": "^1.16.1",
                      ................
                    }

2. Update config/webpack/environment.js

Now you need to update config/webpack/environment.js file to add popper and Jquery as a plugin for your rails app. Your config/webpack/environment.js should have this content.

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

                    const webpack = require("webpack")

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

                    module.exports = environment

3. Add bootstrap to application

Now create a new directory inside app/javascript and name it as css. And then inside this directory create a file with name application.scss. And add following line in it:

                
                  @import "~bootstrap/scss/bootstrap.scss";

And then change following line in app/views/layouts/application.html.erb

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

with 

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

open your app/javascript/packs/application.js and following line at bottom of it:

                
                  import 'css/application';

4. Import bootstrap js

Now in newer version of rails (Rails 6) we need to add our javascript libraries inside app/javascripts/packs/application.js:

Add following lines at the bottom of app/javascripts/packs/application.js

                
                  import $ from 'jquery';
                  global.$ = jQuery;

                  import "bootstrap";

Cheers!!!