Bootstrap styles for Devise forms

app/views/devise/confirmations/new.html.erb

@@ -1,16 +1,20 @@
 <h2>Resend confirmation instructions</h2>
 
-<%= form_for(resource, as: resource_name, url: confirmation_path(resource_name), html: { method: :post }) do |f| %>
-  <%= render "devise/shared/error_messages", resource: resource %>
+<div class="card mb-3">
+  <div class="card-body">
+    <%= form_for(resource, as: resource_name, url: confirmation_path(resource_name), html: { method: :post }) do |f| %>
+      <%= render "devise/shared/error_messages", resource: resource %>
 
-  <div class="field">
-    <%= f.label :email %><br />
-    <%= f.email_field :email, autofocus: true, autocomplete: "email", value: (resource.pending_reconfirmation? ? resource.unconfirmed_email : resource.email) %>
-  </div>
+      <div class="field mb-3">
+        <%= f.label :email, class: 'form-label' %>
+        <%= f.email_field :email, autofocus: true, class: 'form-control w-25', autocomplete: "email", value: (resource.pending_reconfirmation? ? resource.unconfirmed_email : resource.email) %>
+      </div>
 
-  <div class="actions">
-    <%= f.submit "Resend confirmation instructions" %>
+      <div class="actions mb-3">
+        <%= f.submit "Resend confirmation instructions", class: "btn btn-primary" %>
+      </div>
+    <% end %>
   </div>
-<% end %>
+</div>
 
 <%= render "devise/shared/links" %>

app/views/devise/passwords/new.html.erb

@@ -1,16 +1,20 @@
 <h2>Forgot your password?</h2>
 
-<%= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :post }) do |f| %>
-  <%= render "devise/shared/error_messages", resource: resource %>
+<div class="card mb-3">
+  <div class="card-body">
+    <%= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :post }) do |f| %>
+      <%= render "devise/shared/error_messages", resource: resource %>
 
-  <div class="field">
-    <%= f.label :email %><br />
-    <%= f.email_field :email, autofocus: true, autocomplete: "email" %>
-  </div>
+      <div class="field mb-3">
+        <%= f.label :email %><br />
+        <%= f.email_field :email, autofocus: true, autocomplete: "email", class: 'form-control w-25' %>
+      </div>
 
-  <div class="actions">
-    <%= f.submit "Send me reset password instructions" %>
+      <div class="actions mb-3">
+        <%= f.submit "Send me reset password instructions", class: "btn btn-primary" %>
+      </div>
+    <% end %>
   </div>
-<% end %>
+</div>
 
 <%= render "devise/shared/links" %>

app/views/devise/registrations/new.html.erb

@@ -8,21 +8,21 @@
       <%= render "devise/shared/error_messages", resource: resource %>
 
       <div class="mb-3">
-        <%= f.label :email, class: 'form-label'  %>
-        <%= f.email_field :email, autofocus: true, autocomplete: "email", class: 'form-control w-25'  %>
+        <%= f.label :email, class: 'form-label' %>
+        <%= f.email_field :email, autofocus: true, autocomplete: "email", class: 'form-control w-25' %>
       </div>
 
       <div class="mb-3">
-        <%= f.label :password, class: 'form-label'  %>
+        <%= f.label :password, class: 'form-label' %>
         <% if @minimum_password_length %>
         <em>(<%= @minimum_password_length %> characters minimum)</em>
         <% end %><br />
-        <%= f.password_field :password, autocomplete: "new-password", class: 'form-control w-25'  %>
+        <%= f.password_field :password, autocomplete: "new-password", class: 'form-control w-25' %>
       </div>
 
       <div class="mb-3">
         <%= f.label :password_confirmation, class: 'form-label' %>
-        <%= f.password_field :password_confirmation, autocomplete: "new-password", class: 'form-control w-25'  %>
+        <%= f.password_field :password_confirmation, autocomplete: "new-password", class: 'form-control w-25' %>
       </div>
 
       <div class="mb-3">

app/views/shared/_flash_messages.html.erb

@@ -1,5 +1,10 @@
+<%
+  alert_type = {
+    alert: :warning
+  }
+%>
 <% flash.each do |type, msg| %>
-  <div class="flash_message flash_message-<%= type %>">
+  <div class="alert alert-<%= alert_type[type.to_sym] %>">
     <%= msg %>
   </div>
 <% end %>