adapt BS3

src/client/js/components/Admin/Common/AdminDropdownOption.jsx

@@ -7,19 +7,25 @@ class AdminDropdownOption extends React.PureComponent {
   render() {
 
     const menuItem = this.props.options.map((option) => {
-      return <button key={option} className="dropdown-item" type="button" onClick={() => this.props.onChangeValue(option)}>{option}</button>;
+      return (
+        <li key={option} role="presentation" type="button" onClick={() => this.props.onChangeValue(option)}>
+          <a role="menuitem" tabIndex="-1">{option}</a>
+        </li>
+      );
     });
 
     return (
-      <div className="my-0 form-group">
+      <div className="my-0 btn-group">
         <label>{this.props.label}</label>
         <div className="dropdown">
           <button className="btn btn-secondary dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
             {this.props.selectedValue}
+            <span className="ml-2 caret"></span>
           </button>
-          <div className="dropdown-menu" aria-labelledby="dropdownMenuLink">
+          {/* TODO adjust dropdown after BS4 */}
+          <ul className="dropdown-menu" role="menu">
             {menuItem}
-          </div>
+          </ul>
         </div>
         {this.props.children}
       </div>

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

@@ -46,7 +46,7 @@ class CustomizeBehaviorSetting extends React.Component {
         <p className="well">{ t('customize_page.function_choose') }</p>
 
         <div className="form-group row">
-          <div className="col-xs-offset-2 col-xs-8 text-left">
+          <div className="col-xs-offset-3 col-xs-6 text-left">
             <CustomizeFunctionOption
               optionId="isEnabledTimeline"
               label={t('customize_page.Timeline function')}
@@ -63,7 +63,7 @@ class CustomizeBehaviorSetting extends React.Component {
         </div>
 
         <div className="form-group row">
-          <div className="col-xs-offset-2 col-xs-8 text-left">
+          <div className="col-xs-offset-3 col-xs-6 text-left">
             <CustomizeFunctionOption
               optionId="isSavedStatesOfTabChanges"
               label={t('customize_page.tab_switch')}
@@ -79,7 +79,7 @@ class CustomizeBehaviorSetting extends React.Component {
         </div>
 
         <div className="form-group row">
-          <div className="col-xs-offset-2 col-xs-8 text-left">
+          <div className="col-xs-offset-3 col-xs-6 text-left">
             <CustomizeFunctionOption
               optionId="isEnabledAttachTitleHeader"
               label={t('customize_page.attach_title_header')}
@@ -94,7 +94,7 @@ class CustomizeBehaviorSetting extends React.Component {
         </div>
 
         <div className="form-group row">
-          <div className="col-xs-offset-2 col-xs-8 text-left">
+          <div className="col-xs-offset-3 col-xs-6 text-left">
             <AdminDropdownOption
               label={t('customize_page.recent_created__n_draft_num_desc')}
               selectedValue={adminCustomizeContainer.state.currentRecentCreatedLimit}