Adding Bootstrap4 to Rails 6

Posted by : at

Category : guides   tutorials


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

Getting Started

Let’s begin at the beginning.

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

rails new use-bootstrap
cd use-bootstrap

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 frontend technologies: Yarn and Webpack.

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

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.

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.

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:

require('bootstrap')

add Bootstrap 4 to your CSS

Head on over to app/assets/stylesheets/application.css. Here is where our main application CSS is put together. Update it to look like the following:

*= require bootstrap
*= require_tree .
*= require_self

Now to add custom styles to the app styling, create a new file, app/assets/stylesheets/custom.css.scss. Import the Bootstrap library first so you are able to modify styles for not just your new classes but existing bootstrap classes as well:

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

generate a static home page

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

rails g controller home index

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

Rails.application.routes.draw do

  root 'home#index'
end

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

<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>

Mission Accomplished!

Where to next?

About Erik Yuzwa

My name is Erik Yuzwa. I'm a full stack web developer and software engineer from Calgary, Alberta.

Categories