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

#ruby #rails #ubuntu #bootstrap

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)