apply bst4 for help-block

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

@@ -67,7 +67,7 @@ class CustomizeCssSetting extends React.Component {
             />
           </div>
           <div className="col-12">
-            <p className="help-block text-right">
+            <p className="form-text text-muted text-right">
               <i className="fa fa-fw fa-keyboard-o" aria-hidden="true" />
               { t('customize_page.ctrl_space') }
             </p>

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

@@ -62,7 +62,7 @@ class CustomizeHeaderSetting extends React.Component {
           </CardBody>
         </Card>
 
-        <div className="help-block">
+        <div className="form-text text-muted">
           { t('Example') }:
           <pre className="hljs">
             {/* eslint-disable-next-line react/no-unescaped-entities */}
@@ -78,7 +78,7 @@ class CustomizeHeaderSetting extends React.Component {
           />
         </div>
         <div className="col-12">
-          <p className="help-block text-right">
+          <p className="form-text text-muted text-right">
             <i className="fa fa-fw fa-keyboard-o" aria-hidden="true"></i>
             { t('customize_page.ctrl_space') }
           </p>

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

@@ -98,7 +98,7 @@ class CustomizeHighlightSetting extends React.Component {
 
         <div className="form-group row">
           <div className="offset-3 col-6 text-left">
-            <div className="custom-control custom-checkbox">
+            <div className="custom-control custom-switch checkbox-success">
               <input
                 type="checkbox"
                 className="custom-control-input"
@@ -113,7 +113,7 @@ class CustomizeHighlightSetting extends React.Component {
           </div>
         </div>
 
-        <div className="help-block">
+        <div className="form-text text-muted">
           <label>Examples:</label>
           <div className="wiki">
             <pre className={`hljs ${!adminCustomizeContainer.state.isHighlightJsStyleBorderEnabled && 'hljs-no-border'}`}>

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

@@ -84,7 +84,7 @@ class CustomizeScriptSetting extends React.Component {
           </dl>
         </div>
 
-        <div className="form-text">
+        <div className="form-text text-muted">
           Examples:
           <pre className="hljs"><code>{this.getExampleCode()}</code></pre>
         </div>
@@ -98,7 +98,7 @@ class CustomizeScriptSetting extends React.Component {
             />
           </div>
           <div className="col-12">
-            <p className="help-block text-right">
+            <p className="form-text text-muted text-right">
               <i className="fa fa-fw fa-keyboard-o" aria-hidden="true" />
               { t('customize_page.ctrl_space') }
             </p>