5 files changed, 10 insertions, 10 deletions
diff --git a/FrontEnd/src/app/views/common/AppBar.tsx b/FrontEnd/src/app/views/common/AppBar.tsx
index 4b165427..939f0175 100644
--- a/FrontEnd/src/app/views/common/AppBar.tsx
+++ b/FrontEnd/src/app/views/common/AppBar.tsx
@@ -38,7 +38,7 @@ const AppBar: React.FC = (_) => {
       <Navbar.Toggle onClick={toggleExpand} />
 
       <Navbar.Collapse>
-        <Nav className="mr-auto">
+        <Nav className="me-auto">
           <NavLink
             to="/settings"
             className="nav-link"
@@ -67,12 +67,12 @@ const AppBar: React.FC = (_) => {
             </NavLink>
           )}
         </Nav>
-        <Nav className="ml-auto md-mr-2">
+        <Nav className="ms-auto md-me-2">
           {user != null ? (
             <LinkContainer to="/">
               <UserAvatar
                 username={user.username}
-                className="avatar small rounded-circle bg-white cursor-pointer ml-auto"
+                className="avatar small rounded-circle bg-white cursor-pointer ms-auto"
               />
             </LinkContainer>
           ) : (
diff --git a/FrontEnd/src/app/views/common/FullPage.tsx b/FrontEnd/src/app/views/common/FullPage.tsx
index 4048895a..1b59045a 100644
--- a/FrontEnd/src/app/views/common/FullPage.tsx
+++ b/FrontEnd/src/app/views/common/FullPage.tsx
@@ -20,7 +20,7 @@ const FullPage: React.FC<FullPageProps> = ({
     >
       <div className="cru-full-page-top-bar">
         <i
-          className="icon-button bi-arrow-left text-white ml-3"
+          className="icon-button bi-arrow-left text-white ms-3"
           onClick={onBack}
         />
       </div>
diff --git a/FrontEnd/src/app/views/common/LoadingButton.tsx b/FrontEnd/src/app/views/common/LoadingButton.tsx
index 154334a7..cd9f1adc 100644
--- a/FrontEnd/src/app/views/common/LoadingButton.tsx
+++ b/FrontEnd/src/app/views/common/LoadingButton.tsx
@@ -16,7 +16,7 @@ const LoadingButton: React.FC<{ loading?: boolean } & ButtonProps> = ({
       {otherProps.children}
       {loading ? (
         <Spinner
-          className="ml-1"
+          className="ms-1"
           variant={variant}
           animation="grow"
           size="sm"
diff --git a/FrontEnd/src/app/views/common/SearchInput.tsx b/FrontEnd/src/app/views/common/SearchInput.tsx
index 76e7884c..c2234cb9 100644
--- a/FrontEnd/src/app/views/common/SearchInput.tsx
+++ b/FrontEnd/src/app/views/common/SearchInput.tsx
@@ -39,27 +39,27 @@ const SearchInput: React.FC<SearchInputProps> = (props) => {
 
   return (
     <Form
-      inline
       className={classnames(
+        "d-flex",
         alwaysOneline ? "flex-nowrap" : "flex-sm-nowrap",
         props.className
       )}
     >
       <Form.Control
-        className="mr-sm-2 flex-grow-1"
+        className="me-sm-2 flex-grow-1"
         value={props.value}
         onChange={onInputChange}
         onKeyPress={onInputKeyPress}
         placeholder={props.placeholder}
       />
       {props.additionalButton ? (
-        <div className="mt-2 mt-sm-0 flex-shrink-0 order-sm-last ml-sm-2">
+        <div className="mt-2 mt-sm-0 flex-shrink-0 order-sm-last ms-sm-2">
           {props.additionalButton}
         </div>
       ) : null}
       <div
         className={classnames(
-          alwaysOneline ? "mt-0 ml-2" : "mt-2 mt-sm-0 ml-auto ml-sm-0",
+          alwaysOneline ? "mt-0 ms-2" : "mt-2 mt-sm-0 ms-auto ms-sm-0",
           "flex-shrink-0"
         )}
       >
diff --git a/FrontEnd/src/app/views/common/TabPages.tsx b/FrontEnd/src/app/views/common/TabPages.tsx
index 424e769f..2b1d91cb 100644
--- a/FrontEnd/src/app/views/common/TabPages.tsx
+++ b/FrontEnd/src/app/views/common/TabPages.tsx
@@ -61,7 +61,7 @@ const TabPages: React.FC<TabPagesProps> = ({
           </Nav.Item>
         ))}
         {actions != null && (
-          <div className="ml-auto cru-tab-pages-action-area">{actions}</div>
+          <div className="ms-auto cru-tab-pages-action-area">{actions}</div>
         )}
       </Nav>
       <div className={pageContainerClassName} style={pageContainerStyle}>