Bootstrap (Bootstrap 5, Turbo support)

Public

Turbo compatible: Add Bootstrap 5 to your Rails app using Webpacker with this app template. Includes Popper.js

Used 1069 times

• Created by

A Andrea Fomera

Usage

Run this command in your Rails app directory in the terminal:

rails app:template LOCATION="https://railsbytes.com/script/xkjs12"

Template Source

Review the code before running this template on your machine.

def yarn(*packages)
  run("yarn add #{packages.join(" ")}")
end

yarn '@popperjs/core', 'bootstrap'

inject_into_file 'config/webpack/environment.js', after: "const { environment } = require('@rails/webpacker')\n" do <<~EOF
  const webpack = require('webpack')
  environment.plugins.append('Provide', new webpack.ProvidePlugin({
    Popper: ['popper.js', 'default']
  }))
  EOF
end

inject_into_file 'app/views/layouts/application.html.erb', before: '</head>' do <<-EOF
  <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbo-track': 'reload' %>
  EOF
end
  
inject_into_file 'app/javascript/packs/application.js' do <<~EOF
import 'bootstrap/dist/js/bootstrap'
import 'bootstrap/dist/css/bootstrap'
  EOF
end

Comments

Juanse

Hi Andrea, I'm trying to follow your course, but since the installation was made using webpack and Rails 7 comes by default with import_maps, it doesn't work. Any workaround? I don't know what to do at this point.

diegodev9

Use this post to install bootstrap 5 in rails 7 with importmaps. Works like a charm