Update bootstrap to version 4 (#746)

* Update bootstrap 3 to 4

* Update bootstrap 3 to 4 for ecr

* Update for bootstrap 4, add row class div

* Add col-sm for bootstrap 4 row

* #746 fix indentations

* #746 Remove col-md-6 from index.slang.ecr

* #746 change jquery-slim to jquery

* #746 migrate pull-right to ml-auto for auth links

* #746 btn-xs to btn-sm. btn-xs is removed

* #746 btn-default has removed. change to btn-light

* #746 update checkbox for bootstrap 4

* #746 vertical-align: middle; for bootstrap 4 tables

* #746 update alert classs for bootstrap 4

* #746 remove ml-auto, need to fix auth links are on the right side of navbar

* #746 using only class and id for div

* #746 fix checkbox template

* #746 remove checkbox class for testing

* #746 FOR TEST update checkbox class

* #746 Using only class name with div

* #746 pulling  auth navigation item  on the right side of navigation bar

* #746 replace indentation tab to spaces

spec/support/fixtures/render_fixtures.cr

@@ -13,8 +13,8 @@ module RenderFixtures
       <div class="form-group">
         <textarea class="form-control" rows="10" name="content" placeholder="Content">out there in the cold</textarea>
       </div>
-      <button class="btn btn-primary btn-xs" type="submit">Submit</button>
-      <a class="btn btn-default btn-xs" href="/posts">back</a>
+      <button class="btn btn-primary btn-sm" type="submit">Submit</button>
+      <a class="btn btn-light btn-sm" href="/posts">back</a>
     </form>
     HTML
   end

spec/support/sample/views/test/_form.slang

@@ -1,8 +1,8 @@
 form action="/posts" method="post"
   == csrf_tag
-  div.form-group
+  .form-group
     input.form-control type="text" name="title" placeholder="Title" value="hey you"
-  div.form-group
-    textarea.form-control rows="10" name="content" placeholder="Content" = "out there in the cold" 
-  button.btn.btn-primary.btn-xs type="submit" Submit
-  a.btn.btn-default.btn-xs href="/posts" back
+  .form-group
+    textarea.form-control rows="10" name="content" placeholder="Content" = "out there in the cold"
+  button.btn.btn-primary.btn-sm type="submit" Submit
+  a.btn.btn-light.btn-sm href="/posts" back

src/amber/cli/templates/app/src/assets/stylesheets/main.scss

@@ -90,3 +90,28 @@ h6, .h6 {
     display: none;
   }
 }
+
+.table td, .table th {
+  vertical-align: middle;
+}
+
+.alert {
+  margin-top: 1em;
+
+  p {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+}
+
+// For Navigation pulling right
+.nav-item-auth {
+  &.nav-item-auth-signout, &.nav-item-auth-signup {
+    order: 9999;
+  }
+
+  &.nav-item-auth-profile, &.nav-item-auth-signin {
+    order: 9990;
+    margin-left: auto;
+  }
+}

src/amber/cli/templates/app/src/views/home/index.ecr.ecr

@@ -1,10 +1,12 @@
-<div id="logo" class="col-sm-6"></div>
-<div class="col-sm-6">
-  <h2><%= "<" %>%= t "welcome_to_amber" %></h2>
-  <p>Thank you for trying out the Amber Framework.  We are working hard to provide a super fast and reliable framework that provides all the productivity tools you are used to without sacrificing the speed.</p>
-  <div class="list-group">
-    <a class="list-group-item list-group-item-action" target="_blank" href="https://docs.amberframework.org">Getting Started with Amber Framework</a>
-    <a class="list-group-item list-group-item-action" target="_blank" href="https://github.com/veelenga/awesome-crystal">List of Awesome Crystal projects and shards</a>
-    <a class="list-group-item list-group-item-action" target="_blank" href="https://crystalshards.xyz">What's hot in Crystal right now</a>
+<div class="row">
+  <div id="logo"></div>
+  <div class="col-sm-6">
+    <h2><%= "<" %>%= t "welcome_to_amber" %></h2>
+    <p>Thank you for trying out the Amber Framework.  We are working hard to provide a super fast and reliable framework that provides all the productivity tools you are used to without sacrificing the speed.</p>
+    <div class="list-group">
+      <a class="list-group-item list-group-item-action" target="_blank" href="https://docs.amberframework.org">Getting Started with Amber Framework</a>
+      <a class="list-group-item list-group-item-action" target="_blank" href="https://github.com/veelenga/awesome-crystal">List of Awesome Crystal projects and shards</a>
+      <a class="list-group-item list-group-item-action" target="_blank" href="https://crystalshards.xyz">What's hot in Crystal right now</a>
+    </div>
   </div>
 </div>

src/amber/cli/templates/app/src/views/home/index.slang.ecr

@@ -1,8 +1,9 @@
-div#logo.col-sm-6
-div.col-sm-6
-  h2 = t "welcome_to_amber"
-  p Thank you for trying out the Amber Framework.  We are working hard to provide a super fast and reliable framework that provides all the productivity tools you are used to without sacrificing the speed.
-  div.list-group
-    a.list-group-item.list-group-item-action target="_blank" href="https://docs.amberframework.org" Getting Started with Amber Framework
-    a.list-group-item.list-group-item-action target="_blank" href="https://github.com/veelenga/awesome-crystal" List of Awesome Crystal projects and shards
-    a.list-group-item.list-group-item-action target="_blank" href="https://crystalshards.xyz" What's hot in Crystal right now
+.row
+  #logo
+  .col-sm-6
+    h2 = t "welcome_to_amber"
+    p Thank you for trying out the Amber Framework.  We are working hard to provide a super fast and reliable framework that provides all the productivity tools you are used to without sacrificing the speed.
+    .list-group
+      a.list-group-item.list-group-item-action target="_blank" href="https://docs.amberframework.org" Getting Started with Amber Framework
+      a.list-group-item.list-group-item-action target="_blank" href="https://github.com/veelenga/awesome-crystal" List of Awesome Crystal projects and shards
+      a.list-group-item.list-group-item-action target="_blank" href="https://crystalshards.xyz" What's hot in Crystal right now

src/amber/cli/templates/app/src/views/layouts/application.ecr.ecr

@@ -5,7 +5,7 @@
     <meta charset="utf-8" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
+    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
     <link rel="stylesheet" href="/dist/main.bundle.css">
   </head>
   <body>
@@ -19,11 +19,13 @@
 
     <div class="container">
       <div class="row">
-        <%="<"%>%- flash.each do |key, value| %>
-          <div class="alert alert-<%="<"%>%= key %>">
-            <p><%="<"%>%= flash[key] %></p>
-          </div>
-        <%="<"%>%- end %>
+        <div class="col-sm">
+          <%="<"%>%- flash.each do |key, value| %>
+            <div class="alert alert-<%="<"%>%= key %>">
+              <p><%="<"%>%= flash[key] %></p>
+            </div>
+          <%="<"%>%- end %>
+        </div>
       </div>
 
       <div class="row">
@@ -32,8 +34,9 @@
         </div>
       </div>
 
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
-    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
+    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
+    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
     <script src="/dist/main.bundle.js"></script>
   </body>
 </html>

src/amber/cli/templates/app/src/views/layouts/application.slang.ecr

@@ -5,23 +5,25 @@ html
     meta charset="utf-8"
     meta http-equiv="X-UA-Compatible" content="IE=edge"
     meta name="viewport" content="width=device-width, initial-scale=1"
-    link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
+    link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"
     link rel="stylesheet" href="/dist/main.bundle.css"
 
   body
-    div.masthead
-      div.container
+    .masthead
+      .container
         nav.nav
           == render(partial: "layouts/_nav.slang")
-    div.container
-      div.row
-        - flash.each do |key, value|
-          div class="alert alert-#{key}"
-            p = flash[key]
-      div.row
-        div.col-sm-12.main
+    .container
+      .row
+        .col-sm
+          - flash.each do |key, value|
+            div class="alert alert-#{key}"
+              p = flash[key]
+      .row
+        .col-sm-12.main
           == content
 
-    script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"
-    script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
+    script src="https://code.jquery.com/jquery-3.3.1.min.js"
+    script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"
+    script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"
     script src="/dist/main.bundle.js"

src/amber/cli/templates/auth/src/views/layouts/+_nav.ecr.ecr

@@ -1,10 +1,10 @@
 <%="<"%>%- if (current_<%= @name %> = context.current_<%= @name %>) %>
-  <a class="nav-item pull-right" href="/signout">| Sign Out</a>
+  <a class="nav-item nav-item-auth nav-item-auth-signout" href="/signout">| Sign Out</a>
   <%="<"%>%- active = context.request.path == "/profile" ? "active" : "" %>
-  <a class="nav-item <%="<"%>%= active %> pull-right" href="/profile"><%="<"%>%= current_<%= @name %>.email %></a>
+  <a class="nav-item nav-item-auth nav-item-auth-profile <%="<"%>%= active %>" href="/profile"><%="<"%>%= current_<%= @name %>.email %></a>
 <%="<"%>%- else %>
   <%="<"%>%- active = context.request.path == "/signup" ? "active" : "" %>
-  <a class="nav-item <%="<"%>%= active %> pull-right" href="/signup">| Sign Up</a>
+  <a class="nav-item nav-item-auth nav-item-auth-signup <%="<"%>%= active %>" href="/signup">| Sign Up</a>
   <%="<"%>%- active = context.request.path == "/signin" ? "active" : "" %>
-  <a class="nav-item <%="<"%>%= active %> pull-right" href="/signin">| Sign In</a>
+  <a class="nav-item nav-item-auth nav-item-auth-signin <%="<"%>%= active %>" href="/signin">| Sign In</a>
 <%="<"%>%- end %>

src/amber/cli/templates/auth/src/views/layouts/+_nav.slang.ecr

@@ -1,13 +1,13 @@
 - if (current_<%= @name %> = context.current_<%= @name %>)
-  a.nav-item.pull-right href="/signout"
+  a.nav-item.nav-item-auth.nav-item-auth-signout href="/signout"
     | Sign Out
   - active = context.request.path == "/profile" ? "active" : ""
-  a class="nav-item #{active} pull-right" href="/profile"
+  a class="nav-item nav-item-auth nav-item-auth-profile #{active}" href="/profile"
     == current_<%= @name %>.email
 - else
   - active = context.request.path == "/signup" ? "active" : ""
-  a class="nav-item #{active} pull-right" href="/signup"
+  a class="nav-item nav-item-auth nav-item-auth-signup #{active}" href="/signup"
     | Sign Up
   - active = context.request.path == "/signin" ? "active" : ""
-  a class="nav-item #{active} pull-right" href="/signin"
+  a class="nav-item nav-item-auth nav-item-auth-signin #{active}" href="/signin"
     | Sign In

src/amber/cli/templates/auth/src/views/registration/new.ecr.ecr

@@ -16,7 +16,7 @@
   <div class="form-group">
     <input class="form-control" type="password" name="password" placeholder="Password"/>
   </div>
-  <button class="btn btn-primary btn-xs" type="submit">Register</button>
+  <button class="btn btn-primary btn-sm" type="submit">Register</button>
 </form>
 <hr/>
 <%="<"%>%= link_to("Already have an account?", "/signin") -%>

src/amber/cli/templates/auth/src/views/registration/new.slang.ecr

@@ -11,7 +11,7 @@ form action="/registration" method="post"
     input.form-control type="email" name="email" placeholder="Email"
   .form-group
     input.form-control type="password" name="password" placeholder="Password"
-  button.btn.btn-primary.btn-xs type="submit"
+  button.btn.btn-primary.btn-sm type="submit"
     | Register
 <hr/>
 == link_to("Already have an account?", "/signin")

src/amber/cli/templates/auth/src/views/session/new.ecr.ecr

@@ -16,7 +16,7 @@
   <div class="form-group">
     <input class="form-control" type="password" name="password" placeholder="Password"/>
   </div>
-  <button class="btn btn-primary btn-xs" type="submit">Sign In</button>
+  <button class="btn btn-primary btn-sm" type="submit">Sign In</button>
 </form>
 <hr/>
 <%="<"%>%= link_to("Don't have an account yet?", "/signup") -%>

src/amber/cli/templates/auth/src/views/session/new.slang.ecr

@@ -7,10 +7,10 @@ h1 Sign In
 
 form action="/session" method="post"
   == csrf_tag
-  div.form-group
+  .form-group
     input.form-control type="email" name="email" placeholder="Email"
-  div.form-group
+  .form-group
     input.form-control type="password" name="password" placeholder="Password"
-  button.btn.btn-primary.btn-xs type="submit" Sign In
+  button.btn.btn-primary.btn-sm type="submit" Sign In
 <hr/>
 == link_to("Don't have an account yet?", "/signup")

src/amber/cli/templates/auth/src/views/{{name}}/edit.ecr.ecr

@@ -13,6 +13,6 @@
   <div class="form-group">
     <input class="form-control" type="email" name="email" placeholder="Email" value="<%="<"%>%= <%= @name %>.email %>" />
   </div>
-  <%="<"%>%= submit("Update", class: "btn btn-primary btn-xs") %>
-  <%="<"%>%= link_to("profile", "/profile", class: "btn btn-default btn-xs") %>
+  <%="<"%>%= submit("Update", class: "btn btn-primary btn-sm") %>
+  <%="<"%>%= link_to("profile", "/profile", class: "btn btn-light btn-sm") %>
 </form>

src/amber/cli/templates/auth/src/views/{{name}}/edit.slang.ecr

@@ -9,5 +9,5 @@ h1 Edit Profile
   == csrf_tag
   .form-group
     input.form-control type="email" name="email" placeholder="Email" value="#{<%= @name %>.email}"
-  == submit("Update", class: "btn btn-primary btn-xs")
-  == link_to("profile", "/profile", class: "btn btn-default btn-xs")
+  == submit("Update", class: "btn btn-primary btn-sm")
+  == link_to("profile", "/profile", class: "btn btn-light btn-sm")

src/amber/cli/templates/auth/src/views/{{name}}/show.ecr.ecr

@@ -1,5 +1,5 @@
 <h1>Profile</h1>
 <p>
   <%="<"%>%= <%= @name %>.email %>
-  <%="<"%>%= link_to("edit", "/profile/edit", class: "btn btn-success btn-xs") %>
+  <%="<"%>%= link_to("edit", "/profile/edit", class: "btn btn-success btn-sm") %>
 </p>

src/amber/cli/templates/auth/src/views/{{name}}/show.slang.ecr

@@ -1,4 +1,4 @@
 h1 Profile
 p
   == <%= @name %>.email
-  == link_to("edit", "/profile/edit", class: "btn btn-success btn-xs")
+  == link_to("edit", "/profile/edit", class: "btn btn-success btn-sm")

src/amber/cli/templates/scaffold/view/src/views/{{name}}/_form.ecr.ecr

@@ -21,9 +21,10 @@
    when "text" -%>
     <%="<"%>%= text_area(name: "<%= field.name -%>", content: <%= @name %>.<%= field.name %>, placeholder: "<%= field.name.capitalize %>", class: "form-control", size: "30x10") -%>
 <% when "boolean" -%>
-    <div class="checkbox">
-      <%="<"%>%= label(<%=":#{field.name}"%>) { check_box(<%=":#{field.name}, checked: #{@name}.#{field.name}.to_s == \"1\""%>) } -%>
-    </div>
+  <%="<"%>%= label(<%=":#{field.name}"%>, class: "form-check-label") do
+    check_box(<%=":#{field.name}, checked: #{@name}.#{field.name}.to_s == \"1\""%>,
+              class: "form-check-input")
+  end -%>
 <% when "reference" -%>
     <%="<"%>%= label(<%=":#{field.name}"%>) -%>
     <%="<"%>%= select_field(name: "<%= field.name %>_id", collection: <%= field.name.capitalize %>.all.map{|<%= field.name %>| [<%= field.name %>.id, <%= field.name %>.id]}, selected: <%= @name %>.<%= field.name %>_id, class: "form-control") -%>
@@ -32,6 +33,6 @@
 <% end -%>
   </div>
 <% end -%>
-  <%="<"%>%= submit("Submit", class: "btn btn-primary btn-xs") -%>
-  <%="<"%>%= link_to("back", "/<%= Inflector.pluralize(@name) %>", class: "btn btn-default btn-xs") -%>
+  <%="<"%>%= submit("Submit", class: "btn btn-primary btn-sm") -%>
+  <%="<"%>%= link_to("back", "/<%= Inflector.pluralize(@name) %>", class: "btn btn-light btn-sm") -%>
 </form>

src/amber/cli/templates/scaffold/view/src/views/{{name}}/_form.slang.ecr

@@ -6,12 +6,11 @@
 == form(action: "/<%= Inflector.pluralize(@name) -%>/#{<%= @name -%>.id.to_s}", method: <%= @name %>.id ? :patch : :post) do
   == csrf_tag
 <%- @fields.reject{|f| f.hidden }.each do |field| -%>
-  div.form-group
+  .form-group
   <%- case field.type
      when "text" -%>
     == text_area(name: "<%= field.name -%>", content: <%= @name %>.<%= field.name %>, placeholder: "<%= field.name.capitalize %>", class: "form-control", size: "30x10")
   <%- when "boolean" -%>
-    div.checkbox
       == label(<%=":#{field.name}"%>) do
         == check_box(<%=":#{field.name}, checked: #{@name}.#{field.name}.to_s == \"1\""%>)
   <%- when "reference" -%>
@@ -21,5 +20,5 @@
     == text_field(name: "<%= field.name %>", value: <%= @name %>.<%= field.name %>, placeholder: "<%= field.name.capitalize %>", class: "form-control")
   <%- end -%>
 <%- end -%>
-  == submit("Submit", class: "btn btn-primary btn-xs")
-  == link_to("back", "/<%= Inflector.pluralize(@name) %>", class: "btn btn-default btn-xs")
+  == submit("Submit", class: "btn btn-primary btn-sm")
+  == link_to("back", "/<%= Inflector.pluralize(@name) %>", class: "btn btn-light btn-sm")

src/amber/cli/templates/scaffold/view/src/views/{{name}}/index.ecr.ecr

@@ -3,7 +3,7 @@
     <h2><%= Inflector.pluralize(display_name) %></h2>
   </div>
   <div class="col-sm-1">
-    <a class="btn btn-success btn-xs" href="/<%= Inflector.pluralize(@name) %>/new">New</a>
+    <a class="btn btn-success btn-sm" href="/<%= Inflector.pluralize(@name) %>/new">New</a>
   </div>
 </div>
 
@@ -24,9 +24,9 @@
 <% end -%>
         <td>
           <span>
-            <%="<"%>%= link_to("read", "/<%= Inflector.pluralize(@name) %>/#{<%= @name %>.id}", class: "btn btn-primary btn-xs") -%>
-            <%="<"%>%= link_to("edit", "/<%= Inflector.pluralize(@name) %>/#{<%= @name %>.id}/edit", class: "btn btn-success btn-xs") -%>
-            <%="<"%>%= link_to("delete", "/<%= Inflector.pluralize(@name) %>/#{<%= @name %>.id}?_csrf=#{csrf_token}", "data-method": "delete", "data-confirm": "Are you sure?", class: "btn btn-danger btn-xs") -%>
+            <%="<"%>%= link_to("read", "/<%= Inflector.pluralize(@name) %>/#{<%= @name %>.id}", class: "btn btn-primary btn-sm") -%>
+            <%="<"%>%= link_to("edit", "/<%= Inflector.pluralize(@name) %>/#{<%= @name %>.id}/edit", class: "btn btn-success btn-sm") -%>
+            <%="<"%>%= link_to("delete", "/<%= Inflector.pluralize(@name) %>/#{<%= @name %>.id}?_csrf=#{csrf_token}", "data-method": "delete", "data-confirm": "Are you sure?", class: "btn btn-danger btn-sm") -%>
           </span>
         </td>
       </tr>

src/amber/cli/templates/scaffold/view/src/views/{{name}}/index.slang.ecr

@@ -1,9 +1,9 @@
-div.row
-  div.col-sm-11
+.row
+  .col-sm-11
     h2 <%= Inflector.pluralize(display_name) %>
-  div.col-sm-1
-    a.btn.btn-success.btn-xs href="/<%= Inflector.pluralize(@name) %>/new" New
-div.table-responsive
+  .col-sm-1
+    a.btn.btn-success.btn-sm href="/<%= Inflector.pluralize(@name) %>/new" New
+.table-responsive
   table.table.table-striped
     thead
       tr
@@ -19,6 +19,6 @@ div.table-responsive
           <%- end -%>
           td
             span
-              == link_to("read", "/<%= Inflector.pluralize(@name) %>/#{<%= @name %>.id}", class: "btn btn-primary btn-xs")
-              == link_to("edit", "/<%= Inflector.pluralize(@name) %>/#{<%= @name %>.id}/edit", class: "btn btn-success btn-xs")
-              == link_to("delete", "/<%= Inflector.pluralize(@name) %>/#{ <%= @name %>.id }?_csrf=#{csrf_token}", "data-method": "delete", "data-confirm": "Are you sure?", class: "btn btn-danger btn-xs")
+              == link_to("read", "/<%= Inflector.pluralize(@name) %>/#{<%= @name %>.id}", class: "btn btn-primary btn-sm")
+              == link_to("edit", "/<%= Inflector.pluralize(@name) %>/#{<%= @name %>.id}/edit", class: "btn btn-success btn-sm")
+              == link_to("delete", "/<%= Inflector.pluralize(@name) %>/#{ <%= @name %>.id }?_csrf=#{csrf_token}", "data-method": "delete", "data-confirm": "Are you sure?", class: "btn btn-danger btn-sm")

src/amber/cli/templates/scaffold/view/src/views/{{name}}/show.ecr.ecr

@@ -4,7 +4,7 @@
 <p><%="<"%>%= <%= @name %>.<%= field.name %><%= field.reference? ? ".id" : "" %> %></p>
 <% end -%>
 <p>
-  <%="<"%>%= link_to("back", "/<%= Inflector.pluralize(@name) %>s", class: "btn btn-default btn-xs") -%>
-  <%="<"%>%= link_to("edit", "/<%= Inflector.pluralize(@name) %>/#{<%= @name %>.id}/edit", class: "btn btn-success btn-xs") -%>
-  <%="<"%>%= link_to("delete", "/<%= Inflector.pluralize(@name) %>/#{<%= @name %>.id}?_csrf=#{csrf_token}", "data-method": "delete", "data-confirm": "Are you sure?", class: "btn btn-danger btn-xs") -%>
+  <%="<"%>%= link_to("back", "/<%= Inflector.pluralize(@name) %>s", class: "btn btn-light btn-sm") -%>
+  <%="<"%>%= link_to("edit", "/<%= Inflector.pluralize(@name) %>/#{<%= @name %>.id}/edit", class: "btn btn-success btn-sm") -%>
+  <%="<"%>%= link_to("delete", "/<%= Inflector.pluralize(@name) %>/#{<%= @name %>.id}?_csrf=#{csrf_token}", "data-method": "delete", "data-confirm": "Are you sure?", class: "btn btn-danger btn-sm") -%>
 </p>

src/amber/cli/templates/scaffold/view/src/views/{{name}}/show.slang.ecr

@@ -3,6 +3,6 @@ h1 Show <%= display_name %>
 p = <%= @name %>.<%= field.name %><%= field.reference? ? ".id" : "" %>
 <% end -%>
 p
-  == link_to("back", "/<%= Inflector.pluralize(@name) %>", class: "btn btn-default btn-xs")
-  == link_to("edit", "/<%= Inflector.pluralize(@name) %>/#{<%= @name %>.id}/edit", class: "btn btn-success btn-xs")
-  == link_to("delete", "/<%= Inflector.pluralize(@name) %>/#{<%= @name %>.id}?_csrf=#{csrf_token}", "data-method": "delete", "data-confirm": "Are you sure?", class: "btn btn-danger btn-xs")
+  == link_to("back", "/<%= Inflector.pluralize(@name) %>", class: "btn btn-light btn-sm")
+  == link_to("edit", "/<%= Inflector.pluralize(@name) %>/#{<%= @name %>.id}/edit", class: "btn btn-success btn-sm")
+  == link_to("delete", "/<%= Inflector.pluralize(@name) %>/#{<%= @name %>.id}?_csrf=#{csrf_token}", "data-method": "delete", "data-confirm": "Are you sure?", class: "btn btn-danger btn-sm")