How to install bootstrap 5 with Webpacker in a Ruby on Rails 6 application on Linux
Open the terminal
Add bootstrap
yarn add bootstrap
Output
The command yarn add bootstrap is used to add the Bootstrap framework to your project using Yarn, which is a package manager for JavaScript and front-end dependencies.
Bootstrap is a popular open-source front-end framework that provides a collection of pre-designed HTML, CSS, and JavaScript components and styles for building responsive and visually appealing web applications.
Check installation
yarn info boostrap version
Output
Add @popperjs
yarn add @popperjs/core
Output
yarn add v1.22.19
[1/4] Resolving packages...
[2/4] Fetching packages...
[3/4] Linking dependencies...
[4/4] Building fresh packages...
success Saved lockfile.
success Saved 1 new dependency.
info Direct dependencies
└─ @popperjs/core@2.11.8
info All dependencies
└─ @popperjs/core@2.11.8
Done in 1.62s.
The command yrn add @popperjs/core is used to add the Popper.js library to your project using Yarn.
Popper.js is a JavaScript library that provides positioning and alignment for pop-up elements, tooltips, and popovers.
It's commonly used in conjunction with other libraries and frameworks like Bootstrap to manage the positioning of elements that need to appear relative to other elements on a web page.
Check installation
yarn info @popperjs/core version
Output
(bootstrap-configuration)$ yarn info @popperjs/core version
yarn info v1.22.19
2.11.8
Done in 0.19s.
Add the Webpacker gem package
yarn add @rails/webpacker
Output
Check installation
npm list
Output
Open any view page
If you pay attention, the font is different. It's due to bootstrap.
Done
Celebrate
You've made it!
Let's become friends
Final thoughts
I hope this article has been helpful to you. Please feel free to reach out if you have any questions. Your thoughts, suggestions, and corrections are more than welcome.
By the way, don't hesitate to drop your suggestions for new blog articles.
I look forward to seeing you next time