--- a/app/views/pastes/new.html.erb	Sun Feb 23 20:23:09 2020 +0900
+++ b/app/views/pastes/new.html.erb	Sun Feb 23 22:25:50 2020 +0900
@@ -3,41 +3,56 @@
 <%= form_for @paste do |f| %>
   <%= render "shared/filter_spam" %>
 
-  <div class="form-group <%= error_class f.object, :paste %>">
-    <%= f.text_area :paste, :autofocus => true, :class => "form-control paste-paste js-paste-paste", :rows => 20 %>
+  <div class="form-group">
+    <%= f.text_area :paste,
+      autofocus: true,
+      class: "form-control paste-paste js-paste-paste #{error_class f.object, :paste}",
+      rows: 20
+    %>
   </div>
 
 
-  <div class="row"><div class="col-xs-12">
-      <%= link_to t(".preview_md"), "#",
-          :class => "btn btn-default js-paste-preview-md pull-right"
-      %>
+  <div class="row"><div class="col-12">
+      <button type="button" class="btn btn-secondary ml-auto d-block js-paste-preview-md">
+        <%= t(".preview_md") %>
+      </button>
   </div></div>
 
-  <div class="form-group <%= error_class f.object, :key %> form-group--narrow">
-    <%= f.label :key, t(".deletion_key") %>
-    <%= f.text_field :key, :autocomplete => "off", :class => "form-control" %>
+  <div class="form-group row">
+    <%= f.label :key, t('.deletion_key'), class: 'col-sm-2 col-form-label' %>
+
+    <div class="col-auto">
+      <%= f.text_field :key,
+        autocomplete: 'off',
+        class: "form-control #{error_class f.object, :key}"
+      %>
+    </div>
   </div>
 
-  <div class="form-group">
-    <label><%= t(".privacy.label") %></label>
+  <div class="form-group row">
+    <label class="col-sm-2 col-form-label pt-0">
+      <%= t(".privacy.label") %>
+    </label>
 
-    <div class="radio-container">
+    <div class="col-sm-10">
       <% paste_privacy_options.each do |label, value| %>
-        <div class="radio">
-          <label>
-            <%= f.radio_button :is_private, value %>
+        <label class="custom-control custom-radio mb-0">
+          <%= f.radio_button :is_private, value, class: 'custom-control-input' %>
+
+          <span class="custom-control-label">
             <%= t(".privacy.#{label}") %>
-          </label>
-        </div>
+          </span>
+        </label>
       <% end %>
     </div>
   </div>
 
-  <div class="form-group form-group--narrow">
-    <%= f.label :language %>
+  <div class="form-group row">
+    <%= f.label :language, class: 'col-sm-2 col-form-label' %>
 
-    <%= f.select :language, [], { :prompt => t(".language_none") }, :class => "form-control" %>
+    <div class="col-auto">
+      <%= f.select :language, [], { prompt: t(".language_none") }, class: 'custom-select' %>
+    </div>
   </div>
 
   <div class="form-group">
@@ -53,7 +68,7 @@
       <div class="modal-body js-paste-preview-md-box">
       </div>
       <div class="modal-footer">
-        <button type="button" class="btn btn-default" data-dismiss="modal">
+        <button type="button" class="btn btn-secondary" data-dismiss="modal">
           <%= t("buttons.close") %>
         </button>
       </div>