Skip to main content
Ask A Question
You’re not receiving notifications from this thread.

How do I install bootstrap-v4 via yarn?

CSS • Asked by Drilon Buzuku

Hey Guys,

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

  1. yarn add [email protected]
  2. rails webpacker:compile
  3. add the line: import 'bootstrap/dist/css/bootstrap' (also tried [email protected] 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 [email protected]
  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 ?

Login or Create An Account to join the conversation.

Subscribe to the newsletter

Join 30,005+ developers who get early access to new screencasts, articles, guides, updates, and more.

    By clicking this button, you agree to the GoRails Terms of Service and Privacy Policy.

    More of a social being? We're also on Twitter and YouTube.