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 JavaScri…


This content originally appeared on DEV Community and was authored by Alexandre Calaça

Open the terminal

Solution

Add bootstrap

yarn add bootstrap

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

Output

Image Check installation

Add @poppejs/core

yarn add @popperjs/core

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

OUtput

Image Check installation

Add the Webpacker gem package

yarn add @rails/webpacker

Output

Image Add the Webpacker gem package

Check @rails/webpacker installation

yarn info @rails/webpacker version

OUtput

Image Check  raw `@rails/webpacker` endraw  installation

Check all npms packages

npm list

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!


This content originally appeared on DEV Community and was authored by Alexandre Calaça


Print Share Comment Cite Upload Translate Updates
APA

Alexandre Calaça | Sciencx (2024-09-15T02:15:54+00:00) How to install bootstrap 5 with Webpacker in a Ruby on Rails 6 application on Ubuntu. Retrieved from https://www.scien.cx/2024/09/15/how-to-install-bootstrap-5-with-webpacker-in-a-ruby-on-rails-6-application-on-ubuntu/

MLA
" » How to install bootstrap 5 with Webpacker in a Ruby on Rails 6 application on Ubuntu." Alexandre Calaça | Sciencx - Sunday September 15, 2024, https://www.scien.cx/2024/09/15/how-to-install-bootstrap-5-with-webpacker-in-a-ruby-on-rails-6-application-on-ubuntu/
HARVARD
Alexandre Calaça | Sciencx Sunday September 15, 2024 » How to install bootstrap 5 with Webpacker in a Ruby on Rails 6 application on Ubuntu., viewed ,<https://www.scien.cx/2024/09/15/how-to-install-bootstrap-5-with-webpacker-in-a-ruby-on-rails-6-application-on-ubuntu/>
VANCOUVER
Alexandre Calaça | Sciencx - » How to install bootstrap 5 with Webpacker in a Ruby on Rails 6 application on Ubuntu. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2024/09/15/how-to-install-bootstrap-5-with-webpacker-in-a-ruby-on-rails-6-application-on-ubuntu/
CHICAGO
" » How to install bootstrap 5 with Webpacker in a Ruby on Rails 6 application on Ubuntu." Alexandre Calaça | Sciencx - Accessed . https://www.scien.cx/2024/09/15/how-to-install-bootstrap-5-with-webpacker-in-a-ruby-on-rails-6-application-on-ubuntu/
IEEE
" » How to install bootstrap 5 with Webpacker in a Ruby on Rails 6 application on Ubuntu." Alexandre Calaça | Sciencx [Online]. Available: https://www.scien.cx/2024/09/15/how-to-install-bootstrap-5-with-webpacker-in-a-ruby-on-rails-6-application-on-ubuntu/. [Accessed: ]
rf:citation
» How to install bootstrap 5 with Webpacker in a Ruby on Rails 6 application on Ubuntu | Alexandre Calaça | Sciencx | https://www.scien.cx/2024/09/15/how-to-install-bootstrap-5-with-webpacker-in-a-ruby-on-rails-6-application-on-ubuntu/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.