add form-label

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

@@ -95,7 +95,7 @@ const AppSetting = (props) => {
                       adminAppContainer.changeGlobalLang(e.target.value);
                     }}
                   />
-                  <label className="custom-control-label" htmlFor={`radioLang${locale}`}>{fixedT('meta.display_name')}</label>
+                  <label className="form-label custom-control-label" htmlFor={`radioLang${locale}`}>{fixedT('meta.display_name')}</label>
                 </div>
               );
             })
@@ -120,7 +120,7 @@ const AppSetting = (props) => {
               checked={adminAppContainer.state.isEmailPublishedForNewUser === true}
               onChange={() => { adminAppContainer.changeIsEmailPublishedForNewUserShow(true) }}
             />
-            <label className="custom-control-label" htmlFor="radio-email-show">{t('commons:Show')}</label>
+            <label className="form-label custom-control-label" htmlFor="radio-email-show">{t('commons:Show')}</label>
           </div>
 
           <div className="custom-control custom-radio custom-control-inline">
@@ -132,7 +132,7 @@ const AppSetting = (props) => {
               checked={adminAppContainer.state.isEmailPublishedForNewUser === false}
               onChange={() => { adminAppContainer.changeIsEmailPublishedForNewUserShow(false) }}
             />
-            <label className="custom-control-label" htmlFor="radio-email-hide">{t('commons:Hide')}</label>
+            <label className="form-label custom-control-label" htmlFor="radio-email-hide">{t('commons:Hide')}</label>
           </div>
 
         </div>
@@ -157,7 +157,7 @@ const AppSetting = (props) => {
               }}
             />
             <label
-              className="custom-control-label"
+              className="custom-control-label form-label"
               htmlFor="cbFileUpload"
             >
               {t('admin:app_setting.enable_files_except_image')}

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

@@ -55,7 +55,7 @@ export const FileUploadSettingMolecule = React.memo((props: FileUploadSettingMol
                   disabled={props.isFixedFileUploadByEnvVar}
                   onChange={(e) => { props?.onChangeFileUploadType(e, type) }}
                 />
-                <label className="custom-control-label" htmlFor={`file-upload-type-radio-${type}`}>{t(`admin:app_setting.${type}_label`)}</label>
+                <label className="form-label custom-control-label" htmlFor={`file-upload-type-radio-${type}`}>{t(`admin:app_setting.${type}_label`)}</label>
               </div>
             );
           })}

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

@@ -63,7 +63,7 @@ const MailSetting = (props: Props) => {
       </div>
 
       <div className="row mb-5">
-        <label className="text-left text-md-right col-md-3 col-form-label">
+        <label className="form-label text-left text-md-right col-md-3 col-form-label">
           {t('admin:app_setting.transmission_method')}
         </label>
         <div className="col-md-6 py-2">
@@ -80,7 +80,12 @@ const MailSetting = (props: Props) => {
                     adminAppContainer.changeTransmissionMethod(method);
                   }}
                 />
-                <label className="custom-control-label" htmlFor={`transmission-method-radio-${method}`}>{t(`admin:app_setting.${method}_label`)}</label>
+                <label
+                  className="form-label custom-control-label"
+                  htmlFor={`transmission-method-radio-${method}`}
+                >
+                  {t(`admin:app_setting.${method}_label`)}
+                </label>
               </div>
             );
           })}

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

@@ -80,7 +80,7 @@ const QuestionnaireSettings = (): JSX.Element => {
                 checked={isQuestionnaireEnabled}
                 onChange={onChangeIsQuestionnaireEnabledHandler}
               />
-              <label className="custom-control-label" htmlFor="isQuestionnaireEnabled">
+              <label className="form-label custom-control-label" htmlFor="isQuestionnaireEnabled">
                 {t('app_setting.enable_questionnaire')}
               </label>
             </div>
@@ -96,7 +96,7 @@ const QuestionnaireSettings = (): JSX.Element => {
                 onChange={onChangeisAppSiteUrlHashedHandler}
                 disabled={!isQuestionnaireEnabled}
               />
-              <label className="custom-control-label" htmlFor="isAppSiteUrlHashed">
+              <label className="form-label custom-control-label" htmlFor="isAppSiteUrlHashed">
                 {t('app_setting.anonymize_app_site_url')}
               </label>
               <p className="form-text text-muted small">

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

@@ -91,7 +91,7 @@ export const SelectActionDropdown: FC<Props> = (props: Props) => {
                   defaultChecked
                   onChange={(e) => { multipleActionCheckboxChangedHandler(item.actions, e.target.checked) }}
                 />
-                <label className="form-check-label">{t(`admin:audit_log_action_category.${item.actionCategory}`)}</label>
+                <label className="form-label form-check-label">{t(`admin:audit_log_action_category.${item.actionCategory}`)}</label>
               </div>
             </div>
             {

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

@@ -224,7 +224,7 @@ export const AuditLogManagement: FC = () => {
             />
 
             <div className="admin-audit-log ml-3">
-              <label htmlFor="jumpPageInput" className="mr-1 text-secondary">Jump To Page</label>
+              <label htmlFor="jumpPageInput" className="form-label mr-1 text-secondary">Jump To Page</label>
               <input
                 id="jumpPageInput"
                 type="text"

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

@@ -24,7 +24,7 @@ const CustomizeFunctionOption = (props: Props): JSX.Element => {
           checked={isChecked}
           onChange={onChecked}
         />
-        <label className="custom-control-label" htmlFor={optionId}>
+        <label className="form-label custom-control-label" htmlFor={optionId}>
           <strong>{label}</strong>
         </label>
       </div>

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

@@ -83,7 +83,7 @@ const CustomizeSidebarsetting = (): JSX.Element => {
                 disabled={isSidebarDrawerMode}
                 onChange={() => setIsSidebarClosedAtDockMode(false)}
               />
-              <label className="custom-control-label" htmlFor="is-open">
+              <label className="form-label custom-control-label" htmlFor="is-open">
                 {t('customize_settings.default_sidebar_mode.dock_mode_default_open')}
               </label>
             </div>
@@ -97,7 +97,7 @@ const CustomizeSidebarsetting = (): JSX.Element => {
                 disabled={isSidebarDrawerMode}
                 onChange={() => setIsSidebarClosedAtDockMode(true)}
               />
-              <label className="custom-control-label" htmlFor="is-closed">
+              <label className="form-label custom-control-label" htmlFor="is-closed">
                 {t('customize_settings.default_sidebar_mode.dock_mode_default_close')}
               </label>
             </div>

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

@@ -20,7 +20,7 @@ const PagingSizeUncontrolledDropdown = (props) => {
       <div className="row">
         <div className="offset-md-3 col-md-6 text-left">
           <div className="my-0 w-100">
-            <label>{props.label}</label>
+            <label className="form-label">{props.label}</label>
           </div>
           <UncontrolledDropdown>
             <DropdownToggle className="text-right col-6" caret>

apps/app/src/components/Admin/ExportArchiveData/SelectCollectionsModal.tsx

@@ -124,7 +124,7 @@ const SelectCollectionsModal = (props: Props): JSX.Element => {
                   checked={selectedCollections.has(collectionName)}
                   onChange={toggleCheckbox}
                 />
-                <label className="text-capitalize custom-control-label ml-3" htmlFor={collectionName}>
+                <label className="form-label text-capitalize custom-control-label ml-3" htmlFor={collectionName}>
                   {collectionName}
                 </label>
               </div>

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

@@ -74,7 +74,7 @@ class ImportCollectionConfigurationModal extends React.Component {
             checked={option.isOverwriteAuthorWithCurrentUser || false} // add ' || false' to avoid uncontrolled input warning
             onChange={() => this.changeHandler({ isOverwriteAuthorWithCurrentUser: !option.isOverwriteAuthorWithCurrentUser })}
           />
-          <label htmlFor="cbOpt4" className="custom-control-label">
+          <label htmlFor="cbOpt4" className="form-label custom-control-label">
             {t(`${translationBase}.overwrite_author.label`)}
             <p className="form-text text-muted mt-0" dangerouslySetInnerHTML={{ __html: t(`${translationBase}.overwrite_author.desc`) }} />
           </label>
@@ -87,7 +87,7 @@ class ImportCollectionConfigurationModal extends React.Component {
             checked={option.makePublicForGrant2 || false} // add ' || false' to avoid uncontrolled input warning
             onChange={() => this.changeHandler({ makePublicForGrant2: !option.makePublicForGrant2 })}
           />
-          <label htmlFor="cbOpt1" className="custom-control-label">
+          <label htmlFor="cbOpt1" className="form-label custom-control-label">
             {t(`${translationBase}.set_public_to_page.label`, { from: t('Anyone with the link') })}
             <p
               className="form-text text-muted mt-0"
@@ -103,7 +103,7 @@ class ImportCollectionConfigurationModal extends React.Component {
             checked={option.makePublicForGrant4 || false} // add ' || false' to avoid uncontrolled input warning
             onChange={() => this.changeHandler({ makePublicForGrant4: !option.makePublicForGrant4 })}
           />
-          <label htmlFor="cbOpt2" className="custom-control-label">
+          <label htmlFor="cbOpt2" className="form-label custom-control-label">
             {t(`${translationBase}.set_public_to_page.label`, { from: t('Only me') })}
             <p
               className="form-text text-muted mt-0"
@@ -119,7 +119,7 @@ class ImportCollectionConfigurationModal extends React.Component {
             checked={option.makePublicForGrant5 || false} // add ' || false' to avoid uncontrolled input warning
             onChange={() => this.changeHandler({ makePublicForGrant5: !option.makePublicForGrant5 })}
           />
-          <label htmlFor="cbOpt3" className="custom-control-label">
+          <label htmlFor="cbOpt3" className="form-label custom-control-label">
             {t(`${translationBase}.set_public_to_page.label`, { from: t('Only inside the group') })}
             <p
               className="form-text text-muted mt-0"
@@ -135,7 +135,7 @@ class ImportCollectionConfigurationModal extends React.Component {
             checked={option.initPageMetadatas || false} // add ' || false' to avoid uncontrolled input warning
             onChange={() => this.changeHandler({ initPageMetadatas: !option.initPageMetadatas })}
           />
-          <label htmlFor="cbOpt5" className="custom-control-label">
+          <label htmlFor="cbOpt5" className="form-label custom-control-label">
             {t(`${translationBase}.initialize_meta_datas.label`)}
             <p className="form-text text-muted mt-0" dangerouslySetInnerHTML={{ __html: t(`${translationBase}.initialize_meta_datas.desc`) }} />
           </label>
@@ -148,7 +148,7 @@ class ImportCollectionConfigurationModal extends React.Component {
             checked={option.initHackmdDatas || false} // add ' || false' to avoid uncontrolled input warning
             onChange={() => this.changeHandler({ initHackmdDatas: !option.initHackmdDatas })}
           />
-          <label htmlFor="cbOpt6" className="custom-control-label">
+          <label htmlFor="cbOpt6" className="form-label custom-control-label">
             {t(`${translationBase}.initialize_hackmd_related_datas.label`)}
             <p className="form-text text-muted mt-0" dangerouslySetInnerHTML={{ __html: t(`${translationBase}.initialize_hackmd_related_datas.desc`) }} />
           </label>
@@ -175,7 +175,7 @@ class ImportCollectionConfigurationModal extends React.Component {
             checked={option.isOverwriteAuthorWithCurrentUser || false} // add ' || false' to avoid uncontrolled input warning
             onChange={() => this.changeHandler({ isOverwriteAuthorWithCurrentUser: !option.isOverwriteAuthorWithCurrentUser })}
           />
-          <label htmlFor="cbOpt1" className="custom-control-label">
+          <label htmlFor="cbOpt1" className="form-label custom-control-label">
             {t(`${translationBase}.overwrite_author.label`)}
             <p className="form-text text-muted mt-0" dangerouslySetInnerHTML={{ __html: t(`${translationBase}.overwrite_author.desc`) }} />
           </label>

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

@@ -92,7 +92,7 @@ export default class ImportCollectionItem extends React.Component {
           disabled={isImporting}
           onChange={this.changeHandler}
         />
-        <label className="text-capitalize custom-control-label" htmlFor={collectionName}>
+        <label className="form-label text-capitalize custom-control-label" htmlFor={collectionName}>
           {collectionName}
         </label>
       </div>

apps/app/src/components/Admin/LegacySlackIntegration/SlackConfiguration.jsx

@@ -65,7 +65,7 @@ class SlackConfiguration extends React.Component {
             <h2 className="border-bottom mb-5">{t('notification_settings.slack_incoming_configuration')}</h2>
 
             <div className="row mb-3">
-              <label className="col-md-3 text-left text-md-right">Webhook URL</label>
+              <label className="form-label col-md-3 text-left text-md-right">Webhook URL</label>
               <div className="col-md-6">
                 <input
                   className="form-control"
@@ -86,7 +86,7 @@ class SlackConfiguration extends React.Component {
                     checked={adminSlackIntegrationLegacyContainer.state.isIncomingWebhookPrioritized || false}
                     onChange={() => { adminSlackIntegrationLegacyContainer.switchIsIncomingWebhookPrioritized() }}
                   />
-                  <label className="custom-control-label" htmlFor="cbPrioritizeIWH">
+                  <label className="form-label custom-control-label" htmlFor="cbPrioritizeIWH">
                     {t('notification_settings.prioritize_webhook')}
                   </label>
                 </div>
@@ -117,7 +117,7 @@ class SlackConfiguration extends React.Component {
               </div>
 
               <div className="row mb-5">
-                <label className="col-md-3 text-left text-md-right">OAuth access token</label>
+                <label className="form-label col-md-3 text-left text-md-right">OAuth access token</label>
                 <div className="col-md-6">
                   <input
                     className="form-control"

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

@@ -41,7 +41,7 @@ const IndentForm = (props: Props) => {
     return (
       <div className="col">
         <div>
-          <label htmlFor="adminPreferredIndentSize">{t('markdown_settings.indent_options.indentSize')}</label>
+          <label htmlFor="adminPreferredIndentSize" className="form-label">{t('markdown_settings.indent_options.indentSize')}</label>
           <UncontrolledDropdown id="adminPreferredIndentSize">
             <DropdownToggle caret className="col-3 col-sm-2 col-md-5 col-lg-5 col-xl-3 text-right">
               <span className="float-left">
@@ -84,7 +84,7 @@ const IndentForm = (props: Props) => {
               adminMarkDownContainer.setState({ isIndentSizeForced: !isIndentSizeForced });
             }}
           />
-          <label className="custom-control-label" htmlFor="isIndentSizeForced">
+          <label className="form-label custom-control-label" htmlFor="isIndentSizeForced">
             {t('markdown_settings.indent_options.disallow_indent_change')}
           </label>
         </div>

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

@@ -51,7 +51,7 @@ class LineBreakForm extends React.Component {
             checked={isEnabledLinebreaks}
             onChange={() => { adminMarkDownContainer.setState({ isEnabledLinebreaks: !isEnabledLinebreaks }) }}
           />
-          <label className="custom-control-label" htmlFor="isEnabledLinebreaks">
+          <label className="form-label custom-control-label" htmlFor="isEnabledLinebreaks">
             {t('markdown_settings.lineBreak_options.enable_lineBreak') }
           </label>
         </div>
@@ -76,7 +76,7 @@ class LineBreakForm extends React.Component {
             checked={isEnabledLinebreaksInComments}
             onChange={() => { adminMarkDownContainer.setState({ isEnabledLinebreaksInComments: !isEnabledLinebreaksInComments }) }}
           />
-          <label className="custom-control-label" htmlFor="isEnabledLinebreaksInComments">
+          <label className="form-label custom-control-label" htmlFor="isEnabledLinebreaksInComments">
             {t('markdown_settings.lineBreak_options.enable_lineBreak_for_comment') }
           </label>
         </div>

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

@@ -58,7 +58,7 @@ class XssForm extends React.Component {
                 checked={xssOption === RehypeSanitizeOption.RECOMMENDED}
                 onChange={() => { adminMarkDownContainer.setState({ xssOption: RehypeSanitizeOption.RECOMMENDED }) }}
               />
-              <label className="custom-control-label w-100" htmlFor="xssOption1">
+              <label className="form-label custom-control-label w-100" htmlFor="xssOption1">
                 <p className="font-weight-bold">{t('markdown_settings.xss_options.recommended_setting')}</p>
                 <div className="mt-4">
                   <div className="d-flex justify-content-between">
@@ -100,7 +100,7 @@ class XssForm extends React.Component {
                 checked={xssOption === RehypeSanitizeOption.CUSTOM}
                 onChange={() => { adminMarkDownContainer.setState({ xssOption: RehypeSanitizeOption.CUSTOM }) }}
               />
-              <label className="custom-control-label w-100" htmlFor="xssOption2">
+              <label className="form-label custom-control-label w-100" htmlFor="xssOption2">
                 <p className="font-weight-bold">{t('markdown_settings.xss_options.custom_whitelist')}</p>
                 <WhitelistInput customizable />
               </label>
@@ -129,7 +129,7 @@ class XssForm extends React.Component {
                   checked={isEnabledXss}
                   onChange={adminMarkDownContainer.switchEnableXss}
                 />
-                <label className="custom-control-label w-100" htmlFor="XssEnable">
+                <label className="form-label custom-control-label w-100" htmlFor="XssEnable">
                   {t('markdown_settings.xss_options.enable_xss_prevention')}
                 </label>
               </div>

apps/app/src/components/Admin/Notification/GlobalNotification.jsx

@@ -50,7 +50,7 @@ const GlobalNotification = (props) => {
               checked={adminNotificationContainer.state.isNotificationForOwnerPageEnabled || false}
               onChange={() => { adminNotificationContainer.switchIsNotificationForOwnerPageEnabled() }}
             />
-            <label className="custom-control-label" htmlFor="isNotificationForOwnerPageEnabled">
+            <label className="form-label custom-control-label" htmlFor="isNotificationForOwnerPageEnabled">
               {/* eslint-disable-next-line react/no-danger */}
               <span dangerouslySetInnerHTML={{ __html: t('notification_settings.just_me_notification_help') }} />
             </label>
@@ -68,7 +68,7 @@ const GlobalNotification = (props) => {
               checked={adminNotificationContainer.state.isNotificationForGroupPageEnabled || false}
               onChange={() => { adminNotificationContainer.switchIsNotificationForGroupPageEnabled() }}
             />
-            <label className="custom-control-label" htmlFor="isNotificationForGroupPageEnabled">
+            <label className="form-label custom-control-label" htmlFor="isNotificationForGroupPageEnabled">
               {/* eslint-disable-next-line react/no-danger */}
               <span dangerouslySetInnerHTML={{ __html: t('notification_settings.group_notification_help') }} />
             </label>

apps/app/src/components/Admin/Notification/GlobalNotificationList.jsx

@@ -88,7 +88,7 @@ class GlobalNotificationList extends React.Component {
                     defaultChecked={notification.isEnabled}
                     onClick={() => this.toggleIsEnabled(notification)}
                   />
-                  <label className="custom-control-label" htmlFor={notification._id} />
+                  <label className="form-label custom-control-label" htmlFor={notification._id} />
                 </div>
               </td>
               <td>

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

@@ -126,7 +126,7 @@ const ManageGlobalNotification = (props: Props): JSX.Element => {
 
         <div className="col-sm-4">
           <h3>
-            <label htmlFor="triggerPath">{t('notification_settings.trigger_path')}
+            <label htmlFor="triggerPath" className="form-label">{t('notification_settings.trigger_path')}
               {/* eslint-disable-next-line react/no-danger */}
               <small dangerouslySetInnerHTML={{ __html: t('notification_settings.trigger_path_help', '<code>*</code>') }} />
             </label>
@@ -154,7 +154,7 @@ const ManageGlobalNotification = (props: Props): JSX.Element => {
                 checked={notifyType === NotifyType.Email}
                 onChange={() => { setNotifyType(NotifyType.Email) }}
               />
-              <label className="custom-control-label" htmlFor="mail">
+              <label className="form-label custom-control-label" htmlFor="mail">
                 <p className="font-weight-bold">Email</p>
               </label>
             </div>
@@ -168,7 +168,7 @@ const ManageGlobalNotification = (props: Props): JSX.Element => {
                 checked={notifyType === NotifyType.SLACK}
                 onChange={() => { setNotifyType(NotifyType.SLACK) }}
               />
-              <label className="custom-control-label" htmlFor="slack">
+              <label className="form-label custom-control-label" htmlFor="slack">
                 <p className="font-weight-bold">Slack</p>
               </label>
             </div>

apps/app/src/components/Admin/Notification/TriggerEventCheckBox.jsx

@@ -15,7 +15,7 @@ const TriggerEventCheckBox = (props) => {
         checked={props.checked}
         onChange={props.onChange}
       />
-      <label className="custom-control-label" htmlFor={`trigger-event-${props.event}`}>
+      <label className="form-label custom-control-label" htmlFor={`trigger-event-${props.event}`}>
         {props.children}{' '}
         {t(`notification_settings.event_${props.event}`)}
       </label>

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

@@ -66,7 +66,7 @@ class GitHubSecurityManagementContents extends React.Component {
                 checked={adminGeneralSecurityContainer.state.isGitHubEnabled || false}
                 onChange={() => { adminGeneralSecurityContainer.switchIsGitHubOAuthEnabled() }}
               />
-              <label className="custom-control-label" htmlFor="isGitHubEnabled">
+              <label className="form-label custom-control-label" htmlFor="isGitHubEnabled">
                 {t('security_settings.OAuth.GitHub.enable_github')}
               </label>
             </div>
@@ -76,7 +76,7 @@ class GitHubSecurityManagementContents extends React.Component {
         </div>
 
         <div className="row mb-5">
-          <label className="col-12 col-md-3 text-left text-md-right py-2">{t('security_settings.callback_URL')}</label>
+          <label className="form-label col-12 col-md-3 text-left text-md-right py-2">{t('security_settings.callback_URL')}</label>
           <div className="col-12 col-md-6">
             <input
               className="form-control"
@@ -104,7 +104,7 @@ class GitHubSecurityManagementContents extends React.Component {
             <h3 className="border-bottom">{t('security_settings.configuration')}</h3>
 
             <div className="row mb-5">
-              <label htmlFor="githubClientId" className="col-3 text-right py-2">{t('security_settings.clientID')}</label>
+              <label htmlFor="githubClientId" className="col-3 text-right py-2 form-label">{t('security_settings.clientID')}</label>
               <div className="col-6">
                 <input
                   className="form-control"
@@ -120,7 +120,7 @@ class GitHubSecurityManagementContents extends React.Component {
             </div>
 
             <div className="row mb-5">
-              <label htmlFor="githubClientSecret" className="col-3 text-right py-2">{t('security_settings.client_secret')}</label>
+              <label htmlFor="githubClientSecret" className="col-3 text-right py-2 form-label">{t('security_settings.client_secret')}</label>
               <div className="col-6">
                 <input
                   className="form-control"

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

@@ -64,7 +64,7 @@ class GoogleSecurityManagementContents extends React.Component {
                 checked={adminGeneralSecurityContainer.state.isGoogleEnabled || false}
                 onChange={() => { adminGeneralSecurityContainer.switchIsGoogleOAuthEnabled() }}
               />
-              <label className="custom-control-label" htmlFor="isGoogleEnabled">
+              <label className="form-label custom-control-label" htmlFor="isGoogleEnabled">
                 {t('security_settings.OAuth.Google.enable_google')}
               </label>
             </div>
@@ -74,7 +74,7 @@ class GoogleSecurityManagementContents extends React.Component {
         </div>
 
         <div className="row mb-5">
-          <label className="col-12 col-md-3 text-left text-md-right py-2">{t('security_settings.callback_URL')}</label>
+          <label className="form-label col-12 col-md-3 text-left text-md-right py-2">{t('security_settings.callback_URL')}</label>
           <div className="col-12 col-md-6">
             <input
               className="form-control"
@@ -102,7 +102,7 @@ class GoogleSecurityManagementContents extends React.Component {
             <h3 className="border-bottom">{t('security_settings.configuration')}</h3>
 
             <div className="row mb-5">
-              <label htmlFor="googleClientId" className="col-3 text-right py-2">{t('security_settings.clientID')}</label>
+              <label htmlFor="googleClientId" className="col-3 text-right py-2 form-label">{t('security_settings.clientID')}</label>
               <div className="col-6">
                 <input
                   className="form-control"
@@ -118,7 +118,7 @@ class GoogleSecurityManagementContents extends React.Component {
             </div>
 
             <div className="row mb-5">
-              <label htmlFor="googleClientSecret" className="col-3 text-right py-2">{t('security_settings.client_secret')}</label>
+              <label htmlFor="googleClientSecret" className="col-3 text-right py-2 form-label">{t('security_settings.client_secret')}</label>
               <div className="col-6">
                 <input
                   className="form-control"

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

@@ -116,7 +116,7 @@ export const LdapAuthTest = (props: LdapAuthTestProps): JSX.Element => {
       </div>
 
       <div>
-        <label><h5>Logs</h5></label>
+        <label className="form-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

@@ -68,7 +68,7 @@ class LdapSecuritySettingContents extends React.Component {
                 checked={isLdapEnabled}
                 onChange={() => { adminGeneralSecurityContainer.switchIsLdapEnabled() }}
               />
-              <label className="custom-control-label" htmlFor="isLdapEnabled">
+              <label className="form-label custom-control-label" htmlFor="isLdapEnabled">
                 {t('security_settings.ldap.enable_ldap')}
               </label>
             </div>
@@ -107,7 +107,7 @@ class LdapSecuritySettingContents extends React.Component {
             </div>
 
             <div className="row">
-              <label className="text-left text-md-right col-md-3 col-form-label">
+              <label className="form-label text-left text-md-right col-md-3 col-form-label">
                 <strong>{t('security_settings.ldap.bind_mode')}</strong>
               </label>
               <div className="col-md-6">
@@ -137,7 +137,7 @@ class LdapSecuritySettingContents extends React.Component {
             </div>
 
             <div className="row">
-              <label className="text-left text-md-right col-md-3 col-form-label">
+              <label className="form-label text-left text-md-right col-md-3 col-form-label">
                 <strong>Bind DN</strong>
               </label>
               <div className="col-md-6">
@@ -203,7 +203,7 @@ class LdapSecuritySettingContents extends React.Component {
             </div>
 
             <div className="row">
-              <label className="text-left text-md-right col-md-3 col-form-label">
+              <label className="form-label text-left text-md-right col-md-3 col-form-label">
                 <strong>{t('security_settings.ldap.search_filter')}</strong>
               </label>
               <div className="col-md-6">
@@ -239,7 +239,7 @@ class LdapSecuritySettingContents extends React.Component {
             </h3>
 
             <div className="row">
-              <label className="text-left text-md-right col-md-3 col-form-label">
+              <label className="form-label text-left text-md-right col-md-3 col-form-label">
                 <strong htmlFor="attrMapUsername">{t('username')}</strong>
               </label>
               <div className="col-md-6">
@@ -283,7 +283,7 @@ class LdapSecuritySettingContents extends React.Component {
             </div>
 
             <div className="row">
-              <label className="text-left text-md-right col-md-3 col-form-label">
+              <label className="form-label text-left text-md-right col-md-3 col-form-label">
                 <strong htmlFor="attrMapMail">{t('Email')}</strong>
               </label>
               <div className="col-md-6">
@@ -304,7 +304,7 @@ class LdapSecuritySettingContents extends React.Component {
             </div>
 
             <div className="row">
-              <label className="text-left text-md-right col-md-3 col-form-label">
+              <label className="form-label text-left text-md-right col-md-3 col-form-label">
                 <strong htmlFor="attrMapName">{t('Name')}</strong>
               </label>
               <div className="col-md-6">
@@ -329,7 +329,7 @@ class LdapSecuritySettingContents extends React.Component {
             </h3>
 
             <div className="row">
-              <label className="text-left text-md-right col-md-3 col-form-label">
+              <label className="form-label text-left text-md-right col-md-3 col-form-label">
                 <strong htmlFor="groupSearchBase">{t('security_settings.ldap.group_search_base_DN')}</strong>
               </label>
               <div className="col-md-6">
@@ -351,7 +351,7 @@ class LdapSecuritySettingContents extends React.Component {
             </div>
 
             <div className="row">
-              <label className="text-left text-md-right col-md-3 col-form-label">
+              <label className="form-label text-left text-md-right col-md-3 col-form-label">
                 <strong htmlFor="groupSearchFilter">{t('security_settings.ldap.group_search_filter')}</strong>
               </label>
               <div className="col-md-6">
@@ -382,7 +382,7 @@ class LdapSecuritySettingContents extends React.Component {
             </div>
 
             <div className="row">
-              <label className="text-left text-md-right col-md-3 col-form-label">
+              <label className="form-label 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>
               <div className="col-md-6">

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

@@ -73,7 +73,7 @@ class LocalSecuritySettingContents extends React.Component {
                 onChange={() => adminGeneralSecurityContainer.switchIsLocalEnabled()}
                 disabled={adminLocalSecurityContainer.state.useOnlyEnvVars}
               />
-              <label className="custom-control-label" htmlFor="isLocalEnabled">
+              <label className="form-label custom-control-label" htmlFor="isLocalEnabled">
                 {t('security_settings.Local.enable_local')}
               </label>
             </div>
@@ -173,7 +173,7 @@ class LocalSecuritySettingContents extends React.Component {
                     checked={isPasswordResetEnabled}
                     onChange={() => adminLocalSecurityContainer.switchIsPasswordResetEnabled()}
                   />
-                  <label className="custom-control-label" htmlFor="isPasswordResetEnabled">
+                  <label className="form-label custom-control-label" htmlFor="isPasswordResetEnabled">
                     {t('security_settings.Local.enable_password_reset_by_users')}
                   </label>
                 </div>
@@ -202,7 +202,7 @@ class LocalSecuritySettingContents extends React.Component {
                     checked={isEmailAuthenticationEnabled}
                     onChange={() => adminLocalSecurityContainer.switchIsEmailAuthenticationEnabled()}
                   />
-                  <label className="custom-control-label" htmlFor="isEmailAuthenticationEnabled">
+                  <label className="form-label custom-control-label" htmlFor="isEmailAuthenticationEnabled">
                     {t('security_settings.Local.enable_email_authentication')}
                   </label>
                 </div>

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

@@ -58,7 +58,7 @@ class OidcSecurityManagementContents extends React.Component {
                 checked={adminGeneralSecurityContainer.state.isOidcEnabled}
                 onChange={() => { adminGeneralSecurityContainer.switchIsOidcEnabled() }}
               />
-              <label className="custom-control-label" htmlFor="isOidcEnabled">
+              <label className="form-label custom-control-label" htmlFor="isOidcEnabled">
                 {t('security_settings.OAuth.enable_oidc')}
               </label>
             </div>
@@ -364,7 +364,7 @@ class OidcSecurityManagementContents extends React.Component {
             </div>
 
             <div className="row mb-5">
-              <label className="text-left text-md-right col-md-3 col-form-label">{t('security_settings.callback_URL')}</label>
+              <label className="form-label text-left text-md-right col-md-3 col-form-label">{t('security_settings.callback_URL')}</label>
               <div className="col-md-6">
                 <input
                   className="form-control"
@@ -396,7 +396,7 @@ class OidcSecurityManagementContents extends React.Component {
                     onChange={() => { adminOidcSecurityContainer.switchIsSameUsernameTreatedAsIdenticalUser() }}
                   />
                   <label
-                    className="custom-control-label"
+                    className="form-label custom-control-label"
                     htmlFor="bindByUserName-oidc"
                     dangerouslySetInnerHTML={{ __html: t('security_settings.Treat username matching as identical') }}
                   />
@@ -418,7 +418,7 @@ class OidcSecurityManagementContents extends React.Component {
                     onChange={() => { adminOidcSecurityContainer.switchIsSameEmailTreatedAsIdenticalUser() }}
                   />
                   <label
-                    className="custom-control-label"
+                    className="form-label custom-control-label"
                     htmlFor="bindByEmail-oidc"
                     dangerouslySetInnerHTML={{ __html: t('security_settings.Treat email matching as identical') }}
                   />

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

@@ -75,7 +75,7 @@ class SamlSecurityManagementContents extends React.Component {
                 onChange={() => { adminGeneralSecurityContainer.switchIsSamlEnabled() }}
                 disabled={adminSamlSecurityContainer.state.useOnlyEnvVars}
               />
-              <label className="custom-control-label" htmlFor="isSamlEnabled">
+              <label className="form-label custom-control-label" htmlFor="isSamlEnabled">
                 {t('security_settings.SAML.enable_saml')}
               </label>
             </div>
@@ -401,7 +401,7 @@ pWVdnzS1VCO8fKsJ7YYIr+JmHvseph3kFUOI5RqkCcMZlKUv83aUThsTHw==
                     onChange={() => { adminSamlSecurityContainer.switchIsSameUsernameTreatedAsIdenticalUser() }}
                   />
                   <label
-                    className="custom-control-label"
+                    className="form-label custom-control-label"
                     htmlFor="bindByUserName-SAML"
                     dangerouslySetInnerHTML={{ __html: t('security_settings.Treat username matching as identical') }}
                   />
@@ -423,7 +423,7 @@ pWVdnzS1VCO8fKsJ7YYIr+JmHvseph3kFUOI5RqkCcMZlKUv83aUThsTHw==
                     onChange={() => { adminSamlSecurityContainer.switchIsSameEmailTreatedAsIdenticalUser() }}
                   />
                   <label
-                    className="custom-control-label"
+                    className="form-label custom-control-label"
                     htmlFor="bindByEmail-SAML"
                     dangerouslySetInnerHTML={{ __html: t('security_settings.Treat email matching as identical') }}
                   />

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

@@ -364,7 +364,7 @@ class SecuritySetting extends React.Component {
                       checked={!adminGeneralSecurityContainer.state.isShowRestrictedByOwner}
                       onChange={() => { adminGeneralSecurityContainer.switchIsShowRestrictedByOwner() }}
                     />
-                    <label className="custom-control-label" htmlFor="isShowRestrictedByOwner">
+                    <label className="form-label custom-control-label" htmlFor="isShowRestrictedByOwner">
                       {t('security_settings.displayed_or_hidden')}
                     </label>
                   </div>
@@ -381,7 +381,7 @@ class SecuritySetting extends React.Component {
                       checked={!adminGeneralSecurityContainer.state.isShowRestrictedByGroup}
                       onChange={() => { adminGeneralSecurityContainer.switchIsShowRestrictedByGroup() }}
                     />
-                    <label className="custom-control-label" htmlFor="isShowRestrictedByGroup">
+                    <label className="form-label custom-control-label" htmlFor="isShowRestrictedByGroup">
                       {t('security_settings.displayed_or_hidden')}
                     </label>
                   </div>
@@ -464,7 +464,7 @@ class SecuritySetting extends React.Component {
                 checked={adminGeneralSecurityContainer.state.isUsersHomepageDeletionEnabled}
                 onChange={() => { adminGeneralSecurityContainer.switchIsUsersHomepageDeletionEnabled() }}
               />
-              <label className="custom-control-label" htmlFor="is-user-page-deletion-enabled">
+              <label className="form-label custom-control-label" htmlFor="is-user-page-deletion-enabled">
                 {t('security_settings.user_homepage_deletion.enable_user_homepage_deletion')}
               </label>
             </div>

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

@@ -124,7 +124,7 @@ const ShareLinkSetting = (props: ShareLinkSettingProps) => {
               checked={!disableLinkSharing}
               onChange={() => switchDisableLinkSharing()}
             />
-            <label className="custom-control-label" htmlFor="disableLinkSharing">
+            <label className="form-label custom-control-label" htmlFor="disableLinkSharing">
               {t('security_settings.enable_link_sharing')}
             </label>
           </div>

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

@@ -172,7 +172,7 @@ const CustomBotWithoutProxySettingsAccordion = (props) => {
         <form>
           <div className="row my-3 justify-content-center">
             <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>
+              <label className="form-label 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"
                 rows="5"

apps/app/src/components/Admin/SlackIntegration/SlackAppIntegrationControl.tsx

@@ -32,7 +32,7 @@ export const SlackAppIntegrationControl: FC<Props> = (props: Props) => {
             }
           }}
         />
-        <label className="custom-control-label" htmlFor={inputId}>
+        <label className="form-label custom-control-label" htmlFor={inputId}>
           Primary
         </label>
       </div>

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

@@ -269,7 +269,7 @@ const TestProcess = ({
       <form>
         <div className="row my-3 justify-content-center">
           <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>
+            <label className="form-label 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"
               rows="5"

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

@@ -75,7 +75,7 @@ export const UserGroupModal: FC<Props> = (props: Props) => {
 
         <ModalBody>
           <div>
-            <label htmlFor="name">
+            <label htmlFor="name" className="form-label">
               {t('user_group_management.group_name')}
             </label>
             <input
@@ -90,7 +90,7 @@ export const UserGroupModal: FC<Props> = (props: Props) => {
           </div>
 
           <div>
-            <label htmlFor="description">
+            <label htmlFor="description" className="form-label">
               {t('Description')}
             </label>
             <textarea className="form-control" name="description" value={currentDescription} onChange={onChangeDescriptionHandler} />

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

@@ -17,7 +17,7 @@ class CheckBoxForSerchUserOption extends React.Component {
           checked={this.props.checked}
           onChange={this.props.onChange}
         />
-        <label className="text-capitalize custom-control-label ml-3" htmlFor={`isAlso${option}Searched`}>
+        <label className="form-label text-capitalize custom-control-label ml-3" htmlFor={`isAlso${option}Searched`}>
           {t('admin:user_group_management.add_modal.enable_option', { option })}
         </label>
       </div>

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

@@ -17,7 +17,7 @@ const RadioButtonForSerchUserOption = (props) => {
         checked={props.checked}
         onChange={props.onChange}
       />
-      <label className="text-capitalize custom-control-label ml-3" htmlFor={`${searchType}Match`}>
+      <label className="form-label text-capitalize custom-control-label ml-3" htmlFor={`${searchType}Match`}>
         {t(`admin:user_group_management.add_modal.${searchType}_match`)}
       </label>
     </div>

apps/app/src/components/Admin/UserGroupDetail/UpdateParentConfirmModal.tsx

@@ -52,7 +52,7 @@ export const UpdateParentConfirmModal: FC = () => {
                   checked={isForceUpdate}
                   onChange={() => setForceUpdate(!isForceUpdate)}
                 />
-                <label className="custom-control-label" htmlFor="forceUpdateParents">
+                <label className="form-label custom-control-label" htmlFor="forceUpdateParents">
                   {t('admin:user_group_management.update_parent_confirm_modal.force_update_parents_label')}
                   <p className="form-text text-muted mt-0">{t('admin:user_group_management.update_parent_confirm_modal.force_update_parents_description')}</p>
                 </label>

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

@@ -89,7 +89,7 @@ const UserManagement = (props: UserManagementProps) => {
           checked={adminUsersContainer.isSelected(status)}
           onChange={() => clickHandler(status)}
         />
-        <label className="custom-control-label" htmlFor={`c_${status}`}>
+        <label className="form-label custom-control-label" htmlFor={`c_${status}`}>
           <span className={`badge badge-pill badge-${statusColor} d-inline-block vt mt-1`}>
             {statusLabel}
           </span>

apps/app/src/components/Admin/Users/PasswordResetModal.jsx

@@ -69,7 +69,7 @@ class PasswordResetModal extends React.Component {
     return (
       <div className="d-flex col text-left ml-1 pl-0">
         {!isMailerSetup ? (
-          <label className="form-text text-muted" dangerouslySetInnerHTML={{ __html: t('admin:mailer_setup_required') }} />
+          <label className="form-label form-text text-muted" dangerouslySetInnerHTML={{ __html: t('admin:mailer_setup_required') }} />
         ) : (
           <>
             <p className="mr-2">To:</p>

apps/app/src/components/Admin/Users/UserInviteModal.jsx

@@ -67,7 +67,7 @@ class UserInviteModal extends React.Component {
 
     return (
       <>
-        <label>{t('admin:user_management.invite_modal.emails')}</label>
+        <label className="form-label">{t('admin:user_management.invite_modal.emails')}</label>
         <p>
           {t('admin:user_management.invite_modal.description1')}
           <br />
@@ -114,7 +114,7 @@ class UserInviteModal extends React.Component {
             defaultChecked={this.state.sendEmail}
             disabled={!isMailerSetup}
           />
-          <label className="custom-control-label" htmlFor="sendEmail">
+          <label className="form-label custom-control-label" htmlFor="sendEmail">
             {t('admin:user_management.invite_modal.invite_thru_email')}
           </label>
           {isMailerSetup
@@ -151,7 +151,7 @@ class UserInviteModal extends React.Component {
 
     return (
       <>
-        <label className="mr-3 text-left" style={{ flex: 1 }}>
+        <label className="form-label mr-3 text-left" style={{ flex: 1 }}>
           <text className="text-danger">{t('admin:user_management.invite_modal.send_temporary_password')}</text>
           <text>{t('admin:user_management.invite_modal.send_email')}</text>
         </label>

apps/app/src/components/Bookmarks/BookmarkFolderMenuItem.tsx

@@ -19,7 +19,7 @@ export const BookmarkFolderMenuItem: React.FC<{
         onChange={e => e.stopPropagation()}
         onClick={e => e.stopPropagation()}
       />
-      <label htmlFor={`bookmark-folder-menu-item-${itemId}`} className="p-2 m-0">
+      <label htmlFor={`bookmark-folder-menu-item-${itemId}`} className="p-2 m-0 form-label">
         {itemName}
       </label>
     </div>

apps/app/src/components/Common/ImageCropModal.tsx

@@ -170,7 +170,7 @@ const ImageCropModal: FC<Props> = (props: Props) => {
                 checked={isCropImage}
                 onChange={() => { setIsCropImage(!isCropImage) }}
               />
-              <label className="custom-control-label" htmlFor="cropImageOption">
+              <label className="form-label custom-control-label" htmlFor="cropImageOption">
                 { t('crop_image_modal.image_crop') }
               </label>
             </div>

apps/app/src/components/CreateTemplateModal.jsx

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

apps/app/src/components/DeleteBookmarkFolderModal.tsx

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

apps/app/src/components/EmptyTrashModal.tsx

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

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

@@ -33,7 +33,7 @@ const ApiSettings = React.memo((): JSX.Element => {
       <h2 className="border-bottom my-4">{ t('API Token Settings') }</h2>
 
       <div className="row mb-3">
-        <label htmlFor="apiToken" className="col-md-3 text-md-right">{t('Current API Token')}</label>
+        <label htmlFor="apiToken" className="col-md-3 text-md-right form-label">{t('Current API Token')}</label>
         <div className="col-md-6">
           {personalSettingsData?.apiToken != null
             ? (

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

@@ -95,7 +95,7 @@ export const BasicInfoSettings = (): JSX.Element => {
               checked={personalSettingsInfo?.isEmailPublished === true}
               onChange={() => changePersonalSettingsHandler({ isEmailPublished: true })}
             />
-            <label className="custom-control-label" htmlFor="radioEmailShow">{t('Show')}</label>
+            <label className="form-label custom-control-label" htmlFor="radioEmailShow">{t('Show')}</label>
           </div>
           <div className="custom-control custom-radio custom-control-inline">
             <input
@@ -106,7 +106,7 @@ export const BasicInfoSettings = (): JSX.Element => {
               checked={personalSettingsInfo?.isEmailPublished === false}
               onChange={() => changePersonalSettingsHandler({ isEmailPublished: false })}
             />
-            <label className="custom-control-label" htmlFor="radioEmailHide">{t('Hide')}</label>
+            <label className="form-label custom-control-label" htmlFor="radioEmailHide">{t('Hide')}</label>
           </div>
         </div>
       </div>
@@ -129,7 +129,7 @@ export const BasicInfoSettings = (): JSX.Element => {
                     checked={personalSettingsInfo?.lang === locale}
                     onChange={() => changePersonalSettingsHandler({ lang: locale })}
                   />
-                  <label className="custom-control-label" htmlFor={`radioLang${locale}`}>{fixedT('meta.display_name') as string}</label>
+                  <label className="form-label custom-control-label" htmlFor={`radioLang${locale}`}>{fixedT('meta.display_name') as string}</label>
                 </div>
               );
             })

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

@@ -83,7 +83,7 @@ const InAppNotificationSettings: FC = () => {
                 checked={isCheckedRule(rule.name, subscribeRules)}
                 onChange={e => ruleCheckboxHandler(rule.name, e.target.checked)}
               />
-              <label className="custom-control-label" htmlFor={rule.name}>
+              <label className="form-label custom-control-label" htmlFor={rule.name}>
                 <strong>{rule.name}</strong>
               </label>
               <p className="form-text text-muted small">

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

@@ -63,7 +63,7 @@ const OtherSettings = (): JSX.Element => {
                   onChange={onChangeIsQuestionnaireEnabledHandler}
                   disabled={!growiIsQuestionnaireEnabled}
                 />
-                <label className="custom-control-label" htmlFor="isQuestionnaireEnabled">
+                <label className="form-label custom-control-label" htmlFor="isQuestionnaireEnabled">
                   {t('questionnaire.enable_questionnaire')}
                 </label>
               </span>

apps/app/src/components/Me/PasswordSettings.jsx

@@ -92,7 +92,7 @@ class PasswordSettings extends React.Component {
         {(this.state.isPasswordSet)
         && (
           <div className="row mb-3">
-            <label htmlFor="oldPassword" className="col-md-3 text-md-right">{ t('personal_settings.current_password') }</label>
+            <label htmlFor="oldPassword" className="col-md-3 text-md-right form-label">{ t('personal_settings.current_password') }</label>
             <div className="col-md-5">
               <input
                 className="form-control"
@@ -105,7 +105,7 @@ class PasswordSettings extends React.Component {
           </div>
         )}
         <div className="row mb-3">
-          <label htmlFor="newPassword" className="col-md-3 text-md-right">{t('personal_settings.new_password') }</label>
+          <label htmlFor="newPassword" className="col-md-3 text-md-right form-label">{t('personal_settings.new_password') }</label>
           <div className="col-md-5">
             {/* to prevent autocomplete username into userForm[email] in BasicInfoSettings component */}
             {/* https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion */}
@@ -120,7 +120,7 @@ class PasswordSettings extends React.Component {
           </div>
         </div>
         <div className={`row mb-3 ${isIncorrectConfirmPassword && 'has-error'}`}>
-          <label htmlFor="newPasswordConfirm" className="col-md-3 text-md-right">{t('personal_settings.new_password_confirm') }</label>
+          <label htmlFor="newPasswordConfirm" className="col-md-3 text-md-right form-label">{t('personal_settings.new_password_confirm') }</label>
           <div className="col-md-5">
             <input
               className="form-control"

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

@@ -104,7 +104,7 @@ const ProfileImageSettings = (): JSX.Element => {
                 checked={isGravatarEnabled}
                 onChange={() => setGravatarEnabled(true)}
               />
-              <label className="custom-control-label" htmlFor="radioGravatar">
+              <label className="form-label custom-control-label" htmlFor="radioGravatar">
                 <img src={GRAVATAR_DEFAULT} data-vrt-blackout-profile /> Gravatar
               </label>
               <a href="https://gravatar.com/">
@@ -127,7 +127,7 @@ const ProfileImageSettings = (): JSX.Element => {
                 checked={!isGravatarEnabled}
                 onChange={() => setGravatarEnabled(false)}
               />
-              <label className="custom-control-label" htmlFor="radioUploadPicture">
+              <label className="form-label custom-control-label" htmlFor="radioUploadPicture">
                 { t('Upload Image') }
               </label>
             </div>

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

@@ -53,7 +53,7 @@ const WideViewMenuItem = (props: WideViewMenuItemProps): JSX.Element => {
           checked={expandContentWidth}
           onChange={() => {}}
         />
-        <label className="custom-control-label" htmlFor="switchContentWidth">
+        <label className="form-label custom-control-label" htmlFor="switchContentWidth">
           { t('wide_view') }
         </label>
       </div>

apps/app/src/components/Page/CopyDropdown.jsx

@@ -135,7 +135,7 @@ const CopyDropdown = (props) => {
                   checked={isParamsAppended}
                   onChange={toggleAppendParams}
                 />
-                <label className="custom-control-label small" htmlFor={customSwitchForParamsId}>Append params</label>
+                <label className="form-label custom-control-label small" htmlFor={customSwitchForParamsId}>Append params</label>
               </div>
             ) }
           </div>

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

@@ -120,7 +120,7 @@ export const ShareLinkForm: FC<Props> = (props: Props) => {
                 checked={expirationType === ExpirationType.UNLIMITED}
                 onChange={() => { handleChangeExpirationType(ExpirationType.UNLIMITED) }}
               />
-              <label className="custom-control-label" htmlFor="customRadio1">{t('share_links.Unlimited')}</label>
+              <label className="form-label custom-control-label" htmlFor="customRadio1">{t('share_links.Unlimited')}</label>
             </div>
 
             <div className="custom-control custom-radio ">
@@ -133,7 +133,7 @@ export const ShareLinkForm: FC<Props> = (props: Props) => {
                 onChange={() => { handleChangeExpirationType(ExpirationType.NUMBER_OF_DAYS) }}
                 name="expirationType"
               />
-              <label className="custom-control-label" htmlFor="customRadio2">
+              <label className="form-label custom-control-label" htmlFor="customRadio2">
                 <div className="row align-items-center m-0">
                   <input
                     type="number"
@@ -159,7 +159,7 @@ export const ShareLinkForm: FC<Props> = (props: Props) => {
                 checked={expirationType === ExpirationType.CUSTOM}
                 onChange={() => { handleChangeExpirationType(ExpirationType.CUSTOM) }}
               />
-              <label className="custom-control-label" htmlFor="customRadio3">
+              <label className="form-label custom-control-label" htmlFor="customRadio3">
                 {t('share_links.Custom')}
               </label>
               <div className="d-inline-flex flex-wrap">

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

@@ -143,7 +143,7 @@ const FixPageGrantModal = (props: ModalProps): JSX.Element => {
                   checked={selectedGrant === PageGrant.GRANT_RESTRICTED}
                   onChange={() => setSelectedGrant(PageGrant.GRANT_RESTRICTED)}
                 />
-                <label className="custom-control-label" htmlFor="grantRestricted">
+                <label className="form-label custom-control-label" htmlFor="grantRestricted">
                   { t('fix_page_grant.modal.radio_btn.restrected') }
                 </label>
               </div>
@@ -157,7 +157,7 @@ const FixPageGrantModal = (props: ModalProps): JSX.Element => {
                   checked={selectedGrant === PageGrant.GRANT_OWNER}
                   onChange={() => setSelectedGrant(PageGrant.GRANT_OWNER)}
                 />
-                <label className="custom-control-label" htmlFor="grantUser">
+                <label className="form-label custom-control-label" htmlFor="grantUser">
                   { t('fix_page_grant.modal.radio_btn.only_me') }
                 </label>
               </div>
@@ -171,7 +171,7 @@ const FixPageGrantModal = (props: ModalProps): JSX.Element => {
                   checked={selectedGrant === PageGrant.GRANT_USER_GROUP}
                   onChange={() => setSelectedGrant(PageGrant.GRANT_USER_GROUP)}
                 />
-                <label className="custom-control-label" htmlFor="grantUserGroup">
+                <label className="form-label custom-control-label" htmlFor="grantUserGroup">
                   { t('fix_page_grant.modal.radio_btn.grant_group') }
                 </label>
                 <div className="dropdown ml-2">

apps/app/src/components/PageDeleteModal.tsx

@@ -191,7 +191,7 @@ const PageDeleteModal: FC = () => {
           onChange={changeIsDeleteRecursivelyHandler}
           // disabled // Todo: enable this at https://redmine.weseek.co.jp/issues/82222
         />
-        <label className="custom-control-label" htmlFor="deleteRecursively">
+        <label className="form-label custom-control-label" htmlFor="deleteRecursively">
           { t('modal_delete.delete_recursively') }
           <p className="form-text text-muted mt-0"> { t('modal_delete.recursively') }</p>
         </label>
@@ -211,7 +211,7 @@ const PageDeleteModal: FC = () => {
           checked={isDeleteCompletely}
           onChange={changeIsDeleteCompletelyHandler}
         />
-        <label className="custom-control-label" htmlFor="deleteCompletely">
+        <label className="form-label custom-control-label" htmlFor="deleteCompletely">
           { t('modal_delete.delete_completely')}
           <p className="form-text text-muted mt-0"> { t('modal_delete.completely') }</p>
         </label>
@@ -260,7 +260,7 @@ const PageDeleteModal: FC = () => {
     return (
       <>
         <div className="grw-scrollable-modal-body pb-1">
-          <label>{ t('modal_delete.deleting_page') }:</label><br />
+          <label className="form-label">{ t('modal_delete.deleting_page') }:</label><br />
           {/* Todo: change the way to show path on modal when too many pages are selected */}
           {renderPagePathsToDelete()}
         </div>

apps/app/src/components/PageDuplicateModal.tsx

@@ -157,11 +157,11 @@ const PageDuplicateModal = (): JSX.Element => {
 
     return (
       <>
-        <div><label>{t('modal_duplicate.label.Current page name')}</label><br />
+        <div><label className="form-label">{t('modal_duplicate.label.Current page name')}</label><br />
           <code>{path}</code>
         </div>
         <div>
-          <label htmlFor="duplicatePageName">{ t('modal_duplicate.label.New page name') }</label><br />
+          <label className="form-label" htmlFor="duplicatePageName">{ t('modal_duplicate.label.New page name') }</label><br />
           <div className="input-group">
             <div>
               <span className="input-group-text">{siteUrl}</span>
@@ -202,7 +202,7 @@ const PageDuplicateModal = (): JSX.Element => {
             checked={isDuplicateRecursively}
             onChange={changeIsDuplicateRecursivelyHandler}
           />
-          <label className="custom-control-label" htmlFor="cbDuplicateRecursively">
+          <label className="form-label custom-control-label" htmlFor="cbDuplicateRecursively">
             { t('modal_duplicate.label.Recursively') }
             <p className="form-text text-muted mt-0">{ t('modal_duplicate.help.recursive') }</p>
           </label>
@@ -218,7 +218,7 @@ const PageDuplicateModal = (): JSX.Element => {
                   checked={isDuplicateRecursivelyWithoutExistPath}
                   onChange={() => setIsDuplicateRecursivelyWithoutExistPath(!isDuplicateRecursivelyWithoutExistPath)}
                 />
-                <label className="custom-control-label" htmlFor="cbDuplicatewithoutExistRecursively">
+                <label className="form-label custom-control-label" htmlFor="cbDuplicatewithoutExistRecursively">
                   { t('modal_duplicate.label.Duplicate without exist path') }
                 </label>
               </div>

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

@@ -101,7 +101,7 @@ class GridEditModal extends React.Component {
             checked={this.state.responsiveSize === responsiveSizeForMap[0]}
             onChange={e => this.checkResposiveSize(responsiveSizeForMap[0])}
           />
-          <label className="custom-control-label" htmlFor={responsiveSizeForMap[1].displayText}>
+          <label className="form-label custom-control-label" htmlFor={responsiveSizeForMap[1].displayText}>
             {t(responsiveSizeForMap[1].displayText)}
           </label>
         </div>
@@ -200,7 +200,7 @@ class GridEditModal extends React.Component {
               <h3 className="grw-modal-head">{t('grid_edit.grid_settings')}</h3>
               <form className="mb-0">
                 <div className="row my-3">
-                  <label className="col-sm-3" htmlFor="gridPattern">
+                  <label className="form-label col-sm-3" htmlFor="gridPattern">
                     {t('grid_edit.grid_pattern')}
                   </label>
                   <div className="col-sm-9">
@@ -220,7 +220,7 @@ class GridEditModal extends React.Component {
                   </div>
                 </div>
                 <div className="row">
-                  <label className="col-sm-3" htmlFor="breakPoint">
+                  <label className="form-label col-sm-3" htmlFor="breakPoint">
                     {t('grid_edit.break_point')}
                   </label>
                   <div className="col-sm-9">

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

@@ -299,7 +299,7 @@ export const LinkEditModal = (): JSX.Element => {
       <div className="card well pt-3">
         <form className="mb-0">
           <div className="mb-0 row">
-            <label className="col-sm-3">{t('link_edit.path_format')}</label>
+            <label className="form-label 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">
                 <input
@@ -310,7 +310,7 @@ export const LinkEditModal = (): JSX.Element => {
                   onChange={toggleIsUseRelativePath}
                   disabled={!linkInputValue.startsWith('/') || linkerType === Linker.types.growiLink}
                 />
-                <label className="custom-control-label" htmlFor="relativePath">
+                <label className="form-label custom-control-label" htmlFor="relativePath">
                   {t('link_edit.use_relative_path')}
                 </label>
               </div>
@@ -323,7 +323,7 @@ export const LinkEditModal = (): JSX.Element => {
                   onChange={toggleIsUsePamanentLink}
                   disabled={permalink === '' || linkerType === Linker.types.growiLink}
                 />
-                <label className="custom-control-label" htmlFor="permanentLink">
+                <label className="form-label custom-control-label" htmlFor="permanentLink">
                   {t('link_edit.use_permanent_link')}
                 </label>
               </div>

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

@@ -53,7 +53,7 @@ export const MarkdownTableDataImportForm = (props: MarkdownTableDataImportFormPr
   return (
     <form className="data-import-form">
       <div>
-        <label htmlFor="data-import-form-type-select">{t('select_data_format')}</label>
+        <label htmlFor="data-import-form-type-select" className="form-label">{t('select_data_format')}</label>
         <select
           id="data-import-form-type-select"
           className="form-control"
@@ -67,7 +67,7 @@ export const MarkdownTableDataImportForm = (props: MarkdownTableDataImportFormPr
         </select>
       </div>
       <div>
-        <label htmlFor="data-import-form-type-textarea">{t('import_data')}</label>
+        <label htmlFor="data-import-form-type-textarea" className="form-label">{t('import_data')}</label>
         <textarea
           id="data-import-form-type-textarea"
           className="form-control"
@@ -78,7 +78,7 @@ export const MarkdownTableDataImportForm = (props: MarkdownTableDataImportFormPr
       </div>
       <Collapse isOpen={parserErrorMessage != null}>
         <div>
-          <label htmlFor="data-import-form-type-textarea-alert">{t('parse_error')}</label>
+          <label htmlFor="data-import-form-type-textarea-alert" className="form-label">{t('parse_error')}</label>
           <textarea
             id="data-import-form-type-textarea-alert"
             className="form-control"

apps/app/src/components/PageHistory/PageRevisionTable.tsx

@@ -167,7 +167,7 @@ export const PageRevisionTable = (props: PageRevisionTableProps): JSX.Element =>
                 checked={revisionId === sourceRevision?._id}
                 onChange={() => onChangeSourceInvoked(revision)}
               />
-              <label className="custom-control-label" htmlFor={`compareSource-${revisionId}`} />
+              <label className="form-label custom-control-label" htmlFor={`compareSource-${revisionId}`} />
             </div>
           )}
         </td>
@@ -183,7 +183,7 @@ export const PageRevisionTable = (props: PageRevisionTableProps): JSX.Element =>
                 checked={revisionId === targetRevision?._id}
                 onChange={() => onChangeTargetInvoked(revision)}
               />
-              <label className="custom-control-label" htmlFor={`compareTarget-${revisionId}`} />
+              <label className="form-label custom-control-label" htmlFor={`compareTarget-${revisionId}`} />
             </div>
           )}
         </td>

apps/app/src/components/PageRenameModal.tsx

@@ -210,11 +210,11 @@ const PageRenameModal = (): JSX.Element => {
     return (
       <>
         <div>
-          <label>{ t('modal_rename.label.Current page name') }</label><br />
+          <label className="form-label">{ t('modal_rename.label.Current page name') }</label><br />
           <code>{ path }</code>
         </div>
         <div>
-          <label htmlFor="newPageName">{ t('modal_rename.label.New page name') }</label><br />
+          <label htmlFor="newPageName" className="form-label">{ t('modal_rename.label.New page name') }</label><br />
           <div className="input-group">
             <div>
               <span className="input-group-text">{siteUrl}</span>
@@ -261,7 +261,7 @@ const PageRenameModal = (): JSX.Element => {
                 checked={!isRenameRecursively}
                 onChange={() => setIsRenameRecursively(!isRenameRecursively)}
               />
-              <label className="custom-control-label" htmlFor="cbRenameThisPageOnly">
+              <label className="form-label custom-control-label" htmlFor="cbRenameThisPageOnly">
                 { t('modal_rename.label.Rename this page only') }
               </label>
             </div>
@@ -274,7 +274,7 @@ const PageRenameModal = (): JSX.Element => {
                 checked={isRenameRecursively}
                 onChange={() => setIsRenameRecursively(!isRenameRecursively)}
               />
-              <label className="custom-control-label" htmlFor="cbForceRenameRecursively">
+              <label className="form-label custom-control-label" htmlFor="cbForceRenameRecursively">
                 { t('modal_rename.label.Force rename all child pages') }
                 <p className="form-text text-muted mt-0">{ t('modal_rename.help.recursive') }</p>
               </label>
@@ -301,7 +301,7 @@ const PageRenameModal = (): JSX.Element => {
               checked={isRenameRedirect}
               onChange={() => setIsRenameRedirect(!isRenameRedirect)}
             />
-            <label className="custom-control-label" htmlFor="cbRenameRedirect">
+            <label className="form-label custom-control-label" htmlFor="cbRenameRedirect">
               { t('modal_rename.label.Redirect') }
               <p className="form-text text-muted mt-0">{ t('modal_rename.help.redirect') }</p>
             </label>
@@ -316,7 +316,7 @@ const PageRenameModal = (): JSX.Element => {
               checked={isRemainMetadata}
               onChange={() => setIsRemainMetadata(!isRemainMetadata)}
             />
-            <label className="custom-control-label" htmlFor="cbRemainMetadata">
+            <label className="form-label custom-control-label" htmlFor="cbRemainMetadata">
               { t('modal_rename.label.Do not update metadata') }
               <p className="form-text text-muted mt-0">{ t('modal_rename.help.metadata') }</p>
             </label>

apps/app/src/components/PrivateLegacyPages.tsx

@@ -99,7 +99,7 @@ const SearchResultListHead = React.memo((props: SearchResultListHeadProps): JSX.
         </div>
         <div className="input-group flex-nowrap search-result-select-group ml-auto d-md-flex d-none">
           <div>
-            <label className="input-group-text text-muted" htmlFor="inputGroupSelect01">{t('search_result.number_of_list_to_display')}</label>
+            <label className="form-label input-group-text text-muted" htmlFor="inputGroupSelect01">{t('search_result.number_of_list_to_display')}</label>
           </div>
           <select
             defaultValue={pagingSize}
@@ -167,7 +167,7 @@ const ConvertByPathModal = React.memo((props: ConvertByPathModalProps): JSX.Elem
             id="understoodCheckbox"
             onChange={e => setChecked(e.target.checked)}
           />
-          <label className="form-check-label" htmlFor="understoodCheckbox">{ t('private_legacy_pages.by_path_modal.checkbox_label') }</label>
+          <label className="form-label form-check-label" htmlFor="understoodCheckbox">{ t('private_legacy_pages.by_path_modal.checkbox_label') }</label>
         </div>
         <button
           type="button"

apps/app/src/components/PrivateLegacyPagesMigrationModal.tsx

@@ -57,7 +57,7 @@ export const PrivateLegacyPagesMigrationModal = (): JSX.Element => {
             setIsRecursively(e.target.checked);
           }}
         />
-        <label className="custom-control-label" htmlFor="convertRecursively">
+        <label className="form-label custom-control-label" htmlFor="convertRecursively">
           { t('private_legacy_pages.modal.convert_recursively_label') }
           <p className="form-text text-muted mt-0"> { t('private_legacy_pages.modal.convert_recursively_desc') }</p>
         </label>

apps/app/src/components/PutbackPageModal.jsx

@@ -72,7 +72,7 @@ const PutBackPageModal = () => {
     return (
       <>
         <div>
-          <label>{t('modal_putback.label.Put Back Page')}:</label><br />
+          <label className="form-label">{t('modal_putback.label.Put Back Page')}:</label><br />
           <code>{path}</code>
         </div>
         <div className="custom-control custom-checkbox custom-checkbox-warning">
@@ -83,7 +83,7 @@ const PutBackPageModal = () => {
             checked={isPutbackRecursively}
             onChange={changeIsPutbackRecursivelyHandler}
           />
-          <label htmlFor="cbPutBackRecursively" className="custom-control-label">
+          <label htmlFor="cbPutBackRecursively" className="custom-control-label form-label">
             { t('modal_putback.label.recursively') }
           </label>
           <p className="form-text text-muted mt-0">

apps/app/src/components/SearchPage.tsx

@@ -69,7 +69,7 @@ const SearchResultListHead = React.memo((props: SearchResultListHeadProps): JSX.
       </div>
       <div className="input-group flex-nowrap search-result-select-group ml-auto d-md-flex d-none">
         <div>
-          <label className="input-group-text text-muted" htmlFor="inputGroupSelect01">{t('search_result.number_of_list_to_display')}</label>
+          <label className="form-label input-group-text text-muted" htmlFor="inputGroupSelect01">{t('search_result.number_of_list_to_display')}</label>
         </div>
         <select
           defaultValue={pagingSize}

apps/app/src/components/SearchPage/SearchControl.tsx

@@ -130,7 +130,10 @@ const SearchControl = React.memo((props: Props): JSX.Element => {
                     defaultChecked={includeUserPages}
                     onChange={e => setIncludeUserPages(e.target.checked)}
                   />
-                  <label className="custom-control-label mb-0 d-flex align-items-center text-secondary with-no-font-weight" htmlFor="flexCheckDefault">
+                  <label
+                    className="form-label custom-control-label mb-0 d-flex align-items-center text-secondary with-no-font-weight"
+                    htmlFor="flexCheckDefault"
+                  >
                     {t('Include Subordinated Target Page', { target: '/user' })}
                   </label>
                 </div>
@@ -145,8 +148,7 @@ const SearchControl = React.memo((props: Props): JSX.Element => {
                     onChange={e => setIncludeTrashPages(e.target.checked)}
                   />
                   <label
-                    className="custom-control-label
-                  d-flex align-items-center text-secondary with-no-font-weight"
+                    className="form-label custom-control-label d-flex align-items-center text-secondary with-no-font-weight"
                     htmlFor="flexCheckChecked"
                   >
                     {t('Include Subordinated Target Page', { target: '/trash' })}

apps/app/src/components/SearchPage/SearchOptionModal.tsx

@@ -52,7 +52,7 @@ const SearchOptionModal: FC<Props> = (props: Props) => {
       <ModalBody>
         <div className="d-flex p-2">
           <div className="border border-gray mr-3">
-            <label className="px-3 py-2 mb-0 d-flex align-items-center">
+            <label className="form-label px-3 py-2 mb-0 d-flex align-items-center">
               <input
                 className="mr-2"
                 type="checkbox"
@@ -63,7 +63,7 @@ const SearchOptionModal: FC<Props> = (props: Props) => {
             </label>
           </div>
           <div className="border border-gray">
-            <label className="px-3 py-2 mb-0 d-flex align-items-center">
+            <label className="form-label px-3 py-2 mb-0 d-flex align-items-center">
               <input
                 className="mr-2"
                 type="checkbox"

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

@@ -88,7 +88,7 @@ export const AppearanceModeDropdown:FC<AppearanceModeDropdownProps> = (props: Ap
                   checked={isEditMode ? !isPreferDrawerModeOnEdit : !isPreferDrawerMode}
                   onChange={e => preferDrawerModeSwitchModifiedHandler(!e.target.checked, isEditMode)}
                 />
-                <label className="custom-control-label" htmlFor={isEditMode ? 'swSidebarModeOnEditor' : 'swSidebarMode'}></label>
+                <label className="form-label custom-control-label" htmlFor={isEditMode ? 'swSidebarModeOnEditor' : 'swSidebarMode'}></label>
               </div>
               <IconWithTooltip id={isEditMode ? 'iwt-sidebar-editor-dock' : 'iwt-sidebar-dock'} label="Dock" additionalClasses="grw-sidebar-mode-icon">
                 <SidebarDockIcon />
@@ -143,7 +143,7 @@ export const AppearanceModeDropdown:FC<AppearanceModeDropdownProps> = (props: Ap
                       disabled={useOsSettings}
                       onChange={e => userPreferenceSwitchModifiedHandler(e.target.checked)}
                     />
-                    <label className="custom-control-label" htmlFor="swUserPreference"></label>
+                    <label className="form-label custom-control-label" htmlFor="swUserPreference"></label>
                   </div>
                   <IconWithTooltip id="iwt-dark" label="Dark" additionalClasses={useOsSettings ? 'grw-color-mode-icon-muted' : 'grw-color-mode-icon'}>
                     <MoonIcon />
@@ -160,7 +160,7 @@ export const AppearanceModeDropdown:FC<AppearanceModeDropdownProps> = (props: Ap
                       checked={useOsSettings}
                       onChange={e => followOsCheckboxModifiedHandler(e.target.checked)}
                     />
-                    <label className="custom-control-label text-nowrap" htmlFor="cbFollowOs">{t('personal_dropdown.use_os_settings')}</label>
+                    <label className="form-label custom-control-label text-nowrap" htmlFor="cbFollowOs">{t('personal_dropdown.use_os_settings')}</label>
                   </div>
                 </div>
               </div>

apps/app/src/components/Sidebar/RecentChanges/RecentChangesSubstance.tsx

@@ -141,7 +141,7 @@ export const RecentChangesHeader = ({ isSmall, onSizeChange }: HeaderProps): JSX
             checked={isSmall}
             onChange={changeSizeHandler}
           />
-          <label className="custom-control-label" htmlFor="recentChangesResize" />
+          <label className="form-label custom-control-label" htmlFor="recentChangesResize" />
         </div>
       </div>
     </>

apps/app/src/components/SlackNotification.tsx

@@ -39,7 +39,7 @@ export const SlackNotification: FC<SlackNotificationProps> = ({
   return (
     <div className={`grw-slack-notification ${styles['grw-slack-notification']} w-100`}>
       <div className="grw-input-group-slack-notification input-group extended-setting">
-        <label className="input-group-addon">
+        <label className="form-label input-group-addon">
           <div className="custom-control custom-switch custom-switch-lg custom-switch-slack">
             <input
               type="checkbox"
@@ -48,7 +48,7 @@ export const SlackNotification: FC<SlackNotificationProps> = ({
               checked={isSlackEnabled}
               onChange={updateCheckboxHandler}
             />
-            <label className="custom-control-label align-center" htmlFor={id}></label>
+            <label className="form-label custom-control-label align-center" htmlFor={id}></label>
           </div>
         </label>
         <input

apps/app/src/components/TemplateTab.tsx

@@ -22,7 +22,7 @@ export const TemplateTab = (props: Props): JSX.Element => {
         // checked={this.state.linkerType === template.value}
         onChange={onChangeHandler}
       />
-      <label className="custom-control-label" htmlFor="string">
+      <label className="form-label custom-control-label" htmlFor="string">
         {template.name}
       </label>
     </div>

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

@@ -53,7 +53,7 @@ export const PluginCard = (props: Props): JSX.Element => {
     return (
       <div className={`${styles.plugin_card}`}>
         <div className="switch">
-          <label className="switch__label">
+          <label className="form-label switch__label">
             <input
               type="checkbox"
               className="switch__input"

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

@@ -22,22 +22,22 @@ const Question = ({ question, inputNamePrefix }: QuestionProps): JSX.Element =>
       </div>
       <div className="col-6 d-flex align-items-center pl-0">
         <div className="btn-group btn-group-toggle flex-fill grw-questionnaire-btn-group" data-toggle="buttons">
-          <label className="btn btn-outline-primary active mr-4 rounded">
+          <label className="form-label btn btn-outline-primary active mr-4 rounded">
             <input type="radio" name={`${inputNamePrefix + question._id}`} id={`${question._id}-noAnswer`} value="0" defaultChecked /> -
           </label>
-          <label className="btn btn-outline-primary rounded-left">
+          <label className="form-label btn btn-outline-primary rounded-left">
             <input type="radio" name={`${inputNamePrefix + question._id}`} id={`${question._id}-option1`} value="1" /> 1
           </label>
-          <label className="btn btn-outline-primary">
+          <label className="form-label btn btn-outline-primary">
             <input type="radio" name={`${inputNamePrefix + question._id}`} id={`${question._id}-option2`} value="2" /> 2
           </label>
-          <label className="btn btn-outline-primary">
+          <label className="form-label btn btn-outline-primary">
             <input type="radio" name={`${inputNamePrefix + question._id}`} id={`${question._id}-option3`} value="3" /> 3
           </label>
-          <label className="btn btn-outline-primary">
+          <label className="form-label btn btn-outline-primary">
             <input type="radio" name={`${inputNamePrefix + question._id}`} id={`${question._id}-option4`} value="4" /> 4
           </label>
-          <label className="btn btn-outline-primary">
+          <label className="form-label btn btn-outline-primary">
             <input type="radio" name={`${inputNamePrefix + question._id}`} id={`${question._id}-option5`} value="5" /> 5
           </label>
         </div>