Bootstrap v5

forked from Bootstrap v5

Get started with Bootstrap, the world’s most popular framework for building responsive, mobile-first sites, with jsDelivr and a template starter page.
css framework 47 0


abderrahmenne
abderrahmenne

Apr 07, 2021

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 '[email protected]'
yarn '@popperjs/core'

inject_into_file 'app/views/layouts/application.html.erb', after: "<%= csp_meta_tag %>\n" do <<-EOF
    <%= stylesheet_pack_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
  EOF
end

file 'app/javascript/stylesheets/application.scss' do <<~EOF
@import "bootstrap"
  EOF
end

append_to_file 'app/javascript/packs/application.js' do <<~EOF
import * as bootstrap from 'bootstrap'
import "../stylesheets/application"
  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>

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</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!