Use Bootstrap 5 with Ruby on Rails 6 and webpack

Daniel Qian

Published in

daily-web-dev

4 min readAug 22, 2020

Note this article works only with Ruby on Rails 6. If you want to use Rails 7, I added a new post for it.

Ruby on Rails 7 with Postgresql and bootstrap CSS, hosting on Heroku

As Bootstrap 5 alpha1 released, it’s exciting to include it in your brand new Rails 6 app.

Although Bootstrap updated its official Gem for Rails for its bootstrap 5, I find it a bit buggy to use.

In this article, I’ll show you how to include Bootstrap 5 in Rails app by using Webpack.

Most of the time when we use Bootstrap we are using it as 2 parts

The css styles
It’s js responsive behaviors (pop up modal and so on)

Now let's start.

First, let’s create a new Rails app, I’m going to get the latest Ruby and Rails to build it.

Updating Ruby, Rails, Node and Yarn

# using RVM for Ruby versions, NVM for Node
# in terminal window# update Ruby version
$ rvm install 2.7.1
...
$ ruby -v
ruby 2.7.1p83 (2020-03-31 revision a0c7c23c9c) [x86_64-darwin19]# update Node version
$ nvm install 14.8
...
$ node -v
v14.8.0# install Yarn
$ npm install -g yarn
...
$ yarn -v
1.17.3# install Rails
$ gem install rails
$ rails -v
Rails 6.0.3.2

Create the App

$ rails new bootstrap_demo --database=postgresql

For demo purpose, we are going to create a quick scaffold

$ cd bootstrap_demo
$ rails generate scaffold Post name:string title:string content:text# create db and do migrate
$ rails db:create db:migrate# start server
$ rails s

Now we should have a page in localhost:3000/posts

Install Bootstrap with yarn , from Bootstrap 5 we don't need JQuery anymore.

$ yarn add bootstrap@next
$ yarn add @popperjs/core

Import Bootstrap styles through Javascript styles by updating the application layout app/views/layouts/application.html.erb

# add new line
# <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
# at the bottom in the head tage
# so it look like<head>
  <title>BootstrapDemo</title>
  <%= csrf_meta_tags %>
  <%= csp_meta_tag %>
  <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
  <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
  <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
</head>

Notice the new tag we added is stylesheet_pack_tag instead of the existing stylesheet_link_tag already there. This new tag will import the styles sheets from app/javascript/packs/*.js in this case, it will import styles from app/javascript/packs/application.js

Next, we need to import bootstraps to our application.js

# create a new folder at
# app/javascript/stylesheets
# we will then put our stylesheets in here and they will be managed by webpack# create new file
# app/javascript/stylesheets/application.scss# inside the file add line
@import "bootstrap"# in file app/javascript/packs/application.js, at bottomm of the file, add:
import "bootstrap"
import "../stylesheets/application"

What we did above is to add styles from javascript to our application layout, this layout is used by all the pages so far. Then through javascript, import bootstrap and bootstrap styles.

Now let's do a test by adding a bootstrap popup modal to one of the page, if this works, will mean we successfully installed bootstrap to the application.

Copy the demo popup modal from

https://v5.getbootstrap.com/docs/5.0/components/modal/

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Paste it at the bottom of the app/views/posts/index.html.erb , refresh the page at localhost:3000/posts

Now we can see a blue button on the page which is a good sign as it’s bootstrap button style by using class='btn btn-primary' , now click on the button and see if the modal shows up.

Edit:

Some of you guys might come to the issue Tooltips and Popovers don't work at this stage. This might be one of the big differences between bootstrap 5 to bootstrap 4. After some digging. Here is the solution.

Turns out that bootstrap 5 won’t automatically bind the tooltips and popovers anymore. so here is what we need to do.

https://getbootstrap.com/docs/5.0/components/tooltips/#example-enable-tooltips-everywhere

https://getbootstrap.com/docs/5.0/components/popovers/#example-enable-popovers-everywhere

Following the documentation. Let’s update app/javasctipt/packs/application.js

# replace
import "bootstrap"
import "../stylesheets/application"

This should make them work.

Here we go, now we successfully imported bootstrap 5 and all of it’s components to our application.

Please let me know if any comments.

Use Bootstrap 5 with Ruby on Rails 6 and webpack

Ruby on Rails 7 with Postgresql and bootstrap CSS, hosting on Heroku

Written by Daniel Qian