Simple way how to use Bootstrap 5 in Rails 7

Simple way how to use Bootstrap 5 in Rails 7

Rails 7 is a breath of fresh air. Thanks to
importmaps everything is
simple again. JavaScript (JS) is easy to be implemented without the need
to install node,npm,yarn,webpack,..other 150 non-Ruby tools on your Laptop

But what about CSS ?

Well there is good old Sprockets (a.k.a Rails asset pipeline) and good old gems contanining SCSS (remember those?)

Let’s make life easy again

Instalation of Bootstrap 5 in Rails 7

JavaScript (JS)

If you don’t have importmaps yet in your Rails project:

# to check if you already have importmaps 
$ cat config/importmap.rb

# to install importmaps in your Rails7 project
$ rails importmap:install

To add Bootstrap 5 JS to Rails 7 project via importmaps:

$ bin/importmap pin bootstrap

…this will add necessary JS (bootstrap and popperjs) to config/importmaps.rb

Then you need to just import bootstrap in your application.js

// app/javascript/application.js
// ...
import 'bootstrap'

Quick Note:

For some reason popperjs acts broken in my Rails7 project when I load it from
default CDN. That’s why I recommend to load it from

# config/importmaps.rb
# ...
pin "bootstrap", to: "[email protected]/dist/js/bootstrap.esm.js"
pin "@popperjs/core", to: "[email protected]/dist/esm/index.js" # use as contains a broken popper package
# ...


To install official
Bootstrap 5 Ruby gem

# Gemfile
# ...
gem 'bootstrap', '~> 5.1.3'
# ...

and bundle install

Then just edit your app/assets/stylesheets/application.scss

// app/assets/stylesheets/application.scss
// ...
@import "bootstrap";
// ...

note: be sure you replace your application.css with application.scss.
That means app/assets/stylesheets/application.css should not exist!

If you want to change some variables:

// app/assets/stylesheets/application.scss
// ...
$primary: #c11;
@import "bootstrap";
// ...

Layout files

Make sure your layout (app/views/application.html.erb) contains:

<%# ... %>
<%# ... %>
<%= stylesheet_link_tag "application", "data-turbo-track": "reload" %>  <%# this loads Sprockets/Rails asset pipeline %>
    <%= javascript_importmap_tags %> <%#  this loads JS from importmaps %>
    <%# ... %>
  <!-- ... -->

Alternative solutions


“but this way you load a gem and you don’t use the JS bit of it”

So what? Like if there’s no single gem in your project you don’t use at 100%. I love “vanilla Rails” approach and
love to avoid 3rd party gems as much as I can but this will save you so
much hustle, especially if you are a beginner new to Rails or you are
starting a sideproject (there’s always a time to refactor if you really
need to)

“but Sprockets are no longer used”

Yes they are. There was a period of time with RoR 5.2 & 6.x where webpacker
was taking over and developers were ditching Rails asset pipeline but
this new importmaps approach is fresh breath to bring gems with scss
back. Basecamp (& DHH) were quite clear about it that Sprockets will not
disappear anyday soon.

but --css (esbuild) is there to replace sprockets

No it’s not, same way how webpacker didn’t replace it

But what if CDN provider goes down, then my application JS will not work

Yes you and other billion websites as well. If your project is a bank then yeah sure use your
own CDN or load from vendor. But if your project is
startup to sell T-shirts then I’m pretty sure everyone will
survive that 5 min downtime.


Photo by Pablo Arroyo via unsplash


Source link

Leave a reply

Please enter your comment!
Please enter your name here