All threads / How do I integrate a bootstrap theme with rails 6 ?

Ask A Question

Notifications

You’re not receiving notifications from this thread.

How do I integrate a bootstrap theme with rails 6 ?

Jorge Gocobachi asked in CSS

Hello,
I'm a new subscriber and would like to integrate a new bootstrap theme from https://themes.getbootstrap.com/

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.

Sincerely,
Jorge

Hello,

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.

Jorge

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 - https://gorails.com/episodes/using-purchased-themes.

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: https://www.dinosaas.com/articles/starter-app-1-argon.

Join the discussion

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

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

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

    logo Created with Sketch.

    Ruby on Rails tutorials, guides, and screencasts for web developers learning Ruby, Rails, Javascript, Turbolinks, Stimulus.js, Vue.js, and more. Icons by Icons8

    © 2020 GoRails, LLC. All rights reserved.