HOW TO INSTALL BOOTSTRAP 5 ON RAILS 6

Photo by Pankaj Patel on Unsplash

Hey Devs!

I’m here on this one again.

This article is for the interest of Rails Devs out there who are struggling with installing Bootstrap 5 on their Rails 6 applications.

And it’s also for the interest of those who might consider incorporating Bootstrap 5 on their Rails 6 applications.

This article is going to be precise and straight to the point; no long talks :)

Before I left the cat out of the bag, I’d like to tell us a little about Bootstrap.

Bootstrap is a free and open-source CSS Framework that is used for developing responsive web pages. It’s easy to use and understand, it’s characterized with pretty much pre-defined classes.

I’m going to tell us some of the new features of Bootstrap 5. But for me not to defeat the purpose of this article, I’m not going to go into details of these features:

The main features are as follows:

- jQuery Support
Bootstrap will no longer be using the jQuery library. The development team has instead improved the JavaScript library to effect this change.

- CSS Custom Properties
IE does not support CSS custom properties, and for this reason, the Bootstrap dev team has dropped Internet Explorer support. So, custom CSS properties (variables) can be used.

- Improved Documentation
Documentation has been enhanced with more information especially when it comes to customization.

- Improved Form Controls
Bootstrap has improved its form controls, input groups, and more.
In v4, Bootstrap was using custom form controls in addition to the defaults provided by each browser. In v5, these are all now customized. All the radio buttons, checkboxes, files, ranges, and more give them the same look and behavior across different browsers.

- New Bootstrap Icon Library
Bootstrap now boasts its own open-source SVG icon library with over 1,300 icons. It is custom made for the framework’s components but you can still work with them on any project.

- Improved Grid System
- Bootstrap 5 Adds Utility Libraries

Now, let’s jump into the business proper!

First, you need to generate your Rails app and then install Bootstrap
I’m not going to generate a Rails app here, so go ahead and do that…
To install Bootstrap 5, follow these steps:

* On your project directory, pull up the terminal and run the command below:

$ yarn add bootstrap

Secondly, let’s install popper.js

* To install popper.js, run

$ yarn add popper.js

The next thing is to import Bootstrap

* To import bootstrap, do the following accordingly:

- Navigate to app/javascript dir:

- Create a new folder called stylesheets

- Create a new file called application.scss

* So you should now have app/javascript/stylesheets/application.scss

- Then add

@import “bootstrap”;

* Then inside app/javascript/packs/application.js

- Add these lines one after the other:

import “bootstrap”;

import “../styelsheets/application”;

Ensure you add the above snippets after import “channels”;

NOTE:

If for any reason, the above procedure didn’t work out well, all you need to do is:

- Check your console and see if you have the error message below:

Cannot find module @popperjs/core

If this is your case, then this probably occurs because you added popper manually and thus failed to install popperjs/core as a dependency.

* To solve this problem, run

$ yarn add popperjs/core

You can navigate to node_modules > bootstrap > package.json > dependencies > peerDependencies to verify if popperjs/core is now installed.

Hopefully, everything should work out now!

Thank you for your time :)

For questions, suggestions, and contributions, reach out to me on…

LinkedIn Twitter GitHub

Email: jamezjaz@gmail.com