Hey Devs! This article is for the interest of Rails Devs out there who are struggling with installing Bootstrap 5 on their Rails 6 applications. And it's also for the interest of those who might consider incorporating Bootstrap 5 on their Rails 6 applications. Bootstrap Bootstrap is a free and open-source CSS Framework that is used for developing responsive web pages. It's easy to use and understand. It's characterized by pretty much pre-defined classes. I'm going to tell us some of the new features of Bootstrap 5. But for me not to defeat the purpose of this article, I'm not going to go into details of these features. The main features are as follows: jQuery Support Bootstrap will not be using the jQuery library anymore. The dev team has improved the JavaScript library to effect this change. IE does not support CSS custom properties, and for this reason, the Bootstrap dev team has dropped Internet Explorer support. So, custom CSS properties (variables) can be used. CSS Custom Properties Enhanced documentation with more information - especially when it comes to customization. Documentation In v5, all form controls are customized. These include the radio buttons, checkboxes, files, ranges, and more. Improved Form Controls Bootstrap now boasts its own open-source SVG icon library with over 1,300 icons. It is custom-made for the framework's components, but you can still work with them on any project. New Bootstrap Icon Library Improved Grid System Bootstrap 5 Adds Utility Libraries Installation Instructions First, you need to generate your Rails app and then install Bootstrap. I'm not going to generate a Rails app here, so go ahead and do that… To install Bootstrap 5, follow these steps: On your project directory, pull up the terminal and run the command below: Secondly, let's install popper.js To install , run popper.js The next thing is to import Bootstrap. To import bootstrap, do the following accordingly: Navigate to app/javascript dir. Create a new folder called stylesheets. Create a new file called application.scss . So you should now have app/javascript/stylesheets/application.scss . Then add: Then inside app/javascript/packs/application.js Add these lines one after the other: Check your console and see if you have the error message below: Cannot find module @popperjs/core This probably occurs because you added popper manually and thus failed to install as a dependency. popperjs/core To solve this problem, run You can navigate to to verify if is now installed. node_modules > bootstrap > package.json > dependencies > peerDependencies popperjs/core Hopefully, everything should work out now! Thank you for your time :) For questions, suggestions, and contributions, reach out to me on… LinkedIn Twitter GitHub Email: jamezjaz@gmail.com

Twitter

How to Publish a React Component as a Package to Npm

A Guide to Deploying Ruby Bot Live on Heroku

Read My Stories

Nominated for 2022 - Rawr For Ror

Too Long; Didn't Read

Make resilience your competitive advantage

How to Install Bootstrap 5 on Rails 6

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

A Beginner-Friendly Guide to Phone Authentication With FirebaseUI in React

10 Fascinating PHP and PHP-friendly admin templates

20+ Bootstrap 4 Template for 2020

15 Best Web Development Tools To Use In 2021

6 Reasons for Using Bootstrap Framework

A Beginner-Friendly Guide to Phone Authentication With FirebaseUI in React

10 Fascinating PHP and PHP-friendly admin templates

20+ Bootstrap 4 Template for 2020

15 Best Web Development Tools To Use In 2021

6 Reasons for Using Bootstrap Framework

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps