Adding Bootstrap4 to Rails6

One common task when starting a new Rails application is to integrate with a CSS library or design framework. While the CSS landscape has enjoyed quite a bit of expansion over the past few years, one of the most popular design frameworks is still Bootstrap 4.

While a LOT of that popularity is due to the success of Bootstrap 3, I think it does a lot more than just ride on its predecessors coat tails. It's definitely an attempt on its own, of a modern design experience.

With that in mind, the focus of this tutorial is to go through the process of adding Bootstrap4 to your Rails 6 project.

Let's jump into it!

Assumptions & Goals

  • You are on a system that has Ruby on Rails 6 setup and available to you
  • We want to have Bootstrap4 available to our front end

Getting Started

Open your shell and head to your favorite project directory. Then let's rails new the project!

{% highlight ruby linenos %}

rails new rails-use-bootstrap {% endhighlight %}

Once Rails and the bundler finish setting up the new project, let's get it committed to the git repository that Rails initializes for you.

{% highlight ruby linenos %}

cd rails-use-bootstrap git add . git commit -m "initial commit" {% endhighlight %}

NB: I may forget to write / mention it from time to time, but it's usually a good idea to "sanity check" your system configuration by running bin/rails s before you do anything else, just to quickly verify your app loads ok.

add Bootstrap 4 and dependencies via Yarn

To help deal with CSS and JavaScript for your Rails application, a default Rails 6 project comes with 2 front end technologies: Yarn and Webpack:

Yarn is a package manager, which is a tool similar to Bundler for Rails, only we strictly use it for JavaScript packages. While Webpack is a utility that takes all of our JavaScript, CSS, and creates an optimized JavaScript "blob" for us to use. Try not to worry if that wording didn't make too much sense, as you start using them you begin to see where they fit into the overall picture.

Back on the command line, use Yarn to install Bootstrap 4 and its two dependencies, jQuery and popper.js.

{% highlight ruby linenos %}

yarn add bootstrap jquery popper.js {% endhighlight %}

Once yarn finishes installing everything, let's go into the webpack configuration. Open up config/webpack/environment.js. It starts as a fairly empty file with only a couple of lines, but we need to expand it a bit.

{% highlight ruby linenos %}

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 {% endhighlight %}

This is some handy configuration into Webpack, so that JQuery and Bootstrap references can be made from your JavaScript modules without needing to always include them in each one.

Import Bootstrap into your application-wide JavaScript. Open up app/javascript/packs/application.js and add the following line to the very bottom of the file:

{% highlight ruby linenos %}


{% endhighlight %}

add Bootstrap 4 to Webpack

In Rails 6, it's pretty clear that more of the front end asset management is heading towards the use of Webpack.

Let's add a new SASS stylesheet to handle our Bootstrap import. Create a new folder / file at app/javascript/stylesheets/styles.scss: {% highlight ruby linenos %}

@import 'bootstrap/dist/css/bootstrap'; {% endhighlight %}

Now let's go back into app/javascript/packs/application.js and add a reference to the new stylesheet: {% highlight ruby linenos %}

import '../stylesheets/styles` require('bootstrap') {% endhighlight %}

generate a static home page

Let's generate a static home page to verify our updated CSS setup.

{% highlight ruby linenos %}

rails g controller pages home {% endhighlight %}

Update the root Route in config/routes.rb to use the new static page:

{% highlight ruby linenos %}

Rails.application.routes.draw do get '/home' => 'pages#home' root 'pages#home' end {% endhighlight %}

Finally, let's put some basic Bootstrap in the new app/views/pages/home.html.erb view.

{% highlight ruby linenos %}


Find me in app/views/pages/home.html.erb

{% endhighlight %}

You can find the code for this project on my github -

If you found this tutorial helpful, please share it!

About the author

Hey, I'm Erik, a software engineer, gamer, writer, and content creator. I publish articles and tutorials about modern software development, design, and programming.

Get the newsletterBuy me a coffee