128848 remove form-group

apps/app/src/components/Admin/App/AppSetting.jsx

@@ -34,7 +34,7 @@ const AppSetting = (props) => {
 
   return (
     <React.Fragment>
-      <div className="form-group row">
+      <div className="row">
         <label className="text-left text-md-right col-md-3 col-form-label">{t('admin:app_setting.site_name')}</label>
         <div className="col-md-6">
           <input
@@ -50,7 +50,7 @@ const AppSetting = (props) => {
         </div>
       </div>
 
-      <div className="row form-group mb-5">
+      <div className="row mb-5">
         <label
           className="text-left text-md-right col-md-3 col-form-label"
         >
@@ -70,7 +70,7 @@ const AppSetting = (props) => {
         </div>
       </div>
 
-      <div className="row form-group mb-5">
+      <div className="row mb-5">
         <label
           className="text-left text-md-right col-md-3 col-form-label"
         >
@@ -103,7 +103,7 @@ const AppSetting = (props) => {
         </div>
       </div>
 
-      <div className="row form-group mb-5">
+      <div className="row mb-5">
         <label
           className="text-left text-md-right col-md-3 col-form-label"
         >
@@ -138,7 +138,7 @@ const AppSetting = (props) => {
         </div>
       </div>
 
-      <div className="row form-group mb-5">
+      <div className="row mb-5">
         <label
           className="text-left text-md-right col-md-3 col-form-label"
         >

apps/app/src/components/Admin/App/AwsSetting.tsx

@@ -21,7 +21,7 @@ export const AwsSettingMolecule = (props: AwsSettingMoleculeProps): JSX.Element
   return (
     <>
 
-      <div className="row form-group my-3">
+      <div className="row my-3">
         <label className="text-left text-md-right col-md-3 col-form-label">
           {t('admin:app_setting.file_delivery_method')}
         </label>
@@ -65,7 +65,7 @@ export const AwsSettingMolecule = (props: AwsSettingMoleculeProps): JSX.Element
         </div>
       </div>
 
-      <div className="row form-group">
+      <div className="row">
         <label className="text-left text-md-right col-md-3 col-form-label">
           {t('admin:app_setting.region')}
         </label>
@@ -81,7 +81,7 @@ export const AwsSettingMolecule = (props: AwsSettingMoleculeProps): JSX.Element
         </div>
       </div>
 
-      <div className="row form-group">
+      <div className="row">
         <label className="text-left text-md-right col-md-3 col-form-label">
           {t('admin:app_setting.custom_endpoint')}
         </label>
@@ -99,7 +99,7 @@ export const AwsSettingMolecule = (props: AwsSettingMoleculeProps): JSX.Element
         </div>
       </div>
 
-      <div className="row form-group">
+      <div className="row">
         <label className="text-left text-md-right col-md-3 col-form-label">
           {t('admin:app_setting.bucket_name')}
         </label>
@@ -116,7 +116,7 @@ export const AwsSettingMolecule = (props: AwsSettingMoleculeProps): JSX.Element
         </div>
       </div>
 
-      <div className="row form-group">
+      <div className="row">
         <label className="text-left text-md-right col-md-3 col-form-label">
           Access key ID
         </label>
@@ -132,7 +132,7 @@ export const AwsSettingMolecule = (props: AwsSettingMoleculeProps): JSX.Element
         </div>
       </div>
 
-      <div className="row form-group">
+      <div className="row">
         <label className="text-left text-md-right col-md-3 col-form-label">
           Secret access key
         </label>

apps/app/src/components/Admin/App/FileUploadSetting.tsx

@@ -37,7 +37,7 @@ export const FileUploadSettingMolecule = React.memo((props: FileUploadSettingMol
         </span>
       </p>
 
-      <div className="row form-group mb-3">
+      <div className="row mb-3">
         <label className="text-left text-md-right col-md-3 col-form-label">
           {t('admin:app_setting.file_upload_method')}
         </label>

apps/app/src/components/Admin/App/GcsSetting.tsx

@@ -32,7 +32,7 @@ export const GcsSettingMolecule = (props: GcsSettingMoleculeProps): JSX.Element
   return (
     <>
 
-      <div className="row form-group my-3">
+      <div className="row my-3">
         <label className="text-left text-md-right col-md-3 col-form-label">
           {t('admin:app_setting.file_delivery_method')}
         </label>

apps/app/src/components/Admin/App/MailSetting.tsx

@@ -49,7 +49,7 @@ const MailSetting = (props: Props) => {
       {!adminAppContainer.state.isMailerSetup && (
         <div className="alert alert-danger"><i className="icon-exclamation"></i> {t('admin:app_setting.mailer_is_not_set_up')}</div>
       )}
-      <div className="row form-group mb-5">
+      <div className="row mb-5">
         <label className="col-md-3 col-form-label text-right">{t('admin:app_setting.from_e-mail_address')}</label>
         <div className="col-md-6">
           <input
@@ -62,7 +62,7 @@ const MailSetting = (props: Props) => {
         </div>
       </div>
 
-      <div className="row form-group mb-5">
+      <div className="row mb-5">
         <label className="text-left text-md-right col-md-3 col-form-label">
           {t('admin:app_setting.transmission_method')}
         </label>

apps/app/src/components/Admin/App/SesSetting.tsx

@@ -16,7 +16,7 @@ const SmtpSetting = (props: Props) => {
     <React.Fragment>
       <div id="mail-smtp" className="tab-pane active mt-5">
 
-        <div className="row form-group">
+        <div className="row">
           <label className="text-left text-md-right col-md-3 col-form-label">
             Access key ID
           </label>
@@ -32,7 +32,7 @@ const SmtpSetting = (props: Props) => {
           </div>
         </div>
 
-        <div className="row form-group">
+        <div className="row">
           <label className="text-left text-md-right col-md-3 col-form-label">
             Secret access key
           </label>

apps/app/src/components/Admin/App/SiteUrlSetting.tsx

@@ -53,7 +53,7 @@ const SiteUrlSetting = (props: Props) => {
         </div>
       ) }
 
-      <div className="row form-group">
+      <div className="row">
         <div className="col-md-9 offset-md-3">
           <table className="table settings-table">
             <colgroup>

apps/app/src/components/Admin/App/SmtpSetting.tsx

@@ -19,7 +19,7 @@ const SmtpSetting = (props: Props) => {
   return (
     <React.Fragment>
       <div id="mail-smtp" className="tab-pane active mt-5">
-        <div className="row form-group">
+        <div className="row">
           <label className="text-left text-md-right col-md-3 col-form-label">
             {t('admin:app_setting.host')}
           </label>
@@ -33,7 +33,7 @@ const SmtpSetting = (props: Props) => {
           </div>
         </div>
 
-        <div className="row form-group">
+        <div className="row">
           <label className="text-left text-md-right col-md-3 col-form-label">
             {t('admin:app_setting.port')}
           </label>
@@ -46,7 +46,7 @@ const SmtpSetting = (props: Props) => {
           </div>
         </div>
 
-        <div className="row form-group">
+        <div className="row">
           <label className="text-left text-md-right col-md-3 col-form-label">
             {t('admin:app_setting.user')}
           </label>
@@ -60,7 +60,7 @@ const SmtpSetting = (props: Props) => {
           </div>
         </div>
 
-        <div className="row form-group">
+        <div className="row">
           <label className="text-left text-md-right col-md-3 col-form-label">
             {t('Password')}
           </label>

apps/app/src/components/Admin/AuditLog/SelectActionDropdown.tsx

@@ -84,7 +84,7 @@ export const SelectActionDropdown: FC<Props> = (props: Props) => {
         {dropdownItems.map(item => (
           <div key={item.actionCategory}>
             <div className="dropdown-item">
-              <div className="form-group px-2 m-0">
+              <div className="px-2 m-0">
                 <input
                   type="checkbox"
                   className="form-check-input"
@@ -97,7 +97,7 @@ export const SelectActionDropdown: FC<Props> = (props: Props) => {
             {
               item.actions.map(action => (
                 <div className="dropdown-item" key={action}>
-                  <div className="form-group px-4 m-0">
+                  <div className="px-4 m-0">
                     <input
                       type="checkbox"
                       className="form-check-input"

apps/app/src/components/Admin/Customize/CustomizeCssSetting.tsx

@@ -41,7 +41,7 @@ const CustomizeCssSetting = (props: Props): JSX.Element => {
             </CardBody>
           </Card>
 
-          <div className="form-group">
+          <div>
             <textarea
               className="form-control"
               name="customizeCss"

apps/app/src/components/Admin/Customize/CustomizeFunctionSetting.tsx

@@ -44,7 +44,7 @@ const CustomizeFunctionSetting = (props: Props): JSX.Element => {
           </Card>
 
 
-          <div className="form-group row">
+          <div className="row">
             <div className="offset-md-3 col-md-6 text-left">
               <CustomizeFunctionOption
                 optionId="isEnabledAttachTitleHeader"
@@ -88,7 +88,7 @@ const CustomizeFunctionSetting = (props: Props): JSX.Element => {
             onChangeDropdownItem={adminCustomizeContainer.switchPageListLimitationXL}
           />
 
-          <div className="form-group row">
+          <div className="row">
             <div className="offset-md-3 col-md-6 text-left">
               <CustomizeFunctionOption
                 optionId="isEnabledStaleNotification"
@@ -103,7 +103,7 @@ const CustomizeFunctionSetting = (props: Props): JSX.Element => {
             </div>
           </div>
 
-          <div className="form-group row">
+          <div className="row">
             <div className="offset-md-3 col-md-6 text-left">
               <CustomizeFunctionOption
                 optionId="isAllReplyShown"
@@ -118,7 +118,7 @@ const CustomizeFunctionSetting = (props: Props): JSX.Element => {
             </div>
           </div>
 
-          <div className="form-group row">
+          <div className="row">
             <div className="offset-md-3 col-md-6 text-left">
               <CustomizeFunctionOption
                 optionId="isSearchScopeChildrenAsDefault"

apps/app/src/components/Admin/Customize/CustomizeNoscriptSetting.tsx

@@ -45,7 +45,7 @@ const CustomizeNoscriptSetting = (props: Props): JSX.Element => {
             </CardBody>
           </Card>
 
-          <div className="form-group">
+          <div>
             <textarea
               className="form-control"
               name="customizeNoscript"

apps/app/src/components/Admin/Customize/CustomizeScriptSetting.tsx

@@ -42,7 +42,7 @@ const CustomizeScriptSetting = (props: Props): JSX.Element => {
             </CardBody>
           </Card>
 
-          <div className="form-group">
+          <div>
             <textarea
               className="form-control"
               name="customizeScript"

apps/app/src/components/Admin/Customize/CustomizeTitle.tsx

@@ -63,7 +63,7 @@ export const CustomizeTitle: FC = () => {
           <br />
           Default Output Example: <code className="xml">&lt;title&gt;Page name - My GROWI&lt;&#047;title&gt;</code>
         </div>
-        <div className="form-group col-12">
+        <div className="col-12">
           <input
             className="form-control"
             defaultValue={currentCustomizeTitle}

apps/app/src/components/Admin/Customize/PagingSizeUncontrolledDropdown.jsx

@@ -17,7 +17,7 @@ const PagingSizeUncontrolledDropdown = (props) => {
 
   return (
     <React.Fragment>
-      <div className="form-group row">
+      <div className="row">
         <div className="offset-md-3 col-md-6 text-left">
           <div className="my-0 w-100">
             <label>{props.label}</label>

apps/app/src/components/Admin/G2GDataTransfer.tsx

@@ -229,7 +229,7 @@ const G2GDataTransfer = (): JSX.Element => {
       )}
 
       <form onSubmit={startTransfer}>
-        <div className="form-group row mt-3">
+        <div className="row mt-3">
           <div className="col-9">
             <input
               className="form-control"
@@ -258,7 +258,7 @@ const G2GDataTransfer = (): JSX.Element => {
 
       <h2 className="border-bottom mt-5">{t('commons:g2g_data_transfer.transfer_data_to_this_growi')}</h2>
 
-      <div className="form-group row mt-4">
+      <div className="row mt-4">
         <div className="col-md-3">
           <button type="button" className="btn btn-primary w-100" onClick={onClickHandler}>
             {t('commons:g2g_data_transfer.publish_transfer_key')}

apps/app/src/components/Admin/G2GDataTransferExportForm.tsx

@@ -200,12 +200,12 @@ const G2GDataTransferExportForm = (props: Props): JSX.Element => {
   return (
     <>
       <form className="form-inline mt-3">
-        <div className="form-group">
+        <div>
           <button type="button" className="btn btn-sm btn-outline-secondary mr-2" onClick={checkAll}>
             <i className="fa fa-check-square-o"></i> {t('admin:export_management.check_all')}
           </button>
         </div>
-        <div className="form-group">
+        <div>
           <button type="button" className="btn btn-sm btn-outline-secondary mr-2" onClick={uncheckAll}>
             <i className="fa fa-square-o"></i> {t('admin:export_management.uncheck_all')}
           </button>

apps/app/src/components/Admin/ImportData/GrowiArchive/ImportForm.jsx

@@ -447,12 +447,12 @@ class ImportForm extends React.Component {
     return (
       <>
         <form className="form-inline">
-          <div className="form-group">
+          <div>
             <button type="button" className="btn btn-sm btn-outline-secondary mr-2" onClick={this.checkAll}>
               <i className="fa fa-check-square-o"></i> {t('admin:export_management.check_all')}
             </button>
           </div>
-          <div className="form-group">
+          <div>
             <button type="button" className="btn btn-sm btn-outline-secondary mr-2" onClick={this.uncheckAll}>
               <i className="fa fa-square-o"></i> {t('admin:export_management.uncheck_all')}
             </button>

apps/app/src/components/Admin/ImportData/GrowiArchive/UploadForm.jsx

@@ -60,7 +60,7 @@ class UploadForm extends React.Component {
     return (
       <form onSubmit={this.uploadZipFile}>
         <fieldset>
-          <div className="form-group row">
+          <div className="row">
             <label htmlFor="file" className="col-md-3 col-form-label col-form-label-sm">
               {t('admin:importer_management.growi_settings.growi_archive_file')}
             </label>
@@ -75,7 +75,7 @@ class UploadForm extends React.Component {
               />
             </div>
           </div>
-          <div className="form-group row">
+          <div className="row">
             <div className="mx-auto">
               <button type="submit" className="btn btn-primary" disabled={!this.validateForm()}>
                 {t('admin:importer_management.growi_settings.upload')}

apps/app/src/components/Admin/ImportData/ImportDataPageContents.jsx

@@ -63,11 +63,11 @@ class ImportDataPageContents extends React.Component {
               </ul>
             </div>
 
-            <div className="form-group row">
+            <div className="row">
               <input type="password" name="dummypass" style={{ display: 'none', top: '-100px', left: '-100px' }} />
             </div>
 
-            <div className="form-group row">
+            <div className="row">
               <label htmlFor="settingForm[importer:esa:team_name]" className="text-left text-md-right col-md-3 col-form-label">
                 {t('importer_management.esa_settings.team_name')}
               </label>
@@ -83,7 +83,7 @@ class ImportDataPageContents extends React.Component {
 
             </div>
 
-            <div className="form-group row">
+            <div className="row">
               <label htmlFor="settingForm[importer:esa:access_token]" className="text-left text-md-right col-md-3 col-form-label">
                 {t('importer_management.esa_settings.access_token')}
               </label>
@@ -98,7 +98,7 @@ class ImportDataPageContents extends React.Component {
               </div>
             </div>
 
-            <div className="form-group row">
+            <div className="row">
               <div className="offset-md-3 col-md-6">
                 <input
                   id="testConnectionToEsa"
@@ -169,10 +169,10 @@ class ImportDataPageContents extends React.Component {
               </ul>
             </div>
 
-            <div className="form-group row">
+            <div className="row">
               <input type="password" name="dummypass" style={{ display: 'none', top: '-100px', left: '-100px' }} />
             </div>
-            <div className="form-group row">
+            <div className="row">
               <label htmlFor="settingForm[importer:qiita:team_name]" className="text-left text-md-right col-md-3 col-form-label">
                 {t('importer_management.qiita_settings.team_name')}
               </label>
@@ -187,7 +187,7 @@ class ImportDataPageContents extends React.Component {
               </div>
             </div>
 
-            <div className="form-group row">
+            <div className="row">
               <label htmlFor="settingForm[importer:qiita:access_token]" className="text-left text-md-right col-md-3 col-form-label">
                 {t('importer_management.qiita_settings.access_token')}
               </label>
@@ -203,7 +203,7 @@ class ImportDataPageContents extends React.Component {
             </div>
 
 
-            <div className="form-group row">
+            <div className="row">
               <div className="offset-md-3 col-md-6">
                 <input
                   id="testConnectionToQiita"

apps/app/src/components/Admin/MarkdownSetting/IndentForm.tsx

@@ -97,7 +97,7 @@ const IndentForm = (props: Props) => {
 
   return (
     <React.Fragment>
-      <fieldset className="form-group row row-cols-1 row-cols-md-2 mx-3">
+      <fieldset className="row row-cols-1 row-cols-md-2 mx-3">
         {renderIndentSizeOption(props)}
         {renderIndentForceOption(props)}
       </fieldset>

apps/app/src/components/Admin/MarkdownSetting/LineBreakForm.jsx

@@ -90,7 +90,7 @@ class LineBreakForm extends React.Component {
 
     return (
       <React.Fragment>
-        <fieldset className="form-group row row-cols-1 row-cols-md-2 mx-3">
+        <fieldset className="row row-cols-1 row-cols-md-2 mx-3">
           {this.renderLineBreakOption()}
           {this.renderLineBreakInCommentOption()}
         </fieldset>

apps/app/src/components/Admin/MarkdownSetting/XssForm.jsx

@@ -45,7 +45,7 @@ class XssForm extends React.Component {
     const rehypeRecommendedAttributes = JSON.stringify(sanitizeDefaultSchema.attributes);
 
     return (
-      <div className="form-group col-12 my-3">
+      <div className="col-12 my-3">
         <div className="row">
 
           <div className="col-md-6 col-sm-12 align-self-start mb-4">
@@ -118,7 +118,7 @@ class XssForm extends React.Component {
     return (
       <React.Fragment>
         <fieldset className="col-12">
-          <div className="form-group">
+          <div>
             <div className="col-8 offset-4 my-3">
               <div className="custom-control custom-switch custom-checkbox-success">
                 <input

apps/app/src/components/Admin/Notification/ManageGlobalNotification.tsx

@@ -131,7 +131,7 @@ const ManageGlobalNotification = (props: Props): JSX.Element => {
               <small dangerouslySetInnerHTML={{ __html: t('notification_settings.trigger_path_help', '<code>*</code>') }} />
             </label>
           </h3>
-          <div className="form-group">
+          <div>
             <input
               className="form-control"
               type="text"
@@ -143,7 +143,7 @@ const ManageGlobalNotification = (props: Props): JSX.Element => {
           </div>
 
           <h3>{t('notification_settings.notify_to')}</h3>
-          <div className="form-group form-inline">
+          <div className="form-inline">
             <div className="custom-control custom-radio">
               <input
                 className="custom-control-input"
@@ -228,7 +228,7 @@ const ManageGlobalNotification = (props: Props): JSX.Element => {
         </div>
 
         <div className="offset-1 col-sm-5">
-          <div className="form-group">
+          <div>
             <h3>{t('notification_settings.trigger_events')}</h3>
             <div className="my-1">
               <TriggerEventCheckBox

apps/app/src/components/Admin/Security/GitHubSecuritySettingContents.jsx

@@ -56,7 +56,7 @@ class GitHubSecurityManagementContents extends React.Component {
           </div>
         )}
 
-        <div className="form-group row">
+        <div className="row">
           <div className="col-6 offset-3">
             <div className="custom-control custom-switch custom-checkbox-success">
               <input

apps/app/src/components/Admin/Security/GoogleSecuritySettingContents.jsx

@@ -54,7 +54,7 @@ class GoogleSecurityManagementContents extends React.Component {
           </div>
         )}
 
-        <div className="form-group row">
+        <div className="row">
           <div className="col-6 offset-3">
             <div className="custom-control custom-switch custom-checkbox-success">
               <input

apps/app/src/components/Admin/Security/LdapAuthTest.tsx

@@ -89,7 +89,7 @@ export const LdapAuthTest = (props: LdapAuthTestProps): JSX.Element => {
     <React.Fragment>
       {successMessage !== '' && <div className="alert alert-success">{successMessage}</div>}
       {errorMessage !== '' && <div className="alert alert-warning">{errorMessage}</div>}
-      <div className="form-group row">
+      <div className="row">
         <label htmlFor="username" className="col-3 col-form-label">{t('username')}</label>
         <div className="col-6">
           <input
@@ -101,7 +101,7 @@ export const LdapAuthTest = (props: LdapAuthTestProps): JSX.Element => {
           />
         </div>
       </div>
-      <div className="form-group row">
+      <div className="row">
         <label htmlFor="password" className="col-3 col-form-label">{t('Password')}</label>
         <div className="col-6">
           <input
@@ -115,7 +115,7 @@ export const LdapAuthTest = (props: LdapAuthTestProps): JSX.Element => {
         </div>
       </div>
 
-      <div className="form-group">
+      <div>
         <label><h5>Logs</h5></label>
         <textarea id="taLogs" className="col form-control" rows={4} value={logs} readOnly />
       </div>

apps/app/src/components/Admin/Security/LdapSecuritySettingContents.jsx

@@ -58,7 +58,7 @@ class LdapSecuritySettingContents extends React.Component {
           LDAP
         </h2>
 
-        <div className="form-group row">
+        <div className="row">
           <div className="col-6 offset-3">
             <div className="custom-control custom-switch custom-checkbox-success">
               <input
@@ -83,7 +83,7 @@ class LdapSecuritySettingContents extends React.Component {
 
             <h3 className="border-bottom">{t('security_settings.configuration')}</h3>
 
-            <div className="form-group row">
+            <div className="row">
               <label htmlFor="serverUrl" className="text-left text-md-right col-md-3 col-form-label">
                 Server URL
               </label>
@@ -106,7 +106,7 @@ class LdapSecuritySettingContents extends React.Component {
               </div>
             </div>
 
-            <div className="form-group row">
+            <div className="row">
               <label className="text-left text-md-right col-md-3 col-form-label">
                 <strong>{t('security_settings.ldap.bind_mode')}</strong>
               </label>
@@ -136,7 +136,7 @@ class LdapSecuritySettingContents extends React.Component {
               </div>
             </div>
 
-            <div className="form-group row">
+            <div className="row">
               <label className="text-left text-md-right col-md-3 col-form-label">
                 <strong>Bind DN</strong>
               </label>
@@ -171,7 +171,7 @@ class LdapSecuritySettingContents extends React.Component {
               </div>
             </div>
 
-            <div className="form-group row">
+            <div className="row">
               <div htmlFor="bindDNPassword" className="text-left text-md-right col-md-3 col-form-label">
                 <strong>{t('security_settings.ldap.bind_DN_password')}</strong>
               </div>
@@ -202,7 +202,7 @@ class LdapSecuritySettingContents extends React.Component {
               </div>
             </div>
 
-            <div className="form-group row">
+            <div className="row">
               <label className="text-left text-md-right col-md-3 col-form-label">
                 <strong>{t('security_settings.ldap.search_filter')}</strong>
               </label>
@@ -238,7 +238,7 @@ class LdapSecuritySettingContents extends React.Component {
               Attribute Mapping ({t('security_settings.optional')})
             </h3>
 
-            <div className="form-group row">
+            <div className="row">
               <label className="text-left text-md-right col-md-3 col-form-label">
                 <strong htmlFor="attrMapUsername">{t('username')}</strong>
               </label>
@@ -258,7 +258,7 @@ class LdapSecuritySettingContents extends React.Component {
               </div>
             </div>
 
-            <div className="form-group row">
+            <div className="row">
               <div className="offset-md-3 col-md-6">
                 <div className="custom-control custom-checkbox custom-checkbox-success">
                   <input
@@ -282,7 +282,7 @@ class LdapSecuritySettingContents extends React.Component {
               </div>
             </div>
 
-            <div className="form-group row">
+            <div className="row">
               <label className="text-left text-md-right col-md-3 col-form-label">
                 <strong htmlFor="attrMapMail">{t('Email')}</strong>
               </label>
@@ -303,7 +303,7 @@ class LdapSecuritySettingContents extends React.Component {
               </div>
             </div>
 
-            <div className="form-group row">
+            <div className="row">
               <label className="text-left text-md-right col-md-3 col-form-label">
                 <strong htmlFor="attrMapName">{t('Name')}</strong>
               </label>
@@ -328,7 +328,7 @@ class LdapSecuritySettingContents extends React.Component {
               {t('security_settings.ldap.group_search_filter')} ({t('security_settings.optional')})
             </h3>
 
-            <div className="form-group row">
+            <div className="row">
               <label className="text-left text-md-right col-md-3 col-form-label">
                 <strong htmlFor="groupSearchBase">{t('security_settings.ldap.group_search_base_DN')}</strong>
               </label>
@@ -350,7 +350,7 @@ class LdapSecuritySettingContents extends React.Component {
               </div>
             </div>
 
-            <div className="form-group row">
+            <div className="row">
               <label className="text-left text-md-right col-md-3 col-form-label">
                 <strong htmlFor="groupSearchFilter">{t('security_settings.ldap.group_search_filter')}</strong>
               </label>
@@ -381,7 +381,7 @@ class LdapSecuritySettingContents extends React.Component {
               </div>
             </div>
 
-            <div className="form-group row">
+            <div className="row">
               <label className="text-left text-md-right col-md-3 col-form-label">
                 <strong htmlFor="groupDnProperty">{t('security_settings.ldap.group_search_user_DN_property')}</strong>
               </label>

apps/app/src/components/Admin/Security/OidcSecuritySettingContents.jsx

@@ -48,7 +48,7 @@ class OidcSecurityManagementContents extends React.Component {
           {t('security_settings.OAuth.OIDC.name')}
         </h2>
 
-        <div className="row mb-5 form-group">
+        <div className="row mb-5">
           <div className="offset-3 col-6">
             <div className="custom-control custom-switch custom-checkbox-success">
               <input
@@ -67,7 +67,7 @@ class OidcSecurityManagementContents extends React.Component {
           </div>
         </div>
 
-        <div className="row mb-5 form-group">
+        <div className="row mb-5">
           <label className="text-left text-md-right col-md-3 col-form-label">{t('security_settings.callback_URL')}</label>
           <div className="col-md-6">
             <input
@@ -94,7 +94,7 @@ class OidcSecurityManagementContents extends React.Component {
 
             <h3 className="border-bottom">{t('security_settings.configuration')}</h3>
 
-            <div className="row mb-5 form-group">
+            <div className="row mb-5">
               <label htmlFor="oidcProviderName" className="text-left text-md-right col-md-3 col-form-label">{t('security_settings.providerName')}</label>
               <div className="col-md-6">
                 <input
@@ -107,7 +107,7 @@ class OidcSecurityManagementContents extends React.Component {
               </div>
             </div>
 
-            <div className="row mb-5 form-group">
+            <div className="row mb-5">
               <label htmlFor="oidcIssuerHost" className="text-left text-md-right col-md-3 col-form-label">{t('security_settings.issuerHost')}</label>
               <div className="col-md-6">
                 <input
@@ -123,7 +123,7 @@ class OidcSecurityManagementContents extends React.Component {
               </div>
             </div>
 
-            <div className="row mb-5 form-group">
+            <div className="row mb-5">
               <label htmlFor="oidcClientId" className="text-left text-md-right col-md-3 col-form-label">{t('security_settings.clientID')}</label>
               <div className="col-md-6">
                 <input
@@ -139,7 +139,7 @@ class OidcSecurityManagementContents extends React.Component {
               </div>
             </div>
 
-            <div className="row mb-5 form-group">
+            <div className="row mb-5">
               <label htmlFor="oidcClientSecret" className="text-left text-md-right col-md-3 col-form-label">{t('security_settings.client_secret')}</label>
               <div className="col-md-6">
                 <input
@@ -155,7 +155,7 @@ class OidcSecurityManagementContents extends React.Component {
               </div>
             </div>
 
-            <div className="row mb-5 form-group">
+            <div className="row mb-5">
               <label htmlFor="oidcAuthorizationEndpoint" className="text-left text-md-right col-md-3 col-form-label">
                 {t('security_settings.authorization_endpoint')}
               </label>
@@ -173,7 +173,7 @@ class OidcSecurityManagementContents extends React.Component {
               </div>
             </div>
 
-            <div className="row mb-5 form-group">
+            <div className="row mb-5">
               <label htmlFor="oidcTokenEndpoint" className="text-left text-md-right col-md-3 col-form-label">{t('security_settings.token_endpoint')}</label>
               <div className="col-md-6">
                 <input
@@ -189,7 +189,7 @@ class OidcSecurityManagementContents extends React.Component {
               </div>
             </div>
 
-            <div className="row mb-5 form-group">
+            <div className="row mb-5">
               <label htmlFor="oidcRevocationEndpoint" className="text-left text-md-right col-md-3 col-form-label">
                 {t('security_settings.revocation_endpoint')}
               </label>
@@ -207,7 +207,7 @@ class OidcSecurityManagementContents extends React.Component {
               </div>
             </div>
 
-            <div className="row mb-5 form-group">
+            <div className="row mb-5">
               <label htmlFor="oidcIntrospectionEndpoint" className="text-left text-md-right col-md-3 col-form-label">
                 {t('security_settings.introspection_endpoint')}
               </label>
@@ -225,7 +225,7 @@ class OidcSecurityManagementContents extends React.Component {
               </div>
             </div>
 
-            <div className="row mb-5 form-group">
+            <div className="row mb-5">
               <label htmlFor="oidcUserInfoEndpoint" className="text-left text-md-right col-md-3 col-form-label">
                 {t('security_settings.userinfo_endpoint')}
               </label>
@@ -243,7 +243,7 @@ class OidcSecurityManagementContents extends React.Component {
               </div>
             </div>
 
-            <div className="row mb-5 form-group">
+            <div className="row mb-5">
               <label htmlFor="oidcEndSessionEndpoint" className="text-left text-md-right col-md-3 col-form-label">
                 {t('security_settings.end_session_endpoint')}
               </label>
@@ -261,7 +261,7 @@ class OidcSecurityManagementContents extends React.Component {
               </div>
             </div>
 
-            <div className="row mb-5 form-group">
+            <div className="row mb-5">
               <label htmlFor="oidcRegistrationEndpoint" className="text-left text-md-right col-md-3 col-form-label">
                 {t('security_settings.registration_endpoint')}
               </label>
@@ -279,7 +279,7 @@ class OidcSecurityManagementContents extends React.Component {
               </div>
             </div>
 
-            <div className="row mb-5 form-group">
+            <div className="row mb-5">
               <label htmlFor="oidcJWKSUri" className="text-left text-md-right col-md-3 col-form-label">{t('security_settings.jwks_uri')}</label>
               <div className="col-md-6">
                 <input
@@ -299,7 +299,7 @@ class OidcSecurityManagementContents extends React.Component {
               Attribute Mapping ({t('security_settings.optional')})
             </h3>
 
-            <div className="row mb-5 form-group">
+            <div className="row mb-5">
               <label htmlFor="oidcAttrMapId" className="text-left text-md-right col-md-3 col-form-label">Identifier</label>
               <div className="col-md-6">
                 <input
@@ -315,7 +315,7 @@ class OidcSecurityManagementContents extends React.Component {
               </div>
             </div>
 
-            <div className="row mb-5 form-group">
+            <div className="row mb-5">
               <label htmlFor="oidcAttrMapUserName" className="text-left text-md-right col-md-3 col-form-label">{t('username')}</label>
               <div className="col-md-6">
                 <input
@@ -331,7 +331,7 @@ class OidcSecurityManagementContents extends React.Component {
               </div>
             </div>
 
-            <div className="row mb-5 form-group">
+            <div className="row mb-5">
               <label htmlFor="oidcAttrMapName" className="text-left text-md-right col-md-3 col-form-label">{t('Name')}</label>
               <div className="col-md-6">
                 <input
@@ -347,7 +347,7 @@ class OidcSecurityManagementContents extends React.Component {
               </div>
             </div>
 
-            <div className="row mb-5 form-group">
+            <div className="row mb-5">
               <label htmlFor="oidcAttrMapEmail" className="text-left text-md-right col-md-3 col-form-label">{t('Email')}</label>
               <div className="col-md-6">
                 <input
@@ -363,7 +363,7 @@ class OidcSecurityManagementContents extends React.Component {
               </div>
             </div>
 
-            <div className="row mb-5 form-group">
+            <div className="row mb-5">
               <label className="text-left text-md-right col-md-3 col-form-label">{t('security_settings.callback_URL')}</label>
               <div className="col-md-6">
                 <input
@@ -385,7 +385,7 @@ class OidcSecurityManagementContents extends React.Component {
               </div>
             </div>
 
-            <div className="row mb-5 form-group">
+            <div className="row mb-5">
               <div className="offset-md-3 col-md-6">
                 <div className="custom-control custom-checkbox custom-checkbox-success">
                   <input
@@ -407,7 +407,7 @@ class OidcSecurityManagementContents extends React.Component {
               </div>
             </div>
 
-            <div className="row mb-5 form-group">
+            <div className="row mb-5">
               <div className="offset-md-3 col-md-6">
                 <div className="custom-control custom-checkbox custom-checkbox-success">
                   <input

apps/app/src/components/Admin/Security/SamlSecuritySettingContents.jsx

@@ -64,7 +64,7 @@ class SamlSecurityManagementContents extends React.Component {
           />
         )}
 
-        <div className="row form-group mb-5">
+        <div className="row mb-5">
           <div className="col-6 offset-3">
             <div className="custom-control custom-switch custom-checkbox-success">
               <input
@@ -84,7 +84,7 @@ class SamlSecurityManagementContents extends React.Component {
           </div>
         </div>
 
-        <div className="row form-group mb-5">
+        <div className="row mb-5">
           <label className="text-left text-md-right col-md-3 col-form-label">{t('security_settings.callback_URL')}</label>
           <div className="col-md-6">
             <input
@@ -390,7 +390,7 @@ pWVdnzS1VCO8fKsJ7YYIr+JmHvseph3kFUOI5RqkCcMZlKUv83aUThsTHw==
               Attribute Mapping Options
             </h3>
 
-            <div className="row form-group mb-5">
+            <div className="row mb-5">
               <div className="offset-md-3 col-md-6 text-left">
                 <div className="custom-control custom-checkbox custom-checkbox-success">
                   <input
@@ -412,7 +412,7 @@ pWVdnzS1VCO8fKsJ7YYIr+JmHvseph3kFUOI5RqkCcMZlKUv83aUThsTHw==
               </div>
             </div>
 
-            <div className="row form-group mb-5">
+            <div className="row mb-5">
               <div className="offset-md-3 col-md-6 text-left">
                 <div className="custom-control custom-checkbox custom-checkbox-success">
                   <input

apps/app/src/components/Admin/Security/SecuritySetting.jsx

@@ -476,7 +476,7 @@ class SecuritySetting extends React.Component {
         </div>
 
         <h4>{t('security_settings.session')}</h4>
-        <div className="form-group row">
+        <div className="row">
           <label className="text-left text-md-right col-md-3 col-form-label">{t('security_settings.max_age')}</label>
           <div className="col-md-6">
             <input

apps/app/src/components/Admin/SlackIntegration/CustomBotWithProxySettings.jsx

@@ -107,7 +107,7 @@ const CustomBotWithProxySettings = (props) => {
             connectionStatuses={connectionStatuses}
           />
 
-          <div className="form-group row my-4">
+          <div className="row my-4">
             <label className="text-left text-md-right col-md-3 col-form-label mt-3">Proxy URL</label>
             <div className="col-md-6 mt-3">
               <input

apps/app/src/components/Admin/SlackIntegration/CustomBotWithoutProxySettingsAccordion.jsx

@@ -171,7 +171,7 @@ const CustomBotWithoutProxySettingsAccordion = (props) => {
 
         <form>
           <div className="row my-3 justify-content-center">
-            <div className="form-group slack-connection-log col-md-4">
+            <div className="slack-connection-log col-md-4">
               <label className="mb-1"><p className="border-info slack-connection-log-title pl-2 m-0">Logs</p></label>
               <textarea
                 className="form-control card border-info slack-connection-log-body rounded-lg"

apps/app/src/components/Admin/SlackIntegration/WithProxyAccordions.jsx

@@ -137,7 +137,7 @@ const GeneratingTokensAndRegisteringProxyServiceProcess = (props) => {
   return (
     <div className="py-4 px-5">
       <p className="font-weight-bold">1. {t('admin:slack_integration.accordion.generate_access_token')}</p>
-      <div className="form-group row">
+      <div className="row">
         <label className="text-left text-md-right col-md-3 col-form-label">Access Token Proxy to GROWI</label>
         <div className="col-md-6">
           <div className=" mx-1">
@@ -146,7 +146,7 @@ const GeneratingTokensAndRegisteringProxyServiceProcess = (props) => {
           </div>
         </div>
       </div>
-      <div className="form-group row">
+      <div className="row">
         <label className="text-left text-md-right col-md-3 col-form-label">Access Token GROWI to Proxy</label>
         <div className="col-md-6">
           <div className=" mx-1">
@@ -268,7 +268,7 @@ const TestProcess = ({
       <MessageBasedOnConnection isLatestConnectionSuccess={isLatestConnectionSuccess} logsValue={logsValue} />
       <form>
         <div className="row my-3 justify-content-center">
-          <div className="form-group slack-connection-log col-md-4">
+          <div className="slack-connection-log col-md-4">
             <label className="mb-1"><p className="border-info slack-connection-log-title pl-2 m-0">Logs</p></label>
             <textarea
               className="form-control card border-info slack-connection-log-body rounded-lg"

apps/app/src/components/Admin/UserGroup/UserGroupDeleteModal.tsx

@@ -196,7 +196,7 @@ export const UserGroupDeleteModal: FC<Props> = (props: Props) => {
       </ModalBody>
       <ModalFooter>
         <form className="d-flex justify-content-between w-100" onSubmit={handleSubmit}>
-          <div className="d-flex form-group mb-0">
+          <div className="d-flex mb-0">
             {renderPageActionSelector()}
             {renderGroupSelector()}
           </div>

apps/app/src/components/Admin/UserGroup/UserGroupForm.tsx

@@ -63,14 +63,14 @@ export const UserGroupForm: FC<Props> = (props: Props) => {
 
         {
           userGroup?.createdAt != null && (
-            <div className="form-group row">
+            <div className="row">
               <p className="col-md-2 col-form-label">{t('Created')}</p>
               <p className="col-md-4 my-auto">{dateFnsFormat(new Date(userGroup.createdAt), 'yyyy-MM-dd')}</p>
             </div>
           )
         }
 
-        <div className="form-group row">
+        <div className="row">
           <label htmlFor="name" className="col-md-2 col-form-label">
             {t('user_group_management.group_name')}
           </label>
@@ -87,7 +87,7 @@ export const UserGroupForm: FC<Props> = (props: Props) => {
           </div>
         </div>
 
-        <div className="form-group row">
+        <div className="row">
           <label htmlFor="description" className="col-md-2 col-form-label">
             {t('Description')}
           </label>
@@ -96,7 +96,7 @@ export const UserGroupForm: FC<Props> = (props: Props) => {
           </div>
         </div>
 
-        <div className="form-group row">
+        <div className="row">
           <label htmlFor="parent" className="col-md-2 col-form-label">
             {t('user_group_management.parent_group')}
           </label>
@@ -143,7 +143,7 @@ export const UserGroupForm: FC<Props> = (props: Props) => {
           </div>
         </div>
 
-        <div className="form-group row">
+        <div className="row">
           <div className="offset-md-2 col-md-10">
             <button type="submit" className="btn btn-primary">
               {submitButtonLabel}

apps/app/src/components/Admin/UserGroup/UserGroupModal.tsx

@@ -74,7 +74,7 @@ export const UserGroupModal: FC<Props> = (props: Props) => {
         </ModalHeader>
 
         <ModalBody>
-          <div className="form-group">
+          <div>
             <label htmlFor="name">
               {t('user_group_management.group_name')}
             </label>
@@ -89,7 +89,7 @@ export const UserGroupModal: FC<Props> = (props: Props) => {
             />
           </div>
 
-          <div className="form-group">
+          <div>
             <label htmlFor="description">
               {t('Description')}
             </label>
@@ -103,7 +103,7 @@ export const UserGroupModal: FC<Props> = (props: Props) => {
         </ModalBody>
 
         <ModalFooter>
-          <div className="form-group">
+          <div>
             <button type="submit" className="btn btn-primary">
               {buttonLabel}
             </button>

apps/app/src/components/Admin/UserGroupDetail/UserGroupUserFormByInput.jsx

@@ -115,7 +115,7 @@ class UserGroupUserFormByInput extends React.Component {
     const inputProps = { autoComplete: 'off' };
 
     return (
-      <div className="form-group row">
+      <div className="row">
         <div className="col-8 pr-0">
           <AsyncTypeahead
             {...this.props}

apps/app/src/components/CreateTemplateModal.jsx

@@ -47,7 +47,7 @@ const CreateTemplateModal = (props) => {
         {t('template.modal_label.Create/Edit Template Page')}
       </ModalHeader>
       <ModalBody>
-        <div className="form-group">
+        <div>
           <label className="mb-4">
             <code>{parentPath}</code><br />
             { t('template.modal_label.Create template under') }

apps/app/src/components/DataTransferForm.tsx

@@ -16,7 +16,7 @@ const DataTransferForm = (): JSX.Element => {
         <strong>{ t('g2g_data_transfer.transfer_data_to_this_growi')}</strong>
       </p>
 
-      <div className="form-group row mt-3">
+      <div className="row mt-3">
         <div className="col-md-12">
           <button type="button" className="btn btn-primary w-100" onClick={generateTransferKey}>
             {t('g2g_data_transfer.publish_transfer_key')}

apps/app/src/components/DeleteBookmarkFolderModal.tsx

@@ -46,7 +46,7 @@ const DeleteBookmarkFolderModal: FC = () => {
         {t('bookmark_folder.delete_modal.modal_header_label')}
       </ModalHeader>
       <ModalBody>
-        <div className="form-group pb-1">
+        <div className="pb-1">
           <label>{ t('bookmark_folder.delete_modal.modal_body_description') }:</label><br />
           <FolderIcon isOpen={false} /> {deleteBookmarkFolderModalData?.bookmarkFolder?.name}
         </div>

apps/app/src/components/EmptyTrashModal.tsx

@@ -65,7 +65,7 @@ const EmptyTrashModal: FC = () => {
         {t('modal_empty.empty_the_trash')}
       </ModalHeader>
       <ModalBody>
-        <div className="form-group grw-scrollable-modal-body pb-1">
+        <div className="grw-scrollable-modal-body pb-1">
           <label>{ t('modal_delete.deleting_page') }:</label><br />
           {/* Todo: change the way to show path on modal when too many pages are selected */}
           {renderPagePaths()}

apps/app/src/components/Me/BasicInfoSettings.tsx

@@ -49,7 +49,7 @@ export const BasicInfoSettings = (): JSX.Element => {
   return (
     <>
 
-      <div className="form-group row">
+      <div className="row">
         <label htmlFor="userForm[name]" className="text-left text-md-right col-md-3 col-form-label">{t('Name')}</label>
         <div className="col-md-6">
           <input
@@ -62,7 +62,7 @@ export const BasicInfoSettings = (): JSX.Element => {
         </div>
       </div>
 
-      <div className="form-group row">
+      <div className="row">
         <label htmlFor="userForm[email]" className="text-left text-md-right col-md-3 col-form-label">{t('Email')}</label>
         <div className="col-md-6">
           <input
@@ -83,7 +83,7 @@ export const BasicInfoSettings = (): JSX.Element => {
         </div>
       </div>
 
-      <div className="form-group row">
+      <div className="row">
         <label className="text-left text-md-right col-md-3 col-form-label">{t('Disclose E-mail')}</label>
         <div className="col-md-6">
           <div className="custom-control custom-radio custom-control-inline">
@@ -111,7 +111,7 @@ export const BasicInfoSettings = (): JSX.Element => {
         </div>
       </div>
 
-      <div className="form-group row">
+      <div className="row">
         <label className="text-left text-md-right col-md-3 col-form-label">{t('Language')}</label>
         <div className="col-md-6">
           {
@@ -136,7 +136,7 @@ export const BasicInfoSettings = (): JSX.Element => {
           }
         </div>
       </div>
-      <div className="form-group row">
+      <div className="row">
         <label htmlFor="userForm[slackMemberId]" className="text-left text-md-right col-md-3 col-form-label">{t('Slack Member ID')}</label>
         <div className="col-md-6">
           <input

apps/app/src/components/Me/InAppNotificationSettings.tsx

@@ -69,7 +69,7 @@ const InAppNotificationSettings: FC = () => {
     <>
       <h2 className="border-bottom my-4">{t('in_app_notification_settings.subscribe_settings')}</h2>
 
-      <div className="form-group row">
+      <div className="row">
         <div className="offset-md-3 col-md-6 text-left">
           {subscribeRulesMenuItems.map(rule => (
             <div

apps/app/src/components/Me/OtherSettings.tsx

@@ -50,7 +50,7 @@ const OtherSettings = (): JSX.Element => {
         </div>
       )}
 
-      <div className="form-group row">
+      <div className="row">
         <div className="offset-md-3 col-md-6 text-left">
           {!isLoadingCurrentUser && (
             <div className="custom-control custom-switch custom-checkbox-primary">

apps/app/src/components/Navbar/GlobalSearch.module.scss

@@ -33,12 +33,6 @@
     }
   }
 
-  .form-group:not(.has-error) {
-    .rbt-input.form-control {
-      border: none;
-    }
-  }
-
   .grw-shortcut-key-indicator {
     position: absolute;
     top: 0;

apps/app/src/components/Navbar/GlobalSearch.tsx

@@ -88,7 +88,7 @@ export const GlobalSearch = (props: GlobalSearchProps): JSX.Element => {
   }
 
   return (
-    <div className={`grw-global-search ${styles['grw-global-search']} form-group mb-0 d-print-none ${isSearchServiceReachable ? '' : 'has-error'}`}>
+    <div className={`grw-global-search ${styles['grw-global-search']} mb-0 d-print-none ${isSearchServiceReachable ? '' : 'has-error'}`}>
       <div className="input-group flex-nowrap">
         <div className={` ${dropup ? 'dropup' : ''}`}>
           <button

apps/app/src/components/PageAccessoriesModal/ShareLink/ShareLinkForm.tsx

@@ -106,11 +106,11 @@ export const ShareLinkForm: FC<Props> = (props: Props) => {
       <div className=" p-3">
 
         {/* ExpirationTypeOptions */}
-        <div className="form-group row">
+        <div className="row">
           <label htmlFor="inputDesc" className="col-md-5 col-form-label">{t('share_links.expire')}</label>
           <div className="col-md-7">
 
-            <div className="custom-control custom-radio form-group ">
+            <div className="custom-control custom-radio ">
               <input
                 type="radio"
                 className="custom-control-input"
@@ -123,7 +123,7 @@ export const ShareLinkForm: FC<Props> = (props: Props) => {
               <label className="custom-control-label" htmlFor="customRadio1">{t('share_links.Unlimited')}</label>
             </div>
 
-            <div className="custom-control custom-radio  form-group">
+            <div className="custom-control custom-radio ">
               <input
                 type="radio"
                 className="custom-control-input"
@@ -149,7 +149,7 @@ export const ShareLinkForm: FC<Props> = (props: Props) => {
               </label>
             </div>
 
-            <div className="custom-control custom-radio form-group text-nowrap mb-0">
+            <div className="custom-control custom-radio text-nowrap mb-0">
               <input
                 type="radio"
                 className="custom-control-input"
@@ -185,7 +185,7 @@ export const ShareLinkForm: FC<Props> = (props: Props) => {
         </div>
 
         {/* DescriptionForm */}
-        <div className="form-group row">
+        <div className="row">
           <label htmlFor="inputDesc" className="col-md-5 col-form-label">{t('share_links.description')}</label>
           <div className="col-md-4">
             <input

apps/app/src/components/PageAlert/FixPageGrantAlert.tsx

@@ -125,7 +125,7 @@ const FixPageGrantModal = (props: ModalProps): JSX.Element => {
     return (
       <>
         <ModalBody>
-          <div className="form-group">
+          <div>
             {/* eslint-disable-next-line react/no-danger */}
             <p className="mb-2" dangerouslySetInnerHTML={{ __html: t('fix_page_grant.modal.need_to_fix_grant') }} />
 

apps/app/src/components/PageDeleteModal.tsx

@@ -259,7 +259,7 @@ const PageDeleteModal: FC = () => {
 
     return (
       <>
-        <div className="form-group grw-scrollable-modal-body pb-1">
+        <div className="grw-scrollable-modal-body pb-1">
           <label>{ t('modal_delete.deleting_page') }:</label><br />
           {/* Todo: change the way to show path on modal when too many pages are selected */}
           {renderPagePathsToDelete()}

apps/app/src/components/PageDuplicateModal.tsx

@@ -157,10 +157,10 @@ const PageDuplicateModal = (): JSX.Element => {
 
     return (
       <>
-        <div className="form-group"><label>{t('modal_duplicate.label.Current page name')}</label><br />
+        <div><label>{t('modal_duplicate.label.Current page name')}</label><br />
           <code>{path}</code>
         </div>
-        <div className="form-group">
+        <div>
           <label htmlFor="duplicatePageName">{ t('modal_duplicate.label.New page name') }</label><br />
           <div className="input-group">
             <div>

apps/app/src/components/PageEditor/GridEditModal.jsx

@@ -198,8 +198,8 @@ class GridEditModal extends React.Component {
           <div className="row">
             <div className="col-12">
               <h3 className="grw-modal-head">{t('grid_edit.grid_settings')}</h3>
-              <form className="form-group mb-0">
-                <div className="form-group row my-3">
+              <form className="mb-0">
+                <div className="row my-3">
                   <label className="col-sm-3" htmlFor="gridPattern">
                     {t('grid_edit.grid_pattern')}
                   </label>
@@ -219,7 +219,7 @@ class GridEditModal extends React.Component {
                     </div>
                   </div>
                 </div>
-                <div className="form-group row">
+                <div className="row">
                   <label className="col-sm-3" htmlFor="breakPoint">
                     {t('grid_edit.break_point')}
                   </label>

apps/app/src/components/PageEditor/LinkEditModal.tsx

@@ -242,7 +242,7 @@ export const LinkEditModal = (): JSX.Element => {
     return (
       <>
         <h3 className="grw-modal-head">{t('link_edit.set_link_and_label')}</h3>
-        <form className="form-group">
+        <form>
           <div className="form-gorup my-3">
             <div className="input-group flex-nowrap">
               <div>
@@ -297,8 +297,8 @@ export const LinkEditModal = (): JSX.Element => {
   const renderPathFormatForm = (): JSX.Element => {
     return (
       <div className="card well pt-3">
-        <form className="form-group mb-0">
-          <div className="form-group mb-0 row">
+        <form className="mb-0">
+          <div className="mb-0 row">
             <label className="col-sm-3">{t('link_edit.path_format')}</label>
             <div className="col-sm-9">
               <div className="custom-control custom-checkbox custom-checkbox-info custom-control-inline">

apps/app/src/components/PageEditor/MarkdownTableDataImportForm.tsx

@@ -52,7 +52,7 @@ export const MarkdownTableDataImportForm = (props: MarkdownTableDataImportFormPr
 
   return (
     <form className="data-import-form">
-      <div className="form-group">
+      <div>
         <label htmlFor="data-import-form-type-select">{t('select_data_format')}</label>
         <select
           id="data-import-form-type-select"
@@ -66,7 +66,7 @@ export const MarkdownTableDataImportForm = (props: MarkdownTableDataImportFormPr
           <option value="html">HTML</option>
         </select>
       </div>
-      <div className="form-group">
+      <div>
         <label htmlFor="data-import-form-type-textarea">{t('import_data')}</label>
         <textarea
           id="data-import-form-type-textarea"
@@ -77,7 +77,7 @@ export const MarkdownTableDataImportForm = (props: MarkdownTableDataImportFormPr
         />
       </div>
       <Collapse isOpen={parserErrorMessage != null}>
-        <div className="form-group">
+        <div>
           <label htmlFor="data-import-form-type-textarea-alert">{t('parse_error')}</label>
           <textarea
             id="data-import-form-type-textarea-alert"

apps/app/src/components/PageEditor/OptionsSelector.tsx

@@ -216,7 +216,7 @@ const ConfigurationDropdown = memo((): JSX.Element => {
   }, [editorSettings, t, update]);
 
   return (
-    <div className="my-0 form-group">
+    <div className="my-0">
       <Dropdown
         direction="up"
         className="grw-editor-configuration-dropdown"

apps/app/src/components/PageRenameModal.tsx

@@ -209,11 +209,11 @@ const PageRenameModal = (): JSX.Element => {
 
     return (
       <>
-        <div className="form-group">
+        <div>
           <label>{ t('modal_rename.label.Current page name') }</label><br />
           <code>{ path }</code>
         </div>
-        <div className="form-group">
+        <div>
           <label htmlFor="newPageName">{ t('modal_rename.label.New page name') }</label><br />
           <div className="input-group">
             <div>

apps/app/src/components/PasswordResetExecutionForm.tsx

@@ -52,7 +52,7 @@ const PasswordResetExecutionForm: FC = () => {
 
   return (
     <form role="form" onSubmit={changePassword}>
-      <div className="form-group">
+      <div>
         <div className="input-group">
           <input
             name="password"
@@ -63,7 +63,7 @@ const PasswordResetExecutionForm: FC = () => {
           />
         </div>
       </div>
-      <div className="form-group">
+      <div>
         <div className="input-group">
           <input
             name="password"
@@ -77,7 +77,7 @@ const PasswordResetExecutionForm: FC = () => {
           <p className="text-danger mt-2">{t(validationErrorI18n)}</p>
         )}
       </div>
-      <div className="form-group">
+      <div>
         <input name="reset-password-btn" className="btn btn-lg btn-primary btn-block" value={t('forgot_password.reset_password')} type="submit" />
       </div>
       <Link href="/login" prefetch={false}>

apps/app/src/components/PasswordResetRequestForm.tsx

@@ -43,7 +43,7 @@ const PasswordResetRequestForm: FC = () => {
           <h1><i className="icon-lock large"></i></h1>
           <h1 className="text-center">{ t('forgot_password.forgot_password') }</h1>
           <h3>{t('forgot_password.password_reset_request_desc')}</h3>
-          <div className="form-group">
+          <div>
             <div className="input-group">
               <input
                 name="email"
@@ -55,7 +55,7 @@ const PasswordResetRequestForm: FC = () => {
               />
             </div>
           </div>
-          <div className="form-group">
+          <div>
             <button
               className="btn btn-lg btn-primary btn-block"
               type="submit"

apps/app/src/components/PrivateLegacyPagesMigrationModal.tsx

@@ -78,7 +78,7 @@ export const PrivateLegacyPagesMigrationModal = (): JSX.Element => {
         { t('private_legacy_pages.modal.title') }
       </ModalHeader>
       <ModalBody>
-        <div className="form-group grw-scrollable-modal-body pb-1">
+        <div className="grw-scrollable-modal-body pb-1">
           <label>{ t('private_legacy_pages.modal.converting_pages') }:</label><br />
           {/* Todo: change the way to show path on modal when too many pages are selected */}
           {/* https://redmine.weseek.co.jp/issues/82787 */}

apps/app/src/components/PutbackPageModal.jsx

@@ -71,7 +71,7 @@ const PutBackPageModal = () => {
     }
     return (
       <>
-        <div className="form-group">
+        <div>
           <label>{t('modal_putback.label.Put Back Page')}:</label><br />
           <code>{path}</code>
         </div>

apps/app/src/components/SavePageControls/GrantSelector.tsx

@@ -137,7 +137,7 @@ const GrantSelector = (props: Props): JSX.Element => {
     }
 
     return (
-      <div className="form-group grw-grant-selector mb-0" data-testid="grw-grant-selector">
+      <div className="grw-grant-selector mb-0" data-testid="grw-grant-selector">
         <UncontrolledDropdown direction="up">
           <DropdownToggle color={dropdownToggleBtnColor} caret className="d-flex justify-content-between align-items-center" disabled={disabled}>
             {dropdownToggleLabelElm}

apps/app/src/components/Sidebar/AppearanceModeDropdown.tsx

@@ -76,7 +76,7 @@ export const AppearanceModeDropdown:FC<AppearanceModeDropdownProps> = (props: Ap
         <h6 className="dropdown-header">{t(isEditMode ? 'personal_dropdown.sidebar_mode_editor' : 'personal_dropdown.sidebar_mode')}</h6>
         <form className="px-4">
           <div className="form-row justify-content-center">
-            <div className="form-group col-auto mb-0 d-flex align-items-center">
+            <div className="col-auto mb-0 d-flex align-items-center">
               <IconWithTooltip id={isEditMode ? 'iwt-sidebar-editor-drawer' : 'iwt-sidebar-drawer'} label="Drawer" additionalClasses="grw-sidebar-mode-icon">
                 <SidebarDrawerIcon />
               </IconWithTooltip>
@@ -130,7 +130,7 @@ export const AppearanceModeDropdown:FC<AppearanceModeDropdownProps> = (props: Ap
             <h6 className="dropdown-header">{t('personal_dropdown.color_mode')}</h6>
             <form className="px-4">
               <div className="form-row justify-content-center">
-                <div className="form-group col-auto d-flex align-items-center">
+                <div className="col-auto d-flex align-items-center">
                   <IconWithTooltip id="iwt-light" label="Light" additionalClasses={useOsSettings ? 'grw-color-mode-icon-muted' : 'grw-color-mode-icon'}>
                     <SunIcon />
                   </IconWithTooltip>
@@ -151,7 +151,7 @@ export const AppearanceModeDropdown:FC<AppearanceModeDropdownProps> = (props: Ap
                 </div>
               </div>
               <div className="form-row">
-                <div className="form-group col-auto">
+                <div className="col-auto">
                   <div className="custom-control custom-checkbox">
                     <input
                       id="cbFollowOs"

apps/app/src/features/growi-plugin/client/components/Admin/PluginsExtensionPageContents/PluginInstallerForm.tsx

@@ -44,7 +44,7 @@ export const PluginInstallerForm = (): JSX.Element => {
 
   return (
     <form role="form" onSubmit={submitHandler}>
-      <div className="form-group row">
+      <div className="row">
         <label className="text-left text-md-right col-md-3 col-form-label">{t('plugins.form.label_url')}</label>
         <div className="col-md-6">
           <input
@@ -57,7 +57,7 @@ export const PluginInstallerForm = (): JSX.Element => {
           <p className="form-text text-muted">{t('plugins.form.desc_url')}</p>
         </div>
       </div>
-      <div className="form-group row">
+      <div className="row">
         <label className="text-left text-md-right col-md-3 col-form-label">{t('plugins.form.label_branch')}</label>
         <div className="col-md-6">
           <input

apps/app/src/features/questionnaire/client/components/ProactiveQuestionnaireModal.tsx

@@ -91,7 +91,7 @@ const ProactiveQuestionnaireModal = (props: ModalProps): JSX.Element => {
               <p>{t('questionnaire_modal.strive_to_improve_services')}</p>
             </div>
             <form className="px-5" onSubmit={submitHandler}>
-              <div className="form-group row mt-5">
+              <div className="row mt-5">
                 <label className="col-sm-5 col-form-label" htmlFor="satisfaction">
                   <span className="badge badge-primary mr-2">{t('questionnaire_modal.required')}</span>{t('questionnaire_modal.satisfaction_with_growi')}
                 </label>
@@ -104,7 +104,7 @@ const ProactiveQuestionnaireModal = (props: ModalProps): JSX.Element => {
                   <option>5</option>
                 </select>
               </div>
-              <div className="form-group row mt-3">
+              <div className="row mt-3">
                 <label className="col-sm-5 col-form-label" htmlFor="lengthOfExperience">{t('questionnaire_modal.history_of_growi_usage')}</label>
                 <select
                   name="lengthOfExperience"
@@ -120,15 +120,15 @@ const ProactiveQuestionnaireModal = (props: ModalProps): JSX.Element => {
                   <option>{t('questionnaire_modal.length_of_experience.less_than_one_month')}</option>
                 </select>
               </div>
-              <div className="form-group row mt-3">
+              <div className="row mt-3">
                 <label className="col-sm-5 col-form-label" htmlFor="occupation">{t('questionnaire_modal.occupation')}</label>
                 <input className="col-sm-7 form-control" type="text" name="occupation" id="occupation" />
               </div>
-              <div className="form-group row mt-3">
+              <div className="row mt-3">
                 <label className="col-sm-5 col-form-label" htmlFor="position">{t('questionnaire_modal.position')}</label>
                 <input className="col-sm-7 form-control" type="text" name="position" id="position" />
               </div>
-              <div className="form-group row mt-3">
+              <div className="row mt-3">
                 <label className="col-sm-5 col-form-label" htmlFor="commentText">
                   <span className="badge badge-primary mr-2">{t('questionnaire_modal.required')}</span>{t('questionnaire_modal.comment_on_growi')}
                 </label>

apps/app/src/styles/_override-rbt.scss

@@ -1,14 +1,5 @@
 // override react-bootstrap-typeahead styles
 // see: https://github.com/ericgio/react-bootstrap-typeahead
-.form-group:not(.has-error) {
-  .rbt-input.form-control {
-    // focus
-    &.focus {
-      border-color: inherit;
-    }
-  }
-}
-
 .rbt-input-wrapper {
   .close.rbt-close {
     // default bootstrap .close has padding 0