text left to text start

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

@@ -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/src/components/Admin/App/AppSetting.jsx

@@ -35,7 +35,7 @@ const AppSetting = (props) => {
   return (
     <React.Fragment>
       <div className="form-group 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 form-group 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 form-group 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 form-group 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 form-group 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/AwsSetting.tsx

@@ -22,7 +22,7 @@ export const AwsSettingMolecule = (props: AwsSettingMoleculeProps): JSX.Element
     <>
 
       <div className="row form-group 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>
 
@@ -66,7 +66,7 @@ export const AwsSettingMolecule = (props: AwsSettingMoleculeProps): JSX.Element
       </div>
 
       <div className="row form-group">
-        <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 form-group">
-        <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 form-group">
-        <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 form-group">
-        <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 form-group">
-        <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/FileUploadSetting.tsx

@@ -38,7 +38,7 @@ export const FileUploadSettingMolecule = React.memo((props: FileUploadSettingMol
       </p>
 
       <div className="row form-group 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 form-group 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>
 

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

@@ -63,7 +63,7 @@ const MailSetting = (props: Props) => {
       </div>
 
       <div className="row form-group mb-5">
-        <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.transmission_method')}
         </label>
         <div className="col-md-6 py-2">

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 form-group">
-          <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 form-group">
-          <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 form-group">
-          <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 form-group">
-          <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 form-group">
-          <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 form-group">
-          <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/Customize/CustomizeFunctionSetting.tsx

@@ -45,7 +45,7 @@ const CustomizeFunctionSetting = (props: Props): JSX.Element => {
 
 
           <div className="form-group 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="form-group 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="form-group 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="form-group 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/PagingSizeUncontrolledDropdown.jsx

@@ -18,7 +18,7 @@ const PagingSizeUncontrolledDropdown = (props) => {
   return (
     <React.Fragment>
       <div className="form-group 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>{props.label}</label>
           </div>

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/ImportData/ImportDataPageContents.jsx

@@ -68,7 +68,7 @@ class ImportDataPageContents extends React.Component {
             </div>
 
             <div className="form-group 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="form-group 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="form-group 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="form-group 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,7 +39,7 @@ 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"
@@ -65,7 +65,7 @@ class SlackConfiguration extends React.Component {
             <h2 className="border-bottom mb-5">{t('notification_settings.slack_incoming_configuration')}</h2>
 
             <div className="row mb-3">
-              <label className="col-md-3 text-left text-md-right">Webhook URL</label>
+              <label className="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="custom-control custom-checkbox custom-checkbox-success">
                   <input
                     type="checkbox"
@@ -117,7 +117,7 @@ class SlackConfiguration extends React.Component {
               </div>
 
               <div className="row mb-5">
-                <label className="col-md-3 text-left text-md-right">OAuth access token</label>
+                <label className="col-md-3 text-start text-md-right">OAuth access token</label>
                 <div className="col-md-6">
                   <input
                     className="form-control"

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="col-12 col-md-3 text-left text-md-right py-2">{t('security_settings.callback_URL')}</label>
+          <label className="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"
@@ -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="custom-control custom-checkbox custom-checkbox-success">
                   <input
                     id="bindByUserNameGitHub"

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="col-12 col-md-3 text-left text-md-right py-2">{t('security_settings.callback_URL')}</label>
+          <label className="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"

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="form-group 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="form-group 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">
                 <strong>{t('security_settings.ldap.bind_mode')}</strong>
               </label>
               <div className="col-md-6">
@@ -137,7 +137,7 @@ class LdapSecuritySettingContents extends React.Component {
             </div>
 
             <div className="form-group 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">
                 <strong>Bind DN</strong>
               </label>
               <div className="col-md-6">
@@ -172,7 +172,7 @@ class LdapSecuritySettingContents extends React.Component {
             </div>
 
             <div className="form-group 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="form-group 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">
                 <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="form-group 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">
                 <strong htmlFor="attrMapUsername">{t('username')}</strong>
               </label>
               <div className="col-md-6">
@@ -283,7 +283,7 @@ class LdapSecuritySettingContents extends React.Component {
             </div>
 
             <div className="form-group 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">
                 <strong htmlFor="attrMapMail">{t('Email')}</strong>
               </label>
               <div className="col-md-6">
@@ -304,7 +304,7 @@ class LdapSecuritySettingContents extends React.Component {
             </div>
 
             <div className="form-group 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">
                 <strong htmlFor="attrMapName">{t('Name')}</strong>
               </label>
               <div className="col-md-6">
@@ -329,7 +329,7 @@ class LdapSecuritySettingContents extends React.Component {
             </h3>
 
             <div className="form-group 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">
                 <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="form-group 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">
                 <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="form-group 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">
                 <strong htmlFor="groupDnProperty">{t('security_settings.ldap.group_search_user_DN_property')}</strong>
               </label>
               <div className="col-md-6">

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

@@ -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">
@@ -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="custom-control custom-switch custom-checkbox-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="custom-control custom-switch custom-checkbox-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 form-group">
-          <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 form-group">
-              <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 form-group">
-              <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 form-group">
-              <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 form-group">
-              <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 form-group">
-              <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 form-group">
-              <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 form-group">
-              <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 form-group">
-              <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 form-group">
-              <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 form-group">
-              <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 form-group">
-              <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 form-group">
-              <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 form-group">
-              <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 form-group">
-              <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 form-group">
-              <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 form-group">
-              <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 form-group">
-              <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"

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

@@ -85,7 +85,7 @@ class SamlSecurityManagementContents extends React.Component {
         </div>
 
         <div className="row form-group 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 form-group mb-5">
-              <div className="offset-md-3 col-md-6 text-left">
+              <div className="offset-md-3 col-md-6 text-start">
                 <div className="custom-control custom-checkbox custom-checkbox-success">
                   <input
                     id="bindByUserName-SAML"
@@ -413,7 +413,7 @@ pWVdnzS1VCO8fKsJ7YYIr+JmHvseph3kFUOI5RqkCcMZlKUv83aUThsTHw==
             </div>
 
             <div className="row form-group mb-5">
-              <div className="offset-md-3 col-md-6 text-left">
+              <div className="offset-md-3 col-md-6 text-start">
                 <div className="custom-control custom-checkbox custom-checkbox-success">
                   <input
                     id="bindByEmail-SAML"
@@ -479,7 +479,7 @@ pWVdnzS1VCO8fKsJ7YYIr+JmHvseph3kFUOI5RqkCcMZlKUv83aUThsTHw==
                           <div className="card-header p-1">
                             <h2 className="mb-0">
                               <button
-                                className="btn btn-link btn-block text-left"
+                                className="btn btn-link btn-block text-start"
                                 type="button"
                                 onClick={() => this.setState({ isHelpOpened: !this.state.isHelpOpened })}
                                 aria-expanded="true"

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

@@ -477,7 +477,7 @@ class SecuritySetting extends React.Component {
 
         <h4>{t('security_settings.session')}</h4>
         <div className="form-group 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/CustomBotWithProxySettings.jsx

@@ -108,7 +108,7 @@ const CustomBotWithProxySettings = (props) => {
           />
 
           <div className="form-group 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/WithProxyAccordions.jsx

@@ -138,7 +138,7 @@ const GeneratingTokensAndRegisteringProxyServiceProcess = (props) => {
     <div className="py-4 px-5">
       <p className="font-weight-bold">1. {t('admin:slack_integration.accordion.generate_access_token')}</p>
       <div className="form-group row">
-        <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="input-group-prepend mx-1">
             <input className="form-control" type="text" value={props.tokenPtoG || ''} readOnly />
@@ -147,7 +147,7 @@ const GeneratingTokensAndRegisteringProxyServiceProcess = (props) => {
         </div>
       </div>
       <div className="form-group 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="input-group-prepend mx-1">
             <input className="form-control" type="text" value={props.tokenGtoP || ''} readOnly />

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

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

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

@@ -105,7 +105,7 @@ class UserInviteModal extends React.Component {
 
     return (
       <>
-        <div className="col text-left custom-control custom-checkbox custom-checkbox-info text-left" onChange={this.handleCheckBox}>
+        <div className="col text-start custom-control custom-checkbox custom-checkbox-info text-start" onChange={this.handleCheckBox}>
           <input
             type="checkbox"
             id="sendEmail"
@@ -151,7 +151,7 @@ class UserInviteModal extends React.Component {
 
     return (
       <>
-        <label className="me-3 text-left" style={{ flex: 1 }}>
+        <label className="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>

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

@@ -50,7 +50,7 @@ export const BasicInfoSettings = (): JSX.Element => {
     <>
 
       <div className="form-group row">
-        <label htmlFor="userForm[name]" className="text-left text-md-right col-md-3 col-form-label">{t('Name')}</label>
+        <label htmlFor="userForm[name]" className="text-start text-md-right col-md-3 col-form-label">{t('Name')}</label>
         <div className="col-md-6">
           <input
             className="form-control"
@@ -63,7 +63,7 @@ export const BasicInfoSettings = (): JSX.Element => {
       </div>
 
       <div className="form-group row">
-        <label htmlFor="userForm[email]" className="text-left text-md-right col-md-3 col-form-label">{t('Email')}</label>
+        <label htmlFor="userForm[email]" className="text-start text-md-right col-md-3 col-form-label">{t('Email')}</label>
         <div className="col-md-6">
           <input
             className="form-control"
@@ -84,7 +84,7 @@ export const BasicInfoSettings = (): JSX.Element => {
       </div>
 
       <div className="form-group row">
-        <label className="text-left text-md-right col-md-3 col-form-label">{t('Disclose E-mail')}</label>
+        <label className="text-start text-md-right col-md-3 col-form-label">{t('Disclose E-mail')}</label>
         <div className="col-md-6">
           <div className="custom-control custom-radio custom-control-inline">
             <input
@@ -112,7 +112,7 @@ export const BasicInfoSettings = (): JSX.Element => {
       </div>
 
       <div className="form-group row">
-        <label className="text-left text-md-right col-md-3 col-form-label">{t('Language')}</label>
+        <label className="text-start text-md-right col-md-3 col-form-label">{t('Language')}</label>
         <div className="col-md-6">
           {
             i18nConfig.locales.map((locale) => {
@@ -137,7 +137,7 @@ export const BasicInfoSettings = (): JSX.Element => {
         </div>
       </div>
       <div className="form-group row">
-        <label htmlFor="userForm[slackMemberId]" className="text-left text-md-right col-md-3 col-form-label">{t('Slack Member ID')}</label>
+        <label htmlFor="userForm[slackMemberId]" className="text-start text-md-right col-md-3 col-form-label">{t('Slack Member ID')}</label>
         <div className="col-md-6">
           <input
             className="form-control"

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

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

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

@@ -51,7 +51,7 @@ const OtherSettings = (): JSX.Element => {
       )}
 
       <div className="form-group row">
-        <div className="offset-md-3 col-md-6 text-left">
+        <div className="offset-md-3 col-md-6 text-start">
           {!isLoadingCurrentUser && (
             <div className="custom-control custom-switch custom-checkbox-primary">
               <span id="grw-questionnaire-settings-toggle-wrapper">

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

@@ -133,7 +133,7 @@ const ProfileImageSettings = (): 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('Current Image') }
             </label>
             <div className="col-sm-8 col-12">
@@ -142,7 +142,7 @@ const ProfileImageSettings = (): 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('Upload new image')}
             </label>
             <div className="col-sm-8 col-12">

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

@@ -176,7 +176,7 @@ export const LinkEditModal = (): JSX.Element => {
     return (
       <div className="d-flex justify-content-between mb-3 flex-column flex-sm-row">
         <div className="card card-disabled w-100 p-1 mb-0">
-          <p className="text-left text-muted mb-1 small">Markdown</p>
+          <p className="text-start text-muted mb-1 small">Markdown</p>
           <p className="text-center text-truncate text-muted">{linker.generateMarkdownText()}</p>
         </div>
         <div className="d-flex align-items-center justify-content-center">
@@ -186,7 +186,7 @@ export const LinkEditModal = (): JSX.Element => {
           </span>
         </div>
         <div className="card w-100 p-1 mb-0">
-          <p className="text-left text-muted mb-1 small">HTML</p>
+          <p className="text-start text-muted mb-1 small">HTML</p>
           <p className="text-center text-truncate">
             <a href={linker.link}>{linker.label}</a>
           </p>

apps/app/src/components/SearchForm.tsx

@@ -34,7 +34,7 @@ const SearchFormHelp: FC<SearchFormHelpProps> = React.memo((props: SearchFormHel
 
   return (
     <table className={`${styles['grw-search-table']} table grw-search-table search-help m-0`}>
-      <caption className="text-left text-primary p-2">
+      <caption className="text-start text-primary p-2">
         <h5 className="h6"><i className="icon-magnifier pe-2 mb-2" />{ t('search_help.title') }</h5>
       </caption>
       <tbody>

apps/app/src/components/TagList.tsx

@@ -56,7 +56,7 @@ const TagList: FC<TagListProps> = (props:(TagListProps & typeof defaultProps)) =
 
   return (
     <>
-      <ul className="list-group text-left mb-5">
+      <ul className="list-group text-start mb-5">
         {generateTagList(tagData)}
       </ul>
       {isPaginationShown

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

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

apps/app/src/pages/maintenance.page.tsx

@@ -42,7 +42,7 @@ const MaintenancePage: NextPage<CommonProps> = (props: Props) => {
               <h1 className="text-center">{ t('maintenance_mode.maintenance_mode') }</h1>
               <h3>{ t('maintenance_mode.growi_is_under_maintenance') }</h3>
               <hr />
-              <div className="text-left">
+              <div className="text-start">
                 {props.currentUser?.admin
               && (
                 <p>