Bootstrap v4

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


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}")

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']

inject_into_file 'app/javascript/packs/application.js', after: "require(\"channels\")\n" do <<~EOF
import 'bootstrap/dist/js/bootstrap'
import 'bootstrap/dist/css/bootstrap'

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>

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 ?
    by moktardev at 4:29PM, 11 Jul 2020