Bootstrap

Public

Add Bootstrap to your Rails app using Webpacker with this app template.

Used 2435 times

• Created by

C Chris Oliver

Usage

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

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

Template Source

Review the code before running this template on your machine.

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

yarn 'jquery', 'popper.js', '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({
    $: 'jquery',
    jQuery: 'jquery',
    'window.jQuery': 'jquery',
    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-turbolinks-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

Viktor Schmidt

Hey Chris, thank you for this nice and short template.

Could you please add versions to you Yarn packages, add Bootstrap variables and, if possible, to add Bootstrap Icons?!
See:
https://getbootstrap.com/docs/4.5/getting-started/theming/#importing
https://icons.getbootstrap.com/#install
https://rubygems.org/gems/bootstrap-icons-helper

Would be great! Thank you!

Cheers,
Viktor

Josh Teperman

I forked this as it seems to be missing popperjs/core dependency :)

yarn 'jquery', 'popper.js', '@popperjs/core', 'bootstrap'

https://railsbytes.com/public/templates/V2GsA5