Bootstrap v4

Build responsive, mobile-first projects on the web with the world’s most popular front-end component library.
css framework 176 0

Fork

Dave Kimura
Dave Kimura

May 08, 2020

Copy and paste this code into your terminal

DISCLAIMER: You should always review templates before running them. By running the template, you are agreeing to the terms of use.

The contents of this script as show. Any updates will be reflected in the below code and the snippet.

# frozen_string_literal: true
def yarn(lib)
  run("yarn add #{lib}")
end

run("yarn install")
generate(:controller, 'bootstrap', 'index')

yarn 'jquery'
yarn 'popper.js'
yarn '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/javascript/packs/application.js', after: "require(\"channels\")\n" do <<~EOF
import 'bootstrap/dist/js/bootstrap'
import 'bootstrap/dist/css/bootstrap'
  EOF
end

inject_into_file 'app/views/bootstrap/index.html.erb', after: "<p>Find me in app/views/bootstrap/index.html.erb</p>\n" do <<~EOF
<div class="spinner-border text-primary" role="status">
  <span class="sr-only">Loading...</span>
</div>
EOF
end

say "all done. start your server and navigate to http://localhost:3000/bootstrap/index to test that it's working"

A place where you can thank the author, post problems, give constructive feedback, etc. Be nice!

  • Dave Kimura
    I hope to be adding some TailWind CSS templates soon. Any other CSS Frameworks wanted?
    by Dave Kimura at 4:31AM, 13 May 2020
  • moktardev
    can we have https://ant.design/ ?
    by moktardev at 4:29PM, 11 Jul 2020