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!


Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

Top comments (0)

Image of Timescale

Timescale – the developer's data platform for modern apps, built on PostgreSQL

Timescale Cloud is PostgreSQL optimized for speed, scale, and performance. Over 3 million IoT, AI, crypto, and dev tool apps are powered by Timescale. Try it free today! No credit card required.

Try free

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay