The best way to install and manage Bootstrap in a Rails application is to integrate it using a modern, maintainable, and flexible approach that leverages the Rails asset pipeline and facilitates future updates and customizations. Here are two widely-used methods:<\/p>\n
This method allows you to easily integrate Bootstrap with the Rails asset pipeline and manage updates through Bundler. It\u2019s simple and Rails-friendly, as it integrates with the asset pipeline and easy to update via bundle update, but it may lag behind in supporting the latest Bootstrap features or updates compared to npm packages.<\/p>\n
Steps:<\/strong><\/p>\n gem ‘bootstrap’, ‘~> 5.3.0’<\/span> @import “bootstrap”;<\/span><\/p>\n Make sure the file has .scss extension (or .sass for Sass syntax). If you have just generated a new Rails app, it may come with a .css file instead. If this file exists, it will be served instead of Sass, so rename it.<\/li>\n \/\/= require popper<\/span> Popper.js is necessary because Bootstrap relies on it to position interactive elements such as dropdowns, tooltips, and popovers. Without it, these components may not function correctly.<\/li>\n<\/ol>\n This approach gives you more flexibility and control, especially if you need to customize Bootstrap or keep up with the latest updates. This approach works with Rails 5.1+, Rails 6 and Rails 7. For Rails 7, If you’re using esbuild or import maps instead of Webpacker, you’ll need to adjust the way dependencies are managed and imported, as these tools handle JavaScript bundling and asset management differently. It\u2019s easier to stay up-to-date with the latest Bootstrap releases using this approach, and it offers greater control over customization, as well as the ability to eliminate unused parts of Bootstrap through tree-shaking. However, the setup is slightly more complex compared to the gem-based approach.<\/p>\n Steps:<\/strong><\/p>\n yarn add bootstrap jquery @popperjs\/core<\/span> const { environment } = require(‘@rails\/webpacker’)<\/span> @import “bootstrap\/scss\/bootstrap”;<\/span> <\/li>\n import ‘bootstrap’;<\/span> <\/li>\n <%= stylesheet_link_tag ‘application’, media: ‘all’, ‘data-turbolinks-track’: ‘reload’ %><\/span> If you prioritize simplicity and Rails integration, use the gem-based approach. For flexibility, modern JavaScript workflows, and easier upgrades, opt for the npm\/Yarn method. Both approaches can handle customizations efficiently, but npm\/Yarn offers more control and future-proofing.<\/p>\n","protected":false},"excerpt":{"rendered":" The best way to install and manage Bootstrap in a Rails application is to integrate it using a modern, maintainable, and flexible approach that leverages the Rails asset pipeline and facilitates future updates and customizations. Here are two widely-used methods: 1. Using the bootstrap Ruby gem: This method allows you to easily integrate Bootstrap with […]<\/p>\n","protected":false},"author":1,"featured_media":11909,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"footnotes":""},"categories":[11],"tags":[],"class_list":["post-11908","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ruby-on-rails"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/11908"}],"collection":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/comments?post=11908"}],"version-history":[{"count":1,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/11908\/revisions"}],"predecessor-version":[{"id":11910,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/posts\/11908\/revisions\/11910"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/media\/11909"}],"wp:attachment":[{"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/media?parent=11908"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/categories?post=11908"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bacancytechnology.com\/qanda\/wp-json\/wp\/v2\/tags?post=11908"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}\n
\ngem ‘sassc-rails’, ‘~> 2.1’ # For SASS support<\/span><\/li>\n
\n(app\/assets\/stylesheets\/application.scss):<\/p>\n
\n\/\/= require bootstrap<\/span><\/p>\n2. Using yarn or npm to manage Bootstrap:<\/h3>\n
\n
\n# OR<\/span>
\nnpm install bootstrap jquery @popperjs\/core<\/span> <\/li>\n
\nconst webpack = require(“webpack”)<\/span>
\nenvironment.plugins.append(“Provide”, new webpack.ProvidePlugin({<\/span>
\n$: ‘jquery’,<\/span>
\njQuery: ‘jquery’,<\/span>
\nPopper: [‘popper.js’, ‘default’]<\/span>
\n}))<\/span>
\nmodule.exports = environment<\/span> <\/li>\n
\n<%= javascript_pack_tag ‘application’, ‘data-turbolinks-track’: ‘reload’ %><\/span><\/li>\n<\/ol>\n