How to use Bootstrap Templates via Webpacker in Rails 6

In Rails 6, adding a Bootstrap template is different as webpacker is used by default. This post shows you how to do it.

In Rails 6, javascript is no longer added in the pipeline. In previous versions of Rails, the files could be easily added under the assets folder. 
Image

If you were using a bootstrap template, in previous versions of Rails you could easily add the files to the asset folder to integrate the template into the Rails app. In Rails 5.2.X I used the Bootstrap template which required me to add a few JS files to the asset pipeline
Image

In Rails 6, this is no longer possible as webpacker is used by default. Instead, you need to do this differently.
We start by importing Bootstrap to the app.
Image

Bootstrap is dependent on jQuery and Popper,  and so we need to modify the config/webpack/environment.js files so that when Bootstrap requires jQuery and popper in its code it knows where to look, and Webpack is going to set it up.
Image

We are using a Bootstrap template, and it requires a few styles which needs to be added to the stylesheets folder.
Image

The custom.scss file is needed to override the default styles, and the other files - entypo, socicon and theme - are required for this specific bootstrap template.
Image

This is then going to process all these files when Webpack complies it.
Image

And we need to make sure that the layout can access this Webpack stylesheet.
Image

Let's update the home page view to display the view from the Bootstrap template. As this bootstrap template requires custom JS files, we can import them using the javascrpt_pack_tag at the bottom of the page.
Image

We also need to add these files to Webpacker under the javascript/packs folder.
Image

The Bootstrap template uses custom fonts and therefore I also imported them into a new folder.
Image

Thats it! You can now use any Bootstrap template with your Rails 6 app.


Weekly Newsletter

Subscribe to get my weekly newsletter and latest articles on startups, marketing and growth.

I’m Arjun Rajkumar, and I'll help you build a product that your customers will love.

Here is a sample of some of my past work.