Ask A Question


You’re not receiving notifications from this thread.

How do I install bootstrap-v4 via yarn?

Drilon Buzuku asked in CSS

Hey Guys,

I tried to install bootstrap4 via yarn. And I tried it like this:

  1. yarn add bootstrap@4.0.0-alpha.6
  2. rails webpacker:compile
  3. add the line: import 'bootstrap/dist/css/bootstrap' (also tried bootstrap@4.0.0-alpha.6 instead of simply writing bootstrap) in javascript/pack/application.js
  4. add the line: *= require bootstrap/dist/css/bootstrap to application.css
  5. add the line: <%= javascript_pack_tag 'application' %> to layouts/application.html.erb

But it didn't work out. How do I install bootstrap via yarn? Is it recommended to install bootstrap via yarn? Or is it a better practice to install bootstrap through the bootstrap gem?




Hi Drilon,

Sorry nobody got back to you. I had some trouble doing this myself a while back. As Chris informed me, the webpacker and the asset pipeline are two totally seperate things with similar goals. You don't use them together.

The webpacker documentation may be the best place to look for tutorials. But as a TL;DR I would do the following:

  1. Add bootstrap through yarn: yarn add bootstrap@4.0.0-alpha.6
  2. Create a file to be transpiled by webpacker: app/javascript/bootstrap.sass (or app.sass... whichever name suits you best.)
  3. Within bootstrap.sass import your newly added boostrap library: @import '~bootstrap/dist/css/bootstrap'
  4. In the head of your app/views/layouts/application.html.erb add <%= stylesheet_pack_tag 'bootstrap' %>.
  5. Run rails s in one terminal window tab and ./bin/webpack-dev-server in the other so webpacker can compile your assets and serve them in your app.

Note that in the webpacker documentation you can import the bootstrap sass using the javascript pack tag, but I don't mix my scripts and stylesheets. Personal preference.


Just in case you need an example
I created a sample "hello-world" app following Peter instructions, the only diference is i'm using mini.css instead of bootstrap. It worked like a charm:


Nice! I think it's worth noting now that with webpacker 3.0 you no longer need to run ./bin/webpack-dev-server unless you want features like hot module reloading.

Running rails s will also compile webpack assets.

Importing css is deprecated, so the line
@import '~bootstrap/dist/css/bootstrap'
 leads to a warning, and apparently in most recent versions already is an error. See .

How should bootstrap be included instead of using @import ?
Join the discussion
Create an account Log in

Want to stay up-to-date with Ruby on Rails?

Join 83,038+ developers who get early access to new tutorials, screencasts, articles, and more.

    We care about the protection of your data. Read our Privacy Policy.