Adding Bootstrap4 to Rails6

Share: Twitter Facebook LinkedIn

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!

1
rails new rails-use-bootstrap

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.

1
2
3
cd rails-use-bootstrap
git add .
git commit -m "initial commit"

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.

1
yarn add bootstrap jquery popper.js

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.

1
2
3
4
5
6
7
8
9
10
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

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:

1
    require('bootstrap')

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:

1
@import 'bootstrap/dist/css/bootstrap';

Now let’s go back into app/javascript/packs/application.js and add a reference to the new stylesheet:

1
2
import '../stylesheets/styles`
require('bootstrap')

generate a static home page

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

1
rails g controller pages home

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

1
2
3
4
Rails.application.routes.draw do
  get '/home' => 'pages#home'
  root 'pages#home'
end

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<nav class="navbar navbar-expand-sm bg-light">
  <ul class="nav justify-content-center">
    <li class="nav-item">
      <a class="nav-link" href="#">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">About</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Pricing</a>
    </li>
  </ul>
</nav>
<div class="container">
    <h1>Pages#home</h1>
    <p>Find me in app/views/pages/home.html.erb</p>
</div>

You can find the code for this project on my github - https://github.com/erikyuzwa/rails-use-bootstrap

If you found this tutorial helpful, please share it!

Comments

You are seeing this because your Disqus shortname is not properly set. To configure Disqus, you should edit your _config.yml to include either a disqus.shortname variable.

If you do not wish to use Disqus, override the comments.html partial for this theme.