Adding Bootstrap 4 to a Rails 6 project

If you’re like most developers, you probably have a lot of work to do. Because of this, smart developers like to take advantage of tools that let them write less code.

And Bootstrap is a tool that does just that. This CSS framework lets us quickly whip up pages that look pretty decent.

In this short article, I’m going to show you how to add Bootstrap 4 to your Rails project. This is a little different from adding earlier versions of Bootstrap to other versions of Ruby on Rails.

I’m going to assume you have already started a Rails project.

Next, make sure you have yarn installed. If you don’t have it you can run:

brew install yarn

Next, you need to go to your config/webpack/environment.js file and place the following code:

const webpack = require("webpack")


environment.plugins.append('Provide',

  new webpack.ProvidePlugin({

    $: 'jquery',

    jQuery: 'jquery',

    Popper: ['popper.js', 'default']

  })
)

Your config/webpack/environment.js should look like the following:

const { environment } = require('@rails/webpacker')

const webpack = require("webpack")

 

environment.plugins.append("Provide", new webpack.ProvidePlugin({

  $: 'jquery',

  jQuery: 'jquery',

  Popper: ['popper.js', 'default']

}))

 

module.exports = environment

Now, go to your javascript/packs/application.js file. This is the file that is going to let your app know to use bootstrap’s JS. Add the following:

gem 'bootstrap'

Your javascript/packs/application.js should look like the following:

// This file is automatically compiled by Webpack, along with any other files

// present in this directory. You're encouraged to place your actual application logic in

// a relevant structure within app/javascript and only use these pack files to reference

// that code so it'll be compiled.

 

import Rails from "@rails/ujs"

import Turbolinks from "turbolinks"

import * as ActiveStorage from "@rails/activestorage"

import "channels"

import 'bootstrap'

Rails.start()

Turbolinks.start()

Go to your app/assets/stylesheets/application.css file and rename that to applications.scss and then add the following:

@import "bootstrap/scss/bootstrap";

Your application.scss file should look like the following:

/*

 * This is a manifest file that'll be compiled into application.css, which will include all the files

 * listed below.

 *

 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, or any plugin's

 * vendor/assets/stylesheets directory can be referenced here using a relative path.

 *

 * You're free to add application-wide styles to this file and they'll appear at the bottom of the

 * compiled file so the styles you add here take precedence over styles defined in any other CSS/SCSS

 * files in this directory. Styles in this file should be added after the last require_* statement.

 * It is generally better to create a new file per style scope.

 *

 *= require_tree .

 *= require_self

 */

Finally, run these two commands:

yarn add bootstrap@4.3.1 jquery popper.js


bundle install

You should now have Bootstrap 4 install in your Rails 6 project!

You can watch the video tutorial below.

https://www.youtube.com/watch?v=MxDyofilLRU