How to install Bootstrap in Rails 6 (with Yarn and Webpacker)
Tags: ruby, rails, bootstrap, yarn
Published: 2020-12-08 11:31:52

---
title: "How to install Bootstrap in Rails 6 (with Yarn and Webpacker)"
published: true
description: "Quick guide to installing Bootstrap correctly.
tags: 
- ruby
- rails
- bootstrap
- yarn
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/gjb5zkyjh6hya271an64.png
canonical_url: https://blog.corsego.com/rails-6-install-bootstrap-with-webpacker-full
---
TLDR version of this post [>>here<<](https://blog.corsego.com/rails-6-install-bootstrap-with-webpacker-tldr)
****
There are many guides and many paths to make bootstrap available in Rails 6.

Having analyzed dozens of tutorials and production applications, below seems to be the most "correct" path.

In Rails 5 you would normally use [gem bootstrap](https://github.com/twbs/bootstrap-rubygem) that would "download" the bootstrap JS and CSS files.

As we are using webpacker in Rails 6, the right way is to install a **package**. Webpacker is fit to work with the "yarn package manager".

Bootstrap has an official [yarn package](https://classic.yarnpkg.com/en/package/bootstrap), meaning that it can be installed with a command like yarn add bootstrap (instead of installing a gem)!

But bootstrap has some dependencies like `jquery` and `popper.js` that need to be installed too.

As well, in Rails 5 we used stylesheets in `app/assets/stylesheets/application.css`:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/o9h4kms85ulkatukx4kz.png)

And to tell our application to use this file, in `application.html.erb` in Rails 5 we added the line to `application.html.erb`:

```
= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload'
```

In Rails 6, we will be compiling the stylesheets inside the javascripts folder. 

# **Let's start:**

1. In the `console` run the command:

```
yarn add jquery popper.js bootstrap
```

it will install the yarn packages that you need to run bootstrap.

2. In the file `environment.js` add the following:

```
const { environment } = require('@rails/webpacker')
const webpack = require("webpack")
environment.plugins.append("Provide", new webpack.ProvidePlugin({
    $: 'jquery',
    jQuery: 'jquery',
    'window.jQuery': 'jquery',
    Popper: ['popper.js', 'default']
  }))
module.exports = environment
```

3. Create a folder `app/javascript/stylesheets`. 

In the folder `app/javascript/stylesheets` create a new file `application.scss`:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/5lpiiujmxc7uf2ju9old.png)

We will be placing all the css there.

4. Make the `app/javascript/stylesheets` available in your `application.html.erb`. 

`application.html.erb` should look like this:

```
= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' 
= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' 
= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' 
```

Notice the `stylesheet_pack_tag`.

5. Finally, in `application.js` we add

```
import 'bootstrap/dist/js/bootstrap'
import 'bootstrap/dist/css/bootstrap'
require("stylesheets/application.scss")
```

The first 2 "import" commands add the bootstrap JS and CSS that was imported by yarn.

The last "require" makes anything that you add in `app/javascript/stylesheets/application.scss` compile whenever you add a change to it.

6. Now you can add a bootstrap classes like in any view: 

```
<span class="badge badge-secondary">Thanks Yaro! It works!</span> 
```

and it will add a Bootstrap badge.

Hooray! Bootstrap is installed!😊

P.S. If you will be adding actiontext, it's good to place it under `app/javascript/stylesheets/application.scss`:

`@import "./actiontext.scss";`

****

# **Relevant links**

* [TLDR version of this post](https://blog.corsego.com/rails-6-install-bootstrap-with-webpacker-tldr)
* [see the official Bootstrap docs here](getbootstrap.com/)
* [Bootstrap yarn package](https://classic.yarnpkg.com/en/package/bootstrap)

That's it 🤠

Liked this article? Please follow me! It will really motivate me to post more fun stuff!