DEV Community

Alexandre Calaça
Alexandre Calaça

Posted on

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
Enter fullscreen mode Exit fullscreen mode

Output

Image Add bootstrap

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
Enter fullscreen mode Exit fullscreen mode

Output

Image Check installation


Add @poppejs/core

yarn add @popperjs/core
Enter fullscreen mode Exit fullscreen mode

OUtput

Image Add  raw `@poppejs/core` endraw

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
Enter fullscreen mode Exit fullscreen mode

OUtput

Image Check installation


Add the Webpacker gem package

yarn add @rails/webpacker
Enter fullscreen mode Exit fullscreen mode

Output

Image Add the Webpacker gem package


Check @rails/webpacker installation

yarn info @rails/webpacker version
Enter fullscreen mode Exit fullscreen mode

OUtput

Image Check  raw `@rails/webpacker` endraw  installation


Check all npms packages

npm list
Enter fullscreen mode Exit fullscreen mode

OUtput

Image Check all npms packages


Open any view page

Image Open any view page

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


Done

Image Done


Let's network


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!


Top comments (0)