Now that webpacker is no longer the preferred way to bundle CSS in Rails, here’s a quick proof-of-concept for using Bootstrap 5 in Rails 7 delivered through Sprockets and Webpacker.
The only reason you need to do this is that Boostrap is a very old technology and is not engineered around the new importmap paradigms introduced with Rails 7.
rails new MyGreatApp --pre
gem 'bootstrap', '~> 5.1.0'
Also uncomment the scss-rails Gemfile:
gem "sassc-rails", "~> 2.1"
And bundle install
Then delete this file:
Now make a new file called
application.scss in the same folder
Here you add:
Add a dummy navbar to your home page and it should look like this:
OPTION A: Using Webpacker (Recommended)
However, notice that the hamburger menu does not work. That’s because we haven’t yet added Javsacript
However, even though we’ve added Bootstrap with Sprockets I’m going to still add jQuery using Webpacker, like so:
Add to the Gemfile
Check these files in your repo.
Then add jQuery using yarn:
yarn add jquery
Now you’ll go to config/webpack/environments.js and add this content between the existing content, above the line
module.exports = environment
const webpack = require('webpack')
Now you’ll need to make a new file at
Remember, you’ve left your normal Rails-default
import "@hotwired/turbo-rails" import "controllers"
Then confirm that jQuery is working by opening the browser window to your app, opening the developer tools