Bootstrap

Bootstrap

Add Bootstrap gem, generate SimpleForm for Bootstrap and restart server

echo "gem 'bootstrap-sass', '~> 3.3.5'" >> Gemfile
bundle install
rails g simple_form:install --bootstrap
rails s

Add Bootstrap Sprokets to JS, remove application.css and create application.scss

echo "//= require bootstrap-sprockets" >> app/assets/javascripts/application.js
rm app/assets/stylesheets/application.css

nano app/assets/stylesheets/application.scss

@import "bootstrap-sprockets";
@import "bootstrap";

Add basic HTML to layout

nano app/views/layouts/application.html.erb

<nav class="navbar navbar-inverse">
  <div class="container">
    <div id="navbar">
      <ul class="nav navbar-nav">
        <%= link_to('Rails Apz', '/', class: 'navbar-brand') %>
        <li><%= link_to('Articles', articles_path) %></li>
        <li><%= link_to('Authors', authors_path) %></li>
      </ul>
    </div>
  </div>
</nav>
<div class="container">
  <%= yield %>
</div>

Generate welcome page

rails g controller Welcome index --no-helper --no-assets --no-test-framework

Set root route to welcome index

nano config/routes.rb

Rails.application.routes.draw do
  root 'welcome#index'

Customize view

nano app/views/welcome/index.html.erb

<div class="jumbotron">
  <h1>Rails Apz</h1>
  <p>The guide to build a Rails app from a to z.</p>
  <p>
    <a class="btn btn-lg btn-primary" href="https://github.com/jp7internet/rails-apz" role="button">View On GitHub</a>
  </p>
</div>

Add Bootstrap classes in tables and buttons

nano app/views/articles/index.html.erb;nano app/views/authors/index.html.erb

<table class="table">
<%= link_to 'New Author', new_author_path, class: 'btn btn-primary' %>
<%= link_to 'New Article', new_article_path, class: 'btn btn-primary' %>

nano app/views/articles/_form.html.erb;nano app/views/authors/_form.html.erb

<%= f.button :submit, class: 'btn btn-primary' %>

Create partial to show flash messages

nano app/views/layouts/_flash.html.erb

<% flash.each do |name, msg| %>
  <%= content_tag :div, msg, class: "alert alert-#{name == 'notice' ? 'info' : name}" %>
<% end %>

Replace Rails default notice tag with flash from index and show views

nano app/views/articles/index.html.erb; \
nano app/views/articles/show.html.erb;  \
nano app/views/authors/index.html.erb;  \
nano app/views/authors/show.html.erb

<%= render 'layouts/flash' %>
<!-- <p id="notice"><%= notice %></p> -->

Open forms in the browser to check the results

open http://localhost:3000/articles

open http://localhost:3000/articles/new

Add Bootstrap to Git

git add .
git commit -m "Add Bootstrap"

Next step: Ajax CRUD