Rails 7: Bootstrap gem vs ImportMaps

[collimarco]

It seems that the Bootstrap gem is not fully compatible with Rails 7.

I see in this example app that you use both the Bootstrap gem and ImportMaps.

Can we get rid of one of them (e.g. remove the gem and use only ImportMaps)?

Or does SimpleForm require the gem?

[collimarco]

And there is also cssbundling-rails, or Yarn, or Webpacker, or CDN as other alternatives to import Bootstrap... It's a real mess.

Does SimpleForm require Bootstrap imported with any method? Or it relies on something specific to work?

[m5o]

Hey @collimarco 👋 You raise a few different points here, I'll try to answer them.

The architecture of the twbs/bootstrap-rubygem gem is based on a pre-webpacker setup. Rails 7 and twbs/bootstrap-rubygem are compatible, may not be out-of-the-box but it works with some tweaks. For example, organizing javascript under app/assets/javascripts. Either node or yarn are needed for this setup. Good old' asset pipeline sprockets setup.

For this example app, the bootstrap-rubygem serve the SCSS assets of bootstrap. For details please take a look inside assets/stylesheets/application.scss Here the stock-bootstrap styles are loaded, additional theme customization is made and further styles are bundled together.

rails/importmap-rails however is used for link only to the javascript assets. Because the bootstrap js-tooltips required an additional opt-in setup this was the preferred way over a simple CDN import. Details & setup are in: app/javascript/app.js

Both the gem and the importmap are required in this example setup. We are using a node and yarn less environment and want to be close to a default rails application. With this setup, dependency management is easy.

SimpleForm has no gem dependency to bootstrap-rubygem, how you finally manage your assets is up to you.

rails/cssbundling-rails is a new approach that requires node and friends. If this fits your frontend gusto, go ahead with this approach. There is no "right" way, we now have options... 😁 ✌️