Sign up form style

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

-<h2>Sign up</h2>
+<div class="container-md">
+  <div class="row justify-content-center">
+    <div class="col-md-4">
+      <div class="card bg-light mt-5">
+        <div class="card-title text-center">
+          <h3 class="mt-2">
+            <%= t('.log_in') %>
+          </h3>
+        </div>
+        <div class="card-body rounded d-flex justify-content-center">
+          <%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
+            <%= render "devise/shared/error_messages", resource: resource %>
 
-<%= form_for(resource, as: resource_name, url: registration_path(resource_name)) do |f| %>
-  <%= render "devise/shared/error_messages", resource: resource %>
+            <div class="field form-group w-100">
+              <%= f.label :email %> <br/>
+              <%= f.email_field :email, autofocus: true, autocomplete: "email" %>
 
-  <div class="field">
-    <%= f.label :email %><br />
-    <%= f.email_field :email, autofocus: true, autocomplete: "email" %>
-  </div>
+            </div>
 
-  <div class="field">
-    <%= f.label :password %>
-    <% if @minimum_password_length %>
-    <em>(<%= @minimum_password_length %> characters minimum)</em>
-    <% end %><br />
-    <%= f.password_field :password, autocomplete: "new-password" %>
-  </div>
+            <div class="field form-group w-100">
+              <div class="form-inline">
+                <%= f.label :password %>
+                <% if @minimum_password_length %>
+                <em>(<%= @minimum_password_length %> characters minimum)</em>
+                <% end %><br />
+                <%= f.password_field :password, autocomplete: "new-password" %>
+              </div>
+            </div>
+
+            <div class="field form-group w-100">
+              <div class="form-inline">
+                <%= f.label :password_confirmation %><br />
+                <%= f.password_field :password_confirmation, autocomplete: "new-password" %>
+              </div>
+            </div>
+
+            <div class="actions">
+              <%= f.submit "Sign up", :class => "float-left btn btn-info btn-md w-100" %>
+            </div>
+          <% end %>
 
-  <div class="field">
-    <%= f.label :password_confirmation %><br />
-    <%= f.password_field :password_confirmation, autocomplete: "new-password" %>
-  </div>
 
-  <div class="actions">
-    <%= f.submit "Sign up" %>
+        </div>
+        <div class="card-body rounded justify-content-center">
+          <div class="or-text-divider"><span>OR</span></div>
+          <div class="row">
+            <div class="col text-center">
+              <%= render "devise/shared/links" %>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
-<% end %>
 
-<%= render "devise/shared/links" %>
+</div>

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

@@ -22,7 +22,7 @@
               </div>
             </div>
             <% if devise_mapping.rememberable? %>
-              <div class="field form-group">
+              <div class="field form-group w-100">
                 <div class="form-inline">
                   <%= f.check_box :remember_me %>
                   <%= f.label :remember_me %>