Bootstrap 5 Integration into Rails 6

A lot of people have been having a hard time integrating bootstrap 5 in Rails 6 and since we have figured out a way to easily integrate the two we decided to put out this tutorial.

If you prefer the video tutorial:

We are going to show step by step using a newly created app, if you have an existing application you are trying to integrate into, the information below should still work just fine. We are also going to use MySQL as the default database so if you are using something else, then specify that connector instead.

Step 1 – Create a new Rails 6 application

rails new bootstrap5_base -d mysql

I don’t know why but sometimes even with a newly created application rails hangs when creating a controller, so lets update our binstubs before the next step.

rails app:update:bin

Step 2 – Create a new controller to test our integration

We are going to call our controller “welcome” and give it a default index action.

rails g controller welcome index

Now we are going to put some simple bootstrap stuff in our index file for testing

<!-- inside app/views/welcome/index.html.erb -->
    <div class="collapse" id="navbarToggleExternalContent">
        <div class="bg-dark p-4">
            <h5 class="text-white h4">Collapsed content</h5>
            <span class="text-muted">Toggleable via the navbar brand.</span>
    <nav class="navbar navbar-dark bg-dark">
        <div class="container-fluid">
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" 
aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button> 
        <section class="py-5 text-center container">
            <div class="row py-lg-5">
                <div class="col-lg-6 col-md-8 mx-auto">
                    <h1 class="fw-light">Album example</h1>
                    <p class="lead text-muted">Something short and leading about the collect ion below—its contents, the creator, etc. Make it short and sweet, but not too s hort so folks don’t simply skip over it entirely.</p>
                        <a href="#" class="btn btn-primary my-2">Main call to action</a>
                        <a href="#" class="btn btn-secondary my-2">Secondary action</a>

Next, we’re going to update our routes to make this the default / root view


Rails.application.routes.draw do
  get 'welcome/index'
  root 'welcome#index'

Step 3 – Create a new database and user for it and update your config

We created a MySQL db with the following details:

db name: bootstrap5_base_demo
username: bs5demo
password: bs5demo123

Then updated config/database.yml

default: &default
  adapter: mysql2
  encoding: utf8mb4
  pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %>
  username: bs5demo
  password: bs5demo123
  socket: /tmp/mysql.sock

  <<: *default
  database: bootstrap5_base_demo

At this point we started the app on localhost:3000 just to make sure it was working… it was.

Step 4 – Install bootstrap and @popperJS using yarn

yarn add bootstrap @popperjs/core

Step 5 – Rename app/javascript directory and create some files

First we are going to rename app/javascript to app/frontend and update the source_path line in webpacker.yml to use the renamed directory

mv app/javascript app/frontend

In config/webpacker.yml change the source_path line to:

  source_path: app/frontend ### this we changed from "app/javascript"

Now we are going to add a directory for our javascript files and create a couple files

mkdir app/frontend/js
touch app/frontend/js/bootstrap_js_files.js
touch app/frontend/packs/application.scss

Step 6 – Add our necessary imports

in app/frontend/js/bootstrap_js_files.js

import 'bootstrap/js/src/collapse' 
import 'bootstrap/js/src/dropdown' 
import 'bootstrap/js/src/scrollspy'

in app/frontend/packs/application.js

import '../js/bootstrap_js_files.js'

in app/frontend/packs/application.scss

// Import Bootstrap v5  
@import "~bootstrap/scss/bootstrap";

Step 7 – Clear and recompile our assets and test our integration

rails assets:clobber
rails webpacker:compile
rails server

At this point you should have a working Rails 6 application with bootstrap 5 fully integrated.