adjust layout

src/client/js/components/Admin/Customize/CustomizeBehaviorSetting.jsx

@@ -44,7 +44,7 @@ class CustomizeBehaviorSetting extends React.Component {
       <React.Fragment>
         <h2 className="admin-setting-header">{t('customize_page.Behavior')}</h2>
         <div className="row">
-          <div className="col-xs-6">
+          <div className="col-6">
             <CustomizeBehaviorOption
               behaviorType="growi"
               isSelected={adminCustomizeContainer.state.currentBehavior === 'growi'}
@@ -59,7 +59,7 @@ class CustomizeBehaviorSetting extends React.Component {
             </CustomizeBehaviorOption>
           </div>
 
-          <div className="col-xs-6">
+          <div className="col-6">
             <CustomizeBehaviorOption
               behaviorType="crowi-plus"
               isSelected={adminCustomizeContainer.state.currentBehavior === 'crowi-plus'}

src/client/js/components/Admin/Customize/CustomizeFunctionSetting.jsx

@@ -51,7 +51,7 @@ class CustomizeBehaviorSetting extends React.Component {
 
 
         <div className="form-group row">
-          <div className="col-xs-offset-3 col-xs-6 text-left">
+          <div className="offset-3 col-6 text-left">
             <CustomizeFunctionOption
               optionId="isEnabledTimeline"
               label={t('customize_page.Timeline function')}
@@ -68,7 +68,7 @@ class CustomizeBehaviorSetting extends React.Component {
         </div>
 
         <div className="form-group row">
-          <div className="col-xs-offset-3 col-xs-6 text-left">
+          <div className="offset-3 col-6 text-left">
             <CustomizeFunctionOption
               optionId="isSavedStatesOfTabChanges"
               label={t('customize_page.tab_switch')}
@@ -84,7 +84,7 @@ class CustomizeBehaviorSetting extends React.Component {
         </div>
 
         <div className="form-group row">
-          <div className="col-xs-offset-3 col-xs-6 text-left">
+          <div className="offset-3 col-6 text-left">
             <CustomizeFunctionOption
               optionId="isEnabledAttachTitleHeader"
               label={t('customize_page.attach_title_header')}
@@ -99,7 +99,7 @@ class CustomizeBehaviorSetting extends React.Component {
         </div>
 
         <div className="form-group row">
-          <div className="col-xs-offset-3 col-xs-6 text-left">
+          <div className="offset-3 col-6 text-left">
             <div className="my-0 btn-group">
               <label>{t('customize_page.recent_created__n_draft_num_desc')}</label>
               <div className="dropdown">
@@ -130,7 +130,7 @@ class CustomizeBehaviorSetting extends React.Component {
         </div>
 
         <div className="form-group row">
-          <div className="col-xs-offset-3 col-xs-6 text-left">
+          <div className="offset-3 col-6 text-left">
             <CustomizeFunctionOption
               optionId="isEnabledStaleNotification"
               label={t('customize_page.stale_notification')}

src/client/js/components/Admin/Customize/CustomizeHeaderSetting.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
+import { Card, CardBody } from 'reactstrap';
 
 import loggerFactory from '@alias/logger';
 
@@ -52,11 +53,14 @@ class CustomizeHeaderSetting extends React.Component {
       <React.Fragment>
         <h2 className="admin-setting-header">{t('customize_page.custom_header')}</h2>
 
-        <p
-          className="well"
-          // eslint-disable-next-line react/no-danger
-          dangerouslySetInnerHTML={{ __html: t('customize_page.custom_header_detail') }}
-        />
+        <Card className="card-well my-3">
+          <CardBody>
+            <span
+              // eslint-disable-next-line react/no-danger
+              dangerouslySetInnerHTML={{ __html: t('customize_page.custom_header_detail') }}
+            />
+          </CardBody>
+        </Card>
 
         <div className="help-block">
           { t('Example') }:

src/client/js/components/Admin/Customize/CustomizeHighlightSetting.jsx

@@ -75,7 +75,7 @@ class CustomizeHighlightSetting extends React.Component {
         <h2 className="admin-setting-header">{t('customize_page.Code Highlight')}</h2>
 
         <div className="form-group row">
-          <div className="col-xs-offset-3 col-xs-6 text-left">
+          <div className="offset-3 col-6 text-left">
             <div className="my-0 btn-group">
               <label>{t('customize_page.Theme')}</label>
               <div className="dropdown">
@@ -97,7 +97,7 @@ class CustomizeHighlightSetting extends React.Component {
         </div>
 
         <div className="form-group row">
-          <div className="col-xs-offset-3 col-xs-6 text-left">
+          <div className="offset-3 col-6 text-left">
             <div className="checkbox checkbox-success">
               <input
                 type="checkbox"

src/client/js/components/Admin/Customize/CustomizeLayoutOptions.jsx

@@ -15,7 +15,7 @@ class CustomizeLayoutOptions extends React.Component {
 
     return (
       <div className="row">
-        <div className="col-sm-4">
+        <div className="col-md-4">
           <CustomizeLayoutOption
             layoutType="crowi-plus"
             isSelected={adminCustomizeContainer.state.currentLayout === 'growi'}
@@ -31,7 +31,7 @@ class CustomizeLayoutOptions extends React.Component {
           </CustomizeLayoutOption>
         </div>
 
-        <div className="col-sm-4">
+        <div className="col-md-4">
           <CustomizeLayoutOption
             layoutType="kibela"
             isSelected={adminCustomizeContainer.state.currentLayout === 'kibela'}
@@ -47,7 +47,7 @@ class CustomizeLayoutOptions extends React.Component {
           </CustomizeLayoutOption>
         </div>
 
-        <div className="col-sm-4">
+        <div className="col-md-4">
           <CustomizeLayoutOption
             layoutType="classic"
             isSelected={adminCustomizeContainer.state.currentLayout === 'crowi'}

src/client/js/components/Admin/Customize/CustomizeTitle.jsx

@@ -1,6 +1,8 @@
+/* eslint-disable max-len */
 import React from 'react';
 import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
+import { Card, CardBody } from 'reactstrap';
 
 import loggerFactory from '@alias/logger';
 
@@ -40,11 +42,16 @@ class CustomizeTitle extends React.Component {
     return (
       <React.Fragment>
         <h2 className="admin-setting-header">{t('customize_page.custom_title')}</h2>
-        <p
-          className="well"
-          // eslint-disable-next-line react/no-danger, max-len
-          dangerouslySetInnerHTML={{ __html: '<code>&lt;title&gt;</code>タグのコンテンツをカスタマイズできます。<br><code>&#123;&#123;sitename&#125;&#125;</code>がサイト名、<code>&#123;&#123;page&#125;&#125;</code>がページ名またはページパスに置換されます。' }}
-        />
+
+        <Card className="card-well my-3">
+          <CardBody>
+            <span
+              // eslint-disable-next-line react/no-danger
+              dangerouslySetInnerHTML={{ __html: '<code>&lt;title&gt;</code>タグのコンテンツをカスタマイズできます。<br><code>&#123;&#123;sitename&#125;&#125;</code>がサイト名、<code>&#123;&#123;page&#125;&#125;</code>がページ名またはページパスに置換されます。' }}
+            />
+          </CardBody>
+        </Card>
+
         {/* TODO i18n */}
         <div className="help-block">
           Default Value: <code>&#123;&#123;page&#125;&#125; - &#123;&#123;sitename&#125;&#125;</code>