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!
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.
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.
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 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:
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:
@import 'bootstrap/dist/css/bootstrap';
Now let’s go back into app/javascript/packs/application.js and add a reference to the new stylesheet:
import '../stylesheets/styles`
require('bootstrap')
generate a static home page
Let’s generate a static home page to verify our updated CSS setup.
rails g controller pages home
Update the root Route in config/routes.rb to use the new static page:
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.
<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
