How to install bootstrap 5 with Webpacker in a Ruby on Rails 6 application on Ubuntu

Open the terminal

Solution

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 bootstrap's installation

yarn info bootstrap version

Output

Add @poppejs/core

yarn add @popperjs/core

OUtput

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 @popperjs/core installation

yarn info @popperjs/core version

OUtput

Add the Webpacker gem package

yarn add @rails/webpacker

Output

Check @rails/webpacker installation

yarn info @rails/webpacker version

OUtput

Check all npms packages

npm list

OUtput

Open any view page

If you pay attention closely, the font is different. It's due to bootstrap.

Done

Let's network

• Github
• LinkedIn
• Dev.to

Final thoughts

Thank you for reading this article.

If you have any questions, thoughts, suggestions, or corrections, please share them with us.

We appreciate your feedback and look forward to hearing from you.

Feel free to suggest topics for future blog articles. Until next time!