Ask A Question


You’re not receiving notifications from this thread.

How do I integrate a bootstrap theme with rails 6 ?

Jorge Gocobachi asked in CSS

I'm a new subscriber and would like to integrate a new bootstrap theme from

Which tutorial would you recommed?
I used the "How to use bootstrap with webpacker in rails 6" previously as a reference, but what should I do now? I was watching your video of how to add a bootstrap theme to rails, but it's an old video and I'm not sure if it apply this version of rails.




You should manage all your assets with webpacker.

For bootstrap, you should use the bootsrap npm lib bootstrap-sass by running the command

yarn add bootstrap-sass

Then you should import it in your main application.js file (your webpacker 'pack')

For bootstrap javascript modules :

/* Bootstrap modules */
import "bootstrap-sass/assets/javascripts/bootstrap/dropdown";
import "bootstrap-sass/assets/javascripts/bootstrap/modal";
import "bootstrap-sass/assets/javascripts/bootstrap/tooltip";
import "bootstrap-sass/assets/javascripts/bootstrap/popover";

For your stylesheets you can import the main stylesheet file in this application.js file :

/* Import stylesheets */
import "../stylesheets/style";

And your main style.scss file should import bootstrap from this lib.

// Twitter Boostrap
@import "~bootstrap-sass/assets/stylesheets/bootstrap";

You can then import all your theme stylesheets below.


Thank you very much Thomas!
I'll do just that.



Hey Jorge, did you have any joy with this? I have been struggling to get my theme to work.


Just watched this tutorial and it was super helpful -

Before that, I struggled with it for awhile as well. I figured it out with a free template from Creative Tim and opened sourced it. I also wrote up a blog post diving into the codebase here:

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.