Use bootstrap4 style

Signed-off-by: Kenji Okimoto <okimoto@clear-code.com>

app/helpers/settings_helper.rb

@@ -54,8 +54,8 @@ module SettingsHelper
   end
 
   def append_and_remove_links
-    %Q!<a class="btn btn-xs btn-default js-append">#{icon('fa-plus')}</a> ! +
-    %Q!<a class="btn btn-xs btn-default js-remove" style="display:none">#{icon('fa-minus')}</a> !
+    %Q!<a class="btn btn-sm btn-outline-secondary js-append">#{icon('fa-plus')}</a> ! +
+    %Q!<a class="btn btn-sm btn-outline-secondary js-remove" style="display:none">#{icon('fa-minus')}</a> !
   end
 
   def child_data(form, key)

app/views/fluentd/_form.html.haml

@@ -1,4 +1,4 @@
-.col-xs-6
+.col-xl-6
   - @fluentd.errors.full_messages.each do |e|
     .alert.alert-danger= e
 

app/views/shared/settings/_form.html.haml

@@ -6,12 +6,13 @@
     = field(f, key)
 
   - if @setting.advanced_options.present?
-    .well.well-sm
-      %h4{"data-toggle" => "collapse", "href" => "#advanced-setting"}
-        = icon('fa-caret-down')
-        = t('terms.advanced_setting')
-      #advanced-setting.collapse
-        - @setting.advanced_options.each do |key|
-          = field(f, key)
+    .card.bg-light
+      .card-body
+        %h4{"data-toggle" => "collapse", "href" => "#advanced-setting"}
+          = icon('fa-caret-down')
+          = t('terms.advanced_setting')
+        #advanced-setting.collapse
+          - @setting.advanced_options.each do |key|
+            = field(f, key)
   = f.submit t('fluentd.common.finish'), class: "btn btn-lg btn-primary pull-right"