Bootstrap 4 -enabling Rails 5.02

To integrate bootstrap into my Rails 5.02 app, these are the steps taken by me :

1. rails new boots4rails -d mysql

2. rails g scaffold Todo title:string notes:text

      invoke    scss
      create      app/assets/stylesheets/todos.scss
      invoke  scss
      create    app/assets/stylesheets/scaffolds.scss

3. rails db:create

C:\PRJ4RAILS\boots4rails>rails db:create

Created database 'boots4rails_development'

Created database 'boots4rails_test'

4. rails db:migrate

C:\PRJ4RAILS\boots4rails>rails db:migrate

== 20170326123016 CreateTodos: migrating ======================================

-- create_table(:todos)

   -> 0.1902s

== 20170326123016 CreateTodos: migrated (0.1914s) =============================

5. Add in db/seed.rb

Todo.create!(title: 'grocery shopping', notes: 'pickles, eggs, red onion')
Todo.create!(title: 'wash the car')
Todo.create!(title: 'register kids for school', notes: 'Register Kira for Ruby Junior High and Caleb for Rails High School')
Todo.create!(title: 'check engine light', notes: 'The check engine light is on in the Tacoma')
Todo.create!(title: 'dog groomers', notes: 'Take Pinky and Redford to the groomers on Wednesday the 23rd')

# db/seeds.rb

Then, 
C:\PRJ4RAILS\boots4rails>rails db:seed

6. Set up simple route in config/routes.rb

Rails.application.routes.draw do

  resources :todos

  root 'todos#index'

end

7. Start Rails Server - rails s

C:\PRJ4RAILS\boots4rails>rails s

=> Booting Puma

=> Rails 5.0.2 application starting in development on http://localhost:3000

=> Run `rails server -h` for more startup options

*** SIGUSR2 not implemented, signal based restart unavailable!

*** SIGUSR1 not implemented, signal based restart unavailable!

*** SIGHUP not implemented, signal based logs reopening unavailable!

Puma starting in single mode...

* Version 3.8.2 (ruby 2.2.6-p396), codename: Sassy Salamander

* Min threads: 5, max threads: 5

* Environment: development

* Listening on tcp://localhost:3000

Use Ctrl-C to stop

8.  goto localhost:3000

9.  Install ruby gem for bootstrap in gem file

gem 'bootstrap-sass', '~> 3.2.0'
gem 'autoprefixer-rails'

and bundle install

10.  Import Bootstrap CSS assets

Rename application.css to application.css.sass

C:\PRJ4RAILS\boots4rails\app\assets\stylesheets>ren application.css *.css.sass

Add in the renamed application.css.sass
@import "bootstrap-sprockets"

@import "bootstrap"

11.  Import Bootstrap Javascript Assets

Add in app/assets/javscripts/application.js like:

//= require jquery //= require jquery_ujs //= require turbolinks //= require bootstrap-sprockets //= require_tree .

Nb Critical that require_tree is last item. Also must come after require jquery

The reason is, //= require_tree . compiles each of the other Javascript files in the javascripts directory and any subdirectories. If you require bootstrap-sprockets after everything else, your other scripts may not have access to the Bootstrap functions.

12.  Now, goto localhost:3000

That's it :-) Compare the two screenshots before and after integrating bootstrap.

More at
CSS & Components

Javascript-based Features