diff --git a/src/AlertManager.tsx b/src/AlertManager.tsx
index 50a58ff4..233a0765 100644
--- a/src/AlertManager.tsx
+++ b/src/AlertManager.tsx
@@ -221,7 +221,7 @@ const AlertBanner = ({ alert }: AlertBannerProps) => {
         className="d-flex justify-content-between flex-wrap"
       >
         {alert.message}
-        <div className="col text-right">{alertRelativeTime}</div>
+        <div className="col text-end">{alertRelativeTime}</div>
       </Alert>
     </Col>
   );
diff --git a/src/App.tsx b/src/App.tsx
index e18e7dc8..1724b3ef 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -95,7 +95,7 @@ const Dashboard = () => {
   return (
     <ReduxProvider store={reduxStore}>
       <Container fluid className="px-0">
-        <Row className="no-gutters">
+        <Row className="g-0">
           <DashboardSidebar />
           <Col className="main-content vh-100 overflow-auto">
             <PageRouter />
@@ -108,7 +108,7 @@ const Dashboard = () => {
 
 const StandaloneEditor = () => (
   <Container fluid className="px-0">
-    <Row className="no-gutters">
+    <Row className="g-0">
       <Col id="main-navbar" className="col-auto nav-col">
         <Sidebar>
           <Sidebar.Brand />
diff --git a/src/BlockSourcePage.tsx b/src/BlockSourcePage.tsx
index 827ea430..89414179 100644
--- a/src/BlockSourcePage.tsx
+++ b/src/BlockSourcePage.tsx
@@ -114,7 +114,7 @@ export default (): React.ReactElement => {
             disabled={isDeletingBlock}
           >
             {isDeletingBlock && (
-              <Spinner as="span" size="sm" animation="border" role="status" className="mr-2" />
+              <Spinner as="span" size="sm" animation="border" role="status" className="me-2" />
             )}
             Delete block
           </Button>
diff --git a/src/DeviceInterfaceValues.tsx b/src/DeviceInterfaceValues.tsx
index 26174336..042197c1 100644
--- a/src/DeviceInterfaceValues.tsx
+++ b/src/DeviceInterfaceValues.tsx
@@ -202,7 +202,7 @@ export default (): React.ReactElement => {
       </h2>
       <Card className="mt-4">
         <Card.Header>
-          <span className="text-monospace">{deviceId}</span> /{interfaceName}
+          <span className="font-monospace">{deviceId}</span> /{interfaceName}
         </Card.Header>
         <Card.Body>
           <WaitForData
diff --git a/src/DeviceStatusPage/AddToGroupModal.tsx b/src/DeviceStatusPage/AddToGroupModal.tsx
index ffe0be97..672d2235 100644
--- a/src/DeviceStatusPage/AddToGroupModal.tsx
+++ b/src/DeviceStatusPage/AddToGroupModal.tsx
@@ -49,7 +49,7 @@ const AddToGroupModal = ({
               className={groupName === selectedGroup ? 'p-2 bg-success text-white' : 'p-2'}
             >
               <span onClick={() => setSelectedGroup(groupName)}>
-                <Icon icon="add" className="mr-2" />
+                <Icon icon="add" className="me-2" />
                 {groupName}
               </span>
             </li>
@@ -73,7 +73,7 @@ const AddToGroupModal = ({
           style={{ minWidth: '5em' }}
         >
           {isAddingToGroup && (
-            <Spinner className="mr-2" size="sm" animation="border" role="status" />
+            <Spinner className="me-2" size="sm" animation="border" role="status" />
           )}
           Add to group
         </Button>
diff --git a/src/DeviceStatusPage/AliasesCard.tsx b/src/DeviceStatusPage/AliasesCard.tsx
index adfe415b..c2655406 100644
--- a/src/DeviceStatusPage/AliasesCard.tsx
+++ b/src/DeviceStatusPage/AliasesCard.tsx
@@ -53,7 +53,7 @@ const AliasesTable = ({
           <td>{key}</td>
           <td>{value}</td>
           <td className="text-center">
-            <Icon icon="edit" className="color-grey mr-2" onClick={() => onEditAliasClick(key)} />
+            <Icon icon="edit" className="color-grey me-2" onClick={() => onEditAliasClick(key)} />
             <Icon icon="erase" onClick={() => onRemoveAliasClick({ key, value })} />
           </td>
         </tr>
diff --git a/src/DeviceStatusPage/AttributesCard.tsx b/src/DeviceStatusPage/AttributesCard.tsx
index c92248e0..2fc36ac6 100644
--- a/src/DeviceStatusPage/AttributesCard.tsx
+++ b/src/DeviceStatusPage/AttributesCard.tsx
@@ -55,7 +55,7 @@ const AttributesTable = ({
           <td className="text-center">
             <Icon
               icon="edit"
-              className="color-grey mr-2"
+              className="color-grey me-2"
               onClick={() => onEditAttributeClick(key)}
             />
             <Icon icon="erase" onClick={() => onRemoveAttributeClick({ key, value })} />
diff --git a/src/DeviceStatusPage/DeviceInfoCard.tsx b/src/DeviceStatusPage/DeviceInfoCard.tsx
index bb8167e7..6e6cebdc 100644
--- a/src/DeviceStatusPage/DeviceInfoCard.tsx
+++ b/src/DeviceStatusPage/DeviceInfoCard.tsx
@@ -56,7 +56,7 @@ const DeviceStatus = ({ status }: DeviceStatusProps): React.ReactElement => {
 
   return (
     <>
-      <Icon icon={icon} className="mr-1" />
+      <Icon icon={icon} className="me-1" />
       <span>{statusString}</span>
     </>
   );
@@ -81,7 +81,7 @@ const DeviceInfoCard = ({
     <Card.Header as="h5">Device Info</Card.Header>
     <Card.Body className="d-flex flex-column">
       <h6>Device ID</h6>
-      <p className="text-monospace">{device.id}</p>
+      <p className="font-monospace">{device.id}</p>
       <h6>Device name</h6>
       <p>{device.hasNameAlias ? device.name : 'No name alias set'}</p>
       <h6>Status</h6>
@@ -94,7 +94,7 @@ const DeviceInfoCard = ({
         {device.hasCredentialsInhibited ? (
           <Button
             variant="success text-white"
-            className="mr-1"
+            className="me-1"
             onClick={onEnableCredentialsClick}
             disabled={device.deletionInProgress}
           >
@@ -103,7 +103,7 @@ const DeviceInfoCard = ({
         ) : (
           <Button
             variant="danger"
-            className="mr-1"
+            className="me-1"
             onClick={onInhibitCredentialsClick}
             disabled={device.deletionInProgress}
           >
@@ -119,7 +119,7 @@ const DeviceInfoCard = ({
         </Button>
         <Button
           variant="danger"
-          className="ml-1"
+          className="ms-1"
           onClick={onDeleteDeviceClick}
           disabled={device.deletionInProgress}
         >
diff --git a/src/DeviceStatusPage/DeviceLiveEventsCard.tsx b/src/DeviceStatusPage/DeviceLiveEventsCard.tsx
index d38e146f..42dd88f3 100644
--- a/src/DeviceStatusPage/DeviceLiveEventsCard.tsx
+++ b/src/DeviceStatusPage/DeviceLiveEventsCard.tsx
@@ -158,7 +158,7 @@ interface TimestampProps {
 const Timestamp = ({ children }: TimestampProps): React.ReactElement => {
   const formattedTimestamp = children.toISOString().substring(11, 23);
 
-  return <small className="text-secondary text-monospace mr-2">{`[${formattedTimestamp}]`}</small>;
+  return <small className="text-secondary font-monospace me-2">{`[${formattedTimestamp}]`}</small>;
 };
 
 const deviceErrorNameToString = (errorName: string): string => {
@@ -217,7 +217,7 @@ const astarteDeviceEventBody = (event: AstarteDeviceEvent) => {
   if (event instanceof AstarteDeviceConnectedEvent) {
     return (
       <>
-        <Badge variant="success" className="mr-2">
+        <Badge variant="success" className="me-2">
           device connected
         </Badge>
         <span>IP : {event.ip}</span>
@@ -227,7 +227,7 @@ const astarteDeviceEventBody = (event: AstarteDeviceEvent) => {
   if (event instanceof AstarteDeviceDisconnectedEvent) {
     return (
       <>
-        <Badge variant="warning" className="mr-2">
+        <Badge variant="warning" className="me-2">
           device disconnected
         </Badge>
         <span>Device disconnected</span>
@@ -237,12 +237,12 @@ const astarteDeviceEventBody = (event: AstarteDeviceEvent) => {
   if (event instanceof AstarteDeviceIncomingDataEvent) {
     return (
       <>
-        <Badge variant="info" className="mr-2">
+        <Badge variant="info" className="me-2">
           incoming data
         </Badge>
-        <span className="mr-2">{event.interfaceName}</span>
-        <span className="mr-2">{event.path}</span>
-        <span className="mr-2 text-monospace">
+        <span className="me-2">{event.interfaceName}</span>
+        <span className="me-2">{event.path}</span>
+        <span className="me-2 font-monospace">
           {_.isObject(event.value) ? JSON.stringify(event.value) : event.value}
         </span>
       </>
@@ -251,10 +251,10 @@ const astarteDeviceEventBody = (event: AstarteDeviceEvent) => {
   if (event instanceof AstarteDeviceUnsetPropertyEvent) {
     return (
       <>
-        <Badge variant="info" className="mr-2">
+        <Badge variant="info" className="me-2">
           unset property
         </Badge>
-        <span className="mr-2">{event.interfaceName}</span>
+        <span className="me-2">{event.interfaceName}</span>
         <span>{event.path}</span>
       </>
     );
@@ -262,7 +262,7 @@ const astarteDeviceEventBody = (event: AstarteDeviceEvent) => {
   if (event instanceof AstarteDeviceErrorEvent) {
     return (
       <>
-        <Badge variant="danger" className="mr-2">
+        <Badge variant="danger" className="me-2">
           device error
         </Badge>
         <span>{deviceErrorNameToString(event.errorName)}</span>
@@ -272,7 +272,7 @@ const astarteDeviceEventBody = (event: AstarteDeviceEvent) => {
             <div style={{ paddingLeft: '6.3em' }}>
               {Object.entries(event.metadata).map(([key, value]) => (
                 <span key={key}>
-                  {key}:<span className="text-secondary pl-2 pr-4">{value}</span>
+                  {key}:<span className="text-secondary ps-2 pe-4">{value}</span>
                 </span>
               ))}
             </div>
@@ -305,7 +305,7 @@ const SystemEventDelegate = ({ event }: SystemEventDelegateProps) => {
       return (
         <li className="px-2">
           <Timestamp>{new Date(event.timestamp)}</Timestamp>
-          <Badge variant="secondary" className="mr-2">
+          <Badge variant="secondary" className="me-2">
             channel
           </Badge>
           <span className="text-danger">{event.message}</span>
@@ -317,7 +317,7 @@ const SystemEventDelegate = ({ event }: SystemEventDelegateProps) => {
       return (
         <li className="px-2">
           <Timestamp>{new Date(event.timestamp)}</Timestamp>
-          <Badge variant="secondary" className="mr-2">
+          <Badge variant="secondary" className="me-2">
             channel
           </Badge>
           <span className="text-secondary">{event.message}</span>
diff --git a/src/DeviceStatusPage/ExchangedBytesCard.tsx b/src/DeviceStatusPage/ExchangedBytesCard.tsx
index b9fc697d..22117eac 100644
--- a/src/DeviceStatusPage/ExchangedBytesCard.tsx
+++ b/src/DeviceStatusPage/ExchangedBytesCard.tsx
@@ -49,10 +49,10 @@ interface StatsTableRowProps {
 const StatsTableRow = ({ stats }: StatsTableRowProps): React.ReactElement => (
   <tr>
     <td>{stats.name}</td>
-    <td className="text-right">{formatBytes(stats.bytes)}</td>
-    <td className="d-xl-table-cell d-none text-right">{`${stats.bytesPercent.toFixed(2)}%`}</td>
-    <td className="text-right">{stats.messages}</td>
-    <td className="d-xl-table-cell d-none text-right">{`${stats.messagesPercent.toFixed(2)}%`}</td>
+    <td className="text-end">{formatBytes(stats.bytes)}</td>
+    <td className="d-xl-table-cell d-none text-end">{`${stats.bytesPercent.toFixed(2)}%`}</td>
+    <td className="text-end">{stats.messages}</td>
+    <td className="d-xl-table-cell d-none text-end">{`${stats.messagesPercent.toFixed(2)}%`}</td>
   </tr>
 );
 
@@ -113,10 +113,10 @@ const ExchangedBytesCard = ({ astarte, device }: ExchangedBytesCardProps): React
               <thead>
                 <tr>
                   <th>Interface</th>
-                  <th className="text-right">Bytes</th>
-                  <th className="d-xl-table-cell d-none text-right">Bytes (%)</th>
-                  <th className="text-right">Messages</th>
-                  <th className="d-xl-table-cell d-none text-right">Messages (%)</th>
+                  <th className="text-end">Bytes</th>
+                  <th className="d-xl-table-cell d-none text-end">Bytes (%)</th>
+                  <th className="text-end">Messages</th>
+                  <th className="d-xl-table-cell d-none text-end">Messages (%)</th>
                 </tr>
               </thead>
               <tbody>
diff --git a/src/DeviceStatusPage/index.tsx b/src/DeviceStatusPage/index.tsx
index e350cbcd..cb7c9efb 100644
--- a/src/DeviceStatusPage/index.tsx
+++ b/src/DeviceStatusPage/index.tsx
@@ -303,7 +303,7 @@ const DeviceStatusPage = (): React.ReactElement => {
     <Container fluid className="p-3">
       <Row>
         <Col>
-          <h2 className="pl-2">
+          <h2 className="ps-2">
             <BackButton href="/devices" />
             Device
           </h2>
diff --git a/src/DevicesPage.tsx b/src/DevicesPage.tsx
index 135dd8bf..b948c9f2 100644
--- a/src/DevicesPage.tsx
+++ b/src/DevicesPage.tsx
@@ -129,10 +129,10 @@ const DeviceRow = ({ device, filters }: DeviceRowProps): React.ReactElement => {
   return (
     <tr>
       <td>
-        <Icon className="mr-2" icon={icon} tooltip={iconTooltip} tooltipPlacement="right" />
+        <Icon className="me-2" icon={icon} tooltip={iconTooltip} tooltipPlacement="right" />
         <span>{statusLabel}</span>
       </td>
-      <td className={device.hasNameAlias ? '' : 'text-monospace'}>
+      <td className={device.hasNameAlias ? '' : 'font-monospace'}>
         <Link to={`/devices/${device.id}/edit`}>{device.name}</Link>
         <MatchedAttributes filters={filters} attributes={device.attributes} />
       </td>
@@ -503,7 +503,7 @@ export default (): React.ReactElement => {
                   </Col>
                   <Col xs="auto" className="p-1">
                     <div className="p-2 mb-2" onClick={() => setShowSidebar(!showSidebar)}>
-                      <Icon icon="filter" className="mr-1" />
+                      <Icon icon="filter" className="me-1" />
                       {showSidebar && <b>Filters</b>}
                     </div>
                     {showSidebar && (
diff --git a/src/FlowConfigurationPage.tsx b/src/FlowConfigurationPage.tsx
index 3860d2a0..0449d2e4 100644
--- a/src/FlowConfigurationPage.tsx
+++ b/src/FlowConfigurationPage.tsx
@@ -99,7 +99,7 @@ export default (): React.ReactElement => {
         />
       </Form.Group>
       <Button variant="primary" disabled={!isValidForm || isCreatingFlow} onClick={createFlow}>
-        {isCreatingFlow && <Spinner className="mr-2" size="sm" animation="border" role="status" />}
+        {isCreatingFlow && <Spinner className="me-2" size="sm" animation="border" role="status" />}
         Instantiate Flow
       </Button>
     </Form>
diff --git a/src/GroupDevicesPage.tsx b/src/GroupDevicesPage.tsx
index f6a128a7..bf230451 100644
--- a/src/GroupDevicesPage.tsx
+++ b/src/GroupDevicesPage.tsx
@@ -65,10 +65,10 @@ const deviceTableRow = (
   return (
     <tr key={index}>
       <td>
-        <Icon className="mr-2" icon={icon} tooltip={iconTooltip} tooltipPlacement="right" />
+        <Icon className="me-2" icon={icon} tooltip={iconTooltip} tooltipPlacement="right" />
         <span>{statusLabel}</span>
       </td>
-      <td className={device.hasNameAlias ? '' : 'text-monospace'}>
+      <td className={device.hasNameAlias ? '' : 'font-monospace'}>
         <Link to={`/devices/${device.id}/edit`}>{device.name}</Link>
       </td>
       <td>{lastEvent}</td>
diff --git a/src/HomePage.tsx b/src/HomePage.tsx
index 8b0ffd02..f26f59ca 100644
--- a/src/HomePage.tsx
+++ b/src/HomePage.tsx
@@ -48,14 +48,14 @@ const ServiceStatusRow = ({ service, status }: ServiceStatusRowProps): React.Rea
   } else if (status === 'ok') {
     messageCell = (
       <td className="color-green">
-        <Icon icon="statusOK" className="mr-1" />
+        <Icon icon="statusOK" className="me-1" />
         This service is operating normally
       </td>
     );
   } else {
     messageCell = (
       <td className="color-red">
-        <Icon icon="statusKO" className="mr-1" />
+        <Icon icon="statusKO" className="me-1" />
         This service appears offline
       </td>
     );
@@ -163,7 +163,7 @@ const InterfaceList = ({
               onInterfaceClick(e, interfaceName);
             }}
           >
-            <Icon icon="interfaces" className="mr-1" />
+            <Icon icon="interfaces" className="me-1" />
             {interfaceName}
           </a>
         </li>
@@ -245,7 +245,7 @@ const TriggerList = ({ triggers, maxShownTriggers }: TriggerListProps): React.Re
       {shownTriggers.map((triggerName) => (
         <li key={triggerName} className="my-1">
           <Link to={`/triggers/${triggerName}/edit`}>
-            <Icon icon="triggers" className="mr-1" />
+            <Icon icon="triggers" className="me-1" />
             {triggerName}
           </Link>
         </li>
diff --git a/src/InterfacePage.tsx b/src/InterfacePage.tsx
index 5f9d7bf0..b1933f64 100644
--- a/src/InterfacePage.tsx
+++ b/src/InterfacePage.tsx
@@ -206,12 +206,12 @@ export default (): React.ReactElement => {
                 denyMajorChanges
               />
               <Row className="justify-content-end m-3">
-                <Button variant="secondary" className="mr-2" onClick={handleToggleSourceVisibility}>
+                <Button variant="secondary" className="me-2" onClick={handleToggleSourceVisibility}>
                   {isSourceVisible ? 'Hide' : 'Show'} source
                 </Button>
                 {iface.major === 0 && (
                   <Button
-                    className="mr-2"
+                    className="me-2"
                     variant="danger"
                     onClick={isDeletingInterface ? undefined : showConfirmDeleteModal}
                     disabled={isDeletingInterface}
@@ -222,7 +222,7 @@ export default (): React.ReactElement => {
                         size="sm"
                         animation="border"
                         role="status"
-                        className="mr-2"
+                        className="me-2"
                       />
                     )}
                     Delete interface
@@ -239,7 +239,7 @@ export default (): React.ReactElement => {
                       size="sm"
                       animation="border"
                       role="status"
-                      className="mr-2"
+                      className="me-2"
                     />
                   )}
                   Apply changes
diff --git a/src/InterfacesPage.tsx b/src/InterfacesPage.tsx
index 2529c234..2b194ed6 100644
--- a/src/InterfacesPage.tsx
+++ b/src/InterfacesPage.tsx
@@ -35,14 +35,14 @@ const InterfaceRow = ({ name, majors }: InterfaceRowProps): React.ReactElement =
       <Row>
         <Col>
           <Link to={`/interfaces/${name}/${Math.max(...majors)}/edit`}>
-            <Icon icon="interfaces" className="mr-2" />
+            <Icon icon="interfaces" className="me-2" />
             {name}
           </Link>
         </Col>
         <Col md="auto">
           {majors.map((major) => (
             <Link key={major} to={`/interfaces/${name}/${major}/edit`}>
-              <Badge variant={major > 0 ? 'primary' : 'secondary'} className="mr-1 px-2 py-1">
+              <Badge variant={major > 0 ? 'primary' : 'secondary'} className="me-1 px-2 py-1">
                 v{major}
               </Badge>
             </Link>
@@ -110,7 +110,7 @@ export default (): React.ReactElement => {
           <ListGroup>
             <ListGroup.Item>
               <Button variant="link" className="p-0" onClick={() => navigate('/interfaces/new')}>
-                <Icon icon="add" className="mr-2" />
+                <Icon icon="add" className="me-2" />
                 Install a new interface...
               </Button>
             </ListGroup.Item>
diff --git a/src/LoginPage.tsx b/src/LoginPage.tsx
index 493e4ba2..fefedfc6 100644
--- a/src/LoginPage.tsx
+++ b/src/LoginPage.tsx
@@ -232,7 +232,7 @@ const OAuthForm = ({
 };
 
 const LeftColumn = (): React.ReactElement => (
-  <Col lg={6} className="p-0 no-gutters d-none d-lg-block">
+  <Col lg={6} className="p-0 g-0 d-none d-lg-block">
     <div className="d-flex flex-column align-items-center justify-content-center position-relative login-image-container">
       <img
         src="/static/img/background-login-top.svg"
diff --git a/src/NewBlockPage.tsx b/src/NewBlockPage.tsx
index 78d2fc4b..76731c6b 100644
--- a/src/NewBlockPage.tsx
+++ b/src/NewBlockPage.tsx
@@ -150,7 +150,7 @@ export default (): React.ReactElement => {
           disabled={isRegisteringBlock || !isValidBlock}
         >
           {isRegisteringBlock && (
-            <Spinner as="span" size="sm" animation="border" role="status" className="mr-2" />
+            <Spinner as="span" size="sm" animation="border" role="status" className="me-2" />
           )}
           Create new block
         </Button>
diff --git a/src/NewGroupPage.tsx b/src/NewGroupPage.tsx
index 5ce6d198..b405c0f5 100644
--- a/src/NewGroupPage.tsx
+++ b/src/NewGroupPage.tsx
@@ -159,7 +159,7 @@ export default (): React.ReactElement => {
                     } selected.`
                   : 'Please select at least one device.'}
               </span>
-              <div className="float-right">
+              <div className="float-end">
                 <FilterInputBox filter={deviceFilter} onFilterChange={setDeviceFilter} />
               </div>
             </div>
@@ -169,10 +169,10 @@ export default (): React.ReactElement => {
               selectedDevices={selectedDevices}
               onToggleDevice={handleDeviceToggle}
             />
-            <Form.Row className="flex-row-reverse pr-2">
+            <Form.Row className="flex-row-reverse pe-2">
               <Button variant="primary" type="submit" disabled={!isValidForm || isCreatingGroup}>
                 {isCreatingGroup && (
-                  <Spinner as="span" size="sm" animation="border" role="status" className="mr-2" />
+                  <Spinner as="span" size="sm" animation="border" role="status" className="me-2" />
                 )}
                 Create group
               </Button>
diff --git a/src/NewInterfacePage.tsx b/src/NewInterfacePage.tsx
index 6250e956..28107be8 100644
--- a/src/NewInterfacePage.tsx
+++ b/src/NewInterfacePage.tsx
@@ -135,7 +135,7 @@ export default (): React.ReactElement => {
         <AlertsBanner alerts={installationAlerts} />
         <InterfaceEditor onChange={handleInterfaceChange} isSourceVisible={isSourceVisible} />
         <Row className="justify-content-end m-0 mt-3">
-          <Button variant="secondary" className="mr-2" onClick={handleToggleSourceVisibility}>
+          <Button variant="secondary" className="me-2" onClick={handleToggleSourceVisibility}>
             {isSourceVisible ? 'Hide' : 'Show'} source
           </Button>
           <Button
@@ -144,7 +144,7 @@ export default (): React.ReactElement => {
             disabled={isInstallingInterface || !isValidInterface}
           >
             {isInstallingInterface && (
-              <Spinner as="span" size="sm" animation="border" role="status" className="mr-2" />
+              <Spinner as="span" size="sm" animation="border" role="status" className="me-2" />
             )}
             Install interface
           </Button>
diff --git a/src/NewPipelinePage.tsx b/src/NewPipelinePage.tsx
index b116bc61..0d9c2894 100644
--- a/src/NewPipelinePage.tsx
+++ b/src/NewPipelinePage.tsx
@@ -256,7 +256,7 @@ const NewPipelinePage = (): React.ReactElement => {
                 disabled={!isValidForm || isCreatingPipeline}
               >
                 {isCreatingPipeline && (
-                  <Spinner as="span" size="sm" animation="border" role="status" className="mr-2" />
+                  <Spinner as="span" size="sm" animation="border" role="status" className="me-2" />
                 )}
                 Create new pipeline
               </Button>
diff --git a/src/NewTriggerDeliveryPolicyPage.tsx b/src/NewTriggerDeliveryPolicyPage.tsx
index b537cb09..f44d50d3 100644
--- a/src/NewTriggerDeliveryPolicyPage.tsx
+++ b/src/NewTriggerDeliveryPolicyPage.tsx
@@ -97,7 +97,7 @@ export default (): React.ReactElement => {
       <div className="mt-4">
         <AlertsBanner alerts={installationAlerts} />
         <Row className="justify-content-end m-0 mt-3">
-          <Button variant="secondary" className="mr-2" onClick={handleToggleSourceVisibility}>
+          <Button variant="secondary" className="me-2" onClick={handleToggleSourceVisibility}>
             {isSourceVisible ? 'Hide' : 'Show'} source
           </Button>
           <Button
@@ -106,7 +106,7 @@ export default (): React.ReactElement => {
             disabled={isInstallingPolicy || !isValidPolicy}
           >
             {isInstallingPolicy && (
-              <Spinner as="span" size="sm" animation="border" role="status" className="mr-2" />
+              <Spinner as="span" size="sm" animation="border" role="status" className="me-2" />
             )}
             Install Trigger Delivery Policy
           </Button>
diff --git a/src/NewTriggerPage.tsx b/src/NewTriggerPage.tsx
index 16f41fd0..51036548 100644
--- a/src/NewTriggerPage.tsx
+++ b/src/NewTriggerPage.tsx
@@ -86,7 +86,7 @@ export default (): React.ReactElement => {
           fetchInterface={astarte.client.getInterface}
         />
         <Row className="justify-content-end m-0 mt-3">
-          <Button variant="secondary" className="mr-2" onClick={handleToggleSourceVisibility}>
+          <Button variant="secondary" className="me-2" onClick={handleToggleSourceVisibility}>
             {isSourceVisible ? 'Hide' : 'Show'} source
           </Button>
           <Button
@@ -95,7 +95,7 @@ export default (): React.ReactElement => {
             disabled={isInstallingTrigger || !isValidTrigger}
           >
             {isInstallingTrigger && (
-              <Spinner as="span" size="sm" animation="border" role="status" className="mr-2" />
+              <Spinner as="span" size="sm" animation="border" role="status" className="me-2" />
             )}
             Install Trigger
           </Button>
diff --git a/src/PipelineSourcePage.tsx b/src/PipelineSourcePage.tsx
index 91805321..f75b8166 100644
--- a/src/PipelineSourcePage.tsx
+++ b/src/PipelineSourcePage.tsx
@@ -103,7 +103,7 @@ export default (): React.ReactElement => {
             disabled={isDeletingPipeline}
           >
             {isDeletingPipeline && (
-              <Spinner as="span" size="sm" animation="border" role="status" className="mr-2" />
+              <Spinner as="span" size="sm" animation="border" role="status" className="me-2" />
             )}
             Delete pipeline
           </Button>
diff --git a/src/RealmSettingsPage.tsx b/src/RealmSettingsPage.tsx
index 8df82c42..28f5e8c6 100644
--- a/src/RealmSettingsPage.tsx
+++ b/src/RealmSettingsPage.tsx
@@ -53,7 +53,7 @@ const RealmSettingsForm = ({
         <Form.Label>Public key</Form.Label>
         <Form.Control
           as="textarea"
-          className="text-monospace"
+          className="font-monospace"
           rows={16}
           value={values.publicKey}
           onChange={(e) => setValues({ ...values, publicKey: e.target.value })}
@@ -65,7 +65,7 @@ const RealmSettingsForm = ({
         onClick={() => onSubmit(values)}
       >
         {isUpdatingSettings && (
-          <Spinner className="mr-2" size="sm" animation="border" role="status" />
+          <Spinner className="me-2" size="sm" animation="border" role="status" />
         )}
         Change
       </Button>
diff --git a/src/RegisterDevicePage.tsx b/src/RegisterDevicePage.tsx
index c7000520..f6021256 100644
--- a/src/RegisterDevicePage.tsx
+++ b/src/RegisterDevicePage.tsx
@@ -321,7 +321,7 @@ export default (): React.ReactElement => {
             <Form.Label>Device ID</Form.Label>
             <Form.Control
               type="text"
-              className="text-monospace"
+              className="font-monospace"
               placeholder="Your device ID"
               value={deviceId}
               onChange={(e: React.ChangeEvent<HTMLInputElement>) => setDeviceId(e.target.value)}
@@ -367,14 +367,14 @@ export default (): React.ReactElement => {
             onRemoveInterface={removeIntrospectionInterface}
           />
         )}
-        <Form.Row className="flex-row-reverse pr-2">
+        <Form.Row className="flex-row-reverse pe-2">
           <Button
             variant="primary"
             type="submit"
             disabled={!isValidDeviceId || isRegisteringDevice}
           >
             {isRegisteringDevice && (
-              <Spinner as="span" size="sm" animation="border" role="status" className="mr-2" />
+              <Spinner as="span" size="sm" animation="border" role="status" className="me-2" />
             )}
             Register device
           </Button>
diff --git a/src/Sidebar.tsx b/src/Sidebar.tsx
index 4dec4969..7754afea 100644
--- a/src/Sidebar.tsx
+++ b/src/Sidebar.tsx
@@ -28,7 +28,7 @@ interface SidebarApiStatusProps {
 }
 
 const SidebarApiStatus = ({ healthy, realm }: SidebarApiStatusProps) => (
-  <NavItem className="nav-status pl-4">
+  <NavItem className="nav-status ps-4">
     <div>
       <b>Realm</b>
     </div>
@@ -37,7 +37,7 @@ const SidebarApiStatus = ({ healthy, realm }: SidebarApiStatusProps) => (
       <b>API Status</b>
     </div>
     <p className="my-1">
-      <Icon icon={healthy ? 'statusConnected' : 'statusDisconnected'} className="mr-2" />
+      <Icon icon={healthy ? 'statusConnected' : 'statusDisconnected'} className="me-2" />
       {healthy ? 'Up and running' : 'Degraded'}
     </p>
   </NavItem>
@@ -77,7 +77,7 @@ const SidebarItem = ({ icon, label, link }: SidebarItemProps) => {
 
   return (
     <NavLink as={Link} to={link} active={isSelected}>
-      <Icon icon={icon} className="mr-2" />
+      <Icon icon={icon} className="me-2" />
       {label}
     </NavLink>
   );
diff --git a/src/TriggerDeliveryPoliciesPage.tsx b/src/TriggerDeliveryPoliciesPage.tsx
index 60de5f85..3c6a7625 100644
--- a/src/TriggerDeliveryPoliciesPage.tsx
+++ b/src/TriggerDeliveryPoliciesPage.tsx
@@ -35,7 +35,7 @@ interface TriggerPolicyRowProps {
 const TriggerPolicyRow = ({ name, onClick }: TriggerPolicyRowProps): React.ReactElement => (
   <ListGroup.Item>
     <Button variant="link" className="p-0" onClick={onClick}>
-      <Icon icon="policy" className="mr-2" />
+      <Icon icon="policy" className="me-2" />
       {name}
     </Button>
   </ListGroup.Item>
@@ -84,7 +84,7 @@ export default (): React.ReactElement => {
                   navigate('/trigger-delivery-policies/new');
                 }}
               >
-                <Icon icon="add" className="mr-2" />
+                <Icon icon="add" className="me-2" />
                 Install a new trigger delivery policy...
               </Button>
             </ListGroup.Item>
diff --git a/src/TriggerDeliveryPolicyPage.tsx b/src/TriggerDeliveryPolicyPage.tsx
index 195c0613..eea4727f 100644
--- a/src/TriggerDeliveryPolicyPage.tsx
+++ b/src/TriggerDeliveryPolicyPage.tsx
@@ -167,7 +167,7 @@ export default (): React.ReactElement => {
                 isSourceVisible={isSourceVisible}
               />
               <Row className="justify-content-end m-0 mt-3">
-                <Button variant="secondary" className="mr-2" onClick={handleToggleSourceVisibility}>
+                <Button variant="secondary" className="me-2" onClick={handleToggleSourceVisibility}>
                   {isSourceVisible ? 'Hide' : 'Show'} source
                 </Button>
                 <Button
@@ -181,7 +181,7 @@ export default (): React.ReactElement => {
                       size="sm"
                       animation="border"
                       role="status"
-                      className="mr-2"
+                      className="me-2"
                     />
                   )}
                   Delete Trigger Delivery Policy
diff --git a/src/TriggerPage.tsx b/src/TriggerPage.tsx
index 989dd9c2..14c45dec 100644
--- a/src/TriggerPage.tsx
+++ b/src/TriggerPage.tsx
@@ -148,7 +148,7 @@ export default (): React.ReactElement => {
                 fetchInterface={astarte.client.getInterface}
               />
               <Row className="justify-content-end m-0 mt-3">
-                <Button variant="secondary" className="mr-2" onClick={handleToggleSourceVisibility}>
+                <Button variant="secondary" className="me-2" onClick={handleToggleSourceVisibility}>
                   {isSourceVisible ? 'Hide' : 'Show'} source
                 </Button>
                 <Button
@@ -162,7 +162,7 @@ export default (): React.ReactElement => {
                       size="sm"
                       animation="border"
                       role="status"
-                      className="mr-2"
+                      className="me-2"
                     />
                   )}
                   Delete trigger
diff --git a/src/TriggersPage.tsx b/src/TriggersPage.tsx
index 26ac17cf..4ee20249 100644
--- a/src/TriggersPage.tsx
+++ b/src/TriggersPage.tsx
@@ -35,7 +35,7 @@ interface TriggerRowProps {
 const TriggerRow = ({ name, onClick }: TriggerRowProps): React.ReactElement => (
   <ListGroup.Item>
     <Button variant="link" className="p-0" onClick={onClick}>
-      <Icon icon="triggers" className="mr-2" />
+      <Icon icon="triggers" className="me-2" />
       {name}
     </Button>
   </ListGroup.Item>
@@ -84,7 +84,7 @@ export default (): React.ReactElement => {
                   navigate('/triggers/new');
                 }}
               >
-                <Icon icon="add" className="mr-2" />
+                <Icon icon="add" className="me-2" />
                 Install a new trigger...
               </Button>
             </ListGroup.Item>
diff --git a/src/components/InterfaceEditor.tsx b/src/components/InterfaceEditor.tsx
index bdee2f69..364240bc 100644
--- a/src/components/InterfaceEditor.tsx
+++ b/src/components/InterfaceEditor.tsx
@@ -80,12 +80,12 @@ const MappingRow = ({ className, mapping, onEdit, onDelete }: MappingRowProps) =
       >
         <span className="flex-grow-1">
           <Badge variant="secondary">{mapping.type}</Badge>
-          <Button className="text-left text-truncate" variant="link">
+          <Button className="text-start text-truncate" variant="link">
             {mapping.endpoint}
           </Button>
         </span>
         {onEdit && (
-          <Button className="mr-2" variant="outline-primary" onClick={onEdit}>
+          <Button className="me-2" variant="outline-primary" onClick={onEdit}>
             Edit...
           </Button>
         )}
@@ -1000,7 +1000,7 @@ export default ({
                     className="btn accordion-button w-100 mb-2"
                     onClick={handleAddMapping}
                   >
-                    <Icon icon="add" className="mr-2" /> Add mapping...
+                    <Icon icon="add" className="me-2" /> Add mapping...
                   </button>
                   {interfaceDraft.mappings.map((mapping, index) => {
                     const isExistingMapping = (initialData?.mappings || []).some(
@@ -1037,7 +1037,7 @@ export default ({
           <Form.Group controlId="interfaceSource" className="h-100 d-flex flex-column">
             <Form.Control
               as="textarea"
-              className="flex-grow-1 text-monospace"
+              className="flex-grow-1 font-monospace"
               value={interfaceSource}
               onChange={handleInterfaceSourceChange}
               autoComplete="off"
diff --git a/src/components/TriggerDeliveryPolicyEditor.tsx b/src/components/TriggerDeliveryPolicyEditor.tsx
index 177e06e1..df2d7fef 100644
--- a/src/components/TriggerDeliveryPolicyEditor.tsx
+++ b/src/components/TriggerDeliveryPolicyEditor.tsx
@@ -253,7 +253,7 @@ export default ({
           <Form.Group controlId="policySource" className="h-100 d-flex flex-column">
             <Form.Control
               as="textarea"
-              className="flex-grow-1 text-monospace"
+              className="flex-grow-1 font-monospace"
               value={policySource}
               onChange={handlePolicySourceChange}
               autoComplete="off"
diff --git a/src/components/TriggerDeliveryPolicyHandler.tsx b/src/components/TriggerDeliveryPolicyHandler.tsx
index c39b38d9..8528fefd 100644
--- a/src/components/TriggerDeliveryPolicyHandler.tsx
+++ b/src/components/TriggerDeliveryPolicyHandler.tsx
@@ -266,7 +266,7 @@ export default ({ isReadOnly, initialData, onChange }: Props): React.ReactElemen
       <Form.Group controlId="policyHandler">
         {!isReadOnly && (
           <Button variant="link" className="p-0" onClick={() => setIsAddingHandler(true)}>
-            <Icon icon="add" className="mr-2" />
+            <Icon icon="add" className="me-2" />
             Add Error Handler
           </Button>
         )}
@@ -294,7 +294,7 @@ export default ({ isReadOnly, initialData, onChange }: Props): React.ReactElemen
                       <Icon
                         icon="edit"
                         onClick={() => setHandlerToEditIndex(index)}
-                        className="color-grey mr-2"
+                        className="color-grey me-2"
                       />
                       <Icon
                         icon="erase"
diff --git a/src/components/TriggerEditor/TriggerActionForm.tsx b/src/components/TriggerEditor/TriggerActionForm.tsx
index e8aba5a6..297ec029 100644
--- a/src/components/TriggerEditor/TriggerActionForm.tsx
+++ b/src/components/TriggerEditor/TriggerActionForm.tsx
@@ -300,7 +300,7 @@ const TriggerActionForm = ({
               <Form.Group controlId="actionHttpHeaders">
                 {!isReadOnly && (
                   <Button variant="link" className="p-0" onClick={() => onAddHttpHeader()}>
-                    <Icon icon="add" className="mr-2" />
+                    <Icon icon="add" className="me-2" />
                     Add custom HTTP headers
                   </Button>
                 )}
@@ -323,7 +323,7 @@ const TriggerActionForm = ({
                               <Icon
                                 icon="edit"
                                 onClick={() => onEditHttpHeader(headerName)}
-                                className="color-grey mr-2"
+                                className="color-grey me-2"
                               />
                               <Icon icon="erase" onClick={() => onDeleteHttpHeader(headerName)} />
                             </td>
@@ -454,7 +454,7 @@ const TriggerActionForm = ({
               <Form.Group controlId="actionAmqpHeaders">
                 {!isReadOnly && (
                   <Button variant="link" className="p-0" onClick={() => onAddAmqpHeader()}>
-                    <Icon icon="add" className="mr-2" />
+                    <Icon icon="add" className="me-2" />
                     Add static AMQP headers
                   </Button>
                 )}
@@ -477,7 +477,7 @@ const TriggerActionForm = ({
                               <Icon
                                 icon="edit"
                                 onClick={() => onEditAmqpHeader(headerName)}
-                                className="color-grey mr-2"
+                                className="color-grey me-2"
                               />
                               <Icon icon="erase" onClick={() => onDeleteAmqpHeader(headerName)} />
                             </td>
diff --git a/src/components/TriggerEditor/index.tsx b/src/components/TriggerEditor/index.tsx
index e209d96a..9c1f9d47 100644
--- a/src/components/TriggerEditor/index.tsx
+++ b/src/components/TriggerEditor/index.tsx
@@ -532,7 +532,7 @@ export default ({
           <Form.Group controlId="triggerSource" className="h-100 d-flex flex-column">
             <Form.Control
               as="textarea"
-              className="flex-grow-1 text-monospace"
+              className="flex-grow-1 font-monospace"
               autoComplete="off"
               spellCheck={false}
               required
diff --git a/src/components/modals/Confirm.tsx b/src/components/modals/Confirm.tsx
index e76c1199..7a6389d2 100644
--- a/src/components/modals/Confirm.tsx
+++ b/src/components/modals/Confirm.tsx
@@ -87,7 +87,7 @@ const ConfirmModal = ({
             style={{ minWidth: '5em' }}
           >
             {isConfirming && (
-              <Spinner className="mr-2" size="sm" animation="border" role="status" />
+              <Spinner className="me-2" size="sm" animation="border" role="status" />
             )}
             {confirmLabel}
           </Button>
diff --git a/src/components/modals/Form.tsx b/src/components/modals/Form.tsx
index 86aa7649..86b7d31a 100644
--- a/src/components/modals/Form.tsx
+++ b/src/components/modals/Form.tsx
@@ -163,7 +163,7 @@ const FormModal = ({
           >
             <hr style={{ display: 'block', marginLeft: '-1em', marginRight: '-1em' }} />
             <div className="d-flex justify-content-end">
-              <Button variant="secondary mr-2" onClick={onCancel} style={{ minWidth: '5em' }}>
+              <Button variant="secondary me-2" onClick={onCancel} style={{ minWidth: '5em' }}>
                 {cancelLabel}
               </Button>
               <Button
@@ -174,7 +174,7 @@ const FormModal = ({
                 style={{ minWidth: '5em' }}
               >
                 {isConfirming && (
-                  <Spinner className="mr-2" size="sm" animation="border" role="status" />
+                  <Spinner className="me-2" size="sm" animation="border" role="status" />
                 )}
                 {confirmLabel}
               </Button>
diff --git a/src/ui/BackButton.tsx b/src/ui/BackButton.tsx
index 43c6413c..c2d44cfa 100644
--- a/src/ui/BackButton.tsx
+++ b/src/ui/BackButton.tsx
@@ -27,7 +27,7 @@ interface Props {
 
 export default function BackButton({ href }: Props): React.ReactElement {
   return (
-    <Link to={href} className="mr-2" aria-label="Back">
+    <Link to={href} className="me-2" aria-label="Back">
       <Icon icon="arrowLeft" />
     </Link>
   );
diff --git a/src/ui/CheckableDeviceTable.tsx b/src/ui/CheckableDeviceTable.tsx
index e5a5da36..ea0349ca 100644
--- a/src/ui/CheckableDeviceTable.tsx
+++ b/src/ui/CheckableDeviceTable.tsx
@@ -78,7 +78,7 @@ const DeviceTableRow = ({
           onChange={onToggleChange}
         />
       </td>
-      <td className="text-monospace">
+      <td className="font-monospace">
         <Highlight text={deviceId} word={filter} />
       </td>
       <td>
diff --git a/src/ui/SingleCardPage.tsx b/src/ui/SingleCardPage.tsx
index aa5c7d34..aee47f42 100644
--- a/src/ui/SingleCardPage.tsx
+++ b/src/ui/SingleCardPage.tsx
@@ -43,9 +43,9 @@ export default function SingleCardPage({
           {title}
         </h2>
         {docsLink && (
-          <div className="float-right">
+          <div className="float-end">
             <a target="_blank" rel="noreferrer" href={docsLink}>
-              <Icon icon="documentation" className="mr-2" />
+              <Icon icon="documentation" className="me-2" />
               Documentation
             </a>
           </div>