add bootstrap util and fix id

src/client/js/components/PageEditor/GridEditModal.jsx

@@ -138,43 +138,46 @@ export default class GridEditModal extends React.Component {
               </div>
               <div className="col-3 text-left pl-0">
                 <div className="form-group inline-block">
-                  <div>
+                  <div className="custom-control custom-radio">
                     {/* TODO unite radio button style with that of AppSetting.jsx by GW-3342 */}
                     <input
                       type="radio"
-                      id={BootstrapGrid.ResponsiveSize.XS_SIZE}
+                      id={`radio-${BootstrapGrid.ResponsiveSize.XS_SIZE}`}
+                      className="custom-control-input"
                       name="responsiveSize"
                       value={BootstrapGrid.ResponsiveSize.XS_SIZE}
                       onChange={(e) => { this.checkResposiveSize(e.target.value) }}
                       checked={this.state.responsiveSize === BootstrapGrid.ResponsiveSize.XS_SIZE}
                     />
-                    <label htmlFor={BootstrapGrid.ResponsiveSize.XS_SIZE}>
+                    <label htmlFor={`radio-${BootstrapGrid.ResponsiveSize.XS_SIZE}`} className="custom-control-label">
                       <i className="pl-2 pr-1 icon-screen-smartphone"></i> Mobile / No break point
                     </label>
                   </div>
-                  <div>
+                  <div className="custom-control custom-radio">
                     <input
                       type="radio"
-                      id={BootstrapGrid.ResponsiveSize.SM_SIZE}
+                      id={`radio-${BootstrapGrid.ResponsiveSize.SM_SIZE}`}
+                      className="custom-control-input"
                       name="responsiveSize"
                       value={BootstrapGrid.ResponsiveSize.SM_SIZE}
                       onChange={(e) => { this.checkResposiveSize(e.target.value) }}
                       checked={this.state.responsiveSize === BootstrapGrid.ResponsiveSize.SM_SIZE}
                     />
-                    <label htmlFor={BootstrapGrid.ResponsiveSize.SM_SIZE}>
+                    <label htmlFor={`radio-${BootstrapGrid.ResponsiveSize.SM_SIZE}`} className="custom-control-label">
                       <i className="pl-2 pr-1 icon-screen-tablet"></i> Tablet
                     </label>
                   </div>
-                  <div>
+                  <div className="custom-control custom-radio">
                     <input
                       type="radio"
-                      id={BootstrapGrid.ResponsiveSize.MD_SIZE}
+                      id={`radio-${BootstrapGrid.ResponsiveSize.MD_SIZE}`}
+                      className="custom-control-input"
                       name="responsiveSize"
                       value={BootstrapGrid.ResponsiveSize.MD_SIZE}
                       onChange={(e) => { this.checkResposiveSize(e.target.value) }}
                       checked={this.state.responsiveSize === BootstrapGrid.ResponsiveSize.MD_SIZE}
                     />
-                    <label htmlFor={BootstrapGrid.ResponsiveSize.MD_SIZE}>
+                    <label htmlFor={`radio-${BootstrapGrid.ResponsiveSize.MD_SIZE}`} className="custom-control-label">
                       <i className="pl-2 pr-1 icon-screen-desktop"></i> Desktop
                     </label>
                   </div>