text md left and right to start and end

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

@@ -35,7 +35,7 @@ const AppSetting = (props) => {
   return (
     <React.Fragment>
       <div className="row">
-        <label className="text-start text-md-right col-md-3 col-form-label">{t('admin:app_setting.site_name')}</label>
+        <label className="text-start text-md-end 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-start text-md-right col-md-3 col-form-label"
+          className="text-start text-md-end 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-start text-md-right col-md-3 col-form-label"
+          className="text-start text-md-end 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-start text-md-right col-md-3 col-form-label"
+          className="text-start text-md-end 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-start text-md-right col-md-3 col-form-label"
+          className="text-start text-md-end 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 my-3">
-        <label className="text-start text-md-right col-md-3 col-form-label">
+        <label className="text-start text-md-end 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">
-        <label className="text-start text-md-right col-md-3 col-form-label">
+        <label className="text-start text-md-end 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-start text-md-right col-md-3 col-form-label">
+        <label className="text-start text-md-end 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-start text-md-right col-md-3 col-form-label">
+        <label className="text-start text-md-end 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-start text-md-right col-md-3 col-form-label">
+        <label className="text-start text-md-end 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-start text-md-right col-md-3 col-form-label">
+        <label className="text-start text-md-end 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 mb-3">
-        <label className="text-start text-md-right col-md-3 col-form-label">
+        <label className="text-start text-md-end col-md-3 col-form-label">
           {t('admin:app_setting.file_upload_method')}
         </label>
 

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-start text-md-right col-md-3 col-form-label">
+        <label className="text-start text-md-end 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 mb-5">
-        <label className="form-label text-start text-md-right col-md-3 col-form-label">
+        <label className="form-label text-start text-md-end 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">
-          <label className="text-start text-md-right col-md-3 col-form-label">
+          <label className="text-start text-md-end 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-start text-md-right col-md-3 col-form-label">
+          <label className="text-start text-md-end 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-start text-md-right col-md-3 col-form-label">
+          <label className="text-start text-md-end 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-start text-md-right col-md-3 col-form-label">
+          <label className="text-start text-md-end 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-start text-md-right col-md-3 col-form-label">
+          <label className="text-start text-md-end 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-start text-md-right col-md-3 col-form-label">
+          <label className="text-start text-md-end col-md-3 col-form-label">
             {t('Password')}
           </label>
           <div className="col-md-6">

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-start text-md-right">{ t('full_text_search_management.reconnect') }</label>
+        <label className="col-md-3 col-form-label text-start text-md-end">{ 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-start text-md-right">{ t('full_text_search_management.normalize') }</label>
+        <label className="col-md-3 col-form-label text-start text-md-end">{ 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-start text-md-right">{ t('full_text_search_management.rebuild') }</label>
+        <label className="col-md-3 col-form-label text-start text-md-end">{ 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="row">
-              <label htmlFor="settingForm[importer:esa:team_name]" className="text-start text-md-right col-md-3 col-form-label">
+              <label htmlFor="settingForm[importer:esa:team_name]" className="text-start text-md-end 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-start text-md-right col-md-3 col-form-label">
+              <label htmlFor="settingForm[importer:esa:access_token]" className="text-start text-md-end 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-start text-md-right col-md-3 col-form-label">
+              <label htmlFor="settingForm[importer:qiita:team_name]" className="text-start text-md-end 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-start text-md-right col-md-3 col-form-label">
+              <label htmlFor="settingForm[importer:qiita:access_token]" className="text-start text-md-end 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

@@ -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-start text-md-right">Webhook URL</label>
+              <label className="form-label col-md-3 text-start text-md-end">Webhook URL</label>
               <div className="col-md-6">
                 <input
                   className="form-control"
@@ -117,7 +117,7 @@ class SlackConfiguration extends React.Component {
               </div>
 
               <div className="row mb-5">
-                <label className="form-label col-md-3 text-start text-md-right">OAuth access token</label>
+                <label className="form-label col-md-3 text-start text-md-end">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="form-label col-12 col-md-3 text-start text-md-right py-2">{t('security_settings.callback_URL')}</label>
+          <label className="form-label col-12 col-md-3 text-start text-md-end 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/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-start text-md-right py-2">{t('security_settings.callback_URL')}</label>
+          <label className="form-label col-12 col-md-3 text-start text-md-end 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="row">
-              <label htmlFor="serverUrl" className="text-start text-md-right col-md-3 col-form-label">
+              <label htmlFor="serverUrl" className="text-start text-md-end 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-start text-md-right col-md-3 col-form-label">
+              <label className="form-label text-start text-md-end col-md-3 col-form-label">
                 <strong>{t('security_settings.ldap.bind_mode')}</strong>
               </label>
               <div className="col-md-6">
@@ -137,7 +137,7 @@ class LdapSecuritySettingContents extends React.Component {
             </div>
 
             <div className="row">
-              <label className="form-label text-start text-md-right col-md-3 col-form-label">
+              <label className="form-label text-start text-md-end 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-start text-md-right col-md-3 col-form-label">
+              <div htmlFor="bindDNPassword" className="text-start text-md-end 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-start text-md-right col-md-3 col-form-label">
+              <label className="form-label text-start text-md-end 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-start text-md-right col-md-3 col-form-label">
+              <label className="form-label text-start text-md-end 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-start text-md-right col-md-3 col-form-label">
+              <label className="form-label text-start text-md-end 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-start text-md-right col-md-3 col-form-label">
+              <label className="form-label text-start text-md-end 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-start text-md-right col-md-3 col-form-label">
+              <label className="form-label text-start text-md-end 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-start text-md-right col-md-3 col-form-label">
+              <label className="form-label text-start text-md-end 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-start text-md-right col-md-3 col-form-label">
+              <label className="form-label text-start text-md-end 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-start text-md-right py-2">
+              <div className="col-12 col-md-3 text-start text-md-end 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-start text-md-right">
+              <div className="col-12 col-md-3 text-start text-md-end">
                 <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-start 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-end  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-start text-md-right  col-form-label">{t('security_settings.Local.email_authentication')}</label>
+              <label className="col-12 col-md-3 text-start text-md-end  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-start text-md-right col-md-3 col-form-label">{t('security_settings.callback_URL')}</label>
+          <label className="text-start text-md-end 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-start text-md-right col-md-3 col-form-label">{t('security_settings.providerName')}</label>
+              <label htmlFor="oidcProviderName" className="text-start text-md-end 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-start text-md-right col-md-3 col-form-label">{t('security_settings.issuerHost')}</label>
+              <label htmlFor="oidcIssuerHost" className="text-start text-md-end 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-start text-md-right col-md-3 col-form-label">{t('security_settings.clientID')}</label>
+              <label htmlFor="oidcClientId" className="text-start text-md-end 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-start text-md-right col-md-3 col-form-label">{t('security_settings.client_secret')}</label>
+              <label htmlFor="oidcClientSecret" className="text-start text-md-end 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-start text-md-right col-md-3 col-form-label">
+              <label htmlFor="oidcAuthorizationEndpoint" className="text-start text-md-end 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-start text-md-right col-md-3 col-form-label">{t('security_settings.token_endpoint')}</label>
+              <label htmlFor="oidcTokenEndpoint" className="text-start text-md-end 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-start text-md-right col-md-3 col-form-label">
+              <label htmlFor="oidcRevocationEndpoint" className="text-start text-md-end 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-start text-md-right col-md-3 col-form-label">
+              <label htmlFor="oidcIntrospectionEndpoint" className="text-start text-md-end 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-start text-md-right col-md-3 col-form-label">
+              <label htmlFor="oidcUserInfoEndpoint" className="text-start text-md-end 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-start text-md-right col-md-3 col-form-label">
+              <label htmlFor="oidcEndSessionEndpoint" className="text-start text-md-end 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-start text-md-right col-md-3 col-form-label">
+              <label htmlFor="oidcRegistrationEndpoint" className="text-start text-md-end 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-start text-md-right col-md-3 col-form-label">{t('security_settings.jwks_uri')}</label>
+              <label htmlFor="oidcJWKSUri" className="text-start text-md-end 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-start text-md-right col-md-3 col-form-label">Identifier</label>
+              <label htmlFor="oidcAttrMapId" className="text-start text-md-end 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-start text-md-right col-md-3 col-form-label">{t('username')}</label>
+              <label htmlFor="oidcAttrMapUserName" className="text-start text-md-end 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-start text-md-right col-md-3 col-form-label">{t('Name')}</label>
+              <label htmlFor="oidcAttrMapName" className="text-start text-md-end 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-start text-md-right col-md-3 col-form-label">{t('Email')}</label>
+              <label htmlFor="oidcAttrMapEmail" className="text-start text-md-end 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-start text-md-right col-md-3 col-form-label">{t('security_settings.callback_URL')}</label>
+              <label className="form-label text-start text-md-end 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 mb-5">
-          <label className="text-start text-md-right col-md-3 col-form-label">{t('security_settings.callback_URL')}</label>
+          <label className="text-start text-md-end 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/SecuritySetting.jsx

@@ -252,7 +252,7 @@ class SecuritySetting extends React.Component {
     return (
       <div key={`page-delete-permission-dropdown-${deletionType}`} className="row">
 
-        <div className="col-md-3 text-md-right">
+        <div className="col-md-3 text-md-end">
           {!isRecursiveDeletion(deletionType) && isTypeDeletion(deletionType) && (
             <strong>{t('security_settings.page_delete')}</strong>
           )}
@@ -393,7 +393,7 @@ class SecuritySetting extends React.Component {
 
         <h4>{t('security_settings.page_access_rights')}</h4>
         <div className="row mb-4">
-          <div className="col-md-3 text-md-right py-2">
+          <div className="col-md-3 text-md-end py-2">
             <strong>{t('security_settings.Guest Users Access')}</strong>
           </div>
           <div className="col-md-9">
@@ -477,7 +477,7 @@ class SecuritySetting extends React.Component {
 
         <h4>{t('security_settings.session')}</h4>
         <div className="row">
-          <label className="text-start text-md-right col-md-3 col-form-label">{t('security_settings.max_age')}</label>
+          <label className="text-start text-md-end col-md-3 col-form-label">{t('security_settings.max_age')}</label>
           <div className="col-md-6">
             <input
               className="form-control col-md-3"
@@ -499,7 +499,7 @@ class SecuritySetting extends React.Component {
         </div>
 
         <div className="row my-3">
-          <div className="text-center text-md-left offset-md-3 col-md-5">
+          <div className="text-center text-md-start offset-md-3 col-md-5">
             <button type="button" className="btn btn-primary" disabled={adminGeneralSecurityContainer.retrieveError != null} onClick={this.putSecuritySetting}>
               {t('Update')}
             </button>

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

@@ -108,7 +108,7 @@ const CustomBotWithProxySettings = (props) => {
           />
 
           <div className="row my-4">
-            <label className="text-start text-md-right col-md-3 col-form-label mt-3">Proxy URL</label>
+            <label className="text-start text-md-end col-md-3 col-form-label mt-3">Proxy URL</label>
             <div className="col-md-6 mt-3">
               <input
                 className="form-control"
@@ -118,7 +118,7 @@ const CustomBotWithProxySettings = (props) => {
                 onChange={(e) => { setNewProxyServerUri(e.target.value) }}
               />
             </div>
-            <div className="col-md-2 mt-3 text-center text-md-left">
+            <div className="col-md-2 mt-3 text-center text-md-start">
               <button type="button" className="btn btn-primary" onClick={updateProxyUri}>{ t('Update') }</button>
             </div>
           </div>

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

@@ -84,7 +84,7 @@ const PermissionSettingForEachPermissionTypeComponent = ({
   return (
     <div className="my-1 mb-2">
       <div className="row align-items-center mb-3">
-        <p className="col-md-5 text-md-right mb-2">
+        <p className="col-md-5 text-md-end mb-2">
           <strong className="text-capitalize">{keyName}</strong>
           {singleCommandDescription && (
             <small className="form-text text-muted small">

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

@@ -138,7 +138,7 @@ const GeneratingTokensAndRegisteringProxyServiceProcess = (props) => {
     <div className="py-4 px-5">
       <p className="fw-bold">1. {t('admin:slack_integration.accordion.generate_access_token')}</p>
       <div className="row">
-        <label className="text-start text-md-right col-md-3 col-form-label">Access Token Proxy to GROWI</label>
+        <label className="text-start text-md-end 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-start text-md-right col-md-3 col-form-label">Access Token GROWI to Proxy</label>
+        <label className="text-start text-md-end 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 />

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

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

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

@@ -50,7 +50,7 @@ export const BasicInfoSettings = (): JSX.Element => {
     <>
 
       <div className="row">
-        <label htmlFor="userForm[name]" className="text-start text-md-right col-md-3 col-form-label">{t('Name')}</label>
+        <label htmlFor="userForm[name]" className="text-start text-md-end 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="row">
-        <label htmlFor="userForm[email]" className="text-start text-md-right col-md-3 col-form-label">{t('Email')}</label>
+        <label htmlFor="userForm[email]" className="text-start text-md-end 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="row">
-        <label className="text-start text-md-right col-md-3 col-form-label">{t('Disclose E-mail')}</label>
+        <label className="text-start text-md-end col-md-3 col-form-label">{t('Disclose E-mail')}</label>
         <div className="col-md-6">
           <div className="form-check form-check-inline">
             <input
@@ -112,7 +112,7 @@ export const BasicInfoSettings = (): JSX.Element => {
       </div>
 
       <div className="row">
-        <label className="text-start text-md-right col-md-3 col-form-label">{t('Language')}</label>
+        <label className="text-start text-md-end 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="row">
-        <label htmlFor="userForm[slackMemberId]" className="text-start text-md-right col-md-3 col-form-label">{t('Slack Member ID')}</label>
+        <label htmlFor="userForm[slackMemberId]" className="text-start text-md-end 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/PasswordSettings.jsx

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

apps/app/src/components/PageComment/CommentEditor.tsx

@@ -335,7 +335,7 @@ export const CommentEditor = (props: CommentEditorProps): JSX.Element => {
 
             {isSlackConfigured && isSlackEnabled != null
               && (
-                <div className="align-self-center mr-md-2">
+                <div className="align-self-center me-md-2">
                   <SlackNotification
                     isSlackEnabled={isSlackEnabled}
                     slackChannels={slackChannels}

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="row">
-        <label className="text-start text-md-right col-md-3 col-form-label">{t('plugins.form.label_url')}</label>
+        <label className="text-start text-md-end 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="row">
-        <label className="text-start text-md-right col-md-3 col-form-label">{t('plugins.form.label_branch')}</label>
+        <label className="text-start text-md-end 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/features/questionnaire/client/components/Question.tsx

@@ -22,7 +22,7 @@ const Question = ({ question, inputNamePrefix }: QuestionProps): JSX.Element =>
       </div>
       <div className="col-6 d-flex align-items-center ps-0">
         <div className="btn-group flex-fill grw-questionnaire-btn-group">
-          <label className="form-label btn btn-outline-primary active mr-4 rounded">
+          <label className="form-label btn btn-outline-primary active me-4 rounded">
             <input type="radio" name={`${inputNamePrefix + question._id}`} id={`${question._id}-noAnswer`} value="0" defaultChecked /> -
           </label>
           <label className="form-label btn btn-outline-primary rounded-start">