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.
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 by 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:
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.
Documentation Enhanced documentation with more information - especially when it comes to customization.
Improved Form Controls In v5, all form controls are customized. These include the radio buttons, checkboxes, files, ranges, and more.
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
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:
Secondly, let's install popper.js
To import bootstrap, do the following accordingly:
Create a new folder called stylesheets.
Create a new file called
So you should now have
Add these lines one after the other:
Check your console and see if you have the error message below: Cannot find module @popperjs/core
This probably occurs because you added popper manually and thus failed to install
popperjs/core as a dependency.
To solve this problem, run
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…
Email: [email protected]