Merge branch 'dev/7.0.x' into support/forms-breaking-changes

apps/app/_obsolete/src/components/Navbar/GrowiNavbar.tsx

@@ -47,7 +47,7 @@ const NavbarRight = memo((): JSX.Element => {
                 data-testid="newPageBtn"
                 onClick={() => openCreateModal(currentPagePath || '')}
               >
-                <i className="icon-pencil mr-2"></i>
+                <i className="icon-pencil me-2"></i>
                 <span className="d-none d-lg-block">{ t('commons:New') }</span>
               </button>
             </li>
@@ -125,7 +125,7 @@ export const GrowiNavbar = (props: Props): JSX.Element => {
       </div>
 
       {/* Navbar Right  */}
-      <ul className="navbar-nav ml-auto">
+      <ul className="navbar-nav ms-auto">
         <NavbarRight />
         <Confidential confidential={confidential} />
       </ul>

apps/app/_obsolete/src/components/PageEditor/CodeMirrorEditor.jsx

@@ -739,7 +739,7 @@ class CodeMirrorEditor extends AbstractEditor {
       <div className="overlay overlay-gfm-cheatsheet mt-1 p-3">
         { this.state.isSimpleCheatsheetShown
           ? (
-            <div className="text-right">
+            <div className="text-end">
               {cheatsheetModalButton}
               <div className="mb-2 d-none d-md-block">
                 <SimpleCheatsheet />
@@ -747,7 +747,7 @@ class CodeMirrorEditor extends AbstractEditor {
             </div>
           )
           : (
-            <div className="mr-4 mb-2">
+            <div className="me-4 mb-2">
               {cheatsheetModalButton}
             </div>
           )
@@ -760,7 +760,7 @@ class CodeMirrorEditor extends AbstractEditor {
     const { emojiSearchText } = this.state;
     return this.state.isEmojiPickerShown
       ? (
-        <div className="text-left">
+        <div className="text-start">
           <div className="mb-2 d-none d-md-block">
             <EmojiPicker
               onClose={() => this.setState({ isEmojiPickerShown: false })}

apps/app/_obsolete/src/components/PageEditor/ConflictDiffModal.tsx

@@ -163,39 +163,39 @@ const ConflictDiffModalCore = (props: ConflictDiffModalCoreProps): JSX.Element =
         && (
           <div className="row">
             <div className="col-12 text-center mt-2 mb-4">
-              <h2 className="font-weight-bold">{t('modal_resolve_conflict.resolve_conflict_message')}</h2>
+              <h2 className="fw-bold">{t('modal_resolve_conflict.resolve_conflict_message')}</h2>
             </div>
             <div className="col-4">
-              <h3 className="font-weight-bold my-2">{t('modal_resolve_conflict.requested_revision')}</h3>
+              <h3 className="fw-bold my-2">{t('modal_resolve_conflict.requested_revision')}</h3>
               <div className="d-flex align-items-center my-3">
                 <div>
                   <UserPicture user={request.user} size="lg" noLink noTooltip />
                 </div>
-                <div className="ml-3 text-muted">
+                <div className="ms-3 text-muted">
                   <p className="my-0">updated by {request.user.username}</p>
                   <p className="my-0">{request.createdAt}</p>
                 </div>
               </div>
             </div>
             <div className="col-4">
-              <h3 className="font-weight-bold my-2">{t('modal_resolve_conflict.origin_revision')}</h3>
+              <h3 className="fw-bold my-2">{t('modal_resolve_conflict.origin_revision')}</h3>
               <div className="d-flex align-items-center my-3">
                 <div>
                   <UserPicture user={origin.user} size="lg" noLink noTooltip />
                 </div>
-                <div className="ml-3 text-muted">
+                <div className="ms-3 text-muted">
                   <p className="my-0">updated by {origin.user.username}</p>
                   <p className="my-0">{origin.createdAt}</p>
                 </div>
               </div>
             </div>
             <div className="col-4">
-              <h3 className="font-weight-bold my-2">{t('modal_resolve_conflict.latest_revision')}</h3>
+              <h3 className="fw-bold my-2">{t('modal_resolve_conflict.latest_revision')}</h3>
               <div className="d-flex align-items-center my-3">
                 <div>
                   <UserPicture user={latest.user} size="lg" noLink noTooltip />
                 </div>
-                <div className="ml-3 text-muted">
+                <div className="ms-3 text-muted">
                   <p className="my-0">updated by {latest.user.username}</p>
                   <p className="my-0">{latest.createdAt}</p>
                 </div>
@@ -249,7 +249,7 @@ const ConflictDiffModalCore = (props: ConflictDiffModalCoreProps): JSX.Element =
             </div>
             <div className="col-12">
               <div className="border border-dark">
-                <h3 className="font-weight-bold my-2 mx-2">{t('modal_resolve_conflict.selected_editable_revision')}</h3>
+                <h3 className="fw-bold my-2 mx-2">{t('modal_resolve_conflict.selected_editable_revision')}</h3>
                 <UncontrolledCodeMirror
                   ref={uncontrolledRef}
                   value={resolvedRevision}
@@ -272,7 +272,7 @@ const ConflictDiffModalCore = (props: ConflictDiffModalCoreProps): JSX.Element =
         </button>
         <button
           type="button"
-          className="btn btn-primary ml-3"
+          className="btn btn-primary ms-3"
           onClick={onResolveConflict}
           disabled={!isRevisionselected}
         >

apps/app/public/static/locales/en_US/admin.json

@@ -730,7 +730,7 @@
       "description1":"Temporarily issue new users by email addresses.",
       "description2":"A temporary password will be generated for the first login.",
       "invite_thru_email": "Send invitation email",
-      "mail_setting_link":"<i class='icon-settings mr-2'></i><a href='/admin/app'>Email settings</a>",
+      "mail_setting_link":"<i class='icon-settings me-2'></i><a href='/admin/app'>Email settings</a>",
       "valid_email": "Valid email address is required",
       "temporary_password": "The created user has a temporary password",
       "send_new_password": "Please send the new password to the user.",

apps/app/public/static/locales/ja_JP/admin.json

@@ -738,7 +738,7 @@
       "description1": "メールアドレスを使用して新規ユーザーを仮発行します。",
       "description2": "初回のログイン時に使用する仮パスワードが生成されます。",
       "invite_thru_email": "招待メールを送信する",
-      "mail_setting_link": "<i class='icon-settings mr-2'></i><a href='/admin/app'>メールの設定</a>",
+      "mail_setting_link": "<i class='icon-settings me-2'></i><a href='/admin/app'>メールの設定</a>",
       "valid_email": "メールアドレスを入力してください。",
       "temporary_password": "作成したユーザーは仮パスワードが設定されています。",
       "send_new_password": "新規発行したパスワードを、対象ユーザーへ連絡してください。",

apps/app/public/static/locales/zh_CN/admin.json

@@ -737,7 +737,7 @@
       "emails": "电子邮件",
       "description1": "通过电子邮件地址临时发布新用户。",
       "description2": "将为首次登录生成一个临时密码。",
-      "mail_setting_link": "<i class='icon-settings mr-2'></i><a href='/admin/app'>Email settings</a>",
+      "mail_setting_link": "<i class='icon-settings me-2'></i><a href='/admin/app'>Email settings</a>",
       "valid_email": "需要有效的电子邮件地址",
       "invite_thru_email": "发送邀请电子邮件",
       "temporary_password": "创建的用户具有临时密码",

apps/app/src/components/Admin/AdminHome/AdminHome.jsx

@@ -52,7 +52,7 @@ const AdminHome = (props) => {
             </p>
             <hr />
             <a className="btn-link" href="/admin/app" rel="noopener noreferrer">
-              <i className="fa fa-link ml-1" aria-hidden="true"></i>
+              <i className="fa fa-link ms-1" aria-hidden="true"></i>
               <strong>{t('admin:maintenance_mode.end_maintenance_mode')}</strong>
             </a>
           </div>
@@ -65,7 +65,7 @@ const AdminHome = (props) => {
           <div className={`alert ${migrationStatus.isV5Compatible == null ? 'alert-warning' : 'alert-info'}`}>
             {t('admin:v5_page_migration.migration_desc')}
             <a className="btn-link" href="/admin/app" rel="noopener noreferrer">
-              <i className="fa fa-link ml-1" aria-hidden="true"></i>
+              <i className="fa fa-link ms-1" aria-hidden="true"></i>
               <strong>{t('admin:v5_page_migration.upgrade_to_v5')}</strong>
             </a>
           </div>
@@ -115,7 +115,7 @@ const AdminHome = (props) => {
               {t('admin:admin_top:copy_prefilled_host_information:done')}
             </Tooltip>
             {/* eslint-disable-next-line react/no-danger */}
-            <span className="ml-2" dangerouslySetInnerHTML={{ __html: t('admin:admin_top:submit_bug_report') }} />
+            <span className="ms-2" dangerouslySetInnerHTML={{ __html: t('admin:admin_top:submit_bug_report') }} />
           </div>
         </div>
       </div>

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

@@ -35,7 +35,7 @@ const AppSetting = (props) => {
   return (
     <React.Fragment>
       <div className="row">
-        <label className="text-left text-md-right col-md-3 col-form-label">{t('admin:app_setting.site_name')}</label>
+        <label className="text-start text-md-right col-md-3 col-form-label">{t('admin:app_setting.site_name')}</label>
         <div className="col-md-6">
           <input
             className="form-control"
@@ -52,7 +52,7 @@ const AppSetting = (props) => {
 
       <div className="row mb-5">
         <label
-          className="text-left text-md-right col-md-3 col-form-label"
+          className="text-start text-md-right col-md-3 col-form-label"
         >
           {t('admin:app_setting.confidential_name')}
         </label>
@@ -72,7 +72,7 @@ const AppSetting = (props) => {
 
       <div className="row mb-5">
         <label
-          className="text-left text-md-right col-md-3 col-form-label"
+          className="text-start text-md-right col-md-3 col-form-label"
         >
           {t('admin:app_setting.default_language')}
         </label>
@@ -105,7 +105,7 @@ const AppSetting = (props) => {
 
       <div className="row mb-5">
         <label
-          className="text-left text-md-right col-md-3 col-form-label"
+          className="text-start text-md-right col-md-3 col-form-label"
         >
           {t('admin:app_setting.default_mail_visibility')}
         </label>
@@ -140,7 +140,7 @@ const AppSetting = (props) => {
 
       <div className="row mb-5">
         <label
-          className="text-left text-md-right col-md-3 col-form-label"
+          className="text-start text-md-right col-md-3 col-form-label"
         >
           {/* {t('admin:app_setting.file_uploading')} */}
         </label>

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

@@ -62,7 +62,7 @@ const AppSettingsPageContents = (props: Props) => {
             </p>
             <hr />
             <a className="btn-link" href="#maintenance-mode" rel="noopener noreferrer">
-              <i className="fa fa-fw fa-arrow-down ml-1" aria-hidden="true"></i>
+              <i className="fa fa-fw fa-arrow-down ms-1" aria-hidden="true"></i>
               <strong>{t('admin:maintenance_mode.end_maintenance_mode')}</strong>
             </a>
           </div>

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

@@ -22,7 +22,7 @@ export const AwsSettingMolecule = (props: AwsSettingMoleculeProps): JSX.Element
     <>
 
       <div className="row my-3">
-        <label className="text-left text-md-right col-md-3 col-form-label">
+        <label className="text-start text-md-right col-md-3 col-form-label">
           {t('admin:app_setting.file_delivery_method')}
         </label>
 
@@ -32,7 +32,7 @@ export const AwsSettingMolecule = (props: AwsSettingMoleculeProps): JSX.Element
               className="btn btn-outline-secondary dropdown-toggle"
               type="button"
               id="ddS3ReferenceFileWithRelayMode"
-              data-toggle="dropdown"
+              data-bs-toggle="dropdown"
               aria-haspopup="true"
               aria-expanded="true"
             >
@@ -66,7 +66,7 @@ export const AwsSettingMolecule = (props: AwsSettingMoleculeProps): JSX.Element
       </div>
 
       <div className="row">
-        <label className="text-left text-md-right col-md-3 col-form-label">
+        <label className="text-start text-md-right col-md-3 col-form-label">
           {t('admin:app_setting.region')}
         </label>
         <div className="col-md-6">
@@ -82,7 +82,7 @@ export const AwsSettingMolecule = (props: AwsSettingMoleculeProps): JSX.Element
       </div>
 
       <div className="row">
-        <label className="text-left text-md-right col-md-3 col-form-label">
+        <label className="text-start text-md-right col-md-3 col-form-label">
           {t('admin:app_setting.custom_endpoint')}
         </label>
         <div className="col-md-6">
@@ -100,7 +100,7 @@ export const AwsSettingMolecule = (props: AwsSettingMoleculeProps): JSX.Element
       </div>
 
       <div className="row">
-        <label className="text-left text-md-right col-md-3 col-form-label">
+        <label className="text-start text-md-right col-md-3 col-form-label">
           {t('admin:app_setting.bucket_name')}
         </label>
         <div className="col-md-6">
@@ -117,7 +117,7 @@ export const AwsSettingMolecule = (props: AwsSettingMoleculeProps): JSX.Element
       </div>
 
       <div className="row">
-        <label className="text-left text-md-right col-md-3 col-form-label">
+        <label className="text-start text-md-right col-md-3 col-form-label">
           Access key ID
         </label>
         <div className="col-md-6">
@@ -133,7 +133,7 @@ export const AwsSettingMolecule = (props: AwsSettingMoleculeProps): JSX.Element
       </div>
 
       <div className="row">
-        <label className="text-left text-md-right col-md-3 col-form-label">
+        <label className="text-start text-md-right col-md-3 col-form-label">
           Secret access key
         </label>
         <div className="col-md-6">

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

@@ -62,7 +62,7 @@ export const ConfirmModal: FC<ConfirmModalProps> = (props: ConfirmModalProps) =>
         </button>
         <button
           type="button"
-          className="btn btn-outline-primary ml-3"
+          className="btn btn-outline-primary ms-3"
           onClick={onConfirm}
         >
           {props.confirmButtonTitle ?? t('Confirm')}

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

@@ -38,7 +38,7 @@ export const FileUploadSettingMolecule = React.memo((props: FileUploadSettingMol
       </p>
 
       <div className="row mb-3">
-        <label className="text-left text-md-right col-md-3 col-form-label">
+        <label className="text-start text-md-right col-md-3 col-form-label">
           {t('admin:app_setting.file_upload_method')}
         </label>
 
@@ -61,7 +61,7 @@ export const FileUploadSettingMolecule = React.memo((props: FileUploadSettingMol
           })}
         </div>
         {props.isFixedFileUploadByEnvVar && (
-          <p className="alert alert-warning mt-2 text-left offset-3 col-6">
+          <p className="alert alert-warning mt-2 text-start offset-3 col-6">
             <i className="icon-exclamation icon-fw">
             </i><b>FIXED</b><br />
             {/* eslint-disable-next-line react/no-danger */}

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

@@ -33,7 +33,7 @@ export const GcsSettingMolecule = (props: GcsSettingMoleculeProps): JSX.Element
     <>
 
       <div className="row my-3">
-        <label className="text-left text-md-right col-md-3 col-form-label">
+        <label className="text-start text-md-right col-md-3 col-form-label">
           {t('admin:app_setting.file_delivery_method')}
         </label>
 
@@ -43,7 +43,7 @@ export const GcsSettingMolecule = (props: GcsSettingMoleculeProps): JSX.Element
               className="btn btn-outline-secondary dropdown-toggle"
               type="button"
               id="ddGcsReferenceFileWithRelayMode"
-              data-toggle="dropdown"
+              data-bs-toggle="dropdown"
               aria-haspopup="true"
               aria-expanded="true"
             >

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

@@ -50,7 +50,7 @@ const MailSetting = (props: Props) => {
         <div className="alert alert-danger"><i className="icon-exclamation"></i> {t('admin:app_setting.mailer_is_not_set_up')}</div>
       )}
       <div className="row mb-5">
-        <label className="col-md-3 col-form-label text-right">{t('admin:app_setting.from_e-mail_address')}</label>
+        <label className="col-md-3 col-form-label text-end">{t('admin:app_setting.from_e-mail_address')}</label>
         <div className="col-md-6">
           <input
             className="form-control"
@@ -63,7 +63,7 @@ const MailSetting = (props: Props) => {
       </div>
 
       <div className="row mb-5">
-        <label className="form-label text-left text-md-right col-md-3 col-form-label">
+        <label className="form-label text-start text-md-right col-md-3 col-form-label">
           {t('admin:app_setting.transmission_method')}
         </label>
         <div className="col-md-6 py-2">
@@ -96,7 +96,7 @@ const MailSetting = (props: Props) => {
             { t('Update') }
           </button>
           {adminAppContainer.state.transmissionMethod === 'smtp' && (
-            <button type="button" className="btn btn-secondary ml-4" onClick={sendTestEmailHandler}>
+            <button type="button" className="btn btn-secondary ms-4" onClick={sendTestEmailHandler}>
               {t('admin:app_setting.send_test_email')}
             </button>
           )}

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

@@ -53,7 +53,7 @@ const QuestionnaireSettings = (): JSX.Element => {
         <div className="mb-4">{t('app_setting.questionnaire_settings_explanation')}</div>
         <span>
           <div className="mb-2">
-            <span className="text-info mr-2"><i className="icon-info icon-fw"></i>{t('app_setting.about_data_sent')}</span>
+            <span className="text-info me-2"><i className="icon-info icon-fw"></i>{t('app_setting.about_data_sent')}</span>
             <a href={t('app_setting.docs_link')} rel="noreferrer" target="_blank" className="d-inline">
               {t('app_setting.learn_more')} <i className="icon-share-alt"></i>
             </a>
@@ -65,7 +65,7 @@ const QuestionnaireSettings = (): JSX.Element => {
 
       {isLoading && (
         <div className="text-muted text-center mb-5">
-          <i className="fa fa-2x fa-spinner fa-pulse mr-1" />
+          <i className="fa fa-2x fa-spinner fa-pulse me-1" />
         </div>
       )}
 

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

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

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

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

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

@@ -49,7 +49,7 @@ export const ActivityTable : FC<Props> = (props: Props) => {
                     <>
                       <UserPicture user={activity.user} />
                       <a
-                        className="ml-2"
+                        className="ms-2"
                         href={pagePathUtils.userHomepagePath(activity.user)}
                       >
                         {activity.snapshot?.username}

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

@@ -37,11 +37,11 @@ export const AuditLogSettings: FC = () => {
 
       <h4 className="mt-4">
         {t('admin:audit_log_management.available_action_list')}
-        <span className="badge rounded-pill bg-primary ml-2">
+        <span className="badge rounded-pill bg-primary ms-2">
           {`${availableActions.length} / ${AllSupportedActions.length}`}
         </span>
         <a
-          className="ml-2"
+          className="ms-2"
           href={t('admin:audit_log_management.docs_url.log_type')}
           target="_blank"
           rel="noopener noreferrer"

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

@@ -62,7 +62,7 @@ export const DateRangePicker: FC<DateRangePickerProps> = (props: DateRangePicker
   }, [onChange]);
 
   return (
-    <div className="btn-group mr-2">
+    <div className="btn-group me-2">
       <DatePicker
         selectsRange
         startDate={startDate}

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

@@ -109,7 +109,7 @@ const SearchUsernameTypeaheadSubstance: ForwardRefRenderFunction<IClearable, Pro
   }));
 
   return (
-    <div className="input-group mr-2">
+    <div className="input-group me-2">
       <div>
         <span className="input-group-text">
           <i className="icon-people" />

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

@@ -76,8 +76,8 @@ export const SelectActionDropdown: FC<Props> = (props: Props) => {
   }, [onChangeMultipleAction]);
 
   return (
-    <div className="btn-group mr-2 admin-audit-log">
-      <button className="btn btn-outline-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown">
+    <div className="btn-group me-2 admin-audit-log">
+      <button className="btn btn-outline-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown">
         <i className="fa fa-fw fa-bolt" />{t('admin:audit_log_management.action')}
       </button>
       <ul className="dropdown-menu select-action-dropdown" aria-labelledby="dropdownMenuButton">

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

@@ -152,8 +152,8 @@ export const AuditLogManagement: FC = () => {
       <button type="button" className="btn btn-outline-secondary mb-4" onClick={() => setIsSettingPage(!isSettingPage)}>
         {
           isSettingPage
-            ? <><i className="fa fa-hand-o-left mr-1" />{t('admin:audit_log_management.return')}</>
-            : <><i className="fa icon-settings mr-1" />{t('admin:audit_log_management.settings')}</>
+            ? <><i className="fa fa-hand-o-left me-1" />{t('admin:audit_log_management.return')}</>
+            : <><i className="fa icon-settings me-1" />{t('admin:audit_log_management.settings')}</>
         }
       </button>
 
@@ -162,7 +162,7 @@ export const AuditLogManagement: FC = () => {
           {isSettingPage ? t('audit_log_management.audit_log_settings') : t('audit_log_management.audit_log')}
         </span>
         { !isSettingPage && (
-          <button type="button" className="btn btn-sm ml-auto grw-btn-reload" onClick={reloadButtonPushedHandler}>
+          <button type="button" className="btn btn-sm ms-auto grw-btn-reload" onClick={reloadButtonPushedHandler}>
             <i className="icon icon-reload"></i>
           </button>
         )}
@@ -197,7 +197,7 @@ export const AuditLogManagement: FC = () => {
           </div>
 
           <p
-            className="ml-2"
+            className="ms-2"
             // eslint-disable-next-line react/no-danger
             dangerouslySetInnerHTML={{ __html: activityCounter }}
           />
@@ -205,7 +205,7 @@ export const AuditLogManagement: FC = () => {
           { isLoading
             ? (
               <div className="text-muted text-center mb-5">
-                <i className="fa fa-2x fa-spinner fa-pulse mr-1" />
+                <i className="fa fa-2x fa-spinner fa-pulse me-1" />
               </div>
             )
             : (
@@ -223,8 +223,8 @@ export const AuditLogManagement: FC = () => {
               size="sm"
             />
 
-            <div className="admin-audit-log ml-3">
-              <label htmlFor="jumpPageInput" className="form-label mr-1 text-secondary">Jump To Page</label>
+            <div className="admin-audit-log ms-3">
+              <label htmlFor="jumpPageInput" className="form-label me-1 text-secondary">Jump To Page</label>
               <input
                 id="jumpPageInput"
                 type="text"

apps/app/src/components/Admin/Common/Accordion.jsx

@@ -9,9 +9,9 @@ import { Collapse } from 'reactstrap';
 const Accordion = (props) => {
   const [isOpen, setIsOpen] = useState(props.isOpenDefault);
   return (
-    <div className="card border-0 rounded-lg mb-0">
+    <div className="card border-0 rounded-3 mb-0">
       <div
-        className="card-header font-weight-normal py-3 d-flex justify-content-between"
+        className="card-header fw-normal py-3 d-flex justify-content-between"
         role="button"
         onClick={() => setIsOpen(prevState => !prevState)}
       >

apps/app/src/components/Admin/Common/AdminNavigation.tsx

@@ -13,23 +13,23 @@ const MenuLabel = ({ menu }: { menu: string }) => {
 
   switch (menu) {
     /* eslint-disable no-multi-spaces, max-len */
-    case 'app':                      return <><i className="mr-1 icon-fw icon-settings"></i>{        t('headers.app_settings', { ns: 'commons' }) }</>;
-    case 'security':                 return <><i className="mr-1 icon-fw icon-shield"></i>{          t('security_settings.security_settings') }</>;
-    case 'markdown':                 return <><i className="mr-1 icon-fw icon-note"></i>{            t('markdown_settings.markdown_settings') }</>;
-    case 'customize':                return <><i className="mr-1 icon-fw icon-wrench"></i>{          t('customize_settings.customize_settings') }</>;
-    case 'importer':                 return <><i className="mr-1 icon-fw icon-cloud-upload"></i>{    t('importer_management.import_data') }</>;
-    case 'export':                   return <><i className="mr-1 icon-fw icon-cloud-download"></i>{  t('export_management.export_archive_data') }</>;
-    case 'data-transfer':            return <><i className="mr-1 icon-fw icon-plane"></i>{           t('g2g_data_transfer.data_transfer', { ns: 'commons' })}</>;
-    case 'notification':             return <><i className="mr-1 icon-fw icon-bell"></i>{            t('external_notification.external_notification')}</>;
-    case 'slack-integration':        return <><i className="mr-1 icon-fw icon-shuffle"></i>{         t('slack_integration.slack_integration') }</>;
-    case 'slack-integration-legacy': return <><i className="mr-1 icon-fw icon-shuffle"></i>{         t('slack_integration_legacy.slack_integration_legacy')}</>;
-    case 'users':                    return <><i className="mr-1 icon-fw icon-user"></i>{            t('user_management.user_management') }</>;
-    case 'user-groups':              return <><i className="mr-1 icon-fw icon-people"></i>{          t('user_group_management.user_group_management') }</>;
-    case 'audit-log':                return <><i className="mr-1 icon-fw icon-feed"></i>{            t('audit_log_management.audit_log')}</>;
-    case 'plugins':                  return <><i className="mr-1 icon-fw icon-puzzle"></i>{          t('plugins.plugins')}</>;
-    case 'search':                   return <><i className="mr-1 icon-fw icon-magnifier"></i>{       t('full_text_search_management.full_text_search_management') }</>;
-    case 'cloud':                    return <><i className="mr-1 icon-fw icon-share-alt"></i>{       t('cloud_setting_management.to_cloud_settings')} </>;
-    default:                         return <><i className="mr-1 icon-fw icon-home"></i>{            t('wiki_management_homepage') }</>;
+    case 'app':                      return <><i className="me-1 icon-fw icon-settings"></i>{        t('headers.app_settings', { ns: 'commons' }) }</>;
+    case 'security':                 return <><i className="me-1 icon-fw icon-shield"></i>{          t('security_settings.security_settings') }</>;
+    case 'markdown':                 return <><i className="me-1 icon-fw icon-note"></i>{            t('markdown_settings.markdown_settings') }</>;
+    case 'customize':                return <><i className="me-1 icon-fw icon-wrench"></i>{          t('customize_settings.customize_settings') }</>;
+    case 'importer':                 return <><i className="me-1 icon-fw icon-cloud-upload"></i>{    t('importer_management.import_data') }</>;
+    case 'export':                   return <><i className="me-1 icon-fw icon-cloud-download"></i>{  t('export_management.export_archive_data') }</>;
+    case 'data-transfer':            return <><i className="me-1 icon-fw icon-plane"></i>{           t('g2g_data_transfer.data_transfer', { ns: 'commons' })}</>;
+    case 'notification':             return <><i className="me-1 icon-fw icon-bell"></i>{            t('external_notification.external_notification')}</>;
+    case 'slack-integration':        return <><i className="me-1 icon-fw icon-shuffle"></i>{         t('slack_integration.slack_integration') }</>;
+    case 'slack-integration-legacy': return <><i className="me-1 icon-fw icon-shuffle"></i>{         t('slack_integration_legacy.slack_integration_legacy')}</>;
+    case 'users':                    return <><i className="me-1 icon-fw icon-user"></i>{            t('user_management.user_management') }</>;
+    case 'user-groups':              return <><i className="me-1 icon-fw icon-people"></i>{          t('user_group_management.user_group_management') }</>;
+    case 'audit-log':                return <><i className="me-1 icon-fw icon-feed"></i>{            t('audit_log_management.audit_log')}</>;
+    case 'plugins':                  return <><i className="me-1 icon-fw icon-puzzle"></i>{          t('plugins.plugins')}</>;
+    case 'search':                   return <><i className="me-1 icon-fw icon-magnifier"></i>{       t('full_text_search_management.full_text_search_management') }</>;
+    case 'cloud':                    return <><i className="me-1 icon-fw icon-share-alt"></i>{       t('cloud_setting_management.to_cloud_settings')} </>;
+    default:                         return <><i className="me-1 icon-fw icon-home"></i>{            t('wiki_management_homepage') }</>;
       /* eslint-enable no-multi-spaces, max-len */
   }
 };
@@ -127,15 +127,15 @@ export const AdminNavigation = (): JSX.Element => {
       {/* Dropdown */}
       <div className="dropdown d-block d-lg-none mb-5">
         <button
-          className="btn btn-outline-primary btn-lg dropdown-toggle col-12 text-right"
+          className="btn btn-outline-primary btn-lg dropdown-toggle col-12 text-end"
           type="button"
           id="dropdown-admin-navigation"
           data-display="static"
-          data-toggle="dropdown"
+          data-bs-toggle="dropdown"
           aria-haspopup="true"
           aria-expanded="false"
         >
-          <span className="float-left">
+          <span className="float-start">
             {/* eslint-disable no-multi-spaces */}
             {pathname === '/admin'                  && <MenuLabel menu="home" />}
             {isActiveMenu('/app')                   && <MenuLabel menu="app" />}

apps/app/src/components/Admin/Common/LabeledProgressBar.tsx

@@ -21,7 +21,7 @@ const LabeledProgressBar = (props: Props): JSX.Element => {
     <>
       <h6 className="my-1">
         {header}
-        <div className="float-right">{currentCount} / {totalCount}</div>
+        <div className="float-end">{currentCount} / {totalCount}</div>
       </h6>
       <Progress multi>
         <Progress bar max={totalCount} color={progressingColor} striped={isInProgress} animated={isInProgress} value={currentCount} />

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

@@ -50,7 +50,7 @@ const CustomizeCssSetting = (props: Props): JSX.Element => {
               onChange={(e) => { adminCustomizeContainer.changeCustomizeCss(e.target.value) }}
             />
             {/* disabled in v6.0.0 temporarily -- 2022.12.19 Yuki Takei
-            <p className="form-text text-muted text-right">
+            <p className="form-text text-muted text-end">
               <i className="fa fa-fw fa-keyboard-o" aria-hidden="true" />
               {t('admin:customize_settings.ctrl_space')}
             </p>

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

@@ -45,7 +45,7 @@ const CustomizeFunctionSetting = (props: Props): JSX.Element => {
 
 
           <div className="row">
-            <div className="offset-md-3 col-md-6 text-left">
+            <div className="offset-md-3 col-md-6 text-start">
               <CustomizeFunctionOption
                 optionId="isEnabledAttachTitleHeader"
                 label={t('admin:customize_settings.function_options.attach_title_header')}
@@ -89,7 +89,7 @@ const CustomizeFunctionSetting = (props: Props): JSX.Element => {
           />
 
           <div className="row">
-            <div className="offset-md-3 col-md-6 text-left">
+            <div className="offset-md-3 col-md-6 text-start">
               <CustomizeFunctionOption
                 optionId="isEnabledStaleNotification"
                 label={t('admin:customize_settings.function_options.stale_notification')}
@@ -104,7 +104,7 @@ const CustomizeFunctionSetting = (props: Props): JSX.Element => {
           </div>
 
           <div className="row">
-            <div className="offset-md-3 col-md-6 text-left">
+            <div className="offset-md-3 col-md-6 text-start">
               <CustomizeFunctionOption
                 optionId="isAllReplyShown"
                 label={t('admin:customize_settings.function_options.show_all_reply_comments')}
@@ -119,7 +119,7 @@ const CustomizeFunctionSetting = (props: Props): JSX.Element => {
           </div>
 
           <div className="row">
-            <div className="offset-md-3 col-md-6 text-left">
+            <div className="offset-md-3 col-md-6 text-start">
               <CustomizeFunctionOption
                 optionId="isSearchScopeChildrenAsDefault"
                 label={t('admin:customize_settings.function_options.select_search_scope_children_as_default')}

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

@@ -118,7 +118,7 @@ const CustomizeLogoSetting = (): JSX.Element => {
                   </div>
                 </h4>
                 <div className="row mb-3">
-                  <label className="col-sm-4 col-12 col-form-label text-left">
+                  <label className="col-sm-4 col-12 col-form-label text-start">
                     { t('admin:customize_settings.current_logo') }
                   </label>
                   <div className="col-sm-8 col-12">
@@ -135,7 +135,7 @@ const CustomizeLogoSetting = (): JSX.Element => {
                   </div>
                 </div>
                 <div className="row">
-                  <label className="col-sm-4 col-12 col-form-label text-left">
+                  <label className="col-sm-4 col-12 col-form-label text-start">
                     { t('admin:customize_settings.upload_new_logo') }
                   </label>
                   <div className="col-sm-8 col-12">

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

@@ -54,7 +54,7 @@ const CustomizeNoscriptSetting = (props: Props): JSX.Element => {
               onChange={(e) => { adminCustomizeContainer.changeCustomizeNoscript(e.target.value) }}
             />
             {/* disabled in v6.0.0 temporarily -- 2022.12.19 Yuki Takei
-            <span className="form-text text-muted text-right">
+            <span className="form-text text-muted text-end">
               <i className="fa fa-fw fa-keyboard-o" aria-hidden="true"></i>
               {t('admin:customize_settings.ctrl_space')}
             </span>
@@ -63,7 +63,7 @@ const CustomizeNoscriptSetting = (props: Props): JSX.Element => {
 
           <a
             className="text-muted"
-            data-toggle="collapse"
+            data-bs-toggle="collapse"
             href="#collapseExampleHtml"
             role="button"
             aria-expanded="false"

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

@@ -51,7 +51,7 @@ const CustomizeScriptSetting = (props: Props): JSX.Element => {
               onChange={(e) => { adminCustomizeContainer.changeCustomizeScript(e.target.value) }}
             />
             {/* disabled in v6.0.0 temporarily -- 2022.12.19 Yuki Takei
-            <span className="form-text text-muted text-right">
+            <span className="form-text text-muted text-end">
               <i className="fa fa-fw fa-keyboard-o" aria-hidden="true" />
               {t('admin:customize_settings.ctrl_space')}
             </span>
@@ -60,7 +60,7 @@ const CustomizeScriptSetting = (props: Props): JSX.Element => {
 
           <a
             className="text-muted"
-            data-toggle="collapse"
+            data-bs-toggle="collapse"
             href="#collapseExampleScript"
             role="button"
             aria-expanded="false"

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

@@ -18,13 +18,13 @@ const PagingSizeUncontrolledDropdown = (props) => {
   return (
     <React.Fragment>
       <div className="row">
-        <div className="offset-md-3 col-md-6 text-left">
+        <div className="offset-md-3 col-md-6 text-start">
           <div className="my-0 w-100">
             <label className="form-label">{props.label}</label>
           </div>
           <UncontrolledDropdown>
-            <DropdownToggle className="text-right col-6" caret>
-              <span className="float-left">{props.toggleLabel}</span>
+            <DropdownToggle className="text-end col-6" caret>
+              <span className="float-start">{props.toggleLabel}</span>
             </DropdownToggle>
             <DropdownMenu className="dropdown-menu" role="menu">
               {props.dropdownItemSize.map((num) => {

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

@@ -167,7 +167,7 @@ const ElasticsearchManagement = () => {
 
       {/* Controls */}
       <div className="row">
-        <label className="col-md-3 col-form-label text-left text-md-right">{ t('full_text_search_management.reconnect') }</label>
+        <label className="col-md-3 col-form-label text-start text-md-right">{ t('full_text_search_management.reconnect') }</label>
         <div className="col-md-6">
           <ReconnectControls
             isEnabled={isReconnectBtnEnabled}
@@ -180,7 +180,7 @@ const ElasticsearchManagement = () => {
       <hr />
 
       <div className="row">
-        <label className="col-md-3 col-form-label text-left text-md-right">{ t('full_text_search_management.normalize') }</label>
+        <label className="col-md-3 col-form-label text-start text-md-right">{ t('full_text_search_management.normalize') }</label>
         <div className="col-md-6">
           <NormalizeIndicesControls
             isRebuildingProcessing={isRebuildingProcessing}
@@ -193,7 +193,7 @@ const ElasticsearchManagement = () => {
       <hr />
 
       <div className="row">
-        <label className="col-md-3 col-form-label text-left text-md-right">{ t('full_text_search_management.rebuild') }</label>
+        <label className="col-md-3 col-form-label text-start text-md-right">{ t('full_text_search_management.rebuild') }</label>
         <div className="col-md-6">
           <RebuildIndexControls
             isRebuildingProcessing={isRebuildingProcessing}

apps/app/src/components/Admin/ElasticsearchManagement/ReconnectControls.tsx

@@ -21,7 +21,7 @@ const ReconnectControls = (props: Props): JSX.Element => {
         onClick={() => { props.onReconnectingRequested() }}
         disabled={!isEnabled}
       >
-        { isProcessing && <i className="fa fa-spinner fa-pulse mr-2"></i> }
+        { isProcessing && <i className="fa fa-spinner fa-pulse me-2"></i> }
         { t('full_text_search_management.reconnect_button') }
       </button>
 

apps/app/src/components/Admin/ElasticsearchManagement/StatusTable.jsx

@@ -17,7 +17,7 @@ class StatusTable extends React.PureComponent {
     } = this.props;
 
     const errorOccuredLabel = isErrorOccuredOnSearchService
-      ? <span className="badge rounded-pill bg-danger ml-2">{ t('full_text_search_management.connection_status_label_erroroccured') }</span>
+      ? <span className="badge rounded-pill bg-danger ms-2">{ t('full_text_search_management.connection_status_label_erroroccured') }</span>
       : null;
 
     let connectionStatusLabel = null;
@@ -55,7 +55,7 @@ class StatusTable extends React.PureComponent {
 
     const aliasLabels = aliases.map((aliasName) => {
       return (
-        <span key={`badge-${indexName}-${aliasName}`} className="badge rounded-pill bg-primary mr-2">
+        <span key={`badge-${indexName}-${aliasName}`} className="badge rounded-pill bg-primary me-2">
           <i className="icon-tag"></i> {aliasName}
         </span>
       );
@@ -65,10 +65,10 @@ class StatusTable extends React.PureComponent {
       <div className="card">
         <div className="card-header">
 
-          <a role="button" className="text-nowrap mr-2" data-toggle="collapse" href={`#${collapseId}`} aria-expanded="true" aria-controls={collapseId}>
+          <a role="button" className="text-nowrap me-2" data-bs-toggle="collapse" href={`#${collapseId}`} aria-expanded="true" aria-controls={collapseId}>
             <i className="fa fa-fw fa-database"></i> {indexName}
           </a>
-          <span className="ml-md-3">{aliasLabels}</span>
+          <span className="ms-md-3">{aliasLabels}</span>
         </div>
         <div id={collapseId} className="collapse">
           <div className="card-body">

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

@@ -14,7 +14,7 @@ const ArchiveFilesTableMenu = (props: ArchiveFilesTableMenuProps):JSX.Element =>
 
   return (
     <div className="btn-group admin-user-menu dropdown">
-      <button type="button" className="btn btn-sm btn-outline-secondary dropdown-toggle" data-toggle="dropdown">
+      <button type="button" className="btn btn-sm btn-outline-secondary dropdown-toggle" data-bs-toggle="dropdown">
         <i className="icon-settings"></i> <span className="caret"></span>
       </button>
       <ul className="dropdown-menu" role="menu">

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="form-label text-capitalize form-check-label ml-3" htmlFor={collectionName}>
+                <label className="form-label text-capitalize form-check-label ms-3" htmlFor={collectionName}>
                   {collectionName}
                 </label>
               </div>
@@ -165,10 +165,10 @@ const SelectCollectionsModal = (props: Props): JSX.Element => {
         <ModalBody>
           <div className="row">
             <div className="col-sm-12">
-              <button type="button" className="btn btn-sm btn-outline-secondary mr-2" onClick={checkAll}>
+              <button type="button" className="btn btn-sm btn-outline-secondary me-2" onClick={checkAll}>
                 <i className="fa fa-check-square-o"></i> {t('admin:export_management.check_all')}
               </button>
-              <button type="button" className="btn btn-sm btn-outline-secondary mr-2" onClick={uncheckAll}>
+              <button type="button" className="btn btn-sm btn-outline-secondary me-2" onClick={uncheckAll}>
                 <i className="fa fa-square-o"></i> {t('admin:export_management.uncheck_all')}
               </button>
             </div>

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

@@ -248,10 +248,10 @@ const G2GDataTransfer = (): JSX.Element => {
       {isTransferring && (
         <div className="border rounded p-4">
           <div>
-            <G2GDataTransferStatusIcon className="mr-2 mb-2" status={g2gProgress.mongo} /> MongoDB
+            <G2GDataTransferStatusIcon className="me-2 mb-2" status={g2gProgress.mongo} /> MongoDB
           </div>
           <div>
-            <G2GDataTransferStatusIcon className="mr-2" status={g2gProgress.attachments} /> Attachments
+            <G2GDataTransferStatusIcon className="me-2" status={g2gProgress.attachments} /> Attachments
           </div>
         </div>
       )}

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

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

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

@@ -118,12 +118,12 @@ export default class ImportCollectionItem extends React.Component {
             type="button"
             id="ddmMode"
             disabled={isImporting}
-            data-toggle="dropdown"
+            data-bs-toggle="dropdown"
             aria-haspopup="true"
             aria-expanded="true"
           >
             {this.renderModeLabel(option.mode)}
-            <span className="caret ml-2"></span>
+            <span className="caret ms-2"></span>
           </button>
           <ul className="dropdown-menu" aria-labelledby="ddmMode">
             { modes.map((mode) => {
@@ -147,7 +147,7 @@ export default class ImportCollectionItem extends React.Component {
     return (
       <button
         type="button"
-        className="btn btn-outline-secondary btn-sm p-1 ml-2"
+        className="btn btn-outline-secondary btn-sm p-1 ms-2"
         disabled={isImporting || !isConfigButtonAvailable}
         onClick={isConfigButtonAvailable ? this.configButtonClickedHandler : null}
       >

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

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

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

@@ -68,7 +68,7 @@ class ImportDataPageContents extends React.Component {
             </div>
 
             <div className="row">
-              <label htmlFor="settingForm[importer:esa:team_name]" className="text-left text-md-right col-md-3 col-form-label">
+              <label htmlFor="settingForm[importer:esa:team_name]" className="text-start text-md-right col-md-3 col-form-label">
                 {t('importer_management.esa_settings.team_name')}
               </label>
               <div className="col-md-6">
@@ -84,7 +84,7 @@ class ImportDataPageContents extends React.Component {
             </div>
 
             <div className="row">
-              <label htmlFor="settingForm[importer:esa:access_token]" className="text-left text-md-right col-md-3 col-form-label">
+              <label htmlFor="settingForm[importer:esa:access_token]" className="text-start text-md-right col-md-3 col-form-label">
                 {t('importer_management.esa_settings.access_token')}
               </label>
               <div className="col-md-6">
@@ -173,7 +173,7 @@ class ImportDataPageContents extends React.Component {
               <input type="password" name="dummypass" style={{ display: 'none', top: '-100px', left: '-100px' }} />
             </div>
             <div className="row">
-              <label htmlFor="settingForm[importer:qiita:team_name]" className="text-left text-md-right col-md-3 col-form-label">
+              <label htmlFor="settingForm[importer:qiita:team_name]" className="text-start text-md-right col-md-3 col-form-label">
                 {t('importer_management.qiita_settings.team_name')}
               </label>
               <div className="col-md-6">
@@ -188,7 +188,7 @@ class ImportDataPageContents extends React.Component {
             </div>
 
             <div className="row">
-              <label htmlFor="settingForm[importer:qiita:access_token]" className="text-left text-md-right col-md-3 col-form-label">
+              <label htmlFor="settingForm[importer:qiita:access_token]" className="text-start text-md-right col-md-3 col-form-label">
                 {t('importer_management.qiita_settings.access_token')}
               </label>
               <div className="col-md-6">

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

@@ -39,13 +39,13 @@ class SlackConfiguration extends React.Component {
     return (
       <React.Fragment>
         <div className="row my-3">
-          <div className="col-6 text-left">
+          <div className="col-6 text-start">
             <div className="dropdown">
               <button
                 className="btn btn-secondary dropdown-toggle"
                 type="button"
                 id="dropdownMenuButton"
-                data-toggle="dropdown"
+                data-bs-toggle="dropdown"
                 aria-haspopup="true"
                 aria-expanded="true"
               >
@@ -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="form-label col-md-3 text-left text-md-right">Webhook URL</label>
+              <label className="form-label col-md-3 text-start text-md-right">Webhook URL</label>
               <div className="col-md-6">
                 <input
                   className="form-control"
@@ -77,7 +77,7 @@ class SlackConfiguration extends React.Component {
             </div>
 
             <div className="row mb-3">
-              <div className="offset-md-3 col-md-6 text-left">
+              <div className="offset-md-3 col-md-6 text-start">
                 <div className="form-check form-check-success">
                   <input
                     type="checkbox"
@@ -109,7 +109,7 @@ class SlackConfiguration extends React.Component {
                 <br />
                 <a
                   href="#slack-incoming-webhooks"
-                  data-toggle="tab"
+                  data-bs-toggle="tab"
                   onClick={() => adminSlackIntegrationLegacyContainer.switchSlackOption('Incoming Webhooks')}
                 >
                   {t('notification_settings.use_instead')}
@@ -117,7 +117,7 @@ class SlackConfiguration extends React.Component {
               </div>
 
               <div className="row mb-5">
-                <label className="form-label col-md-3 text-left text-md-right">OAuth access token</label>
+                <label className="form-label col-md-3 text-start text-md-right">OAuth access token</label>
                 <div className="col-md-6">
                   <input
                     className="form-control"
@@ -141,7 +141,7 @@ class SlackConfiguration extends React.Component {
 
         <h3>
           <i className="icon-question" aria-hidden="true"></i>{' '}
-          <a href="#collapseHelpForIwh" data-toggle="collapse">{t('notification_settings.how_to.header')}</a>
+          <a href="#collapseHelpForIwh" data-bs-toggle="collapse">{t('notification_settings.how_to.header')}</a>
         </h3>
 
         <ol id="collapseHelpForIwh" className="collapse">

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

@@ -43,8 +43,8 @@ const IndentForm = (props: Props) => {
         <div>
           <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">
+            <DropdownToggle caret className="col-3 col-sm-2 col-md-5 col-lg-5 col-xl-3 text-end">
+              <span className="float-start">
                 {adminPreferredIndentSize || 4}
               </span>
             </DropdownToggle>

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

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

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

@@ -139,7 +139,7 @@ class GlobalNotificationList extends React.Component {
                     className="btn btn-outline-secondary dropdown-toggle"
                     type="button"
                     id="dropdownMenuButton"
-                    data-toggle="dropdown"
+                    data-bs-toggle="dropdown"
                     aria-haspopup="true"
                     aria-expanded="false"
                   >

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

@@ -155,10 +155,10 @@ const ManageGlobalNotification = (props: Props): JSX.Element => {
                 onChange={() => { setNotifyType(NotifyType.Email) }}
               />
               <label className="form-label form-check-label" htmlFor="mail">
-                <p className="font-weight-bold">Email</p>
+                <p className="fw-bold">Email</p>
               </label>
             </div>
-            <div className="form-check ml-2">
+            <div className="form-check ms-2">
               <input
                 className="form-check-input"
                 type="radio"
@@ -169,7 +169,7 @@ const ManageGlobalNotification = (props: Props): JSX.Element => {
                 onChange={() => { setNotifyType(NotifyType.SLACK) }}
               />
               <label className="form-label form-check-label" htmlFor="slack">
-                <p className="font-weight-bold">Slack</p>
+                <p className="fw-bold">Slack</p>
               </label>
             </div>
           </div>
@@ -238,7 +238,7 @@ const ManageGlobalNotification = (props: Props): JSX.Element => {
                 onChange={() => onChangeTriggerEvents(TriggerEventType.CREATE)}
               >
                 <span className="badge rounded-pill bg-success">
-                  <i className="icon-doc mr-1" /> CREATE
+                  <i className="icon-doc me-1" /> CREATE
                 </span>
               </TriggerEventCheckBox>
             </div>
@@ -250,7 +250,7 @@ const ManageGlobalNotification = (props: Props): JSX.Element => {
                 onChange={() => onChangeTriggerEvents(TriggerEventType.EDIT)}
               >
                 <span className="badge rounded-pill bg-warning text-dark">
-                  <i className="icon-pencil mr-1" />EDIT
+                  <i className="icon-pencil me-1" />EDIT
                 </span>
               </TriggerEventCheckBox>
             </div>
@@ -262,7 +262,7 @@ const ManageGlobalNotification = (props: Props): JSX.Element => {
                 onChange={() => onChangeTriggerEvents(TriggerEventType.MOVE)}
               >
                 <span className="badge rounded-pill bg-pink">
-                  <i className="icon-action-redo mr-1" />MOVE
+                  <i className="icon-action-redo me-1" />MOVE
                 </span>
               </TriggerEventCheckBox>
             </div>
@@ -274,7 +274,7 @@ const ManageGlobalNotification = (props: Props): JSX.Element => {
                 onChange={() => onChangeTriggerEvents(TriggerEventType.DELETE)}
               >
                 <span className="badge rounded-pill bg-danger">
-                  <i className="icon-fire mr-1" />DELETE
+                  <i className="icon-fire me-1" />DELETE
                 </span>
               </TriggerEventCheckBox>
             </div>
@@ -286,7 +286,7 @@ const ManageGlobalNotification = (props: Props): JSX.Element => {
                 onChange={() => onChangeTriggerEvents(TriggerEventType.LIKE)}
               >
                 <span className="badge rounded-pill bg-info">
-                  <i className="fa fa-heart-o mr-1" />LIKE
+                  <i className="fa fa-heart-o me-1" />LIKE
                 </span>
               </TriggerEventCheckBox>
             </div>
@@ -298,7 +298,7 @@ const ManageGlobalNotification = (props: Props): JSX.Element => {
                 onChange={() => onChangeTriggerEvents(TriggerEventType.POST)}
               >
                 <span className="badge rounded-pill bg-primary">
-                  <i className="icon-bubble mr-1" />POST
+                  <i className="icon-bubble me-1" />POST
                 </span>
               </TriggerEventCheckBox>
             </div>

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

@@ -39,7 +39,7 @@ const SkeletonListItem = () => (
   <li className="list-group-item">
     <h4 className="mb-2">
       <span className="badge bg-primary">――</span>
-      <span className="ml-2">...</span>
+      <span className="ms-2">...</span>
     </h4>
   </li>
 );
@@ -54,10 +54,10 @@ const SlackIntegrationListItem = ({ isEnabled, currentBotType }) => {
     <li data-testid="slack-integration-list-item" className="list-group-item">
       <h4>
         <Badge isEnabled={isEnabled} />
-        <a href="/admin/slack-integration" className="ml-2">{t('slack_integration.slack_integration')}</a>
+        <a href="/admin/slack-integration" className="ms-2">{t('slack_integration.slack_integration')}</a>
       </h4>
       { isCautionVisible && (
-        <ul className="mt-2 pl-4">
+        <ul className="mt-2 ps-4">
           {/* eslint-disable-next-line react/no-danger */}
           <li dangerouslySetInnerHTML={{ __html: t('external_notification.caution_enabled') }} />
         </ul>
@@ -74,10 +74,10 @@ const LegacySlackIntegrationListItem = ({ isEnabled }) => {
     <li className="list-group-item">
       <h4>
         <Badge isEnabled={isEnabled} />
-        <a href="/admin/slack-integration-legacy" className="ml-2">{t('slack_integration_legacy.slack_integration_legacy')}</a>
+        <a href="/admin/slack-integration-legacy" className="ms-2">{t('slack_integration_legacy.slack_integration_legacy')}</a>
       </h4>
       { isEnabled && (
-        <ul className="mt-2 pl-4">
+        <ul className="mt-2 ps-4">
           <li>
             {/* eslint-disable-next-line react/no-danger */}
             <span className="text-danger" dangerouslySetInnerHTML={{ __html: t('slack_integration_legacy.alert_deplicated') }}></span>

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

@@ -76,7 +76,7 @@ class GitHubSecurityManagementContents extends React.Component {
         </div>
 
         <div className="row mb-5">
-          <label className="form-label 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-start 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 form-label">{t('security_settings.clientID')}</label>
+              <label htmlFor="githubClientId" className="col-3 text-end 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 form-label">{t('security_settings.client_secret')}</label>
+              <label htmlFor="githubClientSecret" className="col-3 text-end py-2 form-label">{t('security_settings.client_secret')}</label>
               <div className="col-6">
                 <input
                   className="form-control"
@@ -136,7 +136,7 @@ class GitHubSecurityManagementContents extends React.Component {
             </div>
 
             <div className="row mb-5">
-              <div className="offset-3 col-6 text-left">
+              <div className="offset-3 col-6 text-start">
                 <div className="form-check form-check-success">
                   <input
                     id="bindByUserNameGitHub"
@@ -173,7 +173,7 @@ class GitHubSecurityManagementContents extends React.Component {
         <div style={{ minHeight: '300px' }}>
           <h4>
             <i className="icon-question" aria-hidden="true"></i>
-            <a href="#collapseHelpForGitHubOauth" data-toggle="collapse"> {t('security_settings.OAuth.how_to.github')}</a>
+            <a href="#collapseHelpForGitHubOauth" data-bs-toggle="collapse"> {t('security_settings.OAuth.how_to.github')}</a>
           </h4>
           <ol id="collapseHelpForGitHubOauth" className="collapse">
             {/* eslint-disable-next-line max-len */}

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

@@ -74,7 +74,7 @@ class GoogleSecurityManagementContents extends React.Component {
         </div>
 
         <div className="row mb-5">
-          <label className="form-label 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-start 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 form-label">{t('security_settings.clientID')}</label>
+              <label htmlFor="googleClientId" className="col-3 text-end 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 form-label">{t('security_settings.client_secret')}</label>
+              <label htmlFor="googleClientSecret" className="col-3 text-end py-2 form-label">{t('security_settings.client_secret')}</label>
               <div className="col-6">
                 <input
                   className="form-control"
@@ -176,7 +176,7 @@ class GoogleSecurityManagementContents extends React.Component {
         <div style={{ minHeight: '300px' }}>
           <h4>
             <i className="icon-question" aria-hidden="true"></i>
-            <a href="#collapseHelpForGoogleOauth" data-toggle="collapse"> {t('security_settings.OAuth.how_to.google')}</a>
+            <a href="#collapseHelpForGoogleOauth" data-bs-toggle="collapse"> {t('security_settings.OAuth.how_to.google')}</a>
           </h4>
           <ol id="collapseHelpForGoogleOauth" className="collapse">
             {/* eslint-disable-next-line max-len */}

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

@@ -84,7 +84,7 @@ class LdapSecuritySettingContents extends React.Component {
             <h3 className="border-bottom">{t('security_settings.configuration')}</h3>
 
             <div className="row">
-              <label htmlFor="serverUrl" className="text-left text-md-right col-md-3 col-form-label">
+              <label htmlFor="serverUrl" className="text-start text-md-right col-md-3 col-form-label">
                 Server URL
               </label>
               <div className="col-md-6">
@@ -107,7 +107,7 @@ class LdapSecuritySettingContents extends React.Component {
             </div>
 
             <div className="row">
-              <label className="form-label text-left text-md-right col-md-3 col-form-label">
+              <label className="form-label text-start text-md-right col-md-3 col-form-label">
                 <strong>{t('security_settings.ldap.bind_mode')}</strong>
               </label>
               <div className="col-md-6">
@@ -116,7 +116,7 @@ class LdapSecuritySettingContents extends React.Component {
                     className="btn btn-outline-secondary dropdown-toggle"
                     type="button"
                     id="dropdownMenuButton"
-                    data-toggle="dropdown"
+                    data-bs-toggle="dropdown"
                     aria-haspopup="true"
                     aria-expanded="true"
                   >
@@ -137,7 +137,7 @@ class LdapSecuritySettingContents extends React.Component {
             </div>
 
             <div className="row">
-              <label className="form-label text-left text-md-right col-md-3 col-form-label">
+              <label className="form-label text-start text-md-right col-md-3 col-form-label">
                 <strong>Bind DN</strong>
               </label>
               <div className="col-md-6">
@@ -172,7 +172,7 @@ class LdapSecuritySettingContents extends React.Component {
             </div>
 
             <div className="row">
-              <div htmlFor="bindDNPassword" className="text-left text-md-right col-md-3 col-form-label">
+              <div htmlFor="bindDNPassword" className="text-start text-md-right col-md-3 col-form-label">
                 <strong>{t('security_settings.ldap.bind_DN_password')}</strong>
               </div>
               <div className="col-md-6">
@@ -203,7 +203,7 @@ class LdapSecuritySettingContents extends React.Component {
             </div>
 
             <div className="row">
-              <label className="form-label text-left text-md-right col-md-3 col-form-label">
+              <label className="form-label text-start 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="form-label text-left text-md-right col-md-3 col-form-label">
+              <label className="form-label text-start 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="form-label text-left text-md-right col-md-3 col-form-label">
+              <label className="form-label text-start 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="form-label text-left text-md-right col-md-3 col-form-label">
+              <label className="form-label text-start 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="form-label text-left text-md-right col-md-3 col-form-label">
+              <label className="form-label text-start 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="form-label text-left text-md-right col-md-3 col-form-label">
+              <label className="form-label text-start 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="form-label text-left text-md-right col-md-3 col-form-label">
+              <label className="form-label text-start 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">
@@ -412,7 +412,7 @@ class LdapSecuritySettingContents extends React.Component {
                 </button>
                 <button
                   type="button"
-                  className="btn btn-outline-secondary ml-2"
+                  className="btn btn-outline-secondary ms-2"
                   onClick={this.openLdapAuthTestModal}
                 >{t('security_settings.ldap.test_config')}
                 </button>

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

@@ -88,7 +88,7 @@ class LocalSecuritySettingContents extends React.Component {
             <h3 className="border-bottom">{t('security_settings.configuration')}</h3>
 
             <div className="row">
-              <div className="col-12 col-md-3 text-left text-md-right py-2">
+              <div className="col-12 col-md-3 text-start text-md-right py-2">
                 <strong>{t('security_settings.register_limitation')}</strong>
               </div>
               <div className="col-12 col-md-6">
@@ -97,7 +97,7 @@ class LocalSecuritySettingContents extends React.Component {
                     className="btn btn-outline-secondary dropdown-toggle"
                     type="button"
                     id="dropdownMenuButton"
-                    data-toggle="dropdown"
+                    data-bs-toggle="dropdown"
                     aria-haspopup="true"
                     aria-expanded="true"
                   >
@@ -139,7 +139,7 @@ class LocalSecuritySettingContents extends React.Component {
               </div>
             </div>
             <div className="row">
-              <div className="col-12 col-md-3 text-left text-md-right">
+              <div className="col-12 col-md-3 text-start text-md-right">
                 <strong dangerouslySetInnerHTML={{ __html: t('security_settings.The whitelist of registration permission E-mail address') }} />
               </div>
               <div className="col-12 col-md-6">
@@ -163,7 +163,7 @@ class LocalSecuritySettingContents extends React.Component {
             </div>
 
             <div className="row">
-              <label className="col-12 col-md-3 text-left text-md-right  col-form-label">{t('security_settings.Local.password_reset_by_users')}</label>
+              <label className="col-12 col-md-3 text-start text-md-right  col-form-label">{t('security_settings.Local.password_reset_by_users')}</label>
               <div className="col-12 col-md-6">
                 <div className="form-check form-switch form-check-success">
                   <input
@@ -192,7 +192,7 @@ class LocalSecuritySettingContents extends React.Component {
             </div>
 
             <div className="row">
-              <label className="col-12 col-md-3 text-left text-md-right  col-form-label">{t('security_settings.Local.email_authentication')}</label>
+              <label className="col-12 col-md-3 text-start text-md-right  col-form-label">{t('security_settings.Local.email_authentication')}</label>
               <div className="col-12 col-md-6">
                 <div className="form-check form-switch form-check-success">
                   <input

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

@@ -68,7 +68,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="text-start text-md-right col-md-3 col-form-label">{t('security_settings.callback_URL')}</label>
           <div className="col-md-6">
             <input
               className="form-control"
@@ -95,7 +95,7 @@ class OidcSecurityManagementContents extends React.Component {
             <h3 className="border-bottom">{t('security_settings.configuration')}</h3>
 
             <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>
+              <label htmlFor="oidcProviderName" className="text-start text-md-right col-md-3 col-form-label">{t('security_settings.providerName')}</label>
               <div className="col-md-6">
                 <input
                   className="form-control"
@@ -108,7 +108,7 @@ class OidcSecurityManagementContents extends React.Component {
             </div>
 
             <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>
+              <label htmlFor="oidcIssuerHost" className="text-start text-md-right col-md-3 col-form-label">{t('security_settings.issuerHost')}</label>
               <div className="col-md-6">
                 <input
                   className="form-control"
@@ -124,7 +124,7 @@ class OidcSecurityManagementContents extends React.Component {
             </div>
 
             <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>
+              <label htmlFor="oidcClientId" className="text-start text-md-right col-md-3 col-form-label">{t('security_settings.clientID')}</label>
               <div className="col-md-6">
                 <input
                   className="form-control"
@@ -140,7 +140,7 @@ class OidcSecurityManagementContents extends React.Component {
             </div>
 
             <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>
+              <label htmlFor="oidcClientSecret" className="text-start text-md-right col-md-3 col-form-label">{t('security_settings.client_secret')}</label>
               <div className="col-md-6">
                 <input
                   className="form-control"
@@ -156,7 +156,7 @@ class OidcSecurityManagementContents extends React.Component {
             </div>
 
             <div className="row mb-5">
-              <label htmlFor="oidcAuthorizationEndpoint" className="text-left text-md-right col-md-3 col-form-label">
+              <label htmlFor="oidcAuthorizationEndpoint" className="text-start text-md-right col-md-3 col-form-label">
                 {t('security_settings.authorization_endpoint')}
               </label>
               <div className="col-md-6">
@@ -174,7 +174,7 @@ class OidcSecurityManagementContents extends React.Component {
             </div>
 
             <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>
+              <label htmlFor="oidcTokenEndpoint" className="text-start text-md-right col-md-3 col-form-label">{t('security_settings.token_endpoint')}</label>
               <div className="col-md-6">
                 <input
                   className="form-control"
@@ -190,7 +190,7 @@ class OidcSecurityManagementContents extends React.Component {
             </div>
 
             <div className="row mb-5">
-              <label htmlFor="oidcRevocationEndpoint" className="text-left text-md-right col-md-3 col-form-label">
+              <label htmlFor="oidcRevocationEndpoint" className="text-start text-md-right col-md-3 col-form-label">
                 {t('security_settings.revocation_endpoint')}
               </label>
               <div className="col-md-6">
@@ -208,7 +208,7 @@ class OidcSecurityManagementContents extends React.Component {
             </div>
 
             <div className="row mb-5">
-              <label htmlFor="oidcIntrospectionEndpoint" className="text-left text-md-right col-md-3 col-form-label">
+              <label htmlFor="oidcIntrospectionEndpoint" className="text-start text-md-right col-md-3 col-form-label">
                 {t('security_settings.introspection_endpoint')}
               </label>
               <div className="col-md-6">
@@ -226,7 +226,7 @@ class OidcSecurityManagementContents extends React.Component {
             </div>
 
             <div className="row mb-5">
-              <label htmlFor="oidcUserInfoEndpoint" className="text-left text-md-right col-md-3 col-form-label">
+              <label htmlFor="oidcUserInfoEndpoint" className="text-start text-md-right col-md-3 col-form-label">
                 {t('security_settings.userinfo_endpoint')}
               </label>
               <div className="col-md-6">
@@ -244,7 +244,7 @@ class OidcSecurityManagementContents extends React.Component {
             </div>
 
             <div className="row mb-5">
-              <label htmlFor="oidcEndSessionEndpoint" className="text-left text-md-right col-md-3 col-form-label">
+              <label htmlFor="oidcEndSessionEndpoint" className="text-start text-md-right col-md-3 col-form-label">
                 {t('security_settings.end_session_endpoint')}
               </label>
               <div className="col-md-6">
@@ -262,7 +262,7 @@ class OidcSecurityManagementContents extends React.Component {
             </div>
 
             <div className="row mb-5">
-              <label htmlFor="oidcRegistrationEndpoint" className="text-left text-md-right col-md-3 col-form-label">
+              <label htmlFor="oidcRegistrationEndpoint" className="text-start text-md-right col-md-3 col-form-label">
                 {t('security_settings.registration_endpoint')}
               </label>
               <div className="col-md-6">
@@ -280,7 +280,7 @@ class OidcSecurityManagementContents extends React.Component {
             </div>
 
             <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>
+              <label htmlFor="oidcJWKSUri" className="text-start text-md-right col-md-3 col-form-label">{t('security_settings.jwks_uri')}</label>
               <div className="col-md-6">
                 <input
                   className="form-control"
@@ -300,7 +300,7 @@ class OidcSecurityManagementContents extends React.Component {
             </h3>
 
             <div className="row mb-5">
-              <label htmlFor="oidcAttrMapId" className="text-left text-md-right col-md-3 col-form-label">Identifier</label>
+              <label htmlFor="oidcAttrMapId" className="text-start text-md-right col-md-3 col-form-label">Identifier</label>
               <div className="col-md-6">
                 <input
                   className="form-control"
@@ -316,7 +316,7 @@ class OidcSecurityManagementContents extends React.Component {
             </div>
 
             <div className="row mb-5">
-              <label htmlFor="oidcAttrMapUserName" className="text-left text-md-right col-md-3 col-form-label">{t('username')}</label>
+              <label htmlFor="oidcAttrMapUserName" className="text-start text-md-right col-md-3 col-form-label">{t('username')}</label>
               <div className="col-md-6">
                 <input
                   className="form-control"
@@ -332,7 +332,7 @@ class OidcSecurityManagementContents extends React.Component {
             </div>
 
             <div className="row mb-5">
-              <label htmlFor="oidcAttrMapName" className="text-left text-md-right col-md-3 col-form-label">{t('Name')}</label>
+              <label htmlFor="oidcAttrMapName" className="text-start text-md-right col-md-3 col-form-label">{t('Name')}</label>
               <div className="col-md-6">
                 <input
                   className="form-control"
@@ -348,7 +348,7 @@ class OidcSecurityManagementContents extends React.Component {
             </div>
 
             <div className="row mb-5">
-              <label htmlFor="oidcAttrMapEmail" className="text-left text-md-right col-md-3 col-form-label">{t('Email')}</label>
+              <label htmlFor="oidcAttrMapEmail" className="text-start text-md-right col-md-3 col-form-label">{t('Email')}</label>
               <div className="col-md-6">
                 <input
                   className="form-control"
@@ -364,7 +364,7 @@ class OidcSecurityManagementContents extends React.Component {
             </div>
 
             <div className="row mb-5">
-              <label className="form-label text-left text-md-right col-md-3 col-form-label">{t('security_settings.callback_URL')}</label>
+              <label className="form-label text-start text-md-right col-md-3 col-form-label">{t('security_settings.callback_URL')}</label>
               <div className="col-md-6">
                 <input
                   className="form-control"
@@ -450,7 +450,7 @@ class OidcSecurityManagementContents extends React.Component {
         <div style={{ minHeight: '300px' }}>
           <h4>
             <i className="icon-question" aria-hidden="true" />
-            <a href="#collapseHelpForOidcOauth" data-toggle="collapse"> {t('security_settings.OAuth.how_to.oidc')}</a>
+            <a href="#collapseHelpForOidcOauth" data-bs-toggle="collapse"> {t('security_settings.OAuth.how_to.oidc')}</a>
           </h4>
           <ol id="collapseHelpForOidcOauth" className="collapse">
             <li>{t('security_settings.OAuth.OIDC.register_1')}</li>

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

@@ -85,7 +85,7 @@ class SamlSecurityManagementContents 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="text-start text-md-right col-md-3 col-form-label">{t('security_settings.callback_URL')}</label>
           <div className="col-md-6">
             <input
               className="form-control"
@@ -391,7 +391,7 @@ pWVdnzS1VCO8fKsJ7YYIr+JmHvseph3kFUOI5RqkCcMZlKUv83aUThsTHw==
             </h3>
 
             <div className="row mb-5">
-              <div className="offset-md-3 col-md-6 text-left">
+              <div className="offset-md-3 col-md-6 text-start">
                 <div className="form-check form-check-success">
                   <input
                     id="bindByUserName-SAML"
@@ -413,7 +413,7 @@ pWVdnzS1VCO8fKsJ7YYIr+JmHvseph3kFUOI5RqkCcMZlKUv83aUThsTHw==
             </div>
 
             <div className="row mb-5">
-              <div className="offset-md-3 col-md-6 text-left">
+              <div className="offset-md-3 col-md-6 text-start">
                 <div className="form-check form-check-success">
                   <input
                     id="bindByEmail-SAML"
@@ -481,7 +481,7 @@ pWVdnzS1VCO8fKsJ7YYIr+JmHvseph3kFUOI5RqkCcMZlKUv83aUThsTHw==
                           <div className="card-header p-1">
                             <h2 className="mb-0">
                               <button
-                                className="btn btn-link text-left"
+                                className="btn btn-link text-start"
                                 type="button"
                                 onClick={() => this.setState({ isHelpOpened: !this.state.isHelpOpened })}
                                 aria-expanded="true"

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

@@ -189,14 +189,14 @@ class SecuritySetting extends React.Component {
     return (
       <div className="dropdown">
         <button
-          className="btn btn-outline-secondary dropdown-toggle text-right"
+          className="btn btn-outline-secondary dropdown-toggle text-end"
           type="button"
           id="dropdownMenuButton"
-          data-toggle="dropdown"
+          data-bs-toggle="dropdown"
           aria-haspopup="true"
           aria-expanded="true"
         >
-          <span className="float-left">
+          <span className="float-start">
             {t(getDeleteConfigValueForT(currentState))}
           </span>
         </button>
@@ -399,15 +399,15 @@ class SecuritySetting extends React.Component {
           <div className="col-md-9">
             <div className="dropdown">
               <button
-                className={`btn btn-outline-secondary dropdown-toggle text-right col-12
+                className={`btn btn-outline-secondary dropdown-toggle text-end col-12
                             col-md-auto ${adminGeneralSecurityContainer.isWikiModeForced && 'disabled'}`}
                 type="button"
                 id="dropdownMenuButton"
-                data-toggle="dropdown"
+                data-bs-toggle="dropdown"
                 aria-haspopup="true"
                 aria-expanded="true"
               >
-                <span className="float-left">
+                <span className="float-start">
                   {currentRestrictGuestMode === 'Deny' && t('security_settings.guest_mode.deny')}
                   {currentRestrictGuestMode === 'Readonly' && t('security_settings.guest_mode.readonly')}
                 </span>
@@ -477,7 +477,7 @@ class SecuritySetting extends React.Component {
 
         <h4>{t('security_settings.session')}</h4>
         <div className="row">
-          <label className="text-left text-md-right col-md-3 col-form-label">{t('security_settings.max_age')}</label>
+          <label className="text-start text-md-right col-md-3 col-form-label">{t('security_settings.max_age')}</label>
           <div className="col-md-6">
             <input
               className="form-control col-md-3"

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

@@ -47,18 +47,18 @@ const BotTypeCard = (props) => {
               ${isBotTypeOfficial ? 'd-flex align-items-center justify-content-center' : 'text-center'}
               ${props.isActive ? 'bg-primary grw-botcard-title-active' : ''}`}
         >
-          <span className="mr-2">
+          <span className="me-2">
             {t(`admin:slack_integration.selecting_bot_types.${botDetails[props.botType].botTypeCategory}`)}
           </span>
 
           {/*  A recommended badge is shown on official bot card, supplementary names are shown on Custom bot cards   */}
           { isBotTypeOfficial
             ? (
-              <span className="badge bg-info mr-2">
+              <span className="badge bg-info me-2">
                 {t('admin:slack_integration.selecting_bot_types.recommended')}
               </span>
             ) : (
-              <span className="supplementary-bot-name mr-2">
+              <span className="supplementary-bot-name me-2">
                 {t(`admin:slack_integration.selecting_bot_types.${botDetails[props.botType].supplementaryBotName}`)}
               </span>
             )}

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

@@ -7,7 +7,7 @@ import { UncontrolledTooltip } from 'reactstrap';
 const ProxyCircle = () => (
   <div className="grw-bridge-proxy-circle">
     <div className="circle position-absolute bg-primary border-light rounded-circle">
-      <p className="circle-inner text-light font-weight-bold d-none d-lg-inline">Proxy Server</p>
+      <p className="circle-inner text-light fw-bold d-none d-lg-inline">Proxy Server</p>
       <p className="circle-inner grw-proxy-server-name d-block d-lg-none">Proxy Server</p>
     </div>
   </div>
@@ -24,7 +24,7 @@ const BridgeCore = (props) => {
         <p className={`${withProxy ? 'mt-0' : 'mt-2'}`}>
           <i className={iconClass} />
           <small
-            className="ml-2 d-none d-lg-inline"
+            className="ms-2 d-none d-lg-inline"
             // eslint-disable-next-line react/no-danger
             dangerouslySetInnerHTML={{ __html: description }}
           />

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

@@ -1,5 +1,7 @@
 import React from 'react';
+
 import PropTypes from 'prop-types';
+
 import Bridge from './Bridge';
 
 const CustomBotWithProxyConnectionStatus = (props) => {
@@ -14,7 +16,7 @@ const CustomBotWithProxyConnectionStatus = (props) => {
     <div className="d-flex justify-content-center my-5 bot-integration">
 
       <div className="card rounded shadow border-0 w-50 admin-bot-card">
-        <h5 className="card-title font-weight-bold mt-3 ml-3">Slack</h5>
+        <h5 className="card-title fw-bold mt-3 ms-3">Slack</h5>
         <div className="card-body px-5">
           {connectionStatusValues.map((connectionStatus, i) => {
             const workspaceName = connectionStatus.workspaceName || `Settings #${i}`;
@@ -22,7 +24,7 @@ const CustomBotWithProxyConnectionStatus = (props) => {
             return (
               <div key={workspaceName} className="card slack-work-space-name-card">
                 <div className="m-2 text-center">
-                  <h5 className="font-weight-bold">{workspaceName}</h5>
+                  <h5 className="fw-bold">{workspaceName}</h5>
                   <img width={20} height={20} src="/images/slack-integration/growi-bot-kun-icon.png" />
                 </div>
               </div>
@@ -35,8 +37,8 @@ const CustomBotWithProxyConnectionStatus = (props) => {
         <Bridge errorCount={errorCount} totalCount={totalCount} withProxy />
       </div>
 
-      <div className="card rounded-lg shadow border-0 w-50 admin-bot-card">
-        <h5 className="card-title font-weight-bold mt-3 ml-3">GROWI App</h5>
+      <div className="card rounded-3 shadow border-0 w-50 admin-bot-card">
+        <h5 className="card-title fw-bold mt-3 ms-3">GROWI App</h5>
         <div className="card-body text-center">
           <div className="mx-md-3 my-4 my-lg-5 p-2 border bg-primary text-light">
             {siteName}

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

@@ -94,7 +94,7 @@ const CustomBotWithProxySettings = (props) => {
       <h2 className="admin-setting-header mb-2">{t('admin:slack_integration.custom_bot_with_proxy_integration')}
         <a href={t('admin:slack_integration.docs_url.custom_bot_with_proxy')} target="_blank" rel="noopener noreferrer">
           <i
-            className="fa fa-external-link btn-link ml-2"
+            className="fa fa-external-link btn-link ms-2"
             aria-hidden="true"
           />
         </a>
@@ -108,7 +108,7 @@ const CustomBotWithProxySettings = (props) => {
           />
 
           <div className="row my-4">
-            <label className="text-left text-md-right col-md-3 col-form-label mt-3">Proxy URL</label>
+            <label className="text-start text-md-right col-md-3 col-form-label mt-3">Proxy URL</label>
             <div className="col-md-6 mt-3">
               <input
                 className="form-control"

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

@@ -18,12 +18,12 @@ const CustomBotWithoutProxyConnectionStatus = (props) => {
   return (
     <div className="d-flex justify-content-center my-5 bot-integration">
       <div className="card rounded shadow border-0 w-50 admin-bot-card mb-0">
-        <h5 className="card-title font-weight-bold mt-3 ml-4">Slack</h5>
+        <h5 className="card-title fw-bold mt-3 ms-4">Slack</h5>
         <div className="card-body px-4 text-center mx-md-5">
           {totalCount > 0 ? (
             <div className="card slack-work-space-name-card">
               <div className="m-2 text-center">
-                <h5 className="font-weight-bold">
+                <h5 className="fw-bold">
                   {workspaceName != null ? workspaceName : 'Settings #1'}
                 </h5>
                 <img width={20} height={20} src="/images/slack-integration/growi-bot-kun-icon.png" />
@@ -37,8 +37,8 @@ const CustomBotWithoutProxyConnectionStatus = (props) => {
         <Bridge errorCount={errorCount} totalCount={totalCount} />
       </div>
 
-      <div className="card rounded-lg shadow border-0 w-50 admin-bot-card mb-0">
-        <h5 className="card-title font-weight-bold mt-3 ml-4">GROWI App</h5>
+      <div className="card rounded-3 shadow border-0 w-50 admin-bot-card mb-0">
+        <h5 className="card-title fw-bold mt-3 ms-4">GROWI App</h5>
         <div className="card-body p-4 text-center">
           <div className="border p-2 bg-primary text-light mx-md-5">
             {siteName}

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

@@ -25,7 +25,7 @@ const CustomBotWithoutProxySettings = (props) => {
       <h2 className="admin-setting-header">{t('admin:slack_integration.custom_bot_without_proxy_integration')}
         <a href={t('admin:slack_integration.docs_url.custom_bot_without_proxy')} target="_blank" rel="noopener noreferrer">
           <i
-            className="fa fa-external-link btn-link ml-2"
+            className="fa fa-external-link btn-link ms-2"
             aria-hidden="true"
           />
         </a>

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

@@ -70,15 +70,15 @@ const CustomBotWithoutProxySettingsAccordion = (props) => {
   );
 
   return (
-    <div className="card border-0 rounded-lg shadow overflow-hidden">
+    <div className="card border-0 rounded-3 shadow overflow-hidden">
       <Accordion
         defaultIsActive={defaultOpenAccordionKeys.has(botInstallationStep.CREATE_BOT)}
-        title={<><span className="mr-2">①</span>{t('admin:slack_integration.accordion.create_bot')}</>}
+        title={<><span className="me-2">①</span>{t('admin:slack_integration.accordion.create_bot')}</>}
       >
         <div className="my-5 d-flex flex-column align-items-center">
           <button type="button" className="btn btn-primary text-nowrap" onClick={() => window.open('https://api.slack.com/apps', '_blank')}>
             {t('admin:slack_integration.accordion.create_bot')}
-            <i className="fa fa-external-link ml-2" aria-hidden="true" />
+            <i className="fa fa-external-link ms-2" aria-hidden="true" />
           </button>
           <a
             href={t('admin:slack_integration.docs_url.custom_bot_without_proxy_setting')}
@@ -88,7 +88,7 @@ const CustomBotWithoutProxySettingsAccordion = (props) => {
             <p className="text-center mt-1">
               <small>
                 {t('admin:slack_integration.accordion.how_to_create_a_bot')}
-                <i className="fa fa-external-link ml-2" aria-hidden="true" />
+                <i className="fa fa-external-link ms-2" aria-hidden="true" />
               </small>
             </p>
           </a>
@@ -96,7 +96,7 @@ const CustomBotWithoutProxySettingsAccordion = (props) => {
       </Accordion>
       <Accordion
         defaultIsActive={defaultOpenAccordionKeys.has(botInstallationStep.INSTALL_BOT)}
-        title={<><span className="mr-2">②</span>{t('admin:slack_integration.accordion.install_bot_to_slack')}</>}
+        title={<><span className="me-2">②</span>{t('admin:slack_integration.accordion.install_bot_to_slack')}</>}
       >
         <div className="container w-75 py-5">
           <p>1. {t('admin:slack_integration.accordion.select_install_your_app')}</p>
@@ -115,7 +115,7 @@ const CustomBotWithoutProxySettingsAccordion = (props) => {
       <Accordion
         defaultIsActive={defaultOpenAccordionKeys.has(botInstallationStep.REGISTER_SLACK_CONFIGURATION)}
         // eslint-disable-next-line max-len
-        title={<><span className="mr-2">③</span>{t('admin:slack_integration.accordion.register_secret_and_token')}{isEnterdSecretAndToken && <i className="ml-3 text-success fa fa-check"></i>}</>}
+        title={<><span className="me-2">③</span>{t('admin:slack_integration.accordion.register_secret_and_token')}{isEnterdSecretAndToken && <i className="ms-3 text-success fa fa-check"></i>}</>}
       >
         <CustomBotWithoutProxySecretTokenSection
           onUpdatedSecretToken={props.onUpdatedSecretToken}
@@ -128,7 +128,7 @@ const CustomBotWithoutProxySettingsAccordion = (props) => {
       <Accordion
         defaultIsActive={defaultOpenAccordionKeys.has(botInstallationStep.CONNECTION_TEST)}
         // eslint-disable-next-line max-len
-        title={<><span className="mr-2">④</span>{t('admin:slack_integration.accordion.manage_permission')}</>}
+        title={<><span className="me-2">④</span>{t('admin:slack_integration.accordion.manage_permission')}</>}
       >
         <ManageCommandsProcessWithoutProxy
           commandPermission={commandPermission}
@@ -138,7 +138,7 @@ const CustomBotWithoutProxySettingsAccordion = (props) => {
       <Accordion
         defaultIsActive={defaultOpenAccordionKeys.has(botInstallationStep.CONNECTION_TEST)}
         // eslint-disable-next-line max-len
-        title={<><span className="mr-2">⑤</span>{t('admin:slack_integration.accordion.test_connection')}{isLatestConnectionSuccess && <i className="ml-3 text-success fa fa-check"></i>}</>}
+        title={<><span className="me-2">⑤</span>{t('admin:slack_integration.accordion.test_connection')}{isLatestConnectionSuccess && <i className="ms-3 text-success fa fa-check"></i>}</>}
       >
         <p className="text-center m-4">{t('admin:slack_integration.accordion.test_connection_by_pressing_button')}</p>
         <p className="text-center text-warning">
@@ -160,7 +160,7 @@ const CustomBotWithoutProxySettingsAccordion = (props) => {
             </div>
             <button
               type="submit"
-              className="btn btn-info mx-3 font-weight-bold"
+              className="btn btn-info mx-3 fw-bold"
               disabled={testChannel.trim().length === 0}
             >Test
             </button>
@@ -172,9 +172,9 @@ const CustomBotWithoutProxySettingsAccordion = (props) => {
         <form>
           <div className="row my-3 justify-content-center">
             <div className="slack-connection-log col-md-4">
-              <label className="form-label 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 ps-2 m-0">Logs</p></label>
               <textarea
-                className="form-control card border-info slack-connection-log-body rounded-lg"
+                className="form-control card border-info slack-connection-log-body rounded-3"
                 rows="5"
                 value={logsValue}
                 readOnly

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

@@ -30,7 +30,7 @@ const DeleteSlackBotSettingsModal = React.memo((props) => {
           )}
           {!props.isResetAll && (
             <>
-              <i className="icon-trash mr-1" />
+              <i className="icon-trash me-1" />
               {t('admin:slack_integration.delete_slackbot_settings')}
             </>
           )}
@@ -61,7 +61,7 @@ const DeleteSlackBotSettingsModal = React.memo((props) => {
           )}
           {!props.isResetAll && (
             <>
-              <i className="icon-trash mr-1" />
+              <i className="icon-trash me-1" />
               {t('admin:slack_integration.delete')}
             </>
           )}

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

@@ -94,14 +94,14 @@ const PermissionSettingForEachPermissionTypeComponent = ({
         </p>
         <div className="col dropdown">
           <button
-            className="btn btn-outline-secondary dropdown-toggle text-right col-12 col-md-auto"
+            className="btn btn-outline-secondary dropdown-toggle text-end col-12 col-md-auto"
             type="button"
             id="dropdownMenuButton"
-            data-toggle="dropdown"
+            data-bs-toggle="dropdown"
             aria-haspopup="true"
             aria-expanded="true"
           >
-            <span className="float-left">
+            <span className="float-start">
               {currentPermissionType === PermissionTypes.ALLOW_ALL
               && t('admin:slack_integration.accordion.allow_all')}
               {currentPermissionType === PermissionTypes.DENY_ALL
@@ -299,7 +299,7 @@ const ManageCommandsProcess = ({
         {(title || description) && (
           <div className="row">
             <div className="col-md-7 offset-md-2">
-              { title && <p className="font-weight-bold mb-1">{title}</p> }
+              { title && <p className="fw-bold mb-1">{title}</p> }
               { description && <p className="text-muted">{description}</p> }
             </div>
           </div>
@@ -362,7 +362,7 @@ const ManageCommandsProcess = ({
 
   return (
     <div className="py-4 px-5">
-      <p className="mb-4 font-weight-bold">{t('admin:slack_integration.accordion.growi_commands')}</p>
+      <p className="mb-4 fw-bold">{t('admin:slack_integration.accordion.growi_commands')}</p>
       <div className="row d-flex flex-column align-items-center">
         <div className="col-8">
           {Object.values(CommandUsageTypes).map(commandUsageType => (
@@ -376,7 +376,7 @@ const ManageCommandsProcess = ({
         </div>
       </div>
 
-      <p className="mb-4 font-weight-bold">Events</p>
+      <p className="mb-4 fw-bold">Events</p>
       <div className="row d-flex flex-column align-items-center">
         <div className="col-8">
           {Object.values(EventTypes).map(EventType => (

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

@@ -86,14 +86,14 @@ const SinglePermissionSettingComponent = ({
         <p className="col my-auto text-capitalize align-middle">{commandName}</p>
         <div className="col dropdown">
           <button
-            className="btn btn-outline-secondary dropdown-toggle text-right col-12 col-md-auto"
+            className="btn btn-outline-secondary dropdown-toggle text-end col-12 col-md-auto"
             type="button"
             id="dropdownMenuButton"
-            data-toggle="dropdown"
+            data-bs-toggle="dropdown"
             aria-haspopup="true"
             aria-expanded="true"
           >
-            <span className="float-left">
+            <span className="float-start">
               {permission === true && t('admin:slack_integration.accordion.allow_all')}
               {permission === false && t('admin:slack_integration.accordion.deny_all')}
               {Array.isArray(permission) && t('admin:slack_integration.accordion.allow_specified')}
@@ -217,7 +217,7 @@ const ManageCommandsProcessWithoutProxy = ({ commandPermission, eventActionsPerm
 
   return (
     <div className="py-4 px-5">
-      <p className="mb-4 font-weight-bold">{t('admin:slack_integration.accordion.growi_commands')}</p>
+      <p className="mb-4 fw-bold">{t('admin:slack_integration.accordion.growi_commands')}</p>
       <div className="row d-flex flex-column align-items-center">
         <div className="col-8">
           <div className="form-check">
@@ -238,7 +238,7 @@ const ManageCommandsProcessWithoutProxy = ({ commandPermission, eventActionsPerm
           </div>
         </div>
       </div>
-      <p className="mb-4 font-weight-bold">Events</p>
+      <p className="mb-4 fw-bold">Events</p>
       <div className="row d-flex flex-column align-items-center">
         <div className="col-8">
           <div className="form-check">

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

@@ -78,7 +78,7 @@ const OfficialBotSettings = (props) => {
       <h2 className="admin-setting-header">{t('admin:slack_integration.official_bot_integration')}
         <a href={t('admin:slack_integration.docs_url.official_bot')} target="_blank" rel="noopener noreferrer">
           <i
-            className="fa fa-external-link btn-link ml-2"
+            className="fa fa-external-link btn-link ms-2"
             aria-hidden="true"
             onClick={() => window.open(`${t('admin:slack_integration.docs_url.official_bot')}`, '_blank')}
           />

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

@@ -38,7 +38,7 @@ export const SlackAppIntegrationControl: FC<Props> = (props: Props) => {
         </label>
       </div>
       <button
-        className="btn btn-outline-danger ml-3"
+        className="btn btn-outline-danger ms-3"
         type="button"
         onClick={() => {
           if (onDeleteButtonClicked != null) {
@@ -46,7 +46,7 @@ export const SlackAppIntegrationControl: FC<Props> = (props: Props) => {
           }
         }}
       >
-        <i className="icon-trash mr-1" />
+        <i className="icon-trash me-1" />
         {t('admin:slack_integration.delete')}
       </button>
     </div>

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

@@ -187,7 +187,7 @@ const SlackIntegration = () => {
   if (isLoading) {
     return (
       <div className="text-muted text-center">
-        <i className="fa fa-2x fa-spinner fa-pulse mr-1"></i>
+        <i className="fa fa-2x fa-spinner fa-pulse me-1"></i>
       </div>
     );
   }
@@ -210,8 +210,8 @@ const SlackIntegration = () => {
       <div className="selecting-bot-type mb-5">
         <h2 className="admin-setting-header mb-4">
           {t('admin:slack_integration.selecting_bot_types.slack_bot')}
-          <a className="ml-2 btn-link small" href={t('admin:slack_integration.docs_url.slack_integration')} target="_blank" rel="noopener noreferrer">
-            <i className="icon icon-question ml-1" aria-hidden="true"></i>
+          <a className="ms-2 btn-link small" href={t('admin:slack_integration.docs_url.slack_integration')} target="_blank" rel="noopener noreferrer">
+            <i className="icon icon-question ms-1" aria-hidden="true"></i>
           </a>
         </h2>
 

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

@@ -25,7 +25,7 @@ const BotCreateProcess = () => {
     <div className="my-5 d-flex flex-column align-items-center">
       <button type="button" className="btn btn-primary text-nowrap" onClick={() => window.open('https://api.slack.com/apps', '_blank')}>
         {t('admin:slack_integration.accordion.create_bot')}
-        <i className="fa fa-external-link ml-2" aria-hidden="true" />
+        <i className="fa fa-external-link ms-2" aria-hidden="true" />
       </button>
       <a
         href={t('admin:slack_integration.docs_url.custom_bot_with_proxy_setting')}
@@ -35,7 +35,7 @@ const BotCreateProcess = () => {
         <p className="text-center mt-1">
           <small>
             {t('admin:slack_integration.accordion.how_to_create_a_bot')}
-            <i className="fa fa-external-link ml-2" aria-hidden="true" />
+            <i className="fa fa-external-link ms-2" aria-hidden="true" />
           </small>
         </p>
       </a>
@@ -49,7 +49,7 @@ const BotInstallProcessForOfficialBot = () => {
     <div className="my-5 d-flex flex-column align-items-center">
       <button type="button" className="btn btn-primary text-nowrap" onClick={() => window.open('https://slackbot-proxy.growi.org/', '_blank')}>
         {t('admin:slack_integration.accordion.install_now')}
-        <i className="fa fa-external-link ml-2" aria-hidden="true" />
+        <i className="fa fa-external-link ms-2" aria-hidden="true" />
       </button>
       <a
         href={t('admin:slack_integration.docs_url.official_bot_setting')}
@@ -59,7 +59,7 @@ const BotInstallProcessForOfficialBot = () => {
         <p className="text-center mt-1">
           <small>
             {t('admin:slack_integration.accordion.how_to_install')}
-            <i className="fa fa-external-link ml-2" aria-hidden="true" />
+            <i className="fa fa-external-link ms-2" aria-hidden="true" />
           </small>
         </p>
       </a>
@@ -136,9 +136,9 @@ 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>
+      <p className="fw-bold">1. {t('admin:slack_integration.accordion.generate_access_token')}</p>
       <div className="row">
-        <label className="text-left text-md-right col-md-3 col-form-label">Access Token Proxy to GROWI</label>
+        <label className="text-start text-md-right col-md-3 col-form-label">Access Token Proxy to GROWI</label>
         <div className="col-md-6">
           <div className=" mx-1">
             <input className="form-control" type="text" value={props.tokenPtoG || ''} readOnly />
@@ -147,7 +147,7 @@ const GeneratingTokensAndRegisteringProxyServiceProcess = (props) => {
         </div>
       </div>
       <div className="row">
-        <label className="text-left text-md-right col-md-3 col-form-label">Access Token GROWI to Proxy</label>
+        <label className="text-start text-md-right col-md-3 col-form-label">Access Token GROWI to Proxy</label>
         <div className="col-md-6">
           <div className=" mx-1">
             <input className="form-control" type="text" value={props.tokenGtoP || ''} readOnly />
@@ -165,26 +165,26 @@ const GeneratingTokensAndRegisteringProxyServiceProcess = (props) => {
           { t('admin:slack_integration.access_token_settings.regenerate') }
         </button>
       </div>
-      <p className="font-weight-bold mt-5">2. {t('admin:slack_integration.accordion.register_for_growi_official_bot_proxy_service')}</p>
+      <p className="fw-bold mt-5">2. {t('admin:slack_integration.accordion.register_for_growi_official_bot_proxy_service')}</p>
       <div className="d-flex flex-column align-items-center">
         <ol className="p-0">
           <li>
             <p
-              className="ml-2"
+              className="ms-2"
               // eslint-disable-next-line react/no-danger
               dangerouslySetInnerHTML={{ __html: t('admin:slack_integration.accordion.enter_growi_register_on_slack') }}
             />
           </li>
           <li>
             <p
-              className="ml-2"
+              className="ms-2"
               // TODO: Add dynamic link
               // TODO: Add logo
               // eslint-disable-next-line react/no-danger
               dangerouslySetInnerHTML={{ __html: t('admin:slack_integration.accordion.paste_growi_url') }}
             />
-            <div className="input-group align-items-center pl-2 mb-3">
-              <div className=" w-75">
+            <div className="input-group align-items-center ps-2 mb-3">
+              <div className="w-75">
                 <input className="form-control" type="text" value={props.growiUrl} readOnly />
                 <CustomCopyToClipBoard textToBeCopied={props.growiUrl} message="admin:slack_integration.copied_to_clipboard"></CustomCopyToClipBoard>
               </div>
@@ -193,7 +193,7 @@ const GeneratingTokensAndRegisteringProxyServiceProcess = (props) => {
           </li>
           <li>
             <p
-              className="ml-2"
+              className="ms-2"
               // eslint-disable-next-line react/no-danger
               dangerouslySetInnerHTML={{ __html: t('admin:slack_integration.accordion.enter_access_token_for_growi_and_proxy') }}
             />
@@ -258,7 +258,7 @@ const TestProcess = ({
           </div>
           <button
             type="submit"
-            className="btn btn-info mx-3 font-weight-bold"
+            className="btn btn-info mx-3 fw-bold"
             disabled={testChannel.trim() === ''}
           >
             Test
@@ -269,9 +269,9 @@ const TestProcess = ({
       <form>
         <div className="row my-3 justify-content-center">
           <div className="slack-connection-log col-md-4">
-            <label className="form-label 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 ps-2 m-0">Logs</p></label>
             <textarea
-              className="form-control card border-info slack-connection-log-body rounded-lg"
+              className="form-control card border-info slack-connection-log-body rounded-3"
               rows="5"
               value={logsValue}
               readOnly
@@ -382,16 +382,16 @@ const WithProxyAccordions = (props) => {
 
   return (
     <div
-      className="card border-0 rounded-lg shadow overflow-hidden"
+      className="card border-0 rounded-3 shadow overflow-hidden"
     >
       {Object.entries(integrationProcedureMapping).map(([key, value]) => {
         return (
           <Accordion
             title={(
               <>
-                <span className="mr-2">{key}</span>
+                <span className="me-2">{key}</span>
                 {t(`admin:slack_integration.accordion.${value.title}`)}
-                {value.title === 'test_connection' && isLatestConnectionSuccess && <i className="ml-3 text-success fa fa-check"></i>}
+                {value.title === 'test_connection' && isLatestConnectionSuccess && <i className="ms-3 text-success fa fa-check"></i>}
               </>
             )}
             key={key}

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

@@ -188,7 +188,7 @@ export const UserGroupDeleteModal: FC<Props> = (props: Props) => {
       </ModalHeader>
       <ModalBody>
         <div>
-          <span className="font-weight-bold">{t('admin:user_group_management.group_name')}</span> : &quot;{props?.deleteUserGroup?.name || ''}&quot;
+          <span className="fw-bold">{t('admin:user_group_management.group_name')}</span> : &quot;{props?.deleteUserGroup?.name || ''}&quot;
         </div>
         <div className="text-danger mt-3">
           {t('admin:user_group_management.delete_modal.desc')}

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

@@ -29,7 +29,7 @@ export const UserGroupDropdown: FC<Props> = (props: Props) => {
   return (
     <>
       <div className="dropdown">
-        <button className="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown">
+        <button className="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown">
           {t('admin:user_group_management.add_child_group')}
         </button>
 

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

@@ -104,7 +104,7 @@ export const UserGroupForm: FC<Props> = (props: Props) => {
             <button
               type="button"
               id="dropdownMenuButton"
-              data-toggle="dropdown"
+              data-bs-toggle="dropdown"
               className={`
                 btn btn-outline-secondary dropdown-toggle mb-3 ${isSelectableParentUserGroups ? '' : 'disabled'}
               `}

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

@@ -189,7 +189,7 @@ export const UserGroupTable: FC<Props> = (props: Props) => {
                           type="button"
                           id={`admin-group-menu-button-${group._id}`}
                           className="btn btn-outline-secondary btn-sm dropdown-toggle"
-                          data-toggle="dropdown"
+                          data-bs-toggle="dropdown"
                         >
                           <i className="icon-settings"></i>
                         </button>

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="form-label text-capitalize form-check-label ml-3" htmlFor={`isAlso${option}Searched`}>
+        <label className="form-label text-capitalize form-check-label ms-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="form-label text-capitalize form-check-label ml-3" htmlFor={`${searchType}Match`}>
+      <label className="form-label text-capitalize form-check-label ms-3" htmlFor={`${searchType}Match`}>
         {t(`admin:user_group_management.add_modal.${searchType}_match`)}
       </label>
     </div>

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

@@ -34,7 +34,7 @@ export const UpdateParentConfirmModal: FC = () => {
           <>
             <ModalBody>
               <div className="mb-2">
-                <span className="font-weight-bold">{t('admin:user_group_management.group_name')}</span> : &quot;{targetGroup.name}&quot;
+                <span className="fw-bold">{t('admin:user_group_management.group_name')}</span> : &quot;{targetGroup.name}&quot;
                 <hr />
                 {t('admin:user_group_management.update_parent_confirm_modal.caution_change_parent', { groupName: targetGroup.name })}
               </div>
@@ -43,7 +43,7 @@ export const UpdateParentConfirmModal: FC = () => {
                 {t('admin:user_group_management.update_parent_confirm_modal.danger_message')}
               </div>
 
-              <div className="form-check form-check-succsess pl-5">
+              <div className="form-check form-check-succsess ps-5">
                 <input
                   className="form-check-input"
                   name="forceUpdateParents"

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

@@ -98,9 +98,9 @@ class UserGroupUserFormByInput extends React.Component {
     return (
       <>
         <UserPicture user={user} size="sm" noLink noTooltip />
-        <strong className="ml-2">{user.username}</strong>
-        {isAlsoNameSearched && <span className="ml-2">{user.name}</span>}
-        {isAlsoMailSearched && <span className="ml-2">{user.email}</span>}
+        <strong className="ms-2">{user.username}</strong>
+        {isAlsoNameSearched && <span className="ms-2">{user.name}</span>}
+        {isAlsoMailSearched && <span className="ms-2">{user.email}</span>}
       </>
     );
   }
@@ -116,7 +116,7 @@ class UserGroupUserFormByInput extends React.Component {
 
     return (
       <div className="row">
-        <div className="col-8 pr-0">
+        <div className="col-8 pe-0">
           <AsyncTypeahead
             {...this.props}
             id="name-typeahead-asynctypeahead"
@@ -136,7 +136,7 @@ class UserGroupUserFormByInput extends React.Component {
             clearButton
           />
         </div>
-        <div className="col-2 pl-0">
+        <div className="col-2 ps-0">
           <button
             type="button"
             className="btn btn-success"

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

@@ -54,7 +54,7 @@ export const UserGroupUserTable = (props: Props): JSX.Element => {
                     type="button"
                     id={`admin-group-menu-button-${relatedUser._id}`}
                     className="btn btn-outline-secondary btn-sm dropdown-toggle"
-                    data-toggle="dropdown"
+                    data-bs-toggle="dropdown"
                   >
                     <i className="icon-settings"></i>
                   </button>

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

@@ -81,7 +81,7 @@ const UserManagement = (props: UserManagementProps) => {
 
   const renderCheckbox = (status: string, statusLabel: string, statusColor: string) => {
     return (
-      <div className={`form-check form-check-${statusColor} mr-2`}>
+      <div className={`form-check form-check-${statusColor} me-2`}>
         <input
           className="form-check-input"
           type="checkbox"
@@ -125,10 +125,10 @@ const UserManagement = (props: UserManagementProps) => {
         <InviteUserControl />
         <Link
           href="/admin/users/external-accounts"
-          className="btn btn-outline-secondary ml-2"
+          className="btn btn-outline-secondary ms-2"
           role="button"
         >
-          <i className="icon-user-follow mr-1" aria-hidden="true"></i>
+          <i className="icon-user-follow me-1" aria-hidden="true"></i>
           {t('admin:user_management.external_account')}
         </Link>
       </p>
@@ -138,7 +138,7 @@ const UserManagement = (props: UserManagementProps) => {
 
         <div className="row d-flex justify-content-start align-items-center my-2">
           <div className="col-md-3 d-flex align-items-center my-2">
-            <i className="icon-magnifier mr-1"></i>
+            <i className="icon-magnifier me-1"></i>
             <span className={`search-typeahead ${styles['search-typeahead']}`}>
               <input
                 className="w-100"
@@ -183,7 +183,7 @@ const UserManagement = (props: UserManagementProps) => {
               className="btn btn-outline-secondary btn-sm"
               onClick={resetButtonClickHandler}
             >
-              <span className="icon-refresh mr-1"></span>
+              <span className="icon-refresh me-1"></span>
               {t('commons:Reset')}
             </button>
           </div>

apps/app/src/components/Admin/Users/ExternalAccountTable.tsx

@@ -48,7 +48,7 @@ const ExternalAccountTable = (props: ExternalAccountTableProps): JSX.Element =>
             </th>
             <th style={{ width: '200px' }}>
               <div className="d-flex align-items-center">
-                {t('user_management.related_username')}<code className="ml-2">username</code>
+                {t('user_management.related_username')}<code className="ms-2">username</code>
               </div>
             </th>
             <th style={{ width: '100px' }}>
@@ -57,7 +57,7 @@ const ExternalAccountTable = (props: ExternalAccountTableProps): JSX.Element =>
                 <span
                   role="button"
                   className="text-muted mx-2"
-                  data-toggle="popper"
+                  data-bs-toggle="popper"
                   data-placement="top"
                   data-trigger="hover"
                   data-html="true"
@@ -91,7 +91,7 @@ const ExternalAccountTable = (props: ExternalAccountTableProps): JSX.Element =>
                 <td>{dateFnsFormat(new Date(ea.createdAt), 'yyyy-MM-dd')}</td>
                 <td>
                   <div className="btn-group admin-user-menu">
-                    <button type="button" className="btn btn-outline-secondary btn-sm dropdown-toggle" data-toggle="dropdown">
+                    <button type="button" className="btn btn-outline-secondary btn-sm dropdown-toggle" data-bs-toggle="dropdown">
                       <i className="icon-settings"></i> <span className="caret"></span>
                     </button>
                     <ul className="dropdown-menu" role="menu">

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

@@ -67,12 +67,12 @@ class PasswordResetModal extends React.Component {
     const { t, isMailerSetup, userForPasswordResetModal } = this.props;
 
     return (
-      <div className="d-flex col text-left ml-1 pl-0">
+      <div className="d-flex col text-start ms-1 ps-0">
         {!isMailerSetup ? (
           <label className="form-label form-text text-muted" dangerouslySetInnerHTML={{ __html: t('admin:mailer_setup_required') }} />
         ) : (
           <>
-            <p className="mr-2">To:</p>
+            <p className="me-2">To:</p>
             <div>
               <p className="mb-0">{userForPasswordResetModal.username}</p>
               <p className="mb-0">{userForPasswordResetModal.email}</p>

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

@@ -105,7 +105,7 @@ class UserInviteModal extends React.Component {
 
     return (
       <>
-        <div className="col text-left form-check form-check-info" onChange={this.handleCheckBox}>
+        <div className="col text-start form-check form-check-info" onChange={this.handleCheckBox}>
           <input
             type="checkbox"
             id="sendEmail"
@@ -127,7 +127,7 @@ class UserInviteModal extends React.Component {
         <div>
           <button
             type="button"
-            className="btn btn-outline-secondary mr-2"
+            className="btn btn-outline-secondary me-2"
             onClick={this.onToggleModal}
           >
             {t('Cancel')}
@@ -151,7 +151,7 @@ class UserInviteModal extends React.Component {
 
     return (
       <>
-        <label className="form-label mr-3 text-left" style={{ flex: 1 }}>
+        <label className="form-label me-3 text-start" 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>
@@ -175,7 +175,7 @@ class UserInviteModal extends React.Component {
             <div className="my-1" key={user.email}>
               <CopyToClipboard text={copyText} onCopy={this.showToaster}>
                 <li className="btn btn-outline-secondary">
-                  Email: <strong className="mr-3">{user.email}</strong> Password: <strong>{user.password}</strong>
+                  Email: <strong className="me-3">{user.email}</strong> Password: <strong>{user.password}</strong>
                 </li>
               </CopyToClipboard>
             </div>

apps/app/src/components/Admin/Users/UserMenu.tsx

@@ -80,7 +80,7 @@ const UserMenu = (props: UserMenuProps) => {
   const renderAdminMenu = useCallback(() => {
     return (
       <>
-        <li className="dropdown-divider pl-0"></li>
+        <li className="dropdown-divider ps-0"></li>
         <li className="dropdown-header">{t('user_management.user_table.administrator_menu')}</li>
         <li>
           {user.admin ? <RevokeAdminMenuItem user={user} /> : <GrantAdminButton user={user} />}

apps/app/src/components/Admin/Users/UserTable.tsx

@@ -70,7 +70,7 @@ const UserTable = (props: UserTableProps) => {
             <th style={{ width: '100px' }}>#</th>
             <th>
               <div className="d-flex align-items-center">
-                <div className="mr-3">
+                <div className="me-3">
                   {t('user_management.status')}
                 </div>
                 <SortIcons
@@ -82,7 +82,7 @@ const UserTable = (props: UserTableProps) => {
             </th>
             <th>
               <div className="d-flex align-items-center">
-                <div className="mr-3">
+                <div className="me-3">
                   <code>username</code>
                 </div>
                 <SortIcons
@@ -94,7 +94,7 @@ const UserTable = (props: UserTableProps) => {
             </th>
             <th>
               <div className="d-flex align-items-center">
-                <div className="mr-3">
+                <div className="me-3">
                   {t('Name')}
                 </div>
                 <SortIcons
@@ -106,7 +106,7 @@ const UserTable = (props: UserTableProps) => {
             </th>
             <th>
               <div className="d-flex align-items-center">
-                <div className="mr-3">
+                <div className="me-3">
                   {t('Email')}
                 </div>
                 <SortIcons
@@ -118,7 +118,7 @@ const UserTable = (props: UserTableProps) => {
             </th>
             <th style={{ width: '100px' }}>
               <div className="d-flex align-items-center">
-                <div className="mr-3">
+                <div className="me-3">
                   {t('Created')}
                 </div>
                 <SortIcons
@@ -130,7 +130,7 @@ const UserTable = (props: UserTableProps) => {
             </th>
             <th style={{ width: '150px' }}>
               <div className="d-flex align-items-center">
-                <div className="mr-3">
+                <div className="me-3">
                   {t('last_login')}
                 </div>
                 <SortIcons
@@ -153,12 +153,12 @@ const UserTable = (props: UserTableProps) => {
                 <td>
                   {getUserStatusLabel(user.status)}
                   {(user.admin) && (
-                    <span className="badge bg-indigo rounded-pill ml-2">
+                    <span className="badge bg-indigo rounded-pill ms-2">
                       {t('admin:user_management.user_table.administrator')}
                     </span>
                   )}
                   {(user.readOnly) && (
-                    <span className="badge bg-light text-dark rounded-pill ml-2">
+                    <span className="badge bg-light text-dark rounded-pill ms-2">
                       {t('admin:user_management.user_table.read_only')}
                     </span>
                   )}

apps/app/src/components/BookmarkButtons.tsx

@@ -100,7 +100,7 @@ export const BookmarkButtons: FC<Props> = (props: Props) => {
                 <>
                   { bookmarkedUsers.length > 0
                     ? (
-                      <div className="px-2 text-right user-list-content text-truncate text-muted">
+                      <div className="px-2 text-end user-list-content text-truncate text-muted">
                         <UserPictureList users={bookmarkedUsers} />
                       </div>
                     )

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

@@ -222,7 +222,7 @@ export const BookmarkFolderItem: FC<BookmarkFolderItemProps> = (props: BookmarkF
         isDropable={isDropable}
       >
         <li
-          className="list-group-item list-group-item-action border-0 py-0 pr-3 d-flex align-items-center"
+          className="list-group-item list-group-item-action border-0 py-0 pe-3 d-flex align-items-center"
           onClick={loadChildFolder}
           style={{ paddingLeft }}
         >
@@ -250,7 +250,7 @@ export const BookmarkFolderItem: FC<BookmarkFolderItemProps> = (props: BookmarkF
             />
           ) : (
             <>
-              <div className="grw-foldertree-title-anchor pl-2">
+              <div className="grw-foldertree-title-anchor ps-2">
                 <p className="text-truncate m-auto ">{name}</p>
               </div>
             </>
@@ -266,7 +266,7 @@ export const BookmarkFolderItem: FC<BookmarkFolderItemProps> = (props: BookmarkF
                 }
               >
                 <div onClick={e => e.stopPropagation()}>
-                  <DropdownToggle color="transparent" className="border-0 rounded btn-page-item-control p-0 grw-visible-on-hover mr-1">
+                  <DropdownToggle color="transparent" className="border-0 rounded btn-page-item-control p-0 grw-visible-on-hover me-1">
                     <i className="icon-options fa fa-rotate-90 p-1"></i>
                   </DropdownToggle>
                 </div>

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

@@ -147,7 +147,7 @@ export const BookmarkItem = (props: Props): JSX.Element => {
       useDragMode={isOperable}
     >
       <li
-        className="grw-bookmark-item-list list-group-item list-group-item-action border-0 py-0 mr-auto d-flex align-items-center"
+        className="grw-bookmark-item-list list-group-item list-group-item-action border-0 py-0 me-auto d-flex align-items-center"
         key={bookmarkedPage._id}
         id={bookmarkItemId}
         style={{ paddingLeft }}
@@ -179,7 +179,7 @@ export const BookmarkItem = (props: Props): JSX.Element => {
               ? () => <BookmarkMoveToRootBtn pageId={bookmarkedPage._id} onClickMoveToRootHandler={onClickMoveToRootHandler} />
               : undefined}
           >
-            <DropdownToggle color="transparent" className="border-0 rounded btn-page-item-control p-0 grw-visible-on-hover mr-1">
+            <DropdownToggle color="transparent" className="border-0 rounded btn-page-item-control p-0 grw-visible-on-hover me-1">
               <i className="icon-options fa fa-rotate-90 p-1"></i>
             </DropdownToggle>
           </PageItemControl>

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

@@ -157,15 +157,15 @@ const ImageCropModal: FC<Props> = (props: Props) => {
         }
       </ModalBody>
       <ModalFooter>
-        <button type="button" className="btn btn-outline-danger rounded-pill mr-auto" disabled={!isCropImage} onClick={reset}>
+        <button type="button" className="btn btn-outline-danger rounded-pill me-auto" disabled={!isCropImage} onClick={reset}>
           {t('commons:Reset')}
         </button>
         { !showCropOption && (
-          <div className="mr-auto">
-            <div className="form-check form-switch ">
+          <div className="me-auto">
+            <div className="form-check form-switch">
               <input
                 id="cropImageOption"
-                className="form-check-input mr-auto"
+                className="form-check-input me-auto"
                 type="checkbox"
                 checked={isCropImage}
                 onChange={() => { setIsCropImage(!isCropImage) }}
@@ -177,7 +177,7 @@ const ImageCropModal: FC<Props> = (props: Props) => {
           </div>
         )
         }
-        <button type="button" className="btn btn-outline-secondary rounded-pill mr-2" onClick={onModalCloseHandler}>
+        <button type="button" className="btn btn-outline-secondary rounded-pill me-2" onClick={onModalCloseHandler}>
           {t('crop_image_modal.cancel')}
         </button>
         <button type="button" className="btn btn-outline-primary rounded-pill" onClick={processAndSaveImage}>

apps/app/src/components/CompleteUserRegistration.tsx

@@ -14,7 +14,7 @@ export const CompleteUserRegistration: FC = () => {
           </p>
           {/* If the transition source is "/login", use <a /> tag since the transition will not occur if next/link is used. */}
           <a href="/login">
-            <i className="icon-login mr-1" />{t('Sign in is here')}
+            <i className="icon-login me-1" />{t('Sign in is here')}
           </a>
         </div>
       </div>

apps/app/src/components/ContentLinkButtons.tsx

@@ -32,7 +32,7 @@ const RecentlyCreatedLinkButton = React.memo(() => {
         type="button"
         className="btn btn-outline-secondary btn-sm px-3"
       >
-        <i className={`${styles['grw-icon-container-recently-created']} grw-icon-container-recently-created mr-2`}><RecentlyCreatedIcon /></i>
+        <i className={`${styles['grw-icon-container-recently-created']} grw-icon-container-recently-created me-2`}><RecentlyCreatedIcon /></i>
         <span>Recently Created</span>
       </button>
     </ScrollLink>

apps/app/src/components/CustomNavigation/CustomNav.tsx

@@ -51,13 +51,13 @@ export const CustomNavDropdown = (props: CustomNavDropdownProps): JSX.Element =>
   return (
     <div className="grw-custom-nav-dropdown btn-group">
       <button
-        className="btn btn-outline-primary btn-lg dropdown-toggle text-right"
+        className="btn btn-outline-primary btn-lg dropdown-toggle text-end"
         type="button"
-        data-toggle="dropdown"
+        data-bs-toggle="dropdown"
         aria-haspopup="true"
         aria-expanded="false"
       >
-        <span className="float-left">
+        <span className="float-start">
           { Icon != null && <Icon /> } {i18n}
         </span>
       </button>

apps/app/src/components/DeleteBookmarkFolderModal.tsx

@@ -58,7 +58,7 @@ const DeleteBookmarkFolderModal: FC = () => {
           className="btn btn-danger"
           onClick={onClickDeleteButton}
         >
-          <i className="mr-1 icon-trash" aria-hidden="true"></i>
+          <i className="me-1 icon-trash" aria-hidden="true"></i>
           {t('bookmark_folder.delete_modal.modal_footer_button')}
         </button>
       </ModalFooter>

apps/app/src/components/DescendantsPageList.tsx

@@ -86,7 +86,7 @@ const DescendantsPageListSubstance = (props: SubstanceProps): JSX.Element => {
     return (
       <div className="wiki">
         <div className="text-muted text-center">
-          <i className="fa fa-2x fa-spinner fa-pulse mr-1"></i>
+          <i className="fa fa-2x fa-spinner fa-pulse me-1"></i>
         </div>
       </div>
     );

apps/app/src/components/EmptyTrashModal.tsx

@@ -80,7 +80,7 @@ const EmptyTrashModal: FC = () => {
           className="btn btn-danger"
           onClick={emptyTrashButtonHandler}
         >
-          <i className="mr-1 icon-fire" aria-hidden="true"></i>
+          <i className="me-1 icon-fire" aria-hidden="true"></i>
           {t('modal_empty.empty_the_trash_button')}
         </button>
       </ModalFooter>

apps/app/src/components/ForbiddenPage.tsx

@@ -14,7 +14,7 @@ const ForbiddenPage = React.memo((props: Props): JSX.Element => {
       <div className="row not-found-message-row mb-4">
         <div className="col-lg-12">
           <h2 className="text-muted">
-            <i className="icon-ban mr-2" aria-hidden="true" />
+            <i className="icon-ban me-2" aria-hidden="true" />
             Forbidden
           </h2>
         </div>

apps/app/src/components/IdenticalPathPage.tsx

@@ -32,7 +32,7 @@ const IdenticalPathAlert : FC<IdenticalPathAlertProps> = (props: IdenticalPathAl
 
   return (
     <div className="alert alert-warning py-3">
-      <h5 className="font-weight-bold mt-1">{t('duplicated_page_alert.same_page_name_exists', { pageName: _pageName })}</h5>
+      <h5 className="fw-bold mt-1">{t('duplicated_page_alert.same_page_name_exists', { pageName: _pageName })}</h5>
       <p>
         {t('duplicated_page_alert.same_page_name_exists_at_path',
           { path: _path, pageName: _pageName })}<br />

apps/app/src/components/InAppNotification/InAppNotificationElm.tsx

@@ -166,8 +166,8 @@ const InAppNotificationElm: FC<Props> = (props: Props) => {
         <span
           className={`${notification.status === InAppNotificationStatuses.STATUS_UNOPENED
             ? 'grw-unopend-notification'
-            : 'ml-2'
-          } rounded-circle mr-3`}
+            : 'ms-2'
+          } rounded-circle me-3`}
         >
         </span>
         {renderActionUserPictures()}

apps/app/src/components/InAppNotification/InAppNotificationList.tsx

@@ -20,7 +20,7 @@ const InAppNotificationList: FC<Props> = (props: Props) => {
     return (
       <div className="wiki">
         <div className="text-muted text-center">
-          <i className="fa fa-2x fa-spinner fa-pulse mr-1"></i>
+          <i className="fa fa-2x fa-spinner fa-pulse me-1"></i>
         </div>
       </div>
     );

apps/app/src/components/InAppNotification/InAppNotificationPage.tsx

@@ -66,7 +66,7 @@ export const InAppNotificationPage: FC = () => {
       return (
         <div className="wiki" data-testid="grw-in-app-notification-page-spinner">
           <div className="text-muted text-center">
-            <i className="fa fa-2x fa-spinner fa-pulse mr-1"></i>
+            <i className="fa fa-2x fa-spinner fa-pulse me-1"></i>
           </div>
         </div>
       );

apps/app/src/components/InAppNotification/PageNotification/PageModelNotification.tsx

@@ -44,7 +44,7 @@ const PageModelNotification: ForwardRefRenderFunction<IInAppNotificationOpenable
       <div className="text-truncate">
         <b>{actionUsers}</b> {actionMsg} <PagePathLabel path={notification.parsedSnapshot?.path ?? ''} />
       </div>
-      <i className={`${actionIcon} mr-2`} />
+      <i className={`${actionIcon} me-2`} />
       <FormattedDistanceDate
         id={notification._id}
         date={notification.createdAt}