Bootstrap v5

forked from Bootstrap v5

Use cssbundling-rails and bootstrap now.

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 969 2

Dave Kimura
Dave Kimura

Mar 10, 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}")

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

yarn 'bootstrap@next'
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' %>

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

append_to_file 'app/javascript/packs/application.js' do <<~EOF
import * as bootstrap from 'bootstrap'
import "../stylesheets/application"

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>

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

<!-- 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 class="modal-body">
      <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>

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!