chore(ui): migrate styles to bootstrap v5

ui/e2e/demo.test.js

@@ -62,7 +62,7 @@ describe("Demo", () => {
     });
     await expect(labels.length).toBeGreaterThan(10);
 
-    await page.click(".modal-header > button.close");
+    await page.click(".modal-header > button.btn-close");
   });
 
   it("opens silence modal on click", async () => {
@@ -76,7 +76,7 @@ describe("Demo", () => {
     await page.waitForSelector("div.modal-content");
     await page.waitForSelector(".modal-body > form");
 
-    await page.click(".modal-header > nav > button.close");
+    await page.click(".modal-header > nav > button.btn-close");
   });
 
   it("opens settings modal on click", async () => {
@@ -88,8 +88,8 @@ describe("Demo", () => {
       "div.modal-open.components-animation-modal-enter-done"
     );
     await page.waitForSelector("div.modal-content");
-    await page.waitForSelector(".modal-body > form.accordion");
+    await page.waitForSelector(".modal-body > div.accordion");
 
-    await page.click(".modal-header > nav > button.close");
+    await page.click(".modal-header > nav > button.btn-close");
   });
 });

ui/src/Common/Colors.ts

@@ -1,6 +1,6 @@
 // fallback class for labels
 const DefaultLabelClassMap = Object.freeze({
-  badge: "badge-default components-label-dark",
+  badge: "bg-default components-label-dark",
   btn: "btn-default components-label-dark",
 });
 
@@ -18,12 +18,12 @@ const BackgroundClassMap = Object.freeze({
 });
 
 const StaticColorLabelClassMap = Object.freeze({
-  badge: "badge-info components-label-dark",
+  badge: "bg-info components-label-dark",
   btn: "btn-info components-label-dark",
 });
 
 const AlertNameLabelClassMap = Object.freeze({
-  badge: "badge-dark components-label-dark",
+  badge: "bg-dark components-label-dark",
   btn: "btn-dark components-label-dark",
 });
 

ui/src/Components/Accordion/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,44 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Accordion /> matches snapshot 1`] = `
+"
+<div class=\\"accordion\\">
+  <div class=\\"accordion-item\\">
+    <h2 class=\\"accordion-header\\">
+      <button class=\\"accordion-button collapsed\\"
+              type=\\"button\\"
+      >
+        title 1
+      </button>
+    </h2>
+    <div class=\\"accordion-collapse \\">
+    </div>
+  </div>
+  <div class=\\"accordion-item\\">
+    <h2 class=\\"accordion-header\\">
+      <button class=\\"accordion-button \\"
+              type=\\"button\\"
+      >
+        title 2
+      </button>
+    </h2>
+    <div class=\\"accordion-collapse show\\">
+      <div class=\\"accordion-body\\">
+        item 2
+      </div>
+    </div>
+  </div>
+  <div class=\\"accordion-item\\">
+    <h2 class=\\"accordion-header\\">
+      <button class=\\"accordion-button collapsed\\"
+              type=\\"button\\"
+      >
+        title 1
+      </button>
+    </h2>
+    <div class=\\"accordion-collapse \\">
+    </div>
+  </div>
+</div>
+"
+`;

ui/src/Components/Accordion/index.test.tsx

@@ -1,35 +1,50 @@
 import { mount } from "enzyme";
 
-import { Accordion } from ".";
+import toDiffableHtml from "diffable-html";
+
+import { Accordion, AccordionItem } from ".";
 
 describe("<Accordion />", () => {
+  it("matches snapshot", () => {
+    const tree = mount(
+      <Accordion>
+        <AccordionItem text="title 1" content="item 1" />
+        <AccordionItem text="title 2" content="item 2" defaultIsOpen />
+        <AccordionItem text="title 1" content="item 1" />
+      </Accordion>
+    );
+    expect(toDiffableHtml(tree.html())).toMatchSnapshot();
+  });
+});
+
+describe("<AccordionItem />", () => {
   it("doesn't render content by default", () => {
-    const tree = mount(<Accordion text="title" content="content" />);
+    const tree = mount(<AccordionItem text="title" content="content" />);
     expect(tree.text()).toBe("title");
   });
 
   it("doesn't render content when defaultIsOpen=false", () => {
     const tree = mount(
-      <Accordion text="title" content="content" defaultIsOpen={false} />
+      <AccordionItem text="title" content="content" defaultIsOpen={false} />
     );
     expect(tree.text()).toBe("title");
   });
 
   it("renders content when defaultIsOpen=true", () => {
     const tree = mount(
-      <Accordion text="title" content="content" defaultIsOpen={true} />
+      <AccordionItem text="title" content="content" defaultIsOpen={true} />
     );
     expect(tree.text()).toBe("titlecontent");
   });
 
   it("toggles content after header click", () => {
-    const tree = mount(<Accordion text="title" content="content" />);
+    const tree = mount(<AccordionItem text="title" content="content" />);
     expect(tree.text()).toBe("title");
 
-    tree.find("div.card-header").simulate("click");
+    tree.find("button.accordion-button").simulate("click");
     expect(tree.text()).toBe("titlecontent");
 
-    tree.find("div.card-header").simulate("click");
+    tree.find("button.accordion-button").simulate("click");
     expect(tree.text()).toBe("title");
   });
 });

ui/src/Components/Accordion/index.tsx

@@ -1,17 +1,6 @@
 import { FC, ReactNode, useState } from "react";
 
-import { ToggleIcon } from "Components/ToggleIcon";
-
-const Trigger: FC<{ text: string; isOpen: boolean }> = ({ text, isOpen }) => (
-  <div className="d-flex flex-row justify-content-between">
-    <div>{text}</div>
-    <div>
-      <ToggleIcon isOpen={isOpen} className="text-muted" />
-    </div>
-  </div>
-);
-
-const Accordion: FC<{
+export const AccordionItem: FC<{
   text: string;
   content: ReactNode;
   defaultIsOpen?: boolean;
@@ -19,16 +8,23 @@ const Accordion: FC<{
   const [isOpen, setIsOpen] = useState<boolean>(defaultIsOpen || false);
 
   return (
-    <div className="accordion card">
-      <div
-        className={`card-header cursor-pointer ${isOpen ? "active" : ""}`}
-        onClick={() => setIsOpen(!isOpen)}
-      >
-        <Trigger text={text} isOpen={isOpen} />
+    <div className="accordion-item">
+      <h2 className="accordion-header">
+        <button
+          className={`accordion-button ${isOpen ? "" : "collapsed"}`}
+          type="button"
+          onClick={() => setIsOpen((val) => !val)}
+        >
+          {text}
+        </button>
+      </h2>
+      <div className={`accordion-collapse ${isOpen ? "show" : ""}`}>
+        {isOpen ? <div className="accordion-body">{content}</div> : null}
       </div>
-      <div className={isOpen ? "card-body my-2" : ""}>{isOpen && content}</div>
     </div>
   );
 };
 
-export { Accordion };
+export const Accordion: FC = ({ children }) => {
+  return <div className="accordion">{children}</div>;
+};

ui/src/Components/AlertAck/index.tsx

@@ -152,12 +152,12 @@ const AlertAck: FC<{
       }
     >
       <span
-        className={`badge badge-pill components-label components-label-with-hover px-2 ${
+        className={`badge rounded-pill components-label components-label-with-hover px-2 ${
           !isAcking && error
-            ? "badge-warning"
+            ? "bg-warning"
             : !isAcking && response
-            ? "badge-success"
-            : "badge-secondary"
+            ? "bg-success"
+            : "bg-secondary"
         }`}
         onClick={() => {
           if (!isAcking && !(response || error)) {

ui/src/Components/Fetcher/index.tsx

@@ -234,7 +234,7 @@ const Fetcher: FC<{
 
   return (
     <div
-      className="navbar-brand py-0 mr-2 d-none d-sm-block"
+      className="navbar-brand py-0 me-2 d-none d-sm-block"
       onMouseEnter={() => setIsHover(true)}
       onMouseLeave={() => setIsHover(false)}
     >

ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/AlertMenu.tsx

@@ -129,7 +129,7 @@ const MenuContent: FC<{
             }
           }}
         >
-          <FontAwesomeIcon className="mr-1" icon={faBellSlash} />
+          <FontAwesomeIcon className="me-1" icon={faBellSlash} />
           Silence this alert
         </div>
       </div>
@@ -166,13 +166,13 @@ const AlertMenu: FC<{
           <Reference>
             {({ ref }) => (
               <span
-                className="components-label components-label-with-hover px-1 mr-1 badge badge-secondary cursor-pointer"
+                className="components-label components-label-with-hover px-1 me-1 badge bg-secondary cursor-pointer"
                 ref={ref}
                 onClick={toggle}
                 data-toggle="dropdown"
               >
                 <FontAwesomeIcon
-                  className="pr-1"
+                  className="pe-1"
                   style={{ width: "0.8rem" }}
                   icon={faCaretDown}
                 />

ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/__snapshots__/index.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`<Alert /> matches snapshot when inhibited 1`] = `
 "
-<li class=\\"components-grid-alertgrid-alertgroup-alert list-group-item bg-transparent pl-1 pr-0 py-0 my-1 rounded-0 border-left-1 border-right-0 border-top-0 border-bottom-0 border-danger\\">
+<li class=\\"components-grid-alertgrid-alertgroup-alert list-group-item bg-transparent ps-1 pe-0 py-0 my-1 rounded-0 border-start-1 border-end-0 border-top-0 border-bottom-0 border-danger\\">
   <div>
     <div class=\\" tooltip-trigger\\">
       <div class=\\"mb-1 p-1 bg-light d-inline-block rounded components-grid-annotation text-break mw-100\\">
@@ -11,7 +11,7 @@ exports[`<Alert /> matches snapshot when inhibited 1`] = `
                focusable=\\"false\\"
                data-prefix=\\"fas\\"
                data-icon=\\"search-minus\\"
-               class=\\"svg-inline--fa fa-search-minus fa-w-16 mr-1\\"
+               class=\\"svg-inline--fa fa-search-minus fa-w-16 me-1\\"
                role=\\"img\\"
                xmlns=\\"http://www.w3.org/2000/svg\\"
                viewbox=\\"0 0 512 512\\"
@@ -38,7 +38,7 @@ exports[`<Alert /> matches snapshot when inhibited 1`] = `
              focusable=\\"false\\"
              data-prefix=\\"fas\\"
              data-icon=\\"search-plus\\"
-             class=\\"svg-inline--fa fa-search-plus fa-w-16 mr-1\\"
+             class=\\"svg-inline--fa fa-search-plus fa-w-16 me-1\\"
              role=\\"img\\"
              xmlns=\\"http://www.w3.org/2000/svg\\"
              viewbox=\\"0 0 512 512\\"
@@ -53,14 +53,14 @@ exports[`<Alert /> matches snapshot when inhibited 1`] = `
     </div>
   </div>
   <span>
-    <span class=\\"components-label components-label-with-hover px-1 mr-1 badge badge-secondary cursor-pointer\\"
+    <span class=\\"components-label components-label-with-hover px-1 me-1 badge bg-secondary cursor-pointer\\"
           data-toggle=\\"dropdown\\"
     >
       <svg aria-hidden=\\"true\\"
            focusable=\\"false\\"
            data-prefix=\\"fas\\"
            data-icon=\\"caret-down\\"
-           class=\\"svg-inline--fa fa-caret-down fa-w-10 pr-1\\"
+           class=\\"svg-inline--fa fa-caret-down fa-w-10 pe-1\\"
            role=\\"img\\"
            xmlns=\\"http://www.w3.org/2000/svg\\"
            viewbox=\\"0 0 320 512\\"
@@ -75,7 +75,7 @@ exports[`<Alert /> matches snapshot when inhibited 1`] = `
     </span>
   </span>
   <div class=\\" tooltip-trigger\\">
-    <span class=\\"badge badge-light components-label components-label-with-hover cursor-pointer\\">
+    <span class=\\"badge bg-light components-label components-label-with-hover cursor-pointer\\">
       <svg aria-hidden=\\"true\\"
            focusable=\\"false\\"
            data-prefix=\\"fas\\"
@@ -93,7 +93,7 @@ exports[`<Alert /> matches snapshot when inhibited 1`] = `
     </span>
   </div>
   <div class=\\" tooltip-trigger\\">
-    <span class=\\"components-label badge badge-default components-label-dark components-label-with-hover\\">
+    <span class=\\"components-label badge bg-default components-label-dark components-label-with-hover\\">
       <span class=\\"components-label-name\\">
         job:
       </span>
@@ -103,7 +103,7 @@ exports[`<Alert /> matches snapshot when inhibited 1`] = `
     </span>
   </div>
   <div class=\\" tooltip-trigger\\">
-    <span class=\\"components-label badge badge-default components-label-dark components-label-with-hover\\">
+    <span class=\\"components-label badge bg-default components-label-dark components-label-with-hover\\">
       <span class=\\"components-label-name\\">
         cluster:
       </span>
@@ -139,7 +139,7 @@ exports[`<Alert /> matches snapshot when inhibited 1`] = `
 
 exports[`<Alert /> matches snapshot with showAlertmanagers=false showReceiver=false 1`] = `
 "
-<li class=\\"components-grid-alertgrid-alertgroup-alert list-group-item bg-transparent pl-1 pr-0 py-0 my-1 rounded-0 border-left-1 border-right-0 border-top-0 border-bottom-0 border-danger\\">
+<li class=\\"components-grid-alertgrid-alertgroup-alert list-group-item bg-transparent ps-1 pe-0 py-0 my-1 rounded-0 border-start-1 border-end-0 border-top-0 border-bottom-0 border-danger\\">
   <div>
     <div class=\\" tooltip-trigger\\">
       <div class=\\"mb-1 p-1 bg-light d-inline-block rounded components-grid-annotation text-break mw-100\\">
@@ -148,7 +148,7 @@ exports[`<Alert /> matches snapshot with showAlertmanagers=false showReceiver=fa
                focusable=\\"false\\"
                data-prefix=\\"fas\\"
                data-icon=\\"search-minus\\"
-               class=\\"svg-inline--fa fa-search-minus fa-w-16 mr-1\\"
+               class=\\"svg-inline--fa fa-search-minus fa-w-16 me-1\\"
                role=\\"img\\"
                xmlns=\\"http://www.w3.org/2000/svg\\"
                viewbox=\\"0 0 512 512\\"
@@ -175,7 +175,7 @@ exports[`<Alert /> matches snapshot with showAlertmanagers=false showReceiver=fa
              focusable=\\"false\\"
              data-prefix=\\"fas\\"
              data-icon=\\"search-plus\\"
-             class=\\"svg-inline--fa fa-search-plus fa-w-16 mr-1\\"
+             class=\\"svg-inline--fa fa-search-plus fa-w-16 me-1\\"
              role=\\"img\\"
              xmlns=\\"http://www.w3.org/2000/svg\\"
              viewbox=\\"0 0 512 512\\"
@@ -190,14 +190,14 @@ exports[`<Alert /> matches snapshot with showAlertmanagers=false showReceiver=fa
     </div>
   </div>
   <span>
-    <span class=\\"components-label components-label-with-hover px-1 mr-1 badge badge-secondary cursor-pointer\\"
+    <span class=\\"components-label components-label-with-hover px-1 me-1 badge bg-secondary cursor-pointer\\"
           data-toggle=\\"dropdown\\"
     >
       <svg aria-hidden=\\"true\\"
            focusable=\\"false\\"
            data-prefix=\\"fas\\"
            data-icon=\\"caret-down\\"
-           class=\\"svg-inline--fa fa-caret-down fa-w-10 pr-1\\"
+           class=\\"svg-inline--fa fa-caret-down fa-w-10 pe-1\\"
            role=\\"img\\"
            xmlns=\\"http://www.w3.org/2000/svg\\"
            viewbox=\\"0 0 320 512\\"
@@ -212,7 +212,7 @@ exports[`<Alert /> matches snapshot with showAlertmanagers=false showReceiver=fa
     </span>
   </span>
   <div class=\\" tooltip-trigger\\">
-    <span class=\\"components-label badge badge-default components-label-dark components-label-with-hover\\">
+    <span class=\\"components-label badge bg-default components-label-dark components-label-with-hover\\">
       <span class=\\"components-label-name\\">
         job:
       </span>
@@ -222,7 +222,7 @@ exports[`<Alert /> matches snapshot with showAlertmanagers=false showReceiver=fa
     </span>
   </div>
   <div class=\\" tooltip-trigger\\">
-    <span class=\\"components-label badge badge-default components-label-dark components-label-with-hover\\">
+    <span class=\\"components-label badge bg-default components-label-dark components-label-with-hover\\">
       <span class=\\"components-label-name\\">
         cluster:
       </span>

ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/index.test.tsx

@@ -374,7 +374,7 @@ describe("<Alert />", () => {
     const tree = MountedAlert(alert, group, false, false, false);
     expect(
       tree
-        .find("span.components-label.badge.badge-secondary.cursor-pointer")
+        .find("span.components-label.badge.bg-secondary.cursor-pointer")
         .at(0)
         .text()
     ).toBe("just now");
@@ -385,7 +385,7 @@ describe("<Alert />", () => {
     });
     expect(
       tree
-        .find("span.components-label.badge.badge-secondary.cursor-pointer")
+        .find("span.components-label.badge.bg-secondary.cursor-pointer")
         .at(0)
         .text()
     ).toBe("a few seconds ago");
@@ -396,7 +396,7 @@ describe("<Alert />", () => {
     });
     expect(
       tree
-        .find("span.components-label.badge.badge-secondary.cursor-pointer")
+        .find("span.components-label.badge.bg-secondary.cursor-pointer")
         .at(0)
         .text()
     ).toBe("1 minute ago");
@@ -407,7 +407,7 @@ describe("<Alert />", () => {
     });
     expect(
       tree
-        .find("span.components-label.badge.badge-secondary.cursor-pointer")
+        .find("span.components-label.badge.bg-secondary.cursor-pointer")
         .at(0)
         .text()
     ).toBe("1 hour ago");
@@ -418,7 +418,7 @@ describe("<Alert />", () => {
     });
     expect(
       tree
-        .find("span.components-label.badge.badge-secondary.cursor-pointer")
+        .find("span.components-label.badge.bg-secondary.cursor-pointer")
         .at(0)
         .text()
     ).toBe("2 hours ago");
@@ -429,7 +429,7 @@ describe("<Alert />", () => {
     });
     expect(
       tree
-        .find("span.components-label.badge.badge-secondary.cursor-pointer")
+        .find("span.components-label.badge.bg-secondary.cursor-pointer")
         .at(0)
         .text()
     ).toBe("2 days ago");

ui/src/Components/Grid/AlertGrid/AlertGroup/Alert/index.tsx

@@ -41,10 +41,10 @@ const Alert: FC<{
   const classNames = [
     "components-grid-alertgrid-alertgroup-alert",
     "list-group-item bg-transparent",
-    "pl-1 pr-0 py-0",
+    "ps-1 pe-0 py-0",
     "my-1",
     "rounded-0",
-    "border-left-1 border-right-0 border-top-0 border-bottom-0",
+    "border-start-1 border-end-0 border-top-0 border-bottom-0",
     BorderClassMap[alert.state] || "border-default",
   ];
 

ui/src/Components/Grid/AlertGrid/AlertGroup/Annotation/__snapshots__/index.test.tsx.snap

@@ -34,7 +34,7 @@ exports[`<RenderNonLinkAnnotation /> matches snapshot when visible=false 1`] = `
          focusable=\\"false\\"
          data-prefix=\\"fas\\"
          data-icon=\\"search-plus\\"
-         class=\\"svg-inline--fa fa-search-plus fa-w-16 mr-1\\"
+         class=\\"svg-inline--fa fa-search-plus fa-w-16 me-1\\"
          role=\\"img\\"
          xmlns=\\"http://www.w3.org/2000/svg\\"
          viewbox=\\"0 0 512 512\\"
@@ -59,7 +59,7 @@ exports[`<RenderNonLinkAnnotation /> matches snapshot when visible=true 1`] = `
            focusable=\\"false\\"
            data-prefix=\\"fas\\"
            data-icon=\\"search-minus\\"
-           class=\\"svg-inline--fa fa-search-minus fa-w-16 mr-1\\"
+           class=\\"svg-inline--fa fa-search-minus fa-w-16 me-1\\"
            role=\\"img\\"
            xmlns=\\"http://www.w3.org/2000/svg\\"
            viewbox=\\"0 0 512 512\\"

ui/src/Components/Grid/AlertGrid/AlertGroup/Annotation/index.tsx

@@ -48,7 +48,7 @@ const RenderNonLinkAnnotation: FC<{
               onClick={() => setIsVisible(false)}
               className="cursor-pointer"
             >
-              <FontAwesomeIcon icon={faSearchMinus} className="mr-1" />
+              <FontAwesomeIcon icon={faSearchMinus} className="me-1" />
               <span className="text-muted">{name}: </span>
             </span>
             <Linkify
@@ -71,7 +71,7 @@ const RenderNonLinkAnnotation: FC<{
           </>
         ) : (
           <>
-            <FontAwesomeIcon icon={faSearchPlus} className="mr-1" />
+            <FontAwesomeIcon icon={faSearchPlus} className="me-1" />
             {name}
           </>
         )}

ui/src/Components/Grid/AlertGrid/AlertGroup/GroupFooter/__snapshots__/index.test.tsx.snap

@@ -11,7 +11,7 @@ exports[`<GroupFooter /> matches snapshot 1`] = `
                focusable=\\"false\\"
                data-prefix=\\"fas\\"
                data-icon=\\"search-minus\\"
-               class=\\"svg-inline--fa fa-search-minus fa-w-16 mr-1\\"
+               class=\\"svg-inline--fa fa-search-minus fa-w-16 me-1\\"
                role=\\"img\\"
                xmlns=\\"http://www.w3.org/2000/svg\\"
                viewbox=\\"0 0 512 512\\"
@@ -38,7 +38,7 @@ exports[`<GroupFooter /> matches snapshot 1`] = `
              focusable=\\"false\\"
              data-prefix=\\"fas\\"
              data-icon=\\"search-plus\\"
-             class=\\"svg-inline--fa fa-search-plus fa-w-16 mr-1\\"
+             class=\\"svg-inline--fa fa-search-plus fa-w-16 me-1\\"
              role=\\"img\\"
              xmlns=\\"http://www.w3.org/2000/svg\\"
              viewbox=\\"0 0 512 512\\"
@@ -53,7 +53,7 @@ exports[`<GroupFooter /> matches snapshot 1`] = `
     </div>
   </div>
   <div class=\\" tooltip-trigger\\">
-    <span class=\\"components-label badge badge-default components-label-dark components-label-with-hover\\">
+    <span class=\\"components-label badge bg-default components-label-dark components-label-with-hover\\">
       <span class=\\"components-label-name\\">
         label1:
       </span>
@@ -63,7 +63,7 @@ exports[`<GroupFooter /> matches snapshot 1`] = `
     </span>
   </div>
   <div class=\\" tooltip-trigger\\">
-    <span class=\\"components-label badge badge-default components-label-dark components-label-with-hover\\">
+    <span class=\\"components-label badge bg-default components-label-dark components-label-with-hover\\">
       <span class=\\"components-label-name\\">
         label2:
       </span>
@@ -73,7 +73,7 @@ exports[`<GroupFooter /> matches snapshot 1`] = `
     </span>
   </div>
   <div class=\\" tooltip-trigger\\">
-    <span class=\\"components-label badge badge-default components-label-dark components-label-with-hover\\">
+    <span class=\\"components-label badge bg-default components-label-dark components-label-with-hover\\">
       <span class=\\"components-label-name\\">
         @cluster:
       </span>
@@ -83,7 +83,7 @@ exports[`<GroupFooter /> matches snapshot 1`] = `
     </span>
   </div>
   <div class=\\" tooltip-trigger\\">
-    <span class=\\"components-label badge badge-default components-label-dark components-label-with-hover\\">
+    <span class=\\"components-label badge bg-default components-label-dark components-label-with-hover\\">
       <span class=\\"components-label-name\\">
         @receiver:
       </span>
@@ -128,7 +128,7 @@ exports[`<GroupFooter /> mathes snapshot when silence is rendered 1`] = `
                focusable=\\"false\\"
                data-prefix=\\"fas\\"
                data-icon=\\"search-minus\\"
-               class=\\"svg-inline--fa fa-search-minus fa-w-16 mr-1\\"
+               class=\\"svg-inline--fa fa-search-minus fa-w-16 me-1\\"
                role=\\"img\\"
                xmlns=\\"http://www.w3.org/2000/svg\\"
                viewbox=\\"0 0 512 512\\"
@@ -155,7 +155,7 @@ exports[`<GroupFooter /> mathes snapshot when silence is rendered 1`] = `
              focusable=\\"false\\"
              data-prefix=\\"fas\\"
              data-icon=\\"search-plus\\"
-             class=\\"svg-inline--fa fa-search-plus fa-w-16 mr-1\\"
+             class=\\"svg-inline--fa fa-search-plus fa-w-16 me-1\\"
              role=\\"img\\"
              xmlns=\\"http://www.w3.org/2000/svg\\"
              viewbox=\\"0 0 512 512\\"
@@ -170,7 +170,7 @@ exports[`<GroupFooter /> mathes snapshot when silence is rendered 1`] = `
     </div>
   </div>
   <div class=\\" tooltip-trigger\\">
-    <span class=\\"components-label badge badge-default components-label-dark components-label-with-hover\\">
+    <span class=\\"components-label badge bg-default components-label-dark components-label-with-hover\\">
       <span class=\\"components-label-name\\">
         label1:
       </span>
@@ -180,7 +180,7 @@ exports[`<GroupFooter /> mathes snapshot when silence is rendered 1`] = `
     </span>
   </div>
   <div class=\\" tooltip-trigger\\">
-    <span class=\\"components-label badge badge-default components-label-dark components-label-with-hover\\">
+    <span class=\\"components-label badge bg-default components-label-dark components-label-with-hover\\">
       <span class=\\"components-label-name\\">
         label2:
       </span>
@@ -190,7 +190,7 @@ exports[`<GroupFooter /> mathes snapshot when silence is rendered 1`] = `
     </span>
   </div>
   <div class=\\" tooltip-trigger\\">
-    <span class=\\"components-label badge badge-default components-label-dark components-label-with-hover\\">
+    <span class=\\"components-label badge bg-default components-label-dark components-label-with-hover\\">
       <span class=\\"components-label-name\\">
         @cluster:
       </span>
@@ -200,7 +200,7 @@ exports[`<GroupFooter /> mathes snapshot when silence is rendered 1`] = `
     </span>
   </div>
   <div class=\\" tooltip-trigger\\">
-    <span class=\\"components-label badge badge-default components-label-dark components-label-with-hover\\">
+    <span class=\\"components-label badge bg-default components-label-dark components-label-with-hover\\">
       <span class=\\"components-label-name\\">
         @receiver:
       </span>
@@ -255,10 +255,10 @@ exports[`<GroupFooter /> mathes snapshot when silence is rendered 1`] = `
               Mocked Silence
             </div>
             <div class=\\"components-managed-silence-cite mt-1\\">
-              <span class=\\"text-muted mr-2 font-italic\\">
+              <span class=\\"text-muted me-2 font-italic\\">
                 — me@example.com
               </span>
-              <span class=\\"badge badge-danger align-text-bottom p-1\\">
+              <span class=\\"badge bg-danger align-text-bottom p-1\\">
                 Expired 14 hours ago
               </span>
             </div>

ui/src/Components/Grid/AlertGrid/AlertGroup/GroupHeader/GroupMenu.tsx

@@ -174,7 +174,7 @@ const GroupMenu: FC<{
               onClick={toggle}
               className={`${
                 themed ? "text-white with-click-light" : "text-muted"
-              } cursor-pointer badge components-label components-label-with-hover with-click mr-1`}
+              } cursor-pointer badge components-label components-label-with-hover with-click me-1`}
               data-toggle="dropdown"
             >
               <FontAwesomeIcon icon={faBars} />

ui/src/Components/Grid/AlertGrid/AlertGroup/GroupHeader/index.tsx

@@ -72,7 +72,7 @@ const GroupHeader: FC<{
           />
         ))}
       </span>
-      <span className="flex-shrink-0 flex-grow-0 ml-auto pl-1">
+      <span className="flex-shrink-0 flex-grow-0 ml-auto ps-1">
         {group.stateCount.active > 0 && (
           <AlertAck
             alertStore={alertStore}

ui/src/Components/Grid/AlertGrid/AlertGroup/MenuLink.tsx

@@ -17,7 +17,7 @@ const MenuLink: FC<{
       rel="noopener noreferrer"
       onClick={afterClick}
     >
-      <FontAwesomeIcon className="mr-1" icon={icon} />
+      <FontAwesomeIcon className="me-1" icon={icon} />
       {text}
     </a>
   );

ui/src/Components/Grid/AlertGrid/AlertGroup/__snapshots__/Silences.test.tsx.snap

@@ -26,10 +26,10 @@ exports[`<RenderSilence /> renders ManagedSilence if silence is present in Alert
           Mocked Silence
         </div>
         <div class=\\"components-managed-silence-cite mt-1\\">
-          <span class=\\"text-muted mr-2 font-italic\\">
+          <span class=\\"text-muted me-2 font-italic\\">
             — me@example.com
           </span>
-          <span class=\\"badge badge-danger align-text-bottom p-1\\">
+          <span class=\\"badge bg-danger align-text-bottom p-1\\">
             Expired 21 years ago
           </span>
         </div>

ui/src/Components/Grid/AlertGrid/AlertGroup/index.test.tsx

@@ -349,7 +349,7 @@ describe("<AlertGroup /> renderConfig", () => {
     tree
       .find("Alert")
       .at(0)
-      .find("span.badge-secondary.cursor-pointer")
+      .find("span.bg-secondary.cursor-pointer")
       .at(0)
       .simulate("click");
     await act(() => promise);

ui/src/Components/Grid/AlertGrid/Grid.tsx

@@ -192,7 +192,7 @@ const Grid: FC<{
                     )
                   }
                 >
-                  <FontAwesomeIcon className="mr-2" icon={faAngleDoubleDown} />
+                  <FontAwesomeIcon className="me-2" icon={faAngleDoubleDown} />
                   Load more
                 </button>
               </div>

ui/src/Components/Grid/AlertGrid/GridLabelSelect.tsx

@@ -159,7 +159,7 @@ const GridLabelSelect: FC<{
   useOnClickOutside(ref, hide, isVisible);
 
   return (
-    <div ref={ref} className="components-label badge pl-1 pr-2">
+    <div ref={ref} className="components-label badge ps-1 pe-2">
       <Manager>
         <Reference>
           {({ ref }) => (

ui/src/Components/Grid/AlertGrid/Swimlane.tsx

@@ -22,7 +22,7 @@ const Swimlane: FC<{
   return (
     <h5 className="components-grid-swimlane d-flex flex-row justify-content-between rounded px-2 py-1 my-1 border border-dark">
       <span className="flex-shrink-0 flex-grow-0">
-        <span className="badge components-label px-0 ml-1 mr-3">
+        <span className="badge components-label px-0 ms-1 me-3">
           <FontAwesomeIcon icon={faTh} className="text-muted" />
         </span>
       </span>
@@ -48,7 +48,7 @@ const Swimlane: FC<{
           />
         </span>
       )}
-      <span className="flex-shrink-0 flex-grow-0 ml-2 mr-0">
+      <span className="flex-shrink-0 flex-grow-0 ms-2 me-0">
         <FilteringCounterBadge
           name="@state"
           value="unprocessed"
@@ -71,7 +71,7 @@ const Swimlane: FC<{
           alertStore={alertStore}
         />
         <span
-          className="text-muted cursor-pointer badge with-click with-click-dark components-label ml-2 mr-1"
+          className="text-muted cursor-pointer badge with-click with-click-dark components-label ms-2 me-1"
           onClick={onToggle}
         >
           <TooltipWrapper title="Click to toggle this grid details or Alt+Click to toggle all grids">

ui/src/Components/Grid/ReloadNeeded/__snapshots__/index.test.tsx.snap

@@ -23,7 +23,7 @@ exports[`<ReloadNeeded /> matches snapshot 1`] = `
            focusable=\\"false\\"
            data-prefix=\\"fas\\"
            data-icon=\\"spinner\\"
-           class=\\"svg-inline--fa fa-spinner fa-w-16 fa-spin mr-2\\"
+           class=\\"svg-inline--fa fa-spinner fa-w-16 fa-spin me-2\\"
            role=\\"img\\"
            xmlns=\\"http://www.w3.org/2000/svg\\"
            viewbox=\\"0 0 512 512\\"

ui/src/Components/Grid/ReloadNeeded/index.tsx

@@ -22,7 +22,7 @@ const ReloadNeeded: FC<{
           className="screen-center-icon-big text-danger mb-4"
         />
         <p className="lead text-white bg-secondary p-3 rounded text-wrap text-break">
-          <FontAwesomeIcon className="mr-2" icon={faSpinner} spin />
+          <FontAwesomeIcon className="me-2" icon={faSpinner} spin />
           All API connection attempts failed. This migth be caused by
           authentication middleware, will try to reload.
         </p>

ui/src/Components/Grid/UpgradeNeeded/__snapshots__/index.test.tsx.snap

@@ -25,7 +25,7 @@ exports[`<UpgradeNeeded /> matches snapshot 1`] = `
            focusable=\\"false\\"
            data-prefix=\\"fas\\"
            data-icon=\\"spinner\\"
-           class=\\"svg-inline--fa fa-spinner fa-w-16 fa-spin mr-2\\"
+           class=\\"svg-inline--fa fa-spinner fa-w-16 fa-spin me-2\\"
            role=\\"img\\"
            xmlns=\\"http://www.w3.org/2000/svg\\"
            viewbox=\\"0 0 512 512\\"

ui/src/Components/Grid/UpgradeNeeded/index.tsx

@@ -27,7 +27,7 @@ const UpgradeNeeded: FC<{
           />
         </div>
         <p className="lead text-muted">
-          <FontAwesomeIcon className="mr-2" icon={faSpinner} spin />
+          <FontAwesomeIcon className="me-2" icon={faSpinner} spin />
           Upgrading to a new version: {newVersion}
         </p>
       </div>

ui/src/Components/InhibitedByModal/InhibitedByModalContent.tsx

@@ -13,9 +13,7 @@ const InhibitedByModalContent: FC<{
     <>
       <div className="modal-header">
         <h5 className="modal-title">Inhibiting alerts</h5>
-        <button type="button" className="close" onClick={onHide}>
-          <span className="align-middle">&times;</span>
-        </button>
+        <button type="button" className="btn-close" onClick={onHide}></button>
       </div>
       <div className="modal-body">
         <PaginatedAlertList

ui/src/Components/InhibitedByModal/index.test.tsx

@@ -22,7 +22,7 @@ describe("<InhibitedByModal />", () => {
     const tree = mount(
       <InhibitedByModal alertStore={alertStore} fingerprints={["foo=bar"]} />
     );
-    const toggle = tree.find("span.badge.badge-light");
+    const toggle = tree.find("span.badge.bg-light");
     toggle.simulate("click");
     expect(tree.find("InhibitedByModalContent")).toHaveLength(0);
     expect(tree.find(".modal-content").find("svg.fa-spinner")).toHaveLength(1);
@@ -32,7 +32,7 @@ describe("<InhibitedByModal />", () => {
     const tree = mount(
       <InhibitedByModal alertStore={alertStore} fingerprints={["foo=bar"]} />
     );
-    const toggle = tree.find("span.badge.badge-light");
+    const toggle = tree.find("span.badge.bg-light");
     toggle.simulate("click");
     expect(tree.find(".modal-title").text()).toBe("Inhibiting alerts");
     expect(tree.find(".modal-content").find("svg.fa-spinner")).toHaveLength(0);
@@ -42,7 +42,7 @@ describe("<InhibitedByModal />", () => {
     const tree = mount(
       <InhibitedByModal alertStore={alertStore} fingerprints={["foo=bar"]} />
     );
-    const toggle = tree.find("span.badge.badge-light");
+    const toggle = tree.find("span.badge.bg-light");
 
     toggle.simulate("click");
     act(() => {
@@ -59,16 +59,16 @@ describe("<InhibitedByModal />", () => {
     expect(tree.find(".modal-title")).toHaveLength(0);
   });
 
-  it("hides the modal when button.close is clicked", () => {
+  it("hides the modal when button.btn-close is clicked", () => {
     const tree = mount(
       <InhibitedByModal alertStore={alertStore} fingerprints={["foo=bar"]} />
     );
-    const toggle = tree.find("span.badge.badge-light");
+    const toggle = tree.find("span.badge.bg-light");
 
     toggle.simulate("click");
     expect(tree.find(".modal-title").text()).toBe("Inhibiting alerts");
 
-    tree.find("button.close").simulate("click");
+    tree.find("button.btn-close").simulate("click");
     act(() => {
       jest.runOnlyPendingTimers();
     });
@@ -80,7 +80,7 @@ describe("<InhibitedByModal />", () => {
     const tree = mount(
       <InhibitedByModal alertStore={alertStore} fingerprints={["foo=bar"]} />
     );
-    const toggle = tree.find("span.badge.badge-light");
+    const toggle = tree.find("span.badge.bg-light");
     toggle.simulate("click");
     expect(document.body.className.split(" ")).toContain("modal-open");
   });
@@ -90,10 +90,10 @@ describe("<InhibitedByModal />", () => {
       <InhibitedByModal alertStore={alertStore} fingerprints={["foo=bar"]} />
     );
 
-    tree.find("span.badge.badge-light").simulate("click");
+    tree.find("span.badge.bg-light").simulate("click");
     expect(document.body.className.split(" ")).toContain("modal-open");
 
-    tree.find("span.badge.badge-light").simulate("click");
+    tree.find("span.badge.bg-light").simulate("click");
     act(() => {
       jest.runOnlyPendingTimers();
     });
@@ -105,7 +105,7 @@ describe("<InhibitedByModal />", () => {
       <InhibitedByModal alertStore={alertStore} fingerprints={["foo=bar"]} />
     );
 
-    const toggle = tree.find("span.badge.badge-light");
+    const toggle = tree.find("span.badge.bg-light");
     toggle.simulate("click");
 
     act(() => {

ui/src/Components/InhibitedByModal/index.tsx

@@ -27,7 +27,7 @@ const InhibitedByModal: FC<{
     <>
       <TooltipWrapper title="This alert is inhibited by other alerts, click to see details">
         <span
-          className="badge badge-light components-label components-label-with-hover cursor-pointer"
+          className="badge bg-light components-label components-label-with-hover cursor-pointer"
           onClick={toggle}
         >
           <FontAwesomeIcon className="text-success" icon={faVolumeMute} />

ui/src/Components/LabelSetList/__snapshots__/index.test.tsx.snap

@@ -9,7 +9,7 @@ exports[`<LabelSetList /> matches snapshot with populated list 1`] = `
   <div>
     <ul class=\\"list-group list-group-flush mb-3\\">
       <li class=\\"list-group-item px-0 pt-2 pb-1\\">
-        <span class=\\"components-label badge badge-default components-label-dark \\">
+        <span class=\\"components-label badge bg-default components-label-dark \\">
           <span class=\\"components-label-name\\">
             foo:
           </span>
@@ -19,7 +19,7 @@ exports[`<LabelSetList /> matches snapshot with populated list 1`] = `
         </span>
       </li>
       <li class=\\"list-group-item px-0 pt-2 pb-1\\">
-        <span class=\\"components-label badge badge-default components-label-dark \\">
+        <span class=\\"components-label badge bg-default components-label-dark \\">
           <span class=\\"components-label-name\\">
             job:
           </span>
@@ -29,7 +29,7 @@ exports[`<LabelSetList /> matches snapshot with populated list 1`] = `
         </span>
       </li>
       <li class=\\"list-group-item px-0 pt-2 pb-1\\">
-        <span class=\\"components-label badge badge-default components-label-dark \\">
+        <span class=\\"components-label badge bg-default components-label-dark \\">
           <span class=\\"components-label-name\\">
             instance:
           </span>
@@ -39,7 +39,7 @@ exports[`<LabelSetList /> matches snapshot with populated list 1`] = `
         </span>
       </li>
       <li class=\\"list-group-item px-0 pt-2 pb-1\\">
-        <span class=\\"components-label badge badge-default components-label-dark \\">
+        <span class=\\"components-label badge bg-default components-label-dark \\">
           <span class=\\"components-label-name\\">
             cluster:
           </span>

ui/src/Components/LabelSetList/index.tsx

@@ -69,7 +69,7 @@ const LabelSetList: FC<{
       />
     </div>
   ) : (
-    <div className="jumbotron bg-transparent">
+    <div className="px-2 py-5 bg-transparent">
       <h1 className="display-5 text-placeholder text-center">
         No alerts matched
       </h1>

ui/src/Components/Labels/FilterInputLabel/index.test.tsx

@@ -185,7 +185,7 @@ describe("<FilterInputLabel /> onChange", () => {
       />
     );
 
-    const button = tree.find("svg.close");
+    const button = tree.find("svg.fa-times");
     button.simulate("click");
     expect(alertStore.filters.values).toHaveLength(1);
     expect(alertStore.filters.values).toContainEqual(
@@ -223,7 +223,7 @@ describe("<FilterInputLabel /> counter badge", () => {
         filter={alertStore.filters.values[0]}
       />
     );
-    const counter = tree.find(".badge-pill");
+    const counter = tree.find(".rounded-pill");
     expect(counter).toHaveLength(0);
   });
 
@@ -235,7 +235,7 @@ describe("<FilterInputLabel /> counter badge", () => {
         filter={alertStore.filters.values[0]}
       />
     );
-    const counter = tree.find(".badge-pill");
+    const counter = tree.find(".rounded-pill");
     expect(counter).toHaveLength(1);
   });
 
@@ -247,7 +247,7 @@ describe("<FilterInputLabel /> counter badge", () => {
         filter={alertStore.filters.values[1]}
       />
     );
-    const counter = tree.find(".badge-pill");
+    const counter = tree.find(".rounded-pill");
     expect(counter).toHaveLength(1);
   });
 });

ui/src/Components/Labels/FilterInputLabel/index.tsx

@@ -53,7 +53,7 @@ const FilterInputLabel: FC<{
           alertStore.filters.values.filter(
             (f) => f.hits !== alertStore.info.totalAlerts
           ).length > 0 ? (
-            <span className="badge badge-light badge-pill">{filter.hits}</span>
+            <span className="badge bg-light rounded-pill">{filter.hits}</span>
           ) : null
         ) : (
           <FontAwesomeIcon icon={faSpinner} spin />
@@ -63,7 +63,7 @@ const FilterInputLabel: FC<{
       )}
       <TooltipWrapper
         title="Click to edit this filter"
-        className="components-filteredinputlabel-text flex-grow-1 flex-shrink-1 ml-1"
+        className="components-filteredinputlabel-text flex-grow-1 flex-shrink-1 ms-1"
       >
         <InlineEdit
           className="cursor-text px-1"
@@ -75,7 +75,7 @@ const FilterInputLabel: FC<{
         />
       </TooltipWrapper>
       <FontAwesomeIcon
-        className="cursor-pointer text-reset ml-1 close"
+        className="cursor-pointer text-reset ms-1"
         icon={faTimes}
         onClick={() => alertStore.filters.removeFilter(filter.raw)}
       />

ui/src/Components/Labels/FilteringCounterBadge/index.test.tsx

@@ -76,17 +76,17 @@ const validateOnClick = (
 };
 
 describe("<FilteringCounterBadge />", () => {
-  it("themed @state=unprocessed counter badge should have className 'badge-secondary'", () => {
-    validateClassName("unprocessed", "badge-secondary", true);
+  it("themed @state=unprocessed counter badge should have className 'bg-secondary'", () => {
+    validateClassName("unprocessed", "bg-secondary", true);
   });
-  it("themed @state=active counter badge should have className 'badge-secondary'", () => {
-    validateClassName("active", "badge-danger", true);
+  it("themed @state=active counter badge should have className 'bg-secondary'", () => {
+    validateClassName("active", "bg-danger", true);
   });
-  it("themed @state=suppressed counter badge should have className 'badge-secondary'", () => {
-    validateClassName("suppressed", "badge-success", true);
+  it("themed @state=suppressed counter badge should have className 'bg-secondary'", () => {
+    validateClassName("suppressed", "bg-success", true);
   });
-  it("unthemed @state=suppressed counter badge should have className 'badge-light'", () => {
-    validateClassName("suppressed", "badge-light", false);
+  it("unthemed @state=suppressed counter badge should have className 'bg-light'", () => {
+    validateClassName("suppressed", "bg-light", false);
   });
 
   it("@state=unprocessed counter badge should have empty style", () => {

ui/src/Components/Labels/FilteringCounterBadge/index.tsx

@@ -58,7 +58,7 @@ const FilteringCounterBadge: FC<{
     alertStore,
     name,
     value,
-    "badge-pill components-label-with-hover"
+    "rounded-pill components-label-with-hover"
   );
 
   return (
@@ -72,8 +72,8 @@ const FilteringCounterBadge: FC<{
             themed
               ? cs.className
               : [
-                  `badge-${defaultColor}`,
-                  "badge-pill components-label-with-hover",
+                  `bg-${defaultColor}`,
+                  "rounded-pill components-label-with-hover",
                   ...cs.baseClassNames,
                 ].join(" ")
           }

ui/src/Components/Labels/FilteringLabel/__snapshots__/index.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`<FilteringLabel /> matches snapshot 1`] = `
 "
 <div class=\\" tooltip-trigger\\">
-  <span class=\\"components-label badge badge-default components-label-dark components-label-with-hover\\">
+  <span class=\\"components-label badge bg-default components-label-dark components-label-with-hover\\">
     <span class=\\"components-label-name\\">
       foo:
     </span>

ui/src/Components/Labels/LabelWithPercent/__snapshots__/index.test.tsx.snap

@@ -3,8 +3,8 @@
 exports[`<LabelWithPercent /> matches snapshot with isActive=true 1`] = `
 "
 <div class=\\"d-inline-block mw-100\\">
-  <span class=\\"components-label badge badge-default components-label-dark components-label-with-hover mb-0 pl-0 text-left\\">
-    <span class=\\"mr-1 px-1 bg-primary text-white components-labelWithPercent-percent\\">
+  <span class=\\"components-label badge bg-default components-label-dark components-label-with-hover mb-0 ps-0 text-start\\">
+    <span class=\\"me-1 px-1 bg-primary text-white components-labelWithPercent-percent\\">
       25
     </span>
     <span>
@@ -19,7 +19,7 @@ exports[`<LabelWithPercent /> matches snapshot with isActive=true 1`] = `
          focusable=\\"false\\"
          data-prefix=\\"fas\\"
          data-icon=\\"times\\"
-         class=\\"svg-inline--fa fa-times fa-w-11 cursor-pointer text-reset ml-1 close\\"
+         class=\\"svg-inline--fa fa-times fa-w-11 cursor-pointer text-reset ms-1\\"
          role=\\"img\\"
          xmlns=\\"http://www.w3.org/2000/svg\\"
          viewbox=\\"0 0 352 512\\"
@@ -31,7 +31,7 @@ exports[`<LabelWithPercent /> matches snapshot with isActive=true 1`] = `
       </path>
     </svg>
   </span>
-  <div class=\\"progress components-labelWithPercent-progress mr-1\\">
+  <div class=\\"progress components-labelWithPercent-progress me-1\\">
     <div class=\\"progress-bar bg-warning\\"
          role=\\"progressbar\\"
          style=\\"width: 50%;\\"
@@ -48,8 +48,8 @@ exports[`<LabelWithPercent /> matches snapshot with isActive=true 1`] = `
 exports[`<LabelWithPercent /> matches snapshot with offset=0 1`] = `
 "
 <div class=\\"d-inline-block mw-100\\">
-  <span class=\\"components-label badge badge-default components-label-dark components-label-with-hover mb-0 pl-0 text-left\\">
-    <span class=\\"mr-1 px-1 bg-primary text-white components-labelWithPercent-percent\\">
+  <span class=\\"components-label badge bg-default components-label-dark components-label-with-hover mb-0 ps-0 text-start\\">
+    <span class=\\"me-1 px-1 bg-primary text-white components-labelWithPercent-percent\\">
       25
     </span>
     <span>
@@ -61,7 +61,7 @@ exports[`<LabelWithPercent /> matches snapshot with offset=0 1`] = `
       </span>
     </span>
   </span>
-  <div class=\\"progress components-labelWithPercent-progress mr-1\\">
+  <div class=\\"progress components-labelWithPercent-progress me-1\\">
     <div class=\\"progress-bar bg-warning\\"
          role=\\"progressbar\\"
          style=\\"width: 50%;\\"
@@ -78,8 +78,8 @@ exports[`<LabelWithPercent /> matches snapshot with offset=0 1`] = `
 exports[`<LabelWithPercent /> matches snapshot with offset=25 1`] = `
 "
 <div class=\\"d-inline-block mw-100\\">
-  <span class=\\"components-label badge badge-default components-label-dark components-label-with-hover mb-0 pl-0 text-left\\">
-    <span class=\\"mr-1 px-1 bg-primary text-white components-labelWithPercent-percent\\">
+  <span class=\\"components-label badge bg-default components-label-dark components-label-with-hover mb-0 ps-0 text-start\\">
+    <span class=\\"me-1 px-1 bg-primary text-white components-labelWithPercent-percent\\">
       25
     </span>
     <span>
@@ -91,7 +91,7 @@ exports[`<LabelWithPercent /> matches snapshot with offset=25 1`] = `
       </span>
     </span>
   </span>
-  <div class=\\"progress components-labelWithPercent-progress mr-1\\">
+  <div class=\\"progress components-labelWithPercent-progress me-1\\">
     <div class=\\"progress-bar bg-transparent\\"
          role=\\"progressbar\\"
          style=\\"width: 25%;\\"

ui/src/Components/Labels/LabelWithPercent/index.tsx

@@ -42,7 +42,7 @@ const LabelWithPercent: FC<{
     alertStore,
     name,
     value,
-    "components-label-with-hover mb-0 pl-0 text-left"
+    "components-label-with-hover mb-0 ps-0 text-start"
   );
 
   const progressBarBg =
@@ -51,7 +51,7 @@ const LabelWithPercent: FC<{
   return (
     <div className="d-inline-block mw-100">
       <span className={cs.className} style={cs.style}>
-        <span className="mr-1 px-1 bg-primary text-white components-labelWithPercent-percent">
+        <span className="me-1 px-1 bg-primary text-white components-labelWithPercent-percent">
           {hits}
         </span>
         <span onClick={handleClick}>
@@ -60,14 +60,14 @@ const LabelWithPercent: FC<{
         </span>
         {isActive ? (
           <FontAwesomeIcon
-            className="cursor-pointer text-reset ml-1 close"
+            className="cursor-pointer text-reset ms-1"
             style={{ fontSize: "100%" }}
             icon={faTimes}
             onClick={removeFromFilters}
           />
         ) : null}
       </span>
-      <div className="progress components-labelWithPercent-progress mr-1">
+      <div className="progress components-labelWithPercent-progress me-1">
         {offset === 0 ? null : (
           <div
             className="progress-bar bg-transparent"

ui/src/Components/Labels/StaticLabel/__snapshots__/index.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`<StaticLabel /> matches snapshot 1`] = `
 "
-<span class=\\"components-label badge badge-default components-label-dark \\">
+<span class=\\"components-label badge bg-default components-label-dark \\">
   <span class=\\"components-label-name\\">
     foo:
   </span>

ui/src/Components/Labels/Utils.test.ts

@@ -46,20 +46,18 @@ describe("<GetClassAndStyle />", () => {
 
   it("@state=active label should use StateLabelClassMap.active class", () => {
     const cs = GetClassAndStyle(alertStore, "@state", "active");
-    expect(cs.colorClassNames).toContain(`badge-${StateLabelClassMap.active}`);
+    expect(cs.colorClassNames).toContain(`bg-${StateLabelClassMap.active}`);
   });
 
   it("@state=suppressed label should use StateLabelClassMap.suppressed class", () => {
     const cs = GetClassAndStyle(alertStore, "@state", "suppressed");
-    expect(cs.colorClassNames).toContain(
-      `badge-${StateLabelClassMap.suppressed}`
-    );
+    expect(cs.colorClassNames).toContain(`bg-${StateLabelClassMap.suppressed}`);
   });
 
   it("@state=unprocessed label should use StateLabelClassMap.unprocessed class", () => {
     const cs = GetClassAndStyle(alertStore, "@state", "unprocessed");
     expect(cs.colorClassNames).toContain(
-      `badge-${StateLabelClassMap.unprocessed}`
+      `bg-${StateLabelClassMap.unprocessed}`
     );
   });
 

ui/src/Components/Labels/Utils.ts

@@ -38,7 +38,7 @@ const GetClassAndStyle = (
   } else if (name === StaticLabels.State) {
     data.colorClassNames.push(
       StateLabelClassMap[value as AlertStateT]
-        ? `${elementType}-${StateLabelClassMap[value as AlertStateT]}`
+        ? `bg-${StateLabelClassMap[value as AlertStateT]}`
         : DefaultLabelClassMap[elementType]
     );
   } else if (alertStore.settings.values.staticColorLabels.includes(name)) {

ui/src/Components/MainModal/Configuration/AlertGroupCollapseConfiguration.tsx

@@ -34,7 +34,7 @@ const AlertGroupCollapseConfiguration: FC<{
   const context = React.useContext(ThemeContext);
 
   return (
-    <div className="form-group mb-0">
+    <div className="mb-0">
       <Select
         styles={context.reactSelectStyles}
         classNamePrefix="react-select"

ui/src/Components/MainModal/Configuration/AlertGroupConfiguration.tsx

@@ -16,7 +16,7 @@ const AlertGroupConfiguration: FC<{
   };
 
   return (
-    <div className="form-group mb-0 text-center">
+    <div className="p-3 text-center">
       <Range
         step={1}
         min={1}

ui/src/Components/MainModal/Configuration/AlertGroupSortConfiguration.tsx

@@ -42,7 +42,7 @@ const AlertGroupSortConfiguration: FC<{
   const context = React.useContext(ThemeContext);
 
   return (
-    <div className="form-group mb-0">
+    <div className="mb-0">
       <div className="d-flex flex-fill flex-lg-row flex-column justify-content-between">
         <div className="flex-shrink-0 flex-grow-1 flex-basis-auto">
           <Select
@@ -67,17 +67,17 @@ const AlertGroupSortConfiguration: FC<{
           </div>
         ) : null}
         {hideReverse ? null : (
-          <div className="flex-shrink-1 flex-grow-0 form-check form-check-inline flex-basis-auto mt-1 mt-lg-0 ml-0 ml-lg-1 mr-0">
-            <span className="custom-control custom-switch">
+          <div className="flex-shrink-1 flex-grow-0 form-check form-check-inline flex-basis-auto my-1 my-lg-auto ms-0 ms-lg-2 me-0 px-0">
+            <span className="form-check form-switch">
               <input
                 id="configuration-sort-reverse"
-                className="custom-control-input"
+                className="form-check-input"
                 type="checkbox"
                 checked={settingsStore.gridConfig.config.reverseSort || false}
                 onChange={(event) => onSortReverseChange(event.target.checked)}
               />
               <label
-                className="custom-control-label cursor-pointer mr-3"
+                className="form-check-label cursor-pointer"
                 htmlFor="configuration-sort-reverse"
               >
                 Reverse

ui/src/Components/MainModal/Configuration/AlertGroupTitleBarColor.tsx

@@ -12,12 +12,12 @@ const AlertGroupTitleBarColor: FC<{
   };
 
   return (
-    <div className="form-group mb-0">
-      <div className="form-check form-check-inline">
-        <span className="custom-control custom-switch">
+    <div className="mb-0">
+      <div className="form-check form-check-inline mx-0 px-0">
+        <span className="form-check form-switch">
           <input
             id="configuration-colortitlebar"
-            className="custom-control-input"
+            className="form-check-input"
             type="checkbox"
             checked={
               settingsStore.alertGroupConfig.config.colorTitleBar || false
@@ -25,7 +25,7 @@ const AlertGroupTitleBarColor: FC<{
             onChange={(event) => onChange(event.target.checked)}
           />
           <label
-            className="custom-control-label cursor-pointer mr-3"
+            className="form-check-label cursor-pointer me-3"
             htmlFor="configuration-colortitlebar"
           >
             Color group titlebar

ui/src/Components/MainModal/Configuration/AlertGroupWidthConfiguration.tsx

@@ -18,7 +18,7 @@ const AlertGroupWidthConfiguration: FC<{
   }, 200);
 
   return (
-    <div className="form-group mb-0 text-center">
+    <div className="p-3 text-center">
       <Range
         step={10}
         min={300}

ui/src/Components/MainModal/Configuration/AnimationsConfiguration.tsx

@@ -12,18 +12,18 @@ const AnimationsConfiguration: FC<{
   };
 
   return (
-    <div className="form-group mb-0">
-      <div className="form-check form-check-inline">
-        <span className="custom-control custom-switch">
+    <div className="mb-0">
+      <div className="form-check form-check-inline mx-0 px-0">
+        <span className="form-check form-switch">
           <input
             id="configuration-animations"
-            className="custom-control-input"
+            className="form-check-input"
             type="checkbox"
             checked={settingsStore.themeConfig.config.animations || false}
             onChange={(event) => onChange(event.target.checked)}
           />
           <label
-            className="custom-control-label cursor-pointer mr-3"
+            className="form-check-label cursor-pointer me-3"
             htmlFor="configuration-animations"
           >
             Enable animations

ui/src/Components/MainModal/Configuration/FetchConfiguration.tsx

@@ -16,7 +16,7 @@ const FetchConfiguration: FC<{
   };
 
   return (
-    <div className="form-group mb-0 text-center">
+    <div className="p-3 text-center">
       <Range
         step={10}
         min={10}

ui/src/Components/MainModal/Configuration/FilterBarConfiguration.tsx

@@ -11,24 +11,22 @@ const FilterBarConfiguration: FC<{
     settingsStore.filterBarConfig.setAutohide(value);
   };
   return (
-    <div className="form-group mb-0">
-      <div className="form-check form-check-inline">
-        <span className="custom-control custom-switch">
-          <input
-            id="configuration-autohide"
-            className="custom-control-input"
-            type="checkbox"
-            checked={settingsStore.filterBarConfig.config.autohide || false}
-            onChange={(event) => onAutohideChange(event.target.checked)}
-          />
-          <label
-            className="custom-control-label cursor-pointer mr-3"
-            htmlFor="configuration-autohide"
-          >
-            Hide filter bar and alert details when idle
-          </label>
-        </span>
-      </div>
+    <div className="form-check form-check-inline px-0 mx-0">
+      <span className="form-check form-switch">
+        <input
+          id="configuration-autohide"
+          className="form-check-input"
+          type="checkbox"
+          checked={settingsStore.filterBarConfig.config.autohide || false}
+          onChange={(event) => onAutohideChange(event.target.checked)}
+        />
+        <label
+          className="form-check-label cursor-pointer me-3"
+          htmlFor="configuration-autohide"
+        >
+          Hide filter bar and alert details when idle
+        </label>
+      </span>
     </div>
   );
 });

ui/src/Components/MainModal/Configuration/MultiGridConfiguration.tsx

@@ -13,16 +13,16 @@ const MultiGridConfiguration: FC<{
   };
 
   return (
-    <div className="form-group mb-0">
+    <div className="mb-0">
       <div className="d-flex flex-fill flex-lg-row flex-column justify-content-between">
         <div className="flex-shrink-0 flex-grow-1 flex-basis-auto mx-0 mx-lg-1 mt-1 mt-lg-0">
           <GridLabelName settingsStore={settingsStore} />
         </div>
-        <div className="flex-shrink-1 flex-grow-0 form-check form-check-inline flex-basis-auto mt-1 mt-lg-0 ml-0 ml-lg-1 mr-0">
-          <span className="custom-control custom-switch">
+        <div className="flex-shrink-1 flex-grow-0 form-check form-check-inline flex-basis-auto my-1 my-lg-auto ms-0 ms-lg-2 me-0 px-0">
+          <span className="form-check form-switch">
             <input
               id="configuration-multigrid-sort-reverse"
-              className="custom-control-input"
+              className="form-check-input"
               type="checkbox"
               checked={
                 settingsStore.multiGridConfig.config.gridSortReverse || false
@@ -30,7 +30,7 @@ const MultiGridConfiguration: FC<{
               onChange={(event) => onSortReverseChange(event.target.checked)}
             />
             <label
-              className="custom-control-label cursor-pointer mr-3"
+              className="form-check-label cursor-pointer"
               htmlFor="configuration-multigrid-sort-reverse"
             >
               Reverse order

ui/src/Components/MainModal/Configuration/ThemeConfiguration.tsx

@@ -34,7 +34,7 @@ const ThemeConfiguration: FC<{
   const context = React.useContext(ThemeContext);
 
   return (
-    <div className="form-group mb-2">
+    <div className="mb-2">
       <Select
         styles={context.reactSelectStyles}
         classNamePrefix="react-select"

ui/src/Components/MainModal/Configuration/__snapshots__/AlertGroupCollapseConfiguration.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`<AlertGroupCollapseConfiguration /> matches snapshot with default values 1`] = `
 "
-<div class=\\"form-group mb-0\\">
+<div class=\\"mb-0\\">
   <div class=\\" css-2b097c-container\\">
     <span aria-live=\\"polite\\"
           aria-atomic=\\"false\\"

ui/src/Components/MainModal/Configuration/__snapshots__/AlertGroupConfiguration.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`<AlertGroupConfiguration /> matches snapshot with default values 1`] = `
 "
-<div class=\\"form-group mb-0 text-center\\">
+<div class=\\"p-3 text-center\\">
   <div class=\\"input-range-track\\"
        style=\\"transform: scale(1); cursor: pointer;\\"
   >

ui/src/Components/MainModal/Configuration/__snapshots__/AlertGroupSortConfiguration.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`<AlertGroupSortConfiguration /> matches snapshot with default values 1`] = `
 "
-<div class=\\"form-group mb-0\\">
+<div class=\\"mb-0\\">
   <div class=\\"d-flex flex-fill flex-lg-row flex-column justify-content-between\\">
     <div class=\\"flex-shrink-0 flex-grow-1 flex-basis-auto\\">
       <div class=\\" css-2b097c-container\\">

ui/src/Components/MainModal/Configuration/__snapshots__/AlertGroupTitleBarColor.test.tsx.snap

@@ -2,14 +2,14 @@
 
 exports[`<AlertGroupTitleBarColor /> matches snapshot with default values 1`] = `
 "
-<div class=\\"form-group mb-0\\">
-  <div class=\\"form-check form-check-inline\\">
-    <span class=\\"custom-control custom-switch\\">
+<div class=\\"mb-0\\">
+  <div class=\\"form-check form-check-inline mx-0 px-0\\">
+    <span class=\\"form-check form-switch\\">
       <input id=\\"configuration-colortitlebar\\"
-             class=\\"custom-control-input\\"
+             class=\\"form-check-input\\"
              type=\\"checkbox\\"
       >
-      <label class=\\"custom-control-label cursor-pointer mr-3\\"
+      <label class=\\"form-check-label cursor-pointer me-3\\"
              for=\\"configuration-colortitlebar\\"
       >
         Color group titlebar

ui/src/Components/MainModal/Configuration/__snapshots__/AlertGroupWidthConfiguration.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`<AlertGroupWidthConfiguration /> matches snapshot with default values 1`] = `
 "
-<div class=\\"form-group mb-0 text-center\\">
+<div class=\\"p-3 text-center\\">
   <div class=\\"input-range-track\\"
        style=\\"transform: scale(1); cursor: pointer;\\"
   >

ui/src/Components/MainModal/Configuration/__snapshots__/AnimationsConfiguration.test.tsx.snap

@@ -2,15 +2,15 @@
 
 exports[`<AnimationsConfiguration /> matches snapshot with default values 1`] = `
 "
-<div class=\\"form-group mb-0\\">
-  <div class=\\"form-check form-check-inline\\">
-    <span class=\\"custom-control custom-switch\\">
+<div class=\\"mb-0\\">
+  <div class=\\"form-check form-check-inline mx-0 px-0\\">
+    <span class=\\"form-check form-switch\\">
       <input id=\\"configuration-animations\\"
-             class=\\"custom-control-input\\"
+             class=\\"form-check-input\\"
              type=\\"checkbox\\"
              checked
       >
-      <label class=\\"custom-control-label cursor-pointer mr-3\\"
+      <label class=\\"form-check-label cursor-pointer me-3\\"
              for=\\"configuration-animations\\"
       >
         Enable animations

ui/src/Components/MainModal/Configuration/__snapshots__/FetchConfiguration.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`<FetchConfiguration /> matches snapshot with default values 1`] = `
 "
-<div class=\\"form-group mb-0 text-center\\">
+<div class=\\"p-3 text-center\\">
   <div class=\\"input-range-track\\"
        style=\\"transform: scale(1); cursor: pointer;\\"
   >

ui/src/Components/MainModal/Configuration/__snapshots__/FilterBarConfiguration.test.tsx.snap

@@ -2,21 +2,19 @@
 
 exports[`<FilterBarConfiguration /> matches snapshot with default values 1`] = `
 "
-<div class=\\"form-group mb-0\\">
-  <div class=\\"form-check form-check-inline\\">
-    <span class=\\"custom-control custom-switch\\">
-      <input id=\\"configuration-autohide\\"
-             class=\\"custom-control-input\\"
-             type=\\"checkbox\\"
-             checked
-      >
-      <label class=\\"custom-control-label cursor-pointer mr-3\\"
-             for=\\"configuration-autohide\\"
-      >
-        Hide filter bar and alert details when idle
-      </label>
-    </span>
-  </div>
+<div class=\\"form-check form-check-inline px-0 mx-0\\">
+  <span class=\\"form-check form-switch\\">
+    <input id=\\"configuration-autohide\\"
+           class=\\"form-check-input\\"
+           type=\\"checkbox\\"
+           checked
+    >
+    <label class=\\"form-check-label cursor-pointer me-3\\"
+           for=\\"configuration-autohide\\"
+    >
+      Hide filter bar and alert details when idle
+    </label>
+  </span>
 </div>
 "
 `;

ui/src/Components/MainModal/Configuration/__snapshots__/MultiGridConfiguration.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`<MultiGridConfiguration /> matches snapshot with default values 1`] = `
 "
-<div class=\\"form-group mb-0\\">
+<div class=\\"mb-0\\">
   <div class=\\"d-flex flex-fill flex-lg-row flex-column justify-content-between\\">
     <div class=\\"flex-shrink-0 flex-grow-1 flex-basis-auto mx-0 mx-lg-1 mt-1 mt-lg-0\\">
       <div class=\\" css-2b097c-container\\">
@@ -58,13 +58,13 @@ exports[`<MultiGridConfiguration /> matches snapshot with default values 1`] = `
         </div>
       </div>
     </div>
-    <div class=\\"flex-shrink-1 flex-grow-0 form-check form-check-inline flex-basis-auto mt-1 mt-lg-0 ml-0 ml-lg-1 mr-0\\">
-      <span class=\\"custom-control custom-switch\\">
+    <div class=\\"flex-shrink-1 flex-grow-0 form-check form-check-inline flex-basis-auto my-1 my-lg-auto ms-0 ms-lg-2 me-0 px-0\\">
+      <span class=\\"form-check form-switch\\">
         <input id=\\"configuration-multigrid-sort-reverse\\"
-               class=\\"custom-control-input\\"
+               class=\\"form-check-input\\"
                type=\\"checkbox\\"
         >
-        <label class=\\"custom-control-label cursor-pointer mr-3\\"
+        <label class=\\"form-check-label cursor-pointer\\"
                for=\\"configuration-multigrid-sort-reverse\\"
         >
           Reverse order

ui/src/Components/MainModal/Configuration/__snapshots__/ThemeConfiguration.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`<ThemeConfiguration /> matches snapshot with default values 1`] = `
 "
-<div class=\\"form-group mb-2\\">
+<div class=\\"mb-2\\">
   <div class=\\" css-2b097c-container\\">
     <span aria-live=\\"polite\\"
           aria-atomic=\\"false\\"

ui/src/Components/MainModal/Configuration/__snapshots__/index.test.tsx.snap

@@ -2,87 +2,55 @@
 
 exports[`<Configuration /> matches snapshot 1`] = `
 "
-<form class=\\"px-3 accordion\\">
-  <div class=\\"accordion card\\">
-    <div class=\\"card-header cursor-pointer active\\">
-      <div class=\\"d-flex flex-row justify-content-between\\">
-        <div>
-          Refresh interval
-        </div>
-        <div>
-          <svg aria-hidden=\\"true\\"
-               focusable=\\"false\\"
-               data-prefix=\\"fas\\"
-               data-icon=\\"chevron-down\\"
-               class=\\"svg-inline--fa fa-chevron-down fa-w-14 text-muted\\"
-               role=\\"img\\"
-               xmlns=\\"http://www.w3.org/2000/svg\\"
-               viewbox=\\"0 0 448 512\\"
-               style=\\"transition: transform 0.25s ease-in-out;\\"
+<div class=\\"accordion\\">
+  <div class=\\"accordion-item\\">
+    <h2 class=\\"accordion-header\\">
+      <button class=\\"accordion-button \\"
+              type=\\"button\\"
+      >
+        Refresh interval
+      </button>
+    </h2>
+    <div class=\\"accordion-collapse show\\">
+      <div class=\\"accordion-body\\">
+        <div class=\\"p-3 text-center\\">
+          <div class=\\"input-range-track\\"
+               style=\\"transform: scale(1); cursor: pointer;\\"
           >
-            <path fill=\\"currentColor\\"
-                  d=\\"M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z\\"
+            <div class=\\"input-range-thumb\\"
+                 style=\\"position: absolute; z-index: 0; cursor: grab; user-select: none; transform: translate(NaNpx, NaNpx);\\"
+                 tabindex=\\"0\\"
+                 aria-valuemax=\\"120\\"
+                 aria-valuemin=\\"10\\"
+                 aria-valuenow=\\"30\\"
+                 draggable=\\"false\\"
+                 role=\\"slider\\"
             >
-            </path>
-          </svg>
-        </div>
-      </div>
-    </div>
-    <div class=\\"card-body my-2\\">
-      <div class=\\"form-group mb-0 text-center\\">
-        <div class=\\"input-range-track\\"
-             style=\\"transform: scale(1); cursor: pointer;\\"
-        >
-          <div class=\\"input-range-thumb\\"
-               style=\\"position: absolute; z-index: 0; cursor: grab; user-select: none; transform: translate(NaNpx, NaNpx);\\"
-               tabindex=\\"0\\"
-               aria-valuemax=\\"120\\"
-               aria-valuemin=\\"10\\"
-               aria-valuenow=\\"30\\"
-               draggable=\\"false\\"
-               role=\\"slider\\"
-          >
-            30s
+              30s
+            </div>
           </div>
         </div>
       </div>
     </div>
   </div>
-  <div class=\\"accordion card\\">
-    <div class=\\"card-header cursor-pointer active\\">
-      <div class=\\"d-flex flex-row justify-content-between\\">
-        <div>
-          Filter bar configuration
-        </div>
-        <div>
-          <svg aria-hidden=\\"true\\"
-               focusable=\\"false\\"
-               data-prefix=\\"fas\\"
-               data-icon=\\"chevron-down\\"
-               class=\\"svg-inline--fa fa-chevron-down fa-w-14 text-muted\\"
-               role=\\"img\\"
-               xmlns=\\"http://www.w3.org/2000/svg\\"
-               viewbox=\\"0 0 448 512\\"
-               style=\\"transition: transform 0.25s ease-in-out;\\"
-          >
-            <path fill=\\"currentColor\\"
-                  d=\\"M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z\\"
-            >
-            </path>
-          </svg>
-        </div>
-      </div>
-    </div>
-    <div class=\\"card-body my-2\\">
-      <div class=\\"form-group mb-0\\">
-        <div class=\\"form-check form-check-inline\\">
-          <span class=\\"custom-control custom-switch\\">
+  <div class=\\"accordion-item\\">
+    <h2 class=\\"accordion-header\\">
+      <button class=\\"accordion-button \\"
+              type=\\"button\\"
+      >
+        Filter bar configuration
+      </button>
+    </h2>
+    <div class=\\"accordion-collapse show\\">
+      <div class=\\"accordion-body\\">
+        <div class=\\"form-check form-check-inline px-0 mx-0\\">
+          <span class=\\"form-check form-switch\\">
             <input id=\\"configuration-autohide\\"
-                   class=\\"custom-control-input\\"
+                   class=\\"form-check-input\\"
                    type=\\"checkbox\\"
                    checked
             >
-            <label class=\\"custom-control-label cursor-pointer mr-3\\"
+            <label class=\\"form-check-label cursor-pointer me-3\\"
                    for=\\"configuration-autohide\\"
             >
               Hide filter bar and alert details when idle
@@ -92,469 +60,97 @@ exports[`<Configuration /> matches snapshot 1`] = `
       </div>
     </div>
   </div>
-  <div class=\\"accordion card\\">
-    <div class=\\"card-header cursor-pointer active\\">
-      <div class=\\"d-flex flex-row justify-content-between\\">
-        <div>
-          Theme
-        </div>
-        <div>
-          <svg aria-hidden=\\"true\\"
-               focusable=\\"false\\"
-               data-prefix=\\"fas\\"
-               data-icon=\\"chevron-down\\"
-               class=\\"svg-inline--fa fa-chevron-down fa-w-14 text-muted\\"
-               role=\\"img\\"
-               xmlns=\\"http://www.w3.org/2000/svg\\"
-               viewbox=\\"0 0 448 512\\"
-               style=\\"transition: transform 0.25s ease-in-out;\\"
-          >
-            <path fill=\\"currentColor\\"
-                  d=\\"M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z\\"
+  <div class=\\"accordion-item\\">
+    <h2 class=\\"accordion-header\\">
+      <button class=\\"accordion-button \\"
+              type=\\"button\\"
+      >
+        Theme
+      </button>
+    </h2>
+    <div class=\\"accordion-collapse show\\">
+      <div class=\\"accordion-body\\">
+        <div class=\\"mb-2\\">
+          <div class=\\" css-2b097c-container\\">
+            <span aria-live=\\"polite\\"
+                  aria-atomic=\\"false\\"
+                  aria-relevant=\\"additions text\\"
+                  class=\\"css-1f43avz-a11yText-A11yText\\"
             >
-            </path>
-          </svg>
-        </div>
-      </div>
-    </div>
-    <div class=\\"card-body my-2\\">
-      <div class=\\"form-group mb-2\\">
-        <div class=\\" css-2b097c-container\\">
-          <span aria-live=\\"polite\\"
-                aria-atomic=\\"false\\"
-                aria-relevant=\\"additions text\\"
-                class=\\"css-1f43avz-a11yText-A11yText\\"
-          >
-          </span>
-          <div class=\\"react-select__control css-cat782-control\\">
-            <div class=\\"react-select__value-container react-select__value-container--has-value css-17yk2dy-ValueContainer\\">
-              <div class=\\"react-select__single-value css-1wh03ml-singleValue\\">
-                Automatic theme, follow browser preference
-              </div>
-              <div class=\\"css-ps6ina-Input\\">
-                <div class=\\"react-select__input\\"
-                     style=\\"display: inline-block;\\"
-                >
-                  <input autocapitalize=\\"none\\"
-                         autocomplete=\\"off\\"
-                         autocorrect=\\"off\\"
-                         id=\\"react-select-configuration-theme-input\\"
-                         spellcheck=\\"false\\"
-                         tabindex=\\"0\\"
-                         type=\\"text\\"
-                         aria-autocomplete=\\"list\\"
-                         style=\\"box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;\\"
-                         value
-                  >
-                  <div style=\\"position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;\\">
-                  </div>
+            </span>
+            <div class=\\"react-select__control css-cat782-control\\">
+              <div class=\\"react-select__value-container react-select__value-container--has-value css-17yk2dy-ValueContainer\\">
+                <div class=\\"react-select__single-value css-1wh03ml-singleValue\\">
+                  Automatic theme, follow browser preference
                 </div>
-              </div>
-            </div>
-            <div class=\\"react-select__indicators css-vcwr3k-IndicatorsContainer\\">
-              <span class=\\"react-select__indicator-separator css-1okebmr-indicatorSeparator\\">
-              </span>
-              <div class=\\"react-select__indicator react-select__dropdown-indicator css-tlfecz-indicatorContainer\\"
-                   aria-hidden=\\"true\\"
-              >
-                <svg height=\\"20\\"
-                     width=\\"20\\"
-                     viewbox=\\"0 0 20 20\\"
-                     aria-hidden=\\"true\\"
-                     focusable=\\"false\\"
-                     class=\\"css-tj5bde-Svg\\"
-                >
-                  <path d=\\"M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z\\">
-                  </path>
-                </svg>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class=\\"form-group mb-0\\">
-        <div class=\\"form-check form-check-inline\\">
-          <span class=\\"custom-control custom-switch\\">
-            <input id=\\"configuration-colortitlebar\\"
-                   class=\\"custom-control-input\\"
-                   type=\\"checkbox\\"
-            >
-            <label class=\\"custom-control-label cursor-pointer mr-3\\"
-                   for=\\"configuration-colortitlebar\\"
-            >
-              Color group titlebar
-            </label>
-          </span>
-        </div>
-      </div>
-      <div class=\\"form-group mb-0\\">
-        <div class=\\"form-check form-check-inline\\">
-          <span class=\\"custom-control custom-switch\\">
-            <input id=\\"configuration-animations\\"
-                   class=\\"custom-control-input\\"
-                   type=\\"checkbox\\"
-                   checked
-            >
-            <label class=\\"custom-control-label cursor-pointer mr-3\\"
-                   for=\\"configuration-animations\\"
-            >
-              Enable animations
-            </label>
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class=\\"accordion card\\">
-    <div class=\\"card-header cursor-pointer active\\">
-      <div class=\\"d-flex flex-row justify-content-between\\">
-        <div>
-          Minimal alert group width
-        </div>
-        <div>
-          <svg aria-hidden=\\"true\\"
-               focusable=\\"false\\"
-               data-prefix=\\"fas\\"
-               data-icon=\\"chevron-down\\"
-               class=\\"svg-inline--fa fa-chevron-down fa-w-14 text-muted\\"
-               role=\\"img\\"
-               xmlns=\\"http://www.w3.org/2000/svg\\"
-               viewbox=\\"0 0 448 512\\"
-               style=\\"transition: transform 0.25s ease-in-out;\\"
-          >
-            <path fill=\\"currentColor\\"
-                  d=\\"M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z\\"
-            >
-            </path>
-          </svg>
-        </div>
-      </div>
-    </div>
-    <div class=\\"card-body my-2\\">
-      <div class=\\"form-group mb-0 text-center\\">
-        <div class=\\"input-range-track\\"
-             style=\\"transform: scale(1); cursor: pointer;\\"
-        >
-          <div class=\\"input-range-thumb\\"
-               style=\\"position: absolute; z-index: 0; cursor: grab; user-select: none; transform: translate(NaNpx, NaNpx);\\"
-               tabindex=\\"0\\"
-               aria-valuemax=\\"800\\"
-               aria-valuemin=\\"300\\"
-               aria-valuenow=\\"420\\"
-               draggable=\\"false\\"
-               role=\\"slider\\"
-          >
-            420
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class=\\"accordion card\\">
-    <div class=\\"card-header cursor-pointer active\\">
-      <div class=\\"d-flex flex-row justify-content-between\\">
-        <div>
-          Default number of alerts to show per group
-        </div>
-        <div>
-          <svg aria-hidden=\\"true\\"
-               focusable=\\"false\\"
-               data-prefix=\\"fas\\"
-               data-icon=\\"chevron-down\\"
-               class=\\"svg-inline--fa fa-chevron-down fa-w-14 text-muted\\"
-               role=\\"img\\"
-               xmlns=\\"http://www.w3.org/2000/svg\\"
-               viewbox=\\"0 0 448 512\\"
-               style=\\"transition: transform 0.25s ease-in-out;\\"
-          >
-            <path fill=\\"currentColor\\"
-                  d=\\"M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z\\"
-            >
-            </path>
-          </svg>
-        </div>
-      </div>
-    </div>
-    <div class=\\"card-body my-2\\">
-      <div class=\\"form-group mb-0 text-center\\">
-        <div class=\\"input-range-track\\"
-             style=\\"transform: scale(1); cursor: pointer;\\"
-        >
-          <div class=\\"input-range-thumb\\"
-               style=\\"position: absolute; z-index: 0; cursor: grab; user-select: none; transform: translate(NaNpx, NaNpx);\\"
-               tabindex=\\"0\\"
-               aria-valuemax=\\"10\\"
-               aria-valuemin=\\"1\\"
-               aria-valuenow=\\"5\\"
-               draggable=\\"false\\"
-               role=\\"slider\\"
-          >
-            5
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class=\\"accordion card\\">
-    <div class=\\"card-header cursor-pointer active\\">
-      <div class=\\"d-flex flex-row justify-content-between\\">
-        <div>
-          Default alert group display
-        </div>
-        <div>
-          <svg aria-hidden=\\"true\\"
-               focusable=\\"false\\"
-               data-prefix=\\"fas\\"
-               data-icon=\\"chevron-down\\"
-               class=\\"svg-inline--fa fa-chevron-down fa-w-14 text-muted\\"
-               role=\\"img\\"
-               xmlns=\\"http://www.w3.org/2000/svg\\"
-               viewbox=\\"0 0 448 512\\"
-               style=\\"transition: transform 0.25s ease-in-out;\\"
-          >
-            <path fill=\\"currentColor\\"
-                  d=\\"M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z\\"
-            >
-            </path>
-          </svg>
-        </div>
-      </div>
-    </div>
-    <div class=\\"card-body my-2\\">
-      <div class=\\"form-group mb-0\\">
-        <div class=\\" css-2b097c-container\\">
-          <span aria-live=\\"polite\\"
-                aria-atomic=\\"false\\"
-                aria-relevant=\\"additions text\\"
-                class=\\"css-1f43avz-a11yText-A11yText\\"
-          >
-          </span>
-          <div class=\\"react-select__control css-cat782-control\\">
-            <div class=\\"react-select__value-container react-select__value-container--has-value css-17yk2dy-ValueContainer\\">
-              <div class=\\"react-select__single-value css-1wh03ml-singleValue\\">
-                Collapse on mobile
-              </div>
-              <div class=\\"css-ps6ina-Input\\">
-                <div class=\\"react-select__input\\"
-                     style=\\"display: inline-block;\\"
-                >
-                  <input autocapitalize=\\"none\\"
-                         autocomplete=\\"off\\"
-                         autocorrect=\\"off\\"
-                         id=\\"react-select-configuration-collapse-input\\"
-                         spellcheck=\\"false\\"
-                         tabindex=\\"0\\"
-                         type=\\"text\\"
-                         aria-autocomplete=\\"list\\"
-                         style=\\"box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;\\"
-                         value
+                <div class=\\"css-ps6ina-Input\\">
+                  <div class=\\"react-select__input\\"
+                       style=\\"display: inline-block;\\"
                   >
-                  <div style=\\"position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;\\">
-                  </div>
-                </div>
-              </div>
-            </div>
-            <div class=\\"react-select__indicators css-vcwr3k-IndicatorsContainer\\">
-              <span class=\\"react-select__indicator-separator css-1okebmr-indicatorSeparator\\">
-              </span>
-              <div class=\\"react-select__indicator react-select__dropdown-indicator css-tlfecz-indicatorContainer\\"
-                   aria-hidden=\\"true\\"
-              >
-                <svg height=\\"20\\"
-                     width=\\"20\\"
-                     viewbox=\\"0 0 20 20\\"
-                     aria-hidden=\\"true\\"
-                     focusable=\\"false\\"
-                     class=\\"css-tj5bde-Svg\\"
-                >
-                  <path d=\\"M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z\\">
-                  </path>
-                </svg>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class=\\"accordion card\\">
-    <div class=\\"card-header cursor-pointer active\\">
-      <div class=\\"d-flex flex-row justify-content-between\\">
-        <div>
-          Grid sort order
-        </div>
-        <div>
-          <svg aria-hidden=\\"true\\"
-               focusable=\\"false\\"
-               data-prefix=\\"fas\\"
-               data-icon=\\"chevron-down\\"
-               class=\\"svg-inline--fa fa-chevron-down fa-w-14 text-muted\\"
-               role=\\"img\\"
-               xmlns=\\"http://www.w3.org/2000/svg\\"
-               viewbox=\\"0 0 448 512\\"
-               style=\\"transition: transform 0.25s ease-in-out;\\"
-          >
-            <path fill=\\"currentColor\\"
-                  d=\\"M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z\\"
-            >
-            </path>
-          </svg>
-        </div>
-      </div>
-    </div>
-    <div class=\\"card-body my-2\\">
-      <div class=\\"form-group mb-0\\">
-        <div class=\\"d-flex flex-fill flex-lg-row flex-column justify-content-between\\">
-          <div class=\\"flex-shrink-0 flex-grow-1 flex-basis-auto\\">
-            <div class=\\" css-2b097c-container\\">
-              <span aria-live=\\"polite\\"
-                    aria-atomic=\\"false\\"
-                    aria-relevant=\\"additions text\\"
-                    class=\\"css-1f43avz-a11yText-A11yText\\"
-              >
-              </span>
-              <div class=\\"react-select__control css-cat782-control\\">
-                <div class=\\"react-select__value-container react-select__value-container--has-value css-17yk2dy-ValueContainer\\">
-                  <div class=\\"react-select__single-value css-1wh03ml-singleValue\\">
-                    Use defaults from karma config file
-                  </div>
-                  <div class=\\"css-ps6ina-Input\\">
-                    <div class=\\"react-select__input\\"
-                         style=\\"display: inline-block;\\"
+                    <input autocapitalize=\\"none\\"
+                           autocomplete=\\"off\\"
+                           autocorrect=\\"off\\"
+                           id=\\"react-select-configuration-theme-input\\"
+                           spellcheck=\\"false\\"
+                           tabindex=\\"0\\"
+                           type=\\"text\\"
+                           aria-autocomplete=\\"list\\"
+                           style=\\"box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;\\"
+                           value
                     >
-                      <input autocapitalize=\\"none\\"
-                             autocomplete=\\"off\\"
-                             autocorrect=\\"off\\"
-                             id=\\"react-select-configuration-sort-order-input\\"
-                             spellcheck=\\"false\\"
-                             tabindex=\\"0\\"
-                             type=\\"text\\"
-                             aria-autocomplete=\\"list\\"
-                             style=\\"box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;\\"
-                             value
-                      >
-                      <div style=\\"position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;\\">
-                      </div>
+                    <div style=\\"position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;\\">
                     </div>
                   </div>
                 </div>
-                <div class=\\"react-select__indicators css-vcwr3k-IndicatorsContainer\\">
-                  <span class=\\"react-select__indicator-separator css-1okebmr-indicatorSeparator\\">
-                  </span>
-                  <div class=\\"react-select__indicator react-select__dropdown-indicator css-tlfecz-indicatorContainer\\"
+              </div>
+              <div class=\\"react-select__indicators css-vcwr3k-IndicatorsContainer\\">
+                <span class=\\"react-select__indicator-separator css-1okebmr-indicatorSeparator\\">
+                </span>
+                <div class=\\"react-select__indicator react-select__dropdown-indicator css-tlfecz-indicatorContainer\\"
+                     aria-hidden=\\"true\\"
+                >
+                  <svg height=\\"20\\"
+                       width=\\"20\\"
+                       viewbox=\\"0 0 20 20\\"
                        aria-hidden=\\"true\\"
+                       focusable=\\"false\\"
+                       class=\\"css-tj5bde-Svg\\"
                   >
-                    <svg height=\\"20\\"
-                         width=\\"20\\"
-                         viewbox=\\"0 0 20 20\\"
-                         aria-hidden=\\"true\\"
-                         focusable=\\"false\\"
-                         class=\\"css-tj5bde-Svg\\"
-                    >
-                      <path d=\\"M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z\\">
-                      </path>
-                    </svg>
-                  </div>
+                    <path d=\\"M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z\\">
+                    </path>
+                  </svg>
                 </div>
               </div>
             </div>
           </div>
         </div>
-      </div>
-    </div>
-  </div>
-  <div class=\\"accordion card\\">
-    <div class=\\"card-header cursor-pointer active\\">
-      <div class=\\"d-flex flex-row justify-content-between\\">
-        <div>
-          Multi-grid source label
-        </div>
-        <div>
-          <svg aria-hidden=\\"true\\"
-               focusable=\\"false\\"
-               data-prefix=\\"fas\\"
-               data-icon=\\"chevron-down\\"
-               class=\\"svg-inline--fa fa-chevron-down fa-w-14 text-muted\\"
-               role=\\"img\\"
-               xmlns=\\"http://www.w3.org/2000/svg\\"
-               viewbox=\\"0 0 448 512\\"
-               style=\\"transition: transform 0.25s ease-in-out;\\"
-          >
-            <path fill=\\"currentColor\\"
-                  d=\\"M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z\\"
-            >
-            </path>
-          </svg>
-        </div>
-      </div>
-    </div>
-    <div class=\\"card-body my-2\\">
-      <div class=\\"form-group mb-0\\">
-        <div class=\\"d-flex flex-fill flex-lg-row flex-column justify-content-between\\">
-          <div class=\\"flex-shrink-0 flex-grow-1 flex-basis-auto mx-0 mx-lg-1 mt-1 mt-lg-0\\">
-            <div class=\\" css-2b097c-container\\">
-              <span aria-live=\\"polite\\"
-                    aria-atomic=\\"false\\"
-                    aria-relevant=\\"additions text\\"
-                    class=\\"css-1f43avz-a11yText-A11yText\\"
-              >
-              </span>
-              <div class=\\"react-select__control css-cat782-control\\">
-                <div class=\\"react-select__value-container react-select__value-container--has-value css-17yk2dy-ValueContainer\\">
-                  <div class=\\"react-select__single-value css-1wh03ml-singleValue\\">
-                    Disable multi-grid
-                  </div>
-                  <div class=\\"css-ps6ina-Input\\">
-                    <div class=\\"react-select__input\\"
-                         style=\\"display: inline-block;\\"
-                    >
-                      <input autocapitalize=\\"none\\"
-                             autocomplete=\\"off\\"
-                             autocorrect=\\"off\\"
-                             id=\\"react-select-configuration-grid-label-input\\"
-                             spellcheck=\\"false\\"
-                             tabindex=\\"0\\"
-                             type=\\"text\\"
-                             aria-autocomplete=\\"list\\"
-                             style=\\"box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;\\"
-                             value
-                      >
-                      <div style=\\"position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;\\">
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <div class=\\"react-select__indicators css-vcwr3k-IndicatorsContainer\\">
-                  <span class=\\"react-select__indicator-separator css-1okebmr-indicatorSeparator\\">
-                  </span>
-                  <div class=\\"react-select__indicator react-select__dropdown-indicator css-tlfecz-indicatorContainer\\"
-                       aria-hidden=\\"true\\"
-                  >
-                    <svg height=\\"20\\"
-                         width=\\"20\\"
-                         viewbox=\\"0 0 20 20\\"
-                         aria-hidden=\\"true\\"
-                         focusable=\\"false\\"
-                         class=\\"css-tj5bde-Svg\\"
-                    >
-                      <path d=\\"M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z\\">
-                      </path>
-                    </svg>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class=\\"flex-shrink-1 flex-grow-0 form-check form-check-inline flex-basis-auto mt-1 mt-lg-0 ml-0 ml-lg-1 mr-0\\">
-            <span class=\\"custom-control custom-switch\\">
-              <input id=\\"configuration-multigrid-sort-reverse\\"
-                     class=\\"custom-control-input\\"
+        <div class=\\"mb-0\\">
+          <div class=\\"form-check form-check-inline mx-0 px-0\\">
+            <span class=\\"form-check form-switch\\">
+              <input id=\\"configuration-colortitlebar\\"
+                     class=\\"form-check-input\\"
                      type=\\"checkbox\\"
               >
-              <label class=\\"custom-control-label cursor-pointer mr-3\\"
-                     for=\\"configuration-multigrid-sort-reverse\\"
+              <label class=\\"form-check-label cursor-pointer me-3\\"
+                     for=\\"configuration-colortitlebar\\"
               >
-                Reverse order
+                Color group titlebar
+              </label>
+            </span>
+          </div>
+        </div>
+        <div class=\\"mb-0\\">
+          <div class=\\"form-check form-check-inline mx-0 px-0\\">
+            <span class=\\"form-check form-switch\\">
+              <input id=\\"configuration-animations\\"
+                     class=\\"form-check-input\\"
+                     type=\\"checkbox\\"
+                     checked
+              >
+              <label class=\\"form-check-label cursor-pointer me-3\\"
+                     for=\\"configuration-animations\\"
+              >
+                Enable animations
               </label>
             </span>
           </div>
@@ -562,6 +158,288 @@ exports[`<Configuration /> matches snapshot 1`] = `
       </div>
     </div>
   </div>
-</form>
+  <div class=\\"accordion-item\\">
+    <h2 class=\\"accordion-header\\">
+      <button class=\\"accordion-button \\"
+              type=\\"button\\"
+      >
+        Minimal alert group width
+      </button>
+    </h2>
+    <div class=\\"accordion-collapse show\\">
+      <div class=\\"accordion-body\\">
+        <div class=\\"p-3 text-center\\">
+          <div class=\\"input-range-track\\"
+               style=\\"transform: scale(1); cursor: pointer;\\"
+          >
+            <div class=\\"input-range-thumb\\"
+                 style=\\"position: absolute; z-index: 0; cursor: grab; user-select: none; transform: translate(NaNpx, NaNpx);\\"
+                 tabindex=\\"0\\"
+                 aria-valuemax=\\"800\\"
+                 aria-valuemin=\\"300\\"
+                 aria-valuenow=\\"420\\"
+                 draggable=\\"false\\"
+                 role=\\"slider\\"
+            >
+              420
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class=\\"accordion-item\\">
+    <h2 class=\\"accordion-header\\">
+      <button class=\\"accordion-button \\"
+              type=\\"button\\"
+      >
+        Default number of alerts to show per group
+      </button>
+    </h2>
+    <div class=\\"accordion-collapse show\\">
+      <div class=\\"accordion-body\\">
+        <div class=\\"p-3 text-center\\">
+          <div class=\\"input-range-track\\"
+               style=\\"transform: scale(1); cursor: pointer;\\"
+          >
+            <div class=\\"input-range-thumb\\"
+                 style=\\"position: absolute; z-index: 0; cursor: grab; user-select: none; transform: translate(NaNpx, NaNpx);\\"
+                 tabindex=\\"0\\"
+                 aria-valuemax=\\"10\\"
+                 aria-valuemin=\\"1\\"
+                 aria-valuenow=\\"5\\"
+                 draggable=\\"false\\"
+                 role=\\"slider\\"
+            >
+              5
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class=\\"accordion-item\\">
+    <h2 class=\\"accordion-header\\">
+      <button class=\\"accordion-button \\"
+              type=\\"button\\"
+      >
+        Default alert group display
+      </button>
+    </h2>
+    <div class=\\"accordion-collapse show\\">
+      <div class=\\"accordion-body\\">
+        <div class=\\"mb-0\\">
+          <div class=\\" css-2b097c-container\\">
+            <span aria-live=\\"polite\\"
+                  aria-atomic=\\"false\\"
+                  aria-relevant=\\"additions text\\"
+                  class=\\"css-1f43avz-a11yText-A11yText\\"
+            >
+            </span>
+            <div class=\\"react-select__control css-cat782-control\\">
+              <div class=\\"react-select__value-container react-select__value-container--has-value css-17yk2dy-ValueContainer\\">
+                <div class=\\"react-select__single-value css-1wh03ml-singleValue\\">
+                  Collapse on mobile
+                </div>
+                <div class=\\"css-ps6ina-Input\\">
+                  <div class=\\"react-select__input\\"
+                       style=\\"display: inline-block;\\"
+                  >
+                    <input autocapitalize=\\"none\\"
+                           autocomplete=\\"off\\"
+                           autocorrect=\\"off\\"
+                           id=\\"react-select-configuration-collapse-input\\"
+                           spellcheck=\\"false\\"
+                           tabindex=\\"0\\"
+                           type=\\"text\\"
+                           aria-autocomplete=\\"list\\"
+                           style=\\"box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;\\"
+                           value
+                    >
+                    <div style=\\"position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;\\">
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class=\\"react-select__indicators css-vcwr3k-IndicatorsContainer\\">
+                <span class=\\"react-select__indicator-separator css-1okebmr-indicatorSeparator\\">
+                </span>
+                <div class=\\"react-select__indicator react-select__dropdown-indicator css-tlfecz-indicatorContainer\\"
+                     aria-hidden=\\"true\\"
+                >
+                  <svg height=\\"20\\"
+                       width=\\"20\\"
+                       viewbox=\\"0 0 20 20\\"
+                       aria-hidden=\\"true\\"
+                       focusable=\\"false\\"
+                       class=\\"css-tj5bde-Svg\\"
+                  >
+                    <path d=\\"M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z\\">
+                    </path>
+                  </svg>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class=\\"accordion-item\\">
+    <h2 class=\\"accordion-header\\">
+      <button class=\\"accordion-button \\"
+              type=\\"button\\"
+      >
+        Grid sort order
+      </button>
+    </h2>
+    <div class=\\"accordion-collapse show\\">
+      <div class=\\"accordion-body\\">
+        <div class=\\"mb-0\\">
+          <div class=\\"d-flex flex-fill flex-lg-row flex-column justify-content-between\\">
+            <div class=\\"flex-shrink-0 flex-grow-1 flex-basis-auto\\">
+              <div class=\\" css-2b097c-container\\">
+                <span aria-live=\\"polite\\"
+                      aria-atomic=\\"false\\"
+                      aria-relevant=\\"additions text\\"
+                      class=\\"css-1f43avz-a11yText-A11yText\\"
+                >
+                </span>
+                <div class=\\"react-select__control css-cat782-control\\">
+                  <div class=\\"react-select__value-container react-select__value-container--has-value css-17yk2dy-ValueContainer\\">
+                    <div class=\\"react-select__single-value css-1wh03ml-singleValue\\">
+                      Use defaults from karma config file
+                    </div>
+                    <div class=\\"css-ps6ina-Input\\">
+                      <div class=\\"react-select__input\\"
+                           style=\\"display: inline-block;\\"
+                      >
+                        <input autocapitalize=\\"none\\"
+                               autocomplete=\\"off\\"
+                               autocorrect=\\"off\\"
+                               id=\\"react-select-configuration-sort-order-input\\"
+                               spellcheck=\\"false\\"
+                               tabindex=\\"0\\"
+                               type=\\"text\\"
+                               aria-autocomplete=\\"list\\"
+                               style=\\"box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;\\"
+                               value
+                        >
+                        <div style=\\"position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;\\">
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class=\\"react-select__indicators css-vcwr3k-IndicatorsContainer\\">
+                    <span class=\\"react-select__indicator-separator css-1okebmr-indicatorSeparator\\">
+                    </span>
+                    <div class=\\"react-select__indicator react-select__dropdown-indicator css-tlfecz-indicatorContainer\\"
+                         aria-hidden=\\"true\\"
+                    >
+                      <svg height=\\"20\\"
+                           width=\\"20\\"
+                           viewbox=\\"0 0 20 20\\"
+                           aria-hidden=\\"true\\"
+                           focusable=\\"false\\"
+                           class=\\"css-tj5bde-Svg\\"
+                      >
+                        <path d=\\"M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z\\">
+                        </path>
+                      </svg>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class=\\"accordion-item\\">
+    <h2 class=\\"accordion-header\\">
+      <button class=\\"accordion-button \\"
+              type=\\"button\\"
+      >
+        Multi-grid source label
+      </button>
+    </h2>
+    <div class=\\"accordion-collapse show\\">
+      <div class=\\"accordion-body\\">
+        <div class=\\"mb-0\\">
+          <div class=\\"d-flex flex-fill flex-lg-row flex-column justify-content-between\\">
+            <div class=\\"flex-shrink-0 flex-grow-1 flex-basis-auto mx-0 mx-lg-1 mt-1 mt-lg-0\\">
+              <div class=\\" css-2b097c-container\\">
+                <span aria-live=\\"polite\\"
+                      aria-atomic=\\"false\\"
+                      aria-relevant=\\"additions text\\"
+                      class=\\"css-1f43avz-a11yText-A11yText\\"
+                >
+                </span>
+                <div class=\\"react-select__control css-cat782-control\\">
+                  <div class=\\"react-select__value-container react-select__value-container--has-value css-17yk2dy-ValueContainer\\">
+                    <div class=\\"react-select__single-value css-1wh03ml-singleValue\\">
+                      Disable multi-grid
+                    </div>
+                    <div class=\\"css-ps6ina-Input\\">
+                      <div class=\\"react-select__input\\"
+                           style=\\"display: inline-block;\\"
+                      >
+                        <input autocapitalize=\\"none\\"
+                               autocomplete=\\"off\\"
+                               autocorrect=\\"off\\"
+                               id=\\"react-select-configuration-grid-label-input\\"
+                               spellcheck=\\"false\\"
+                               tabindex=\\"0\\"
+                               type=\\"text\\"
+                               aria-autocomplete=\\"list\\"
+                               style=\\"box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;\\"
+                               value
+                        >
+                        <div style=\\"position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;\\">
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class=\\"react-select__indicators css-vcwr3k-IndicatorsContainer\\">
+                    <span class=\\"react-select__indicator-separator css-1okebmr-indicatorSeparator\\">
+                    </span>
+                    <div class=\\"react-select__indicator react-select__dropdown-indicator css-tlfecz-indicatorContainer\\"
+                         aria-hidden=\\"true\\"
+                    >
+                      <svg height=\\"20\\"
+                           width=\\"20\\"
+                           viewbox=\\"0 0 20 20\\"
+                           aria-hidden=\\"true\\"
+                           focusable=\\"false\\"
+                           class=\\"css-tj5bde-Svg\\"
+                      >
+                        <path d=\\"M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z\\">
+                        </path>
+                      </svg>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class=\\"flex-shrink-1 flex-grow-0 form-check form-check-inline flex-basis-auto my-1 my-lg-auto ms-0 ms-lg-2 me-0 px-0\\">
+              <span class=\\"form-check form-switch\\">
+                <input id=\\"configuration-multigrid-sort-reverse\\"
+                       class=\\"form-check-input\\"
+                       type=\\"checkbox\\"
+                >
+                <label class=\\"form-check-label cursor-pointer\\"
+                       for=\\"configuration-multigrid-sort-reverse\\"
+                >
+                  Reverse order
+                </label>
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
 "
 `;

ui/src/Components/MainModal/Configuration/index.tsx

@@ -1,7 +1,7 @@
 import { FC } from "react";
 
 import { Settings } from "Stores/Settings";
-import { Accordion } from "Components/Accordion";
+import { Accordion, AccordionItem } from "Components/Accordion";
 import { FetchConfiguration } from "./FetchConfiguration";
 import { FilterBarConfiguration } from "./FilterBarConfiguration";
 import { AlertGroupConfiguration } from "./AlertGroupConfiguration";
@@ -17,18 +17,18 @@ const Configuration: FC<{
   settingsStore: Settings;
   defaultIsOpen: boolean;
 }> = ({ settingsStore, defaultIsOpen }) => (
-  <form className="px-3 accordion">
-    <Accordion
+  <Accordion>
+    <AccordionItem
       text="Refresh interval"
       content={<FetchConfiguration settingsStore={settingsStore} />}
       defaultIsOpen={true}
     />
-    <Accordion
+    <AccordionItem
       text="Filter bar configuration"
       content={<FilterBarConfiguration settingsStore={settingsStore} />}
       defaultIsOpen={defaultIsOpen}
     />
-    <Accordion
+    <AccordionItem
       text="Theme"
       content={
         <>
@@ -39,34 +39,34 @@ const Configuration: FC<{
       }
       defaultIsOpen={defaultIsOpen}
     />
-    <Accordion
+    <AccordionItem
       text="Minimal alert group width"
       content={<AlertGroupWidthConfiguration settingsStore={settingsStore} />}
       defaultIsOpen={defaultIsOpen}
     />
-    <Accordion
+    <AccordionItem
       text="Default number of alerts to show per group"
       content={<AlertGroupConfiguration settingsStore={settingsStore} />}
       defaultIsOpen={defaultIsOpen}
     />
-    <Accordion
+    <AccordionItem
       text="Default alert group display"
       content={
         <AlertGroupCollapseConfiguration settingsStore={settingsStore} />
       }
       defaultIsOpen={defaultIsOpen}
     />
-    <Accordion
+    <AccordionItem
       text="Grid sort order"
       content={<AlertGroupSortConfiguration settingsStore={settingsStore} />}
       defaultIsOpen={defaultIsOpen}
     />
-    <Accordion
+    <AccordionItem
       text="Multi-grid source label"
       content={<MultiGridConfiguration settingsStore={settingsStore} />}
       defaultIsOpen={defaultIsOpen}
     />
-  </form>
+  </Accordion>
 );
 
 export { Configuration };

ui/src/Components/MainModal/Help.tsx

@@ -3,7 +3,7 @@ import { FC, ReactNode } from "react";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faInfoCircle } from "@fortawesome/free-solid-svg-icons/faInfoCircle";
 
-import { Accordion } from "Components/Accordion";
+import { Accordion, AccordionItem } from "Components/Accordion";
 
 const FilterOperatorHelp: FC<{
   operator: string;
@@ -38,14 +38,14 @@ const QueryHelp: FC<{
       <div>
         Supported operators:{" "}
         {operators.map((op) => (
-          <kbd key={op} className="mr-1">
+          <kbd key={op} className="me-1">
             {op}
           </kbd>
         ))}
       </div>
       {warning ? (
         <div className="my-1 alert alert-secondary">
-          <FontAwesomeIcon icon={faInfoCircle} className="mr-1" />
+          <FontAwesomeIcon icon={faInfoCircle} className="me-1" />
           {warning}
         </div>
       ) : null}
@@ -60,15 +60,15 @@ const FilterExample: FC<{
 }> = ({ example, children }) => (
   <li>
     <div>
-      <span className="badge badge-info">{example}</span>
+      <span className="badge bg-info">{example}</span>
     </div>
     <div>{children}</div>
   </li>
 );
 
 const Help: FC<{ defaultIsOpen: boolean }> = ({ defaultIsOpen }) => (
-  <div className="accordion">
-    <Accordion
+  <Accordion>
+    <AccordionItem
       text="Fiter operators"
       content={
         <dl>
@@ -106,7 +106,7 @@ const Help: FC<{ defaultIsOpen: boolean }> = ({ defaultIsOpen }) => (
       }
       defaultIsOpen={true}
     />
-    <Accordion
+    <AccordionItem
       text="Filtering using alert labels"
       content={
         <dl>
@@ -144,7 +144,7 @@ const Help: FC<{ defaultIsOpen: boolean }> = ({ defaultIsOpen }) => (
       }
       defaultIsOpen={defaultIsOpen}
     />
-    <Accordion
+    <AccordionItem
       text="Filtering alerts using special filters"
       content={
         <dl>
@@ -312,7 +312,7 @@ const Help: FC<{ defaultIsOpen: boolean }> = ({ defaultIsOpen }) => (
       }
       defaultIsOpen={defaultIsOpen}
     />
-  </div>
+  </Accordion>
 );
 
 export { Help };

ui/src/Components/MainModal/MainModalContent.tsx

@@ -39,9 +39,11 @@ const MainModalContent: FC<{
             active={tab === "help"}
             onClick={() => setTab("help")}
           />
-          <button type="button" className="close" onClick={onHide}>
-            <span>&times;</span>
-          </button>
+          <button
+            type="button"
+            className="btn-close my-auto"
+            onClick={onHide}
+          ></button>
         </nav>
       </div>
       <div className="modal-body">
@@ -57,7 +59,7 @@ const MainModalContent: FC<{
         <Observer>
           {() =>
             alertStore.info.authentication.enabled ? (
-              <span className="text-muted mr-2">
+              <span className="text-muted me-2">
                 Username: {alertStore.info.authentication.username}
               </span>
             ) : null

ui/src/Components/MainModal/__snapshots__/MainModalContent.test.tsx.snap

@@ -12,96 +12,61 @@ exports[`<MainModalContent /> matches snapshot 1`] = `
         Help
       </span>
       <button type=\\"button\\"
-              class=\\"close\\"
+              class=\\"btn-close my-auto\\"
       >
-        <span>
-          ×
-        </span>
       </button>
     </nav>
   </div>
   <div class=\\"modal-body\\">
-    <form class=\\"px-3 accordion\\">
-      <div class=\\"accordion card\\">
-        <div class=\\"card-header cursor-pointer active\\">
-          <div class=\\"d-flex flex-row justify-content-between\\">
-            <div>
-              Refresh interval
-            </div>
-            <div>
-              <svg aria-hidden=\\"true\\"
-                   focusable=\\"false\\"
-                   data-prefix=\\"fas\\"
-                   data-icon=\\"chevron-down\\"
-                   class=\\"svg-inline--fa fa-chevron-down fa-w-14 text-muted\\"
-                   role=\\"img\\"
-                   xmlns=\\"http://www.w3.org/2000/svg\\"
-                   viewbox=\\"0 0 448 512\\"
-                   style=\\"transition: transform 0.25s ease-in-out;\\"
+    <div class=\\"accordion\\">
+      <div class=\\"accordion-item\\">
+        <h2 class=\\"accordion-header\\">
+          <button class=\\"accordion-button \\"
+                  type=\\"button\\"
+          >
+            Refresh interval
+          </button>
+        </h2>
+        <div class=\\"accordion-collapse show\\">
+          <div class=\\"accordion-body\\">
+            <div class=\\"p-3 text-center\\">
+              <div class=\\"input-range-track\\"
+                   style=\\"transform: scale(1); cursor: pointer;\\"
               >
-                <path fill=\\"currentColor\\"
-                      d=\\"M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z\\"
+                <div class=\\"input-range-thumb\\"
+                     style=\\"position: absolute; z-index: 0; cursor: grab; user-select: none; transform: translate(NaNpx, NaNpx);\\"
+                     tabindex=\\"0\\"
+                     aria-valuemax=\\"120\\"
+                     aria-valuemin=\\"10\\"
+                     aria-valuenow=\\"30\\"
+                     draggable=\\"false\\"
+                     role=\\"slider\\"
                 >
-                </path>
-              </svg>
-            </div>
-          </div>
-        </div>
-        <div class=\\"card-body my-2\\">
-          <div class=\\"form-group mb-0 text-center\\">
-            <div class=\\"input-range-track\\"
-                 style=\\"transform: scale(1); cursor: pointer;\\"
-            >
-              <div class=\\"input-range-thumb\\"
-                   style=\\"position: absolute; z-index: 0; cursor: grab; user-select: none; transform: translate(NaNpx, NaNpx);\\"
-                   tabindex=\\"0\\"
-                   aria-valuemax=\\"120\\"
-                   aria-valuemin=\\"10\\"
-                   aria-valuenow=\\"30\\"
-                   draggable=\\"false\\"
-                   role=\\"slider\\"
-              >
-                30s
+                  30s
+                </div>
               </div>
             </div>
           </div>
         </div>
       </div>
-      <div class=\\"accordion card\\">
-        <div class=\\"card-header cursor-pointer active\\">
-          <div class=\\"d-flex flex-row justify-content-between\\">
-            <div>
-              Filter bar configuration
-            </div>
-            <div>
-              <svg aria-hidden=\\"true\\"
-                   focusable=\\"false\\"
-                   data-prefix=\\"fas\\"
-                   data-icon=\\"chevron-down\\"
-                   class=\\"svg-inline--fa fa-chevron-down fa-w-14 text-muted\\"
-                   role=\\"img\\"
-                   xmlns=\\"http://www.w3.org/2000/svg\\"
-                   viewbox=\\"0 0 448 512\\"
-                   style=\\"transition: transform 0.25s ease-in-out;\\"
-              >
-                <path fill=\\"currentColor\\"
-                      d=\\"M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z\\"
-                >
-                </path>
-              </svg>
-            </div>
-          </div>
-        </div>
-        <div class=\\"card-body my-2\\">
-          <div class=\\"form-group mb-0\\">
-            <div class=\\"form-check form-check-inline\\">
-              <span class=\\"custom-control custom-switch\\">
+      <div class=\\"accordion-item\\">
+        <h2 class=\\"accordion-header\\">
+          <button class=\\"accordion-button \\"
+                  type=\\"button\\"
+          >
+            Filter bar configuration
+          </button>
+        </h2>
+        <div class=\\"accordion-collapse show\\">
+          <div class=\\"accordion-body\\">
+            <div class=\\"form-check form-check-inline px-0 mx-0\\">
+              <span class=\\"form-check form-switch\\">
                 <input id=\\"configuration-autohide\\"
-                       class=\\"custom-control-input\\"
+                       class=\\"form-check-input\\"
                        type=\\"checkbox\\"
                        checked
                 >
-                <label class=\\"custom-control-label cursor-pointer mr-3\\"
+                <label class=\\"form-check-label cursor-pointer me-3\\"
                        for=\\"configuration-autohide\\"
                 >
                   Hide filter bar and alert details when idle
@@ -111,469 +76,97 @@ exports[`<MainModalContent /> matches snapshot 1`] = `
           </div>
         </div>
       </div>
-      <div class=\\"accordion card\\">
-        <div class=\\"card-header cursor-pointer active\\">
-          <div class=\\"d-flex flex-row justify-content-between\\">
-            <div>
-              Theme
-            </div>
-            <div>
-              <svg aria-hidden=\\"true\\"
-                   focusable=\\"false\\"
-                   data-prefix=\\"fas\\"
-                   data-icon=\\"chevron-down\\"
-                   class=\\"svg-inline--fa fa-chevron-down fa-w-14 text-muted\\"
-                   role=\\"img\\"
-                   xmlns=\\"http://www.w3.org/2000/svg\\"
-                   viewbox=\\"0 0 448 512\\"
-                   style=\\"transition: transform 0.25s ease-in-out;\\"
-              >
-                <path fill=\\"currentColor\\"
-                      d=\\"M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z\\"
+      <div class=\\"accordion-item\\">
+        <h2 class=\\"accordion-header\\">
+          <button class=\\"accordion-button \\"
+                  type=\\"button\\"
+          >
+            Theme
+          </button>
+        </h2>
+        <div class=\\"accordion-collapse show\\">
+          <div class=\\"accordion-body\\">
+            <div class=\\"mb-2\\">
+              <div class=\\" css-2b097c-container\\">
+                <span aria-live=\\"polite\\"
+                      aria-atomic=\\"false\\"
+                      aria-relevant=\\"additions text\\"
+                      class=\\"css-1f43avz-a11yText-A11yText\\"
                 >
-                </path>
-              </svg>
-            </div>
-          </div>
-        </div>
-        <div class=\\"card-body my-2\\">
-          <div class=\\"form-group mb-2\\">
-            <div class=\\" css-2b097c-container\\">
-              <span aria-live=\\"polite\\"
-                    aria-atomic=\\"false\\"
-                    aria-relevant=\\"additions text\\"
-                    class=\\"css-1f43avz-a11yText-A11yText\\"
-              >
-              </span>
-              <div class=\\"react-select__control css-cat782-control\\">
-                <div class=\\"react-select__value-container react-select__value-container--has-value css-17yk2dy-ValueContainer\\">
-                  <div class=\\"react-select__single-value css-1wh03ml-singleValue\\">
-                    Automatic theme, follow browser preference
-                  </div>
-                  <div class=\\"css-ps6ina-Input\\">
-                    <div class=\\"react-select__input\\"
-                         style=\\"display: inline-block;\\"
-                    >
-                      <input autocapitalize=\\"none\\"
-                             autocomplete=\\"off\\"
-                             autocorrect=\\"off\\"
-                             id=\\"react-select-configuration-theme-input\\"
-                             spellcheck=\\"false\\"
-                             tabindex=\\"0\\"
-                             type=\\"text\\"
-                             aria-autocomplete=\\"list\\"
-                             style=\\"box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;\\"
-                             value
-                      >
-                      <div style=\\"position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;\\">
-                      </div>
+                </span>
+                <div class=\\"react-select__control css-cat782-control\\">
+                  <div class=\\"react-select__value-container react-select__value-container--has-value css-17yk2dy-ValueContainer\\">
+                    <div class=\\"react-select__single-value css-1wh03ml-singleValue\\">
+                      Automatic theme, follow browser preference
                     </div>
-                  </div>
-                </div>
-                <div class=\\"react-select__indicators css-vcwr3k-IndicatorsContainer\\">
-                  <span class=\\"react-select__indicator-separator css-1okebmr-indicatorSeparator\\">
-                  </span>
-                  <div class=\\"react-select__indicator react-select__dropdown-indicator css-tlfecz-indicatorContainer\\"
-                       aria-hidden=\\"true\\"
-                  >
-                    <svg height=\\"20\\"
-                         width=\\"20\\"
-                         viewbox=\\"0 0 20 20\\"
-                         aria-hidden=\\"true\\"
-                         focusable=\\"false\\"
-                         class=\\"css-tj5bde-Svg\\"
-                    >
-                      <path d=\\"M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z\\">
-                      </path>
-                    </svg>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div class=\\"form-group mb-0\\">
-            <div class=\\"form-check form-check-inline\\">
-              <span class=\\"custom-control custom-switch\\">
-                <input id=\\"configuration-colortitlebar\\"
-                       class=\\"custom-control-input\\"
-                       type=\\"checkbox\\"
-                >
-                <label class=\\"custom-control-label cursor-pointer mr-3\\"
-                       for=\\"configuration-colortitlebar\\"
-                >
-                  Color group titlebar
-                </label>
-              </span>
-            </div>
-          </div>
-          <div class=\\"form-group mb-0\\">
-            <div class=\\"form-check form-check-inline\\">
-              <span class=\\"custom-control custom-switch\\">
-                <input id=\\"configuration-animations\\"
-                       class=\\"custom-control-input\\"
-                       type=\\"checkbox\\"
-                       checked
-                >
-                <label class=\\"custom-control-label cursor-pointer mr-3\\"
-                       for=\\"configuration-animations\\"
-                >
-                  Enable animations
-                </label>
-              </span>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class=\\"accordion card\\">
-        <div class=\\"card-header cursor-pointer active\\">
-          <div class=\\"d-flex flex-row justify-content-between\\">
-            <div>
-              Minimal alert group width
-            </div>
-            <div>
-              <svg aria-hidden=\\"true\\"
-                   focusable=\\"false\\"
-                   data-prefix=\\"fas\\"
-                   data-icon=\\"chevron-down\\"
-                   class=\\"svg-inline--fa fa-chevron-down fa-w-14 text-muted\\"
-                   role=\\"img\\"
-                   xmlns=\\"http://www.w3.org/2000/svg\\"
-                   viewbox=\\"0 0 448 512\\"
-                   style=\\"transition: transform 0.25s ease-in-out;\\"
-              >
-                <path fill=\\"currentColor\\"
-                      d=\\"M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z\\"
-                >
-                </path>
-              </svg>
-            </div>
-          </div>
-        </div>
-        <div class=\\"card-body my-2\\">
-          <div class=\\"form-group mb-0 text-center\\">
-            <div class=\\"input-range-track\\"
-                 style=\\"transform: scale(1); cursor: pointer;\\"
-            >
-              <div class=\\"input-range-thumb\\"
-                   style=\\"position: absolute; z-index: 0; cursor: grab; user-select: none; transform: translate(NaNpx, NaNpx);\\"
-                   tabindex=\\"0\\"
-                   aria-valuemax=\\"800\\"
-                   aria-valuemin=\\"300\\"
-                   aria-valuenow=\\"420\\"
-                   draggable=\\"false\\"
-                   role=\\"slider\\"
-              >
-                420
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class=\\"accordion card\\">
-        <div class=\\"card-header cursor-pointer active\\">
-          <div class=\\"d-flex flex-row justify-content-between\\">
-            <div>
-              Default number of alerts to show per group
-            </div>
-            <div>
-              <svg aria-hidden=\\"true\\"
-                   focusable=\\"false\\"
-                   data-prefix=\\"fas\\"
-                   data-icon=\\"chevron-down\\"
-                   class=\\"svg-inline--fa fa-chevron-down fa-w-14 text-muted\\"
-                   role=\\"img\\"
-                   xmlns=\\"http://www.w3.org/2000/svg\\"
-                   viewbox=\\"0 0 448 512\\"
-                   style=\\"transition: transform 0.25s ease-in-out;\\"
-              >
-                <path fill=\\"currentColor\\"
-                      d=\\"M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z\\"
-                >
-                </path>
-              </svg>
-            </div>
-          </div>
-        </div>
-        <div class=\\"card-body my-2\\">
-          <div class=\\"form-group mb-0 text-center\\">
-            <div class=\\"input-range-track\\"
-                 style=\\"transform: scale(1); cursor: pointer;\\"
-            >
-              <div class=\\"input-range-thumb\\"
-                   style=\\"position: absolute; z-index: 0; cursor: grab; user-select: none; transform: translate(NaNpx, NaNpx);\\"
-                   tabindex=\\"0\\"
-                   aria-valuemax=\\"10\\"
-                   aria-valuemin=\\"1\\"
-                   aria-valuenow=\\"5\\"
-                   draggable=\\"false\\"
-                   role=\\"slider\\"
-              >
-                5
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class=\\"accordion card\\">
-        <div class=\\"card-header cursor-pointer active\\">
-          <div class=\\"d-flex flex-row justify-content-between\\">
-            <div>
-              Default alert group display
-            </div>
-            <div>
-              <svg aria-hidden=\\"true\\"
-                   focusable=\\"false\\"
-                   data-prefix=\\"fas\\"
-                   data-icon=\\"chevron-down\\"
-                   class=\\"svg-inline--fa fa-chevron-down fa-w-14 text-muted\\"
-                   role=\\"img\\"
-                   xmlns=\\"http://www.w3.org/2000/svg\\"
-                   viewbox=\\"0 0 448 512\\"
-                   style=\\"transition: transform 0.25s ease-in-out;\\"
-              >
-                <path fill=\\"currentColor\\"
-                      d=\\"M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z\\"
-                >
-                </path>
-              </svg>
-            </div>
-          </div>
-        </div>
-        <div class=\\"card-body my-2\\">
-          <div class=\\"form-group mb-0\\">
-            <div class=\\" css-2b097c-container\\">
-              <span aria-live=\\"polite\\"
-                    aria-atomic=\\"false\\"
-                    aria-relevant=\\"additions text\\"
-                    class=\\"css-1f43avz-a11yText-A11yText\\"
-              >
-              </span>
-              <div class=\\"react-select__control css-cat782-control\\">
-                <div class=\\"react-select__value-container react-select__value-container--has-value css-17yk2dy-ValueContainer\\">
-                  <div class=\\"react-select__single-value css-1wh03ml-singleValue\\">
-                    Collapse on mobile
-                  </div>
-                  <div class=\\"css-ps6ina-Input\\">
-                    <div class=\\"react-select__input\\"
-                         style=\\"display: inline-block;\\"
-                    >
-                      <input autocapitalize=\\"none\\"
-                             autocomplete=\\"off\\"
-                             autocorrect=\\"off\\"
-                             id=\\"react-select-configuration-collapse-input\\"
-                             spellcheck=\\"false\\"
-                             tabindex=\\"0\\"
-                             type=\\"text\\"
-                             aria-autocomplete=\\"list\\"
-                             style=\\"box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;\\"
-                             value
+                    <div class=\\"css-ps6ina-Input\\">
+                      <div class=\\"react-select__input\\"
+                           style=\\"display: inline-block;\\"
                       >
-                      <div style=\\"position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;\\">
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <div class=\\"react-select__indicators css-vcwr3k-IndicatorsContainer\\">
-                  <span class=\\"react-select__indicator-separator css-1okebmr-indicatorSeparator\\">
-                  </span>
-                  <div class=\\"react-select__indicator react-select__dropdown-indicator css-tlfecz-indicatorContainer\\"
-                       aria-hidden=\\"true\\"
-                  >
-                    <svg height=\\"20\\"
-                         width=\\"20\\"
-                         viewbox=\\"0 0 20 20\\"
-                         aria-hidden=\\"true\\"
-                         focusable=\\"false\\"
-                         class=\\"css-tj5bde-Svg\\"
-                    >
-                      <path d=\\"M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z\\">
-                      </path>
-                    </svg>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class=\\"accordion card\\">
-        <div class=\\"card-header cursor-pointer active\\">
-          <div class=\\"d-flex flex-row justify-content-between\\">
-            <div>
-              Grid sort order
-            </div>
-            <div>
-              <svg aria-hidden=\\"true\\"
-                   focusable=\\"false\\"
-                   data-prefix=\\"fas\\"
-                   data-icon=\\"chevron-down\\"
-                   class=\\"svg-inline--fa fa-chevron-down fa-w-14 text-muted\\"
-                   role=\\"img\\"
-                   xmlns=\\"http://www.w3.org/2000/svg\\"
-                   viewbox=\\"0 0 448 512\\"
-                   style=\\"transition: transform 0.25s ease-in-out;\\"
-              >
-                <path fill=\\"currentColor\\"
-                      d=\\"M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z\\"
-                >
-                </path>
-              </svg>
-            </div>
-          </div>
-        </div>
-        <div class=\\"card-body my-2\\">
-          <div class=\\"form-group mb-0\\">
-            <div class=\\"d-flex flex-fill flex-lg-row flex-column justify-content-between\\">
-              <div class=\\"flex-shrink-0 flex-grow-1 flex-basis-auto\\">
-                <div class=\\" css-2b097c-container\\">
-                  <span aria-live=\\"polite\\"
-                        aria-atomic=\\"false\\"
-                        aria-relevant=\\"additions text\\"
-                        class=\\"css-1f43avz-a11yText-A11yText\\"
-                  >
-                  </span>
-                  <div class=\\"react-select__control css-cat782-control\\">
-                    <div class=\\"react-select__value-container react-select__value-container--has-value css-17yk2dy-ValueContainer\\">
-                      <div class=\\"react-select__single-value css-1wh03ml-singleValue\\">
-                        Use defaults from karma config file
-                      </div>
-                      <div class=\\"css-ps6ina-Input\\">
-                        <div class=\\"react-select__input\\"
-                             style=\\"display: inline-block;\\"
+                        <input autocapitalize=\\"none\\"
+                               autocomplete=\\"off\\"
+                               autocorrect=\\"off\\"
+                               id=\\"react-select-configuration-theme-input\\"
+                               spellcheck=\\"false\\"
+                               tabindex=\\"0\\"
+                               type=\\"text\\"
+                               aria-autocomplete=\\"list\\"
+                               style=\\"box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;\\"
+                               value
                         >
-                          <input autocapitalize=\\"none\\"
-                                 autocomplete=\\"off\\"
-                                 autocorrect=\\"off\\"
-                                 id=\\"react-select-configuration-sort-order-input\\"
-                                 spellcheck=\\"false\\"
-                                 tabindex=\\"0\\"
-                                 type=\\"text\\"
-                                 aria-autocomplete=\\"list\\"
-                                 style=\\"box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;\\"
-                                 value
-                          >
-                          <div style=\\"position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;\\">
-                          </div>
+                        <div style=\\"position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;\\">
                         </div>
                       </div>
                     </div>
-                    <div class=\\"react-select__indicators css-vcwr3k-IndicatorsContainer\\">
-                      <span class=\\"react-select__indicator-separator css-1okebmr-indicatorSeparator\\">
-                      </span>
-                      <div class=\\"react-select__indicator react-select__dropdown-indicator css-tlfecz-indicatorContainer\\"
+                  </div>
+                  <div class=\\"react-select__indicators css-vcwr3k-IndicatorsContainer\\">
+                    <span class=\\"react-select__indicator-separator css-1okebmr-indicatorSeparator\\">
+                    </span>
+                    <div class=\\"react-select__indicator react-select__dropdown-indicator css-tlfecz-indicatorContainer\\"
+                         aria-hidden=\\"true\\"
+                    >
+                      <svg height=\\"20\\"
+                           width=\\"20\\"
+                           viewbox=\\"0 0 20 20\\"
                            aria-hidden=\\"true\\"
+                           focusable=\\"false\\"
+                           class=\\"css-tj5bde-Svg\\"
                       >
-                        <svg height=\\"20\\"
-                             width=\\"20\\"
-                             viewbox=\\"0 0 20 20\\"
-                             aria-hidden=\\"true\\"
-                             focusable=\\"false\\"
-                             class=\\"css-tj5bde-Svg\\"
-                        >
-                          <path d=\\"M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z\\">
-                          </path>
-                        </svg>
-                      </div>
+                        <path d=\\"M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z\\">
+                        </path>
+                      </svg>
                     </div>
                   </div>
                 </div>
               </div>
             </div>
-          </div>
-        </div>
-      </div>
-      <div class=\\"accordion card\\">
-        <div class=\\"card-header cursor-pointer active\\">
-          <div class=\\"d-flex flex-row justify-content-between\\">
-            <div>
-              Multi-grid source label
-            </div>
-            <div>
-              <svg aria-hidden=\\"true\\"
-                   focusable=\\"false\\"
-                   data-prefix=\\"fas\\"
-                   data-icon=\\"chevron-down\\"
-                   class=\\"svg-inline--fa fa-chevron-down fa-w-14 text-muted\\"
-                   role=\\"img\\"
-                   xmlns=\\"http://www.w3.org/2000/svg\\"
-                   viewbox=\\"0 0 448 512\\"
-                   style=\\"transition: transform 0.25s ease-in-out;\\"
-              >
-                <path fill=\\"currentColor\\"
-                      d=\\"M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z\\"
-                >
-                </path>
-              </svg>
-            </div>
-          </div>
-        </div>
-        <div class=\\"card-body my-2\\">
-          <div class=\\"form-group mb-0\\">
-            <div class=\\"d-flex flex-fill flex-lg-row flex-column justify-content-between\\">
-              <div class=\\"flex-shrink-0 flex-grow-1 flex-basis-auto mx-0 mx-lg-1 mt-1 mt-lg-0\\">
-                <div class=\\" css-2b097c-container\\">
-                  <span aria-live=\\"polite\\"
-                        aria-atomic=\\"false\\"
-                        aria-relevant=\\"additions text\\"
-                        class=\\"css-1f43avz-a11yText-A11yText\\"
-                  >
-                  </span>
-                  <div class=\\"react-select__control css-cat782-control\\">
-                    <div class=\\"react-select__value-container react-select__value-container--has-value css-17yk2dy-ValueContainer\\">
-                      <div class=\\"react-select__single-value css-1wh03ml-singleValue\\">
-                        Disable multi-grid
-                      </div>
-                      <div class=\\"css-ps6ina-Input\\">
-                        <div class=\\"react-select__input\\"
-                             style=\\"display: inline-block;\\"
-                        >
-                          <input autocapitalize=\\"none\\"
-                                 autocomplete=\\"off\\"
-                                 autocorrect=\\"off\\"
-                                 id=\\"react-select-configuration-grid-label-input\\"
-                                 spellcheck=\\"false\\"
-                                 tabindex=\\"0\\"
-                                 type=\\"text\\"
-                                 aria-autocomplete=\\"list\\"
-                                 style=\\"box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;\\"
-                                 value
-                          >
-                          <div style=\\"position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;\\">
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                    <div class=\\"react-select__indicators css-vcwr3k-IndicatorsContainer\\">
-                      <span class=\\"react-select__indicator-separator css-1okebmr-indicatorSeparator\\">
-                      </span>
-                      <div class=\\"react-select__indicator react-select__dropdown-indicator css-tlfecz-indicatorContainer\\"
-                           aria-hidden=\\"true\\"
-                      >
-                        <svg height=\\"20\\"
-                             width=\\"20\\"
-                             viewbox=\\"0 0 20 20\\"
-                             aria-hidden=\\"true\\"
-                             focusable=\\"false\\"
-                             class=\\"css-tj5bde-Svg\\"
-                        >
-                          <path d=\\"M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z\\">
-                          </path>
-                        </svg>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div class=\\"flex-shrink-1 flex-grow-0 form-check form-check-inline flex-basis-auto mt-1 mt-lg-0 ml-0 ml-lg-1 mr-0\\">
-                <span class=\\"custom-control custom-switch\\">
-                  <input id=\\"configuration-multigrid-sort-reverse\\"
-                         class=\\"custom-control-input\\"
+            <div class=\\"mb-0\\">
+              <div class=\\"form-check form-check-inline mx-0 px-0\\">
+                <span class=\\"form-check form-switch\\">
+                  <input id=\\"configuration-colortitlebar\\"
+                         class=\\"form-check-input\\"
                          type=\\"checkbox\\"
                   >
-                  <label class=\\"custom-control-label cursor-pointer mr-3\\"
-                         for=\\"configuration-multigrid-sort-reverse\\"
+                  <label class=\\"form-check-label cursor-pointer me-3\\"
+                         for=\\"configuration-colortitlebar\\"
                   >
-                    Reverse order
+                    Color group titlebar
+                  </label>
+                </span>
+              </div>
+            </div>
+            <div class=\\"mb-0\\">
+              <div class=\\"form-check form-check-inline mx-0 px-0\\">
+                <span class=\\"form-check form-switch\\">
+                  <input id=\\"configuration-animations\\"
+                         class=\\"form-check-input\\"
+                         type=\\"checkbox\\"
+                         checked
+                  >
+                  <label class=\\"form-check-label cursor-pointer me-3\\"
+                         for=\\"configuration-animations\\"
+                  >
+                    Enable animations
                   </label>
                 </span>
               </div>
@@ -581,7 +174,289 @@ exports[`<MainModalContent /> matches snapshot 1`] = `
           </div>
         </div>
       </div>
-    </form>
+      <div class=\\"accordion-item\\">
+        <h2 class=\\"accordion-header\\">
+          <button class=\\"accordion-button \\"
+                  type=\\"button\\"
+          >
+            Minimal alert group width
+          </button>
+        </h2>
+        <div class=\\"accordion-collapse show\\">
+          <div class=\\"accordion-body\\">
+            <div class=\\"p-3 text-center\\">
+              <div class=\\"input-range-track\\"
+                   style=\\"transform: scale(1); cursor: pointer;\\"
+              >
+                <div class=\\"input-range-thumb\\"
+                     style=\\"position: absolute; z-index: 0; cursor: grab; user-select: none; transform: translate(NaNpx, NaNpx);\\"
+                     tabindex=\\"0\\"
+                     aria-valuemax=\\"800\\"
+                     aria-valuemin=\\"300\\"
+                     aria-valuenow=\\"420\\"
+                     draggable=\\"false\\"
+                     role=\\"slider\\"
+                >
+                  420
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class=\\"accordion-item\\">
+        <h2 class=\\"accordion-header\\">
+          <button class=\\"accordion-button \\"
+                  type=\\"button\\"
+          >
+            Default number of alerts to show per group
+          </button>
+        </h2>
+        <div class=\\"accordion-collapse show\\">
+          <div class=\\"accordion-body\\">
+            <div class=\\"p-3 text-center\\">
+              <div class=\\"input-range-track\\"
+                   style=\\"transform: scale(1); cursor: pointer;\\"
+              >
+                <div class=\\"input-range-thumb\\"
+                     style=\\"position: absolute; z-index: 0; cursor: grab; user-select: none; transform: translate(NaNpx, NaNpx);\\"
+                     tabindex=\\"0\\"
+                     aria-valuemax=\\"10\\"
+                     aria-valuemin=\\"1\\"
+                     aria-valuenow=\\"5\\"
+                     draggable=\\"false\\"
+                     role=\\"slider\\"
+                >
+                  5
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class=\\"accordion-item\\">
+        <h2 class=\\"accordion-header\\">
+          <button class=\\"accordion-button \\"
+                  type=\\"button\\"
+          >
+            Default alert group display
+          </button>
+        </h2>
+        <div class=\\"accordion-collapse show\\">
+          <div class=\\"accordion-body\\">
+            <div class=\\"mb-0\\">
+              <div class=\\" css-2b097c-container\\">
+                <span aria-live=\\"polite\\"
+                      aria-atomic=\\"false\\"
+                      aria-relevant=\\"additions text\\"
+                      class=\\"css-1f43avz-a11yText-A11yText\\"
+                >
+                </span>
+                <div class=\\"react-select__control css-cat782-control\\">
+                  <div class=\\"react-select__value-container react-select__value-container--has-value css-17yk2dy-ValueContainer\\">
+                    <div class=\\"react-select__single-value css-1wh03ml-singleValue\\">
+                      Collapse on mobile
+                    </div>
+                    <div class=\\"css-ps6ina-Input\\">
+                      <div class=\\"react-select__input\\"
+                           style=\\"display: inline-block;\\"
+                      >
+                        <input autocapitalize=\\"none\\"
+                               autocomplete=\\"off\\"
+                               autocorrect=\\"off\\"
+                               id=\\"react-select-configuration-collapse-input\\"
+                               spellcheck=\\"false\\"
+                               tabindex=\\"0\\"
+                               type=\\"text\\"
+                               aria-autocomplete=\\"list\\"
+                               style=\\"box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;\\"
+                               value
+                        >
+                        <div style=\\"position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;\\">
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                  <div class=\\"react-select__indicators css-vcwr3k-IndicatorsContainer\\">
+                    <span class=\\"react-select__indicator-separator css-1okebmr-indicatorSeparator\\">
+                    </span>
+                    <div class=\\"react-select__indicator react-select__dropdown-indicator css-tlfecz-indicatorContainer\\"
+                         aria-hidden=\\"true\\"
+                    >
+                      <svg height=\\"20\\"
+                           width=\\"20\\"
+                           viewbox=\\"0 0 20 20\\"
+                           aria-hidden=\\"true\\"
+                           focusable=\\"false\\"
+                           class=\\"css-tj5bde-Svg\\"
+                      >
+                        <path d=\\"M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z\\">
+                        </path>
+                      </svg>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class=\\"accordion-item\\">
+        <h2 class=\\"accordion-header\\">
+          <button class=\\"accordion-button \\"
+                  type=\\"button\\"
+          >
+            Grid sort order
+          </button>
+        </h2>
+        <div class=\\"accordion-collapse show\\">
+          <div class=\\"accordion-body\\">
+            <div class=\\"mb-0\\">
+              <div class=\\"d-flex flex-fill flex-lg-row flex-column justify-content-between\\">
+                <div class=\\"flex-shrink-0 flex-grow-1 flex-basis-auto\\">
+                  <div class=\\" css-2b097c-container\\">
+                    <span aria-live=\\"polite\\"
+                          aria-atomic=\\"false\\"
+                          aria-relevant=\\"additions text\\"
+                          class=\\"css-1f43avz-a11yText-A11yText\\"
+                    >
+                    </span>
+                    <div class=\\"react-select__control css-cat782-control\\">
+                      <div class=\\"react-select__value-container react-select__value-container--has-value css-17yk2dy-ValueContainer\\">
+                        <div class=\\"react-select__single-value css-1wh03ml-singleValue\\">
+                          Use defaults from karma config file
+                        </div>
+                        <div class=\\"css-ps6ina-Input\\">
+                          <div class=\\"react-select__input\\"
+                               style=\\"display: inline-block;\\"
+                          >
+                            <input autocapitalize=\\"none\\"
+                                   autocomplete=\\"off\\"
+                                   autocorrect=\\"off\\"
+                                   id=\\"react-select-configuration-sort-order-input\\"
+                                   spellcheck=\\"false\\"
+                                   tabindex=\\"0\\"
+                                   type=\\"text\\"
+                                   aria-autocomplete=\\"list\\"
+                                   style=\\"box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;\\"
+                                   value
+                            >
+                            <div style=\\"position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;\\">
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                      <div class=\\"react-select__indicators css-vcwr3k-IndicatorsContainer\\">
+                        <span class=\\"react-select__indicator-separator css-1okebmr-indicatorSeparator\\">
+                        </span>
+                        <div class=\\"react-select__indicator react-select__dropdown-indicator css-tlfecz-indicatorContainer\\"
+                             aria-hidden=\\"true\\"
+                        >
+                          <svg height=\\"20\\"
+                               width=\\"20\\"
+                               viewbox=\\"0 0 20 20\\"
+                               aria-hidden=\\"true\\"
+                               focusable=\\"false\\"
+                               class=\\"css-tj5bde-Svg\\"
+                          >
+                            <path d=\\"M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z\\">
+                            </path>
+                          </svg>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class=\\"accordion-item\\">
+        <h2 class=\\"accordion-header\\">
+          <button class=\\"accordion-button \\"
+                  type=\\"button\\"
+          >
+            Multi-grid source label
+          </button>
+        </h2>
+        <div class=\\"accordion-collapse show\\">
+          <div class=\\"accordion-body\\">
+            <div class=\\"mb-0\\">
+              <div class=\\"d-flex flex-fill flex-lg-row flex-column justify-content-between\\">
+                <div class=\\"flex-shrink-0 flex-grow-1 flex-basis-auto mx-0 mx-lg-1 mt-1 mt-lg-0\\">
+                  <div class=\\" css-2b097c-container\\">
+                    <span aria-live=\\"polite\\"
+                          aria-atomic=\\"false\\"
+                          aria-relevant=\\"additions text\\"
+                          class=\\"css-1f43avz-a11yText-A11yText\\"
+                    >
+                    </span>
+                    <div class=\\"react-select__control css-cat782-control\\">
+                      <div class=\\"react-select__value-container react-select__value-container--has-value css-17yk2dy-ValueContainer\\">
+                        <div class=\\"react-select__single-value css-1wh03ml-singleValue\\">
+                          Disable multi-grid
+                        </div>
+                        <div class=\\"css-ps6ina-Input\\">
+                          <div class=\\"react-select__input\\"
+                               style=\\"display: inline-block;\\"
+                          >
+                            <input autocapitalize=\\"none\\"
+                                   autocomplete=\\"off\\"
+                                   autocorrect=\\"off\\"
+                                   id=\\"react-select-configuration-grid-label-input\\"
+                                   spellcheck=\\"false\\"
+                                   tabindex=\\"0\\"
+                                   type=\\"text\\"
+                                   aria-autocomplete=\\"list\\"
+                                   style=\\"box-sizing: content-box; width: 2px; border: 0px; opacity: 1; outline: 0; padding: 0px;\\"
+                                   value
+                            >
+                            <div style=\\"position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;\\">
+                            </div>
+                          </div>
+                        </div>
+                      </div>
+                      <div class=\\"react-select__indicators css-vcwr3k-IndicatorsContainer\\">
+                        <span class=\\"react-select__indicator-separator css-1okebmr-indicatorSeparator\\">
+                        </span>
+                        <div class=\\"react-select__indicator react-select__dropdown-indicator css-tlfecz-indicatorContainer\\"
+                             aria-hidden=\\"true\\"
+                        >
+                          <svg height=\\"20\\"
+                               width=\\"20\\"
+                               viewbox=\\"0 0 20 20\\"
+                               aria-hidden=\\"true\\"
+                               focusable=\\"false\\"
+                               class=\\"css-tj5bde-Svg\\"
+                          >
+                            <path d=\\"M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z\\">
+                            </path>
+                          </svg>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+                <div class=\\"flex-shrink-1 flex-grow-0 form-check form-check-inline flex-basis-auto my-1 my-lg-auto ms-0 ms-lg-2 me-0 px-0\\">
+                  <span class=\\"form-check form-switch\\">
+                    <input id=\\"configuration-multigrid-sort-reverse\\"
+                           class=\\"form-check-input\\"
+                           type=\\"checkbox\\"
+                    >
+                    <label class=\\"form-check-label cursor-pointer\\"
+                           for=\\"configuration-multigrid-sort-reverse\\"
+                    >
+                      Reverse order
+                    </label>
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
   <div class=\\"modal-footer\\">
     <span class=\\"text-muted\\">

ui/src/Components/MainModal/index.test.tsx

@@ -82,14 +82,14 @@ describe("<MainModal />", () => {
     expect(tree.find("MainModalContent")).toHaveLength(0);
   });
 
-  it("hides the modal when button.close is clicked", () => {
+  it("hides the modal when button.btn-close is clicked", () => {
     const tree = MountedMainModal();
     const toggle = tree.find(".nav-link");
 
     toggle.simulate("click");
     expect(tree.find("MainModalContent")).toHaveLength(1);
 
-    tree.find("button.close").simulate("click");
+    tree.find("button.btn-close").simulate("click");
     act(() => {
       jest.runOnlyPendingTimers();
     });

ui/src/Components/ManagedSilence/DeleteSilence.test.tsx

@@ -110,7 +110,7 @@ describe("<DeleteSilence />", () => {
     tree.find("button.btn-danger").simulate("click");
     expect(tree.find(".modal-body")).toHaveLength(1);
 
-    tree.find("button.close").simulate("click");
+    tree.find("button.btn-close").simulate("click");
     act(() => {
       jest.runOnlyPendingTimers();
     });

ui/src/Components/ManagedSilence/DeleteSilence.tsx

@@ -87,13 +87,13 @@ const DeleteResult: FC<{
         <div className="d-flex flex-row-reverse">
           <button
             type="button"
-            className="btn btn-danger mr-2"
+            className="btn btn-danger me-2"
             onClick={() => setCurrentTime(Math.floor(Date.now()))}
             disabled={isDeleting}
           >
             <FontAwesomeIcon
               icon={isDeleting ? faCheckCircle : faRedo}
-              className="mr-1"
+              className="me-1"
             />
             {isDeleting ? "Confirm" : "Retry"}
           </button>
@@ -121,9 +121,7 @@ const DeleteSilenceModalContent: FC<{
     <>
       <div className="modal-header">
         <h5 className="modal-title">Delete silence</h5>
-        <button type="button" className="close" onClick={onHide}>
-          <span>&times;</span>
-        </button>
+        <button type="button" className="btn-close" onClick={onHide}></button>
       </div>
       <div className="modal-body">
         {confirm ? (
@@ -148,11 +146,11 @@ const DeleteSilenceModalContent: FC<{
             <div className="d-flex flex-row-reverse">
               <button
                 type="button"
-                className="btn btn-danger mr-2"
+                className="btn btn-danger me-2"
                 onClick={() => setConfirm(true)}
                 disabled={confirm}
               >
-                <FontAwesomeIcon icon={faCheckCircle} className="mr-1" />
+                <FontAwesomeIcon icon={faCheckCircle} className="me-1" />
                 Confirm
               </button>
             </div>
@@ -185,7 +183,7 @@ const DeleteSilence: FC<{
         }}
       >
         <FontAwesomeIcon
-          className="mr-1 d-none d-sm-inline-block"
+          className="me-1 d-none d-sm-inline-block"
           icon={faTrash}
         />
         Delete

ui/src/Components/ManagedSilence/SilenceComment.test.tsx

@@ -130,20 +130,20 @@ describe("<SilenceComment />", () => {
 
   it("Doesn't render cluster badges when collapsed and only a single cluster is present", () => {
     const tree = MountedSilenceComment(true);
-    const ams = tree.find("span.badge.badge-secondary");
+    const ams = tree.find("span.badge.bg-secondary");
     expect(ams).toHaveLength(0);
   });
 
   it("Doesn't render cluster badges when expanded and only a single cluster is present", () => {
     const tree = MountedSilenceComment(false);
-    const ams = tree.find("span.badge.badge-secondary");
+    const ams = tree.find("span.badge.bg-secondary");
     expect(ams).toHaveLength(0);
   });
 
   it("Renders cluster badge when collapsed and multiple clusters are present", () => {
     MockMultipleClusters();
     const tree = MountedSilenceComment(true, "single");
-    const ams = tree.find("span.badge.badge-secondary");
+    const ams = tree.find("span.badge.bg-secondary");
     expect(ams).toHaveLength(1);
     expect(toDiffableHtml(ams.at(0).html())).toMatch(/single/);
   });
@@ -151,7 +151,7 @@ describe("<SilenceComment />", () => {
   it("Doesn't render cluster badge when expanded and multiple clusters are present", () => {
     MockMultipleClusters();
     const tree = MountedSilenceComment(false, "single");
-    const ams = tree.find("span.badge.badge-secondary");
+    const ams = tree.find("span.badge.bg-secondary");
     expect(ams).toHaveLength(0);
   });
 });

ui/src/Components/ManagedSilence/SilenceComment.tsx

@@ -38,7 +38,7 @@ const SilenceComment: FC<{
           : "components-managed-silence-comment"
       }
     >
-      <FontAwesomeIcon className="mr-2" icon={faExternalLinkAlt} />
+      <FontAwesomeIcon className="me-2" icon={faExternalLinkAlt} />
       {silence.comment}
     </a>
   ) : (
@@ -63,12 +63,12 @@ const SilenceComment: FC<{
             {comment}
           </div>
           <div className="components-managed-silence-cite mt-1">
-            <span className="text-muted mr-2 font-italic">
+            <span className="text-muted me-2 font-italic">
               &mdash; {silence.createdBy}
             </span>
             {collapsed &&
             Object.keys(alertStore.data.upstreams.clusters).length > 1 ? (
-              <span className="badge badge-secondary mx-1 align-text-bottom p-1">
+              <span className="badge bg-secondary mx-1 align-text-bottom p-1">
                 {cluster}
               </span>
             ) : null}

ui/src/Components/ManagedSilence/SilenceDetails.test.tsx

@@ -92,7 +92,7 @@ describe("<SilenceDetails />", () => {
 
   it("clicking on the copy button copies silence ID to the clipboard", () => {
     const tree = MountedSilenceDetails();
-    const button = tree.find("span.badge.badge-secondary");
+    const button = tree.find("span.badge.bg-secondary");
     button.simulate("click");
     expect(copy).toHaveBeenCalledTimes(1);
     expect(copy).toHaveBeenCalledWith(silence.id);

ui/src/Components/ManagedSilence/SilenceDetails.tsx

@@ -35,7 +35,7 @@ const SilenceIDCopyButton: FC<{
       <CSSTransition {...props}>
         <span
           ref={ref}
-          className="badge badge-secondary px-1 mr-1 components-label cursor-pointer"
+          className="badge bg-secondary px-1 me-1 components-label cursor-pointer"
           onClick={() => {
             copy(id);
             setClickCount(clickCount + 1);
@@ -64,7 +64,7 @@ const SilenceDetails: FC<{
   isUpper = false,
 }) => {
   const isExpired = parseISO(silence.endsAt) < new Date();
-  let expiresClass = "";
+  let expiresClass = "text-dark";
   let expiresLabel = "Expires";
   if (isExpired) {
     expiresClass = "text-danger";
@@ -84,19 +84,19 @@ const SilenceDetails: FC<{
       <div className="d-flex flex-fill flex-lg-row flex-column justify-content-between">
         <div className="flex-shrink-1 flex-grow-1 mw-1p">
           <div>
-            <span className="badge px-1 mr-1 components-label">
+            <span className="badge text-dark px-1 me-1 components-label">
               <FontAwesomeIcon
-                className="text-muted mr-1"
+                className="text-muted me-1"
                 icon={faCalendarCheck}
                 fixedWidth
               />
               Started <DateFromNow timestamp={silence.startsAt} />
             </span>
             <span
-              className={`badge ${expiresClass} px-1 mr-1 components-label`}
+              className={`badge ${expiresClass} px-1 me-1 components-label`}
             >
               <FontAwesomeIcon
-                className="text-muted mr-1"
+                className="text-muted me-1"
                 icon={faCalendarTimes}
                 fixedWidth
               />
@@ -104,23 +104,23 @@ const SilenceDetails: FC<{
             </span>
           </div>
           <div className="my-1 d-flex flex-row">
-            <span className="badge px-1 mr-1 components-label flex-grow-0 flex-shrink-0">
+            <span className="badge text-dark px-1 me-1 components-label flex-grow-0 flex-shrink-0">
               <FontAwesomeIcon
-                className="text-muted mr-1"
+                className="text-muted me-1"
                 icon={faFingerprint}
                 fixedWidth
               />
               ID:
             </span>
-            <span className="badge badge-light px-1 mr-1 components-label">
+            <span className="badge bg-light px-1 me-1 components-label">
               {silence.id}
             </span>
             <SilenceIDCopyButton id={silence.id} />
           </div>
           <div className="my-1">
-            <span className="badge px-1 mr-1 components-label">
+            <span className="badge text-dark px-1 me-1 components-label">
               <FontAwesomeIcon
-                className="text-muted mr-1"
+                className="text-muted me-1"
                 icon={faHome}
                 fixedWidth
               />
@@ -136,9 +136,9 @@ const SilenceDetails: FC<{
           </div>
           <div className="d-flex flex-row">
             <div className="flex-shrink-0 flex-grow-0">
-              <span className="badge px-1 mr-1 components-label">
+              <span className="badge text-dark px-1 me-1 components-label">
                 <FontAwesomeIcon
-                  className="text-muted mr-1"
+                  className="text-muted me-1"
                   icon={faFilter}
                   fixedWidth
                 />
@@ -152,7 +152,7 @@ const SilenceDetails: FC<{
               {silence.matchers.map((matcher, index) => (
                 <span
                   key={`${index}/${matcher.name}/${matcher.isRegex}/${matcher.value}`}
-                  className="badge badge-primary px-1 mr-1 components-label"
+                  className="badge bg-primary px-1 me-1 components-label"
                 >
                   {matcher.name}
                   {MatcherToOperator(matcher)}"{matcher.value}"
@@ -161,7 +161,7 @@ const SilenceDetails: FC<{
             </div>
           </div>
         </div>
-        <div className="flex-shrink-0 flex-grow-0 mt-lg-0 mt-2 ml-lg-2 ml-0">
+        <div className="flex-shrink-0 flex-grow-0 mt-lg-0 mt-2 ml-lg-2 ms-0">
           <div className="d-flex flex-fill flex-lg-column flex-row justify-content-around">
             <button
               className="btn btn-primary btn-sm mb-lg-2 mb-0"
@@ -171,7 +171,7 @@ const SilenceDetails: FC<{
               }}
             >
               <FontAwesomeIcon
-                className="mr-1 d-none d-sm-inline-block"
+                className="me-1 d-none d-sm-inline-block"
                 icon={faEdit}
               />
               {isExpired ? "Recreate" : "Edit"}

ui/src/Components/ManagedSilence/SilenceProgress.test.tsx

@@ -33,7 +33,7 @@ describe("<SilenceProgress />", () => {
   it("renders with class 'danger' and no progressbar when expired", () => {
     advanceTo(new Date(Date.UTC(2001, 0, 1, 23, 0, 0)));
     const tree = MountedSilenceProgress();
-    expect(toDiffableHtml(tree.html())).toMatch(/badge-danger/);
+    expect(toDiffableHtml(tree.html())).toMatch(/bg-danger/);
     expect(tree.text()).toMatch(/Expired 1 year ago/);
   });
 

ui/src/Components/ManagedSilence/SilenceProgress.tsx

@@ -31,11 +31,11 @@ const SilenceProgress: FC<{
   }, [silence.startsAt, silence.endsAt]);
 
   return parseISO(silence.endsAt) < new Date() ? (
-    <span className="badge badge-danger align-text-bottom p-1">
+    <span className="badge bg-danger align-text-bottom p-1">
       Expired <DateFromNow timestamp={silence.endsAt} />
     </span>
   ) : (
-    <span className="badge badge-light nmb-05 align-text-bottom p-1">
+    <span className="badge bg-light nmb-05 align-text-bottom p-1">
       Expires <DateFromNow timestamp={silence.endsAt} />
       <div className="progress silence-progress">
         <div

ui/src/Components/ManagedSilence/__snapshots__/SilenceComment.test.tsx.snap

@@ -24,10 +24,10 @@ exports[`<SilenceComment /> Matches snapshot when collapsed 1`] = `
       Mocked Silence
     </div>
     <div class=\\"components-managed-silence-cite mt-1\\">
-      <span class=\\"text-muted mr-2 font-italic\\">
+      <span class=\\"text-muted me-2 font-italic\\">
         — me@example.com
       </span>
-      <span class=\\"badge badge-light nmb-05 align-text-bottom p-1\\">
+      <span class=\\"badge bg-light nmb-05 align-text-bottom p-1\\">
         Expires in 30 minutes
         <div class=\\"progress silence-progress\\">
           <div class=\\"progress-bar bg-success\\"
@@ -45,7 +45,7 @@ exports[`<SilenceComment /> Matches snapshot when collapsed 1`] = `
   <div class=\\"flex-shrink-0 flex-grow-0\\">
     <div class=\\"d-flex flex-column flex-sm-row justify-content-between align-items-center\\">
       <div class=\\" tooltip-trigger\\">
-        <span class=\\"badge-primary badge-pill components-label-with-hover components-label badge\\">
+        <span class=\\"bg-primary rounded-pill components-label-with-hover components-label badge\\">
           123
         </span>
       </div>
@@ -96,13 +96,13 @@ exports[`<SilenceComment /> Matches snapshot when collapsed and multiple cluster
       Mocked Silence
     </div>
     <div class=\\"components-managed-silence-cite mt-1\\">
-      <span class=\\"text-muted mr-2 font-italic\\">
+      <span class=\\"text-muted me-2 font-italic\\">
         — me@example.com
       </span>
-      <span class=\\"badge badge-secondary mx-1 align-text-bottom p-1\\">
+      <span class=\\"badge bg-secondary mx-1 align-text-bottom p-1\\">
         ha
       </span>
-      <span class=\\"badge badge-light nmb-05 align-text-bottom p-1\\">
+      <span class=\\"badge bg-light nmb-05 align-text-bottom p-1\\">
         Expires in 30 minutes
         <div class=\\"progress silence-progress\\">
           <div class=\\"progress-bar bg-success\\"
@@ -120,7 +120,7 @@ exports[`<SilenceComment /> Matches snapshot when collapsed and multiple cluster
   <div class=\\"flex-shrink-0 flex-grow-0\\">
     <div class=\\"d-flex flex-column flex-sm-row justify-content-between align-items-center\\">
       <div class=\\" tooltip-trigger\\">
-        <span class=\\"badge-primary badge-pill components-label-with-hover components-label badge\\">
+        <span class=\\"bg-primary rounded-pill components-label-with-hover components-label badge\\">
           123
         </span>
       </div>
@@ -171,7 +171,7 @@ exports[`<SilenceComment /> Matches snapshot when expanded 1`] = `
       Mocked Silence
     </div>
     <div class=\\"components-managed-silence-cite mt-1\\">
-      <span class=\\"text-muted mr-2 font-italic\\">
+      <span class=\\"text-muted me-2 font-italic\\">
         — me@example.com
       </span>
     </div>
@@ -179,7 +179,7 @@ exports[`<SilenceComment /> Matches snapshot when expanded 1`] = `
   <div class=\\"flex-shrink-0 flex-grow-0\\">
     <div class=\\"d-flex flex-column flex-sm-row justify-content-between align-items-center\\">
       <div class=\\" tooltip-trigger\\">
-        <span class=\\"badge-primary badge-pill components-label-with-hover components-label badge\\">
+        <span class=\\"bg-primary rounded-pill components-label-with-hover components-label badge\\">
           123
         </span>
       </div>
@@ -230,7 +230,7 @@ exports[`<SilenceComment /> Matches snapshot when expanded and multiple clusters
       Mocked Silence
     </div>
     <div class=\\"components-managed-silence-cite mt-1\\">
-      <span class=\\"text-muted mr-2 font-italic\\">
+      <span class=\\"text-muted me-2 font-italic\\">
         — me@example.com
       </span>
     </div>
@@ -238,7 +238,7 @@ exports[`<SilenceComment /> Matches snapshot when expanded and multiple clusters
   <div class=\\"flex-shrink-0 flex-grow-0\\">
     <div class=\\"d-flex flex-column flex-sm-row justify-content-between align-items-center\\">
       <div class=\\" tooltip-trigger\\">
-        <span class=\\"badge-primary badge-pill components-label-with-hover components-label badge\\">
+        <span class=\\"bg-primary rounded-pill components-label-with-hover components-label badge\\">
           123
         </span>
       </div>

ui/src/Components/ManagedSilence/__snapshots__/index.test.tsx.snap

@@ -26,10 +26,10 @@ exports[`<ManagedSilence /> matches snapshot when collapsed 1`] = `
           Mocked Silence
         </div>
         <div class=\\"components-managed-silence-cite mt-1\\">
-          <span class=\\"text-muted mr-2 font-italic\\">
+          <span class=\\"text-muted me-2 font-italic\\">
             — me@example.com
           </span>
-          <span class=\\"badge badge-light nmb-05 align-text-bottom p-1\\">
+          <span class=\\"badge bg-light nmb-05 align-text-bottom p-1\\">
             Expires in 30 minutes
             <div class=\\"progress silence-progress\\">
               <div class=\\"progress-bar bg-success\\"
@@ -47,7 +47,7 @@ exports[`<ManagedSilence /> matches snapshot when collapsed 1`] = `
       <div class=\\"flex-shrink-0 flex-grow-0\\">
         <div class=\\"d-flex flex-column flex-sm-row justify-content-between align-items-center\\">
           <div class=\\" tooltip-trigger\\">
-            <span class=\\"badge-primary badge-pill components-label-with-hover components-label badge\\">
+            <span class=\\"bg-primary rounded-pill components-label-with-hover components-label badge\\">
               123
             </span>
           </div>
@@ -102,7 +102,7 @@ exports[`<ManagedSilence /> matches snapshot with expaned details 1`] = `
           Mocked Silence
         </div>
         <div class=\\"components-managed-silence-cite mt-1\\">
-          <span class=\\"text-muted mr-2 font-italic\\">
+          <span class=\\"text-muted me-2 font-italic\\">
             — me@example.com
           </span>
         </div>
@@ -110,7 +110,7 @@ exports[`<ManagedSilence /> matches snapshot with expaned details 1`] = `
       <div class=\\"flex-shrink-0 flex-grow-0\\">
         <div class=\\"d-flex flex-column flex-sm-row justify-content-between align-items-center\\">
           <div class=\\" tooltip-trigger\\">
-            <span class=\\"badge-primary badge-pill components-label-with-hover components-label badge\\">
+            <span class=\\"bg-primary rounded-pill components-label-with-hover components-label badge\\">
               123
             </span>
           </div>
@@ -140,12 +140,12 @@ exports[`<ManagedSilence /> matches snapshot with expaned details 1`] = `
       <div class=\\"d-flex flex-fill flex-lg-row flex-column justify-content-between\\">
         <div class=\\"flex-shrink-1 flex-grow-1 mw-1p\\">
           <div>
-            <span class=\\"badge px-1 mr-1 components-label\\">
+            <span class=\\"badge text-dark px-1 me-1 components-label\\">
               <svg aria-hidden=\\"true\\"
                    focusable=\\"false\\"
                    data-prefix=\\"fas\\"
                    data-icon=\\"calendar-check\\"
-                   class=\\"svg-inline--fa fa-calendar-check fa-w-14 fa-fw text-muted mr-1\\"
+                   class=\\"svg-inline--fa fa-calendar-check fa-w-14 fa-fw text-muted me-1\\"
                    role=\\"img\\"
                    xmlns=\\"http://www.w3.org/2000/svg\\"
                    viewbox=\\"0 0 448 512\\"
@@ -157,12 +157,12 @@ exports[`<ManagedSilence /> matches snapshot with expaned details 1`] = `
               </svg>
               Started 30 minutes ago
             </span>
-            <span class=\\"badge  px-1 mr-1 components-label\\">
+            <span class=\\"badge text-dark px-1 me-1 components-label\\">
               <svg aria-hidden=\\"true\\"
                    focusable=\\"false\\"
                    data-prefix=\\"fas\\"
                    data-icon=\\"calendar-times\\"
-                   class=\\"svg-inline--fa fa-calendar-times fa-w-14 fa-fw text-muted mr-1\\"
+                   class=\\"svg-inline--fa fa-calendar-times fa-w-14 fa-fw text-muted me-1\\"
                    role=\\"img\\"
                    xmlns=\\"http://www.w3.org/2000/svg\\"
                    viewbox=\\"0 0 448 512\\"
@@ -176,12 +176,12 @@ exports[`<ManagedSilence /> matches snapshot with expaned details 1`] = `
             </span>
           </div>
           <div class=\\"my-1 d-flex flex-row\\">
-            <span class=\\"badge px-1 mr-1 components-label flex-grow-0 flex-shrink-0\\">
+            <span class=\\"badge text-dark px-1 me-1 components-label flex-grow-0 flex-shrink-0\\">
               <svg aria-hidden=\\"true\\"
                    focusable=\\"false\\"
                    data-prefix=\\"fas\\"
                    data-icon=\\"fingerprint\\"
-                   class=\\"svg-inline--fa fa-fingerprint fa-w-16 fa-fw text-muted mr-1\\"
+                   class=\\"svg-inline--fa fa-fingerprint fa-w-16 fa-fw text-muted me-1\\"
                    role=\\"img\\"
                    xmlns=\\"http://www.w3.org/2000/svg\\"
                    viewbox=\\"0 0 512 512\\"
@@ -193,11 +193,11 @@ exports[`<ManagedSilence /> matches snapshot with expaned details 1`] = `
               </svg>
               ID:
             </span>
-            <span class=\\"badge badge-light px-1 mr-1 components-label\\">
+            <span class=\\"badge bg-light px-1 me-1 components-label\\">
               04d37636-2350-4878-b382-e0b50353230f
             </span>
             <div class=\\" tooltip-trigger\\">
-              <span class=\\"badge badge-secondary px-1 mr-1 components-label cursor-pointer\\">
+              <span class=\\"badge bg-secondary px-1 me-1 components-label cursor-pointer\\">
                 <svg aria-hidden=\\"true\\"
                      focusable=\\"false\\"
                      data-prefix=\\"fas\\"
@@ -216,12 +216,12 @@ exports[`<ManagedSilence /> matches snapshot with expaned details 1`] = `
             </div>
           </div>
           <div class=\\"my-1\\">
-            <span class=\\"badge px-1 mr-1 components-label\\">
+            <span class=\\"badge text-dark px-1 me-1 components-label\\">
               <svg aria-hidden=\\"true\\"
                    focusable=\\"false\\"
                    data-prefix=\\"fas\\"
                    data-icon=\\"home\\"
-                   class=\\"svg-inline--fa fa-home fa-w-18 fa-fw text-muted mr-1\\"
+                   class=\\"svg-inline--fa fa-home fa-w-18 fa-fw text-muted me-1\\"
                    role=\\"img\\"
                    xmlns=\\"http://www.w3.org/2000/svg\\"
                    viewbox=\\"0 0 576 512\\"
@@ -257,12 +257,12 @@ exports[`<ManagedSilence /> matches snapshot with expaned details 1`] = `
           </div>
           <div class=\\"d-flex flex-row\\">
             <div class=\\"flex-shrink-0 flex-grow-0\\">
-              <span class=\\"badge px-1 mr-1 components-label\\">
+              <span class=\\"badge text-dark px-1 me-1 components-label\\">
                 <svg aria-hidden=\\"true\\"
                      focusable=\\"false\\"
                      data-prefix=\\"fas\\"
                      data-icon=\\"filter\\"
-                     class=\\"svg-inline--fa fa-filter fa-w-16 fa-fw text-muted mr-1\\"
+                     class=\\"svg-inline--fa fa-filter fa-w-16 fa-fw text-muted me-1\\"
                      role=\\"img\\"
                      xmlns=\\"http://www.w3.org/2000/svg\\"
                      viewbox=\\"0 0 512 512\\"
@@ -278,29 +278,29 @@ exports[`<ManagedSilence /> matches snapshot with expaned details 1`] = `
             <div class=\\"flex-shrink-1 flex-grow-1 mw-1p\\"
                  style=\\"min-width: 0px;\\"
             >
-              <span class=\\"badge badge-primary px-1 mr-1 components-label\\">
+              <span class=\\"badge bg-primary px-1 me-1 components-label\\">
                 regex=~\\"equal\\"
               </span>
-              <span class=\\"badge badge-primary px-1 mr-1 components-label\\">
+              <span class=\\"badge bg-primary px-1 me-1 components-label\\">
                 regex!~\\"notEqual\\"
               </span>
-              <span class=\\"badge badge-primary px-1 mr-1 components-label\\">
+              <span class=\\"badge bg-primary px-1 me-1 components-label\\">
                 notRegex=\\"equal\\"
               </span>
-              <span class=\\"badge badge-primary px-1 mr-1 components-label\\">
+              <span class=\\"badge bg-primary px-1 me-1 components-label\\">
                 notRegex!=\\"notEqual\\"
               </span>
             </div>
           </div>
         </div>
-        <div class=\\"flex-shrink-0 flex-grow-0 mt-lg-0 mt-2 ml-lg-2 ml-0\\">
+        <div class=\\"flex-shrink-0 flex-grow-0 mt-lg-0 mt-2 ml-lg-2 ms-0\\">
           <div class=\\"d-flex flex-fill flex-lg-column flex-row justify-content-around\\">
             <button class=\\"btn btn-primary btn-sm mb-lg-2 mb-0\\">
               <svg aria-hidden=\\"true\\"
                    focusable=\\"false\\"
                    data-prefix=\\"fas\\"
                    data-icon=\\"edit\\"
-                   class=\\"svg-inline--fa fa-edit fa-w-18 mr-1 d-none d-sm-inline-block\\"
+                   class=\\"svg-inline--fa fa-edit fa-w-18 me-1 d-none d-sm-inline-block\\"
                    role=\\"img\\"
                    xmlns=\\"http://www.w3.org/2000/svg\\"
                    viewbox=\\"0 0 576 512\\"
@@ -317,7 +317,7 @@ exports[`<ManagedSilence /> matches snapshot with expaned details 1`] = `
                    focusable=\\"false\\"
                    data-prefix=\\"fas\\"
                    data-icon=\\"trash\\"
-                   class=\\"svg-inline--fa fa-trash fa-w-14 mr-1 d-none d-sm-inline-block\\"
+                   class=\\"svg-inline--fa fa-trash fa-w-14 me-1 d-none d-sm-inline-block\\"
                    role=\\"img\\"
                    xmlns=\\"http://www.w3.org/2000/svg\\"
                    viewbox=\\"0 0 448 512\\"

ui/src/Components/NavBar/FilterInput/History.tsx

@@ -63,7 +63,7 @@ const ActionButton: FC<{
       afterClick();
     }}
   >
-    <FontAwesomeIcon icon={icon} className="mr-1" />
+    <FontAwesomeIcon icon={icon} className="me-1" />
     {title}
   </button>
 );
@@ -97,7 +97,7 @@ const HistoryMenu: FC<{
       data-placement={popperPlacement}
     >
       <h6 className="dropdown-header text-center">
-        <FontAwesomeIcon icon={faHistory} className="mr-1" />
+        <FontAwesomeIcon icon={faHistory} className="me-1" />
         Last used filters
       </h6>
       {filters.length === 0 ? (
@@ -112,7 +112,7 @@ const HistoryMenu: FC<{
               afterClick();
             }}
           >
-            <div className="components-navbar-historymenu-labels pl-2">
+            <div className="components-navbar-historymenu-labels ps-2">
               {historyFilters.map((f) => (
                 <HistoryLabel
                   key={f.raw}

ui/src/Components/NavBar/FilterInput/__snapshots__/index.test.tsx.snap

@@ -2,7 +2,7 @@
 
 exports[`<FilterInput /> matches snapshot with no filters 1`] = `
 "
-<div class=\\"input-group w-100 mr-2 components-filterinput-outer bg-transparent\\">
+<div class=\\"input-group w-100 me-2 components-filterinput-outer bg-transparent\\">
   <div class=\\"form-control components-filterinput border-0 rounded-0 bg-inherit\\">
     <div class=\\"autosuggest d-inline-block mw-100\\"
          role=\\"combobox\\"
@@ -10,7 +10,7 @@ exports[`<FilterInput /> matches snapshot with no filters 1`] = `
          aria-owns=\\"downshift-0-menu\\"
          aria-expanded=\\"false\\"
     >
-      <span class=\\"input-group-text d-inline-block mr-2 border-0 bg-inherit px-1\\">
+      <span class=\\"input-group-text text-muted d-inline-block me-2 border-0 bg-inherit px-1\\">
         <svg aria-hidden=\\"true\\"
              focusable=\\"false\\"
              data-prefix=\\"fas\\"
@@ -43,38 +43,36 @@ exports[`<FilterInput /> matches snapshot with no filters 1`] = `
     >
     </span>
   </div>
-  <div class=\\"input-group-append\\">
-    <span class=\\"input-group-text border-0 rounded-0 bg-inherit px-0\\">
-      <button class=\\"btn border-0 rounded-0 bg-inherit cursor-pointer components-navbar-history px-2 py-0 components-navbar-icon\\"
-              type=\\"button\\"
-              data-toggle=\\"dropdown\\"
-              aria-haspopup=\\"true\\"
-              aria-expanded=\\"true\\"
+  <span class=\\"input-group-text border-0 rounded-0 bg-inherit px-0\\">
+    <button class=\\"btn border-0 rounded-0 bg-inherit cursor-pointer components-navbar-history px-2 py-0 components-navbar-icon\\"
+            type=\\"button\\"
+            data-toggle=\\"dropdown\\"
+            aria-haspopup=\\"true\\"
+            aria-expanded=\\"true\\"
+    >
+      <svg aria-hidden=\\"true\\"
+           focusable=\\"false\\"
+           data-prefix=\\"fas\\"
+           data-icon=\\"caret-down\\"
+           class=\\"svg-inline--fa fa-caret-down fa-w-10 \\"
+           role=\\"img\\"
+           xmlns=\\"http://www.w3.org/2000/svg\\"
+           viewbox=\\"0 0 320 512\\"
       >
-        <svg aria-hidden=\\"true\\"
-             focusable=\\"false\\"
-             data-prefix=\\"fas\\"
-             data-icon=\\"caret-down\\"
-             class=\\"svg-inline--fa fa-caret-down fa-w-10 \\"
-             role=\\"img\\"
-             xmlns=\\"http://www.w3.org/2000/svg\\"
-             viewbox=\\"0 0 320 512\\"
+        <path fill=\\"currentColor\\"
+              d=\\"M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z\\"
         >
-          <path fill=\\"currentColor\\"
-                d=\\"M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z\\"
-          >
-          </path>
-        </svg>
-      </button>
-    </span>
-  </div>
+        </path>
+      </svg>
+    </button>
+  </span>
 </div>
 "
 `;
 
 exports[`<FilterInput /> matches snapshot with some filters 1`] = `
 "
-<div class=\\"input-group w-100 mr-2 components-filterinput-outer bg-transparent\\">
+<div class=\\"input-group w-100 me-2 components-filterinput-outer bg-transparent\\">
   <div class=\\"form-control components-filterinput border-0 rounded-0 bg-inherit\\">
     <button type=\\"button\\"
             class=\\"btn-secondary btn-sm components-filteredinputlabel components-label btn d-inline-flex flex-row align-items-center\\"
@@ -93,7 +91,7 @@ exports[`<FilterInput /> matches snapshot with some filters 1`] = `
         >
         </path>
       </svg>
-      <div class=\\"components-filteredinputlabel-text flex-grow-1 flex-shrink-1 ml-1 tooltip-trigger\\">
+      <div class=\\"components-filteredinputlabel-text flex-grow-1 flex-shrink-1 ms-1 tooltip-trigger\\">
         <span tabindex=\\"0\\"
               class=\\"cursor-text px-1\\"
         >
@@ -104,7 +102,7 @@ exports[`<FilterInput /> matches snapshot with some filters 1`] = `
            focusable=\\"false\\"
            data-prefix=\\"fas\\"
            data-icon=\\"times\\"
-           class=\\"svg-inline--fa fa-times fa-w-11 cursor-pointer text-reset ml-1 close\\"
+           class=\\"svg-inline--fa fa-times fa-w-11 cursor-pointer text-reset ms-1\\"
            role=\\"img\\"
            xmlns=\\"http://www.w3.org/2000/svg\\"
            viewbox=\\"0 0 352 512\\"
@@ -132,7 +130,7 @@ exports[`<FilterInput /> matches snapshot with some filters 1`] = `
         >
         </path>
       </svg>
-      <div class=\\"components-filteredinputlabel-text flex-grow-1 flex-shrink-1 ml-1 tooltip-trigger\\">
+      <div class=\\"components-filteredinputlabel-text flex-grow-1 flex-shrink-1 ms-1 tooltip-trigger\\">
         <span tabindex=\\"0\\"
               class=\\"cursor-text px-1\\"
         >
@@ -143,7 +141,7 @@ exports[`<FilterInput /> matches snapshot with some filters 1`] = `
            focusable=\\"false\\"
            data-prefix=\\"fas\\"
            data-icon=\\"times\\"
-           class=\\"svg-inline--fa fa-times fa-w-11 cursor-pointer text-reset ml-1 close\\"
+           class=\\"svg-inline--fa fa-times fa-w-11 cursor-pointer text-reset ms-1\\"
            role=\\"img\\"
            xmlns=\\"http://www.w3.org/2000/svg\\"
            viewbox=\\"0 0 352 512\\"
@@ -177,31 +175,29 @@ exports[`<FilterInput /> matches snapshot with some filters 1`] = `
     >
     </span>
   </div>
-  <div class=\\"input-group-append\\">
-    <span class=\\"input-group-text border-0 rounded-0 bg-inherit px-0\\">
-      <button class=\\"btn border-0 rounded-0 bg-inherit cursor-pointer components-navbar-history px-2 py-0 components-navbar-icon\\"
-              type=\\"button\\"
-              data-toggle=\\"dropdown\\"
-              aria-haspopup=\\"true\\"
-              aria-expanded=\\"true\\"
+  <span class=\\"input-group-text border-0 rounded-0 bg-inherit px-0\\">
+    <button class=\\"btn border-0 rounded-0 bg-inherit cursor-pointer components-navbar-history px-2 py-0 components-navbar-icon\\"
+            type=\\"button\\"
+            data-toggle=\\"dropdown\\"
+            aria-haspopup=\\"true\\"
+            aria-expanded=\\"true\\"
+    >
+      <svg aria-hidden=\\"true\\"
+           focusable=\\"false\\"
+           data-prefix=\\"fas\\"
+           data-icon=\\"caret-down\\"
+           class=\\"svg-inline--fa fa-caret-down fa-w-10 \\"
+           role=\\"img\\"
+           xmlns=\\"http://www.w3.org/2000/svg\\"
+           viewbox=\\"0 0 320 512\\"
       >
-        <svg aria-hidden=\\"true\\"
-             focusable=\\"false\\"
-             data-prefix=\\"fas\\"
-             data-icon=\\"caret-down\\"
-             class=\\"svg-inline--fa fa-caret-down fa-w-10 \\"
-             role=\\"img\\"
-             xmlns=\\"http://www.w3.org/2000/svg\\"
-             viewbox=\\"0 0 320 512\\"
+        <path fill=\\"currentColor\\"
+              d=\\"M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z\\"
         >
-          <path fill=\\"currentColor\\"
-                d=\\"M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z\\"
-          >
-          </path>
-        </svg>
-      </button>
-    </span>
-  </div>
+        </path>
+      </svg>
+    </button>
+  </span>
 </div>
 "
 `;

ui/src/Components/NavBar/FilterInput/index.tsx

@@ -128,7 +128,7 @@ const FilterInput: FC<{
     // data-filters is there to register filters for observation in mobx
     // in order to re-render input component
     <form
-      className="form-inline flex-grow-1 flex-shrink-1 mr-auto"
+      className="flex-grow-1 flex-shrink-1 mr-auto"
       style={{ minWidth: "0px" }}
       onSubmit={(event) => {
         event.preventDefault();
@@ -137,7 +137,7 @@ const FilterInput: FC<{
     >
       <div
         ref={formRef}
-        className={`input-group w-100 mr-2 components-filterinput-outer ${
+        className={`input-group w-100 me-2 components-filterinput-outer ${
           isFocused ? "bg-focused" : "bg-transparent"
         }`}
       >
@@ -159,7 +159,7 @@ const FilterInput: FC<{
             {...getComboboxProps()}
           >
             {alertStore.filters.values.length ? null : (
-              <span className="input-group-text d-inline-block mr-2 border-0 bg-inherit px-1">
+              <span className="input-group-text text-muted d-inline-block me-2 border-0 bg-inherit px-1">
                 <FontAwesomeIcon icon={faSearch} />
               </span>
             )}
@@ -201,9 +201,7 @@ const FilterInput: FC<{
             ) : null}
           </span>
         </div>
-        <div className="input-group-append">
-          <History alertStore={alertStore} settingsStore={settingsStore} />
-        </div>
+        <History alertStore={alertStore} settingsStore={settingsStore} />
       </div>
     </form>
   );

ui/src/Components/OverviewModal/OverviewModalContent.tsx

@@ -16,8 +16,8 @@ const TableRows: FC<{
     {nameStats.map((nameStats) => (
       <tr key={nameStats.name}>
         <td width="25%" className="text-nowrap mw-100 p-1">
-          <span className="badge badge-light components-label mx-0 mt-0 mb-auto pl-0 text-left">
-            <span className="bg-primary text-white mr-1 px-1 components-labelWithPercent-percent">
+          <span className="badge bg-light components-label mx-0 mt-0 mb-auto ps-0 text-start">
+            <span className="bg-primary text-white me-1 px-1 components-labelWithPercent-percent">
               {nameStats.hits}
             </span>
             {nameStats.name}
@@ -98,7 +98,7 @@ const LabelsTable: FC<{
 ));
 
 const NothingToShow: FC = () => (
-  <div className="jumbotron bg-transparent">
+  <div className="px-2 py-5 bg-transparent">
     <h1 className="display-5 text-placeholder text-center">
       No labels to display
     </h1>
@@ -114,9 +114,7 @@ const OverviewModalContent: FC<{
     <>
       <div className="modal-header">
         <h5 className="modal-title">Overview</h5>
-        <button type="button" className="close" onClick={onHide}>
-          <span className="align-middle">&times;</span>
-        </button>
+        <button type="button" className="btn-close" onClick={onHide}></button>
       </div>
       <div className="modal-body">
         {alertStore.data.counters.length === 0 ? (

ui/src/Components/OverviewModal/__snapshots__/OverviewModalContent.test.tsx.snap

@@ -8,11 +8,8 @@ exports[`<OverviewModalContent /> matches snapshot with labels to show 1`] = `
       Overview
     </h5>
     <button type=\\"button\\"
-            class=\\"close\\"
+            class=\\"btn-close\\"
     >
-      <span class=\\"align-middle\\">
-        ×
-      </span>
     </button>
   </div>
   <div class=\\"modal-body\\">
@@ -24,8 +21,8 @@ exports[`<OverviewModalContent /> matches snapshot with labels to show 1`] = `
           <td width=\\"25%\\"
               class=\\"text-nowrap mw-100 p-1\\"
           >
-            <span class=\\"badge badge-light components-label mx-0 mt-0 mb-auto pl-0 text-left\\">
-              <span class=\\"bg-primary text-white mr-1 px-1 components-labelWithPercent-percent\\">
+            <span class=\\"badge bg-light components-label mx-0 mt-0 mb-auto ps-0 text-start\\">
+              <span class=\\"bg-primary text-white me-1 px-1 components-labelWithPercent-percent\\">
                 16
               </span>
               foo
@@ -35,8 +32,8 @@ exports[`<OverviewModalContent /> matches snapshot with labels to show 1`] = `
               class=\\"mw-100 p-1\\"
           >
             <div class=\\"d-inline-block mw-100\\">
-              <span class=\\"components-label badge badge-default components-label-dark components-label-with-hover mb-0 pl-0 text-left\\">
-                <span class=\\"mr-1 px-1 bg-primary text-white components-labelWithPercent-percent\\">
+              <span class=\\"components-label badge bg-default components-label-dark components-label-with-hover mb-0 ps-0 text-start\\">
+                <span class=\\"me-1 px-1 bg-primary text-white components-labelWithPercent-percent\\">
                   8
                 </span>
                 <span>
@@ -48,7 +45,7 @@ exports[`<OverviewModalContent /> matches snapshot with labels to show 1`] = `
                   </span>
                 </span>
               </span>
-              <div class=\\"progress components-labelWithPercent-progress mr-1\\">
+              <div class=\\"progress components-labelWithPercent-progress me-1\\">
                 <div class=\\"progress-bar bg-warning\\"
                      role=\\"progressbar\\"
                      style=\\"width: 50%;\\"
@@ -60,8 +57,8 @@ exports[`<OverviewModalContent /> matches snapshot with labels to show 1`] = `
               </div>
             </div>
             <div class=\\"d-inline-block mw-100\\">
-              <span class=\\"components-label badge badge-default components-label-dark components-label-with-hover mb-0 pl-0 text-left\\">
-                <span class=\\"mr-1 px-1 bg-primary text-white components-labelWithPercent-percent\\">
+              <span class=\\"components-label badge bg-default components-label-dark components-label-with-hover mb-0 ps-0 text-start\\">
+                <span class=\\"me-1 px-1 bg-primary text-white components-labelWithPercent-percent\\">
                   4
                 </span>
                 <span>
@@ -73,7 +70,7 @@ exports[`<OverviewModalContent /> matches snapshot with labels to show 1`] = `
                   </span>
                 </span>
               </span>
-              <div class=\\"progress components-labelWithPercent-progress mr-1\\">
+              <div class=\\"progress components-labelWithPercent-progress me-1\\">
                 <div class=\\"progress-bar bg-transparent\\"
                      role=\\"progressbar\\"
                      style=\\"width: 50%;\\"
@@ -93,8 +90,8 @@ exports[`<OverviewModalContent /> matches snapshot with labels to show 1`] = `
               </div>
             </div>
             <div class=\\"d-inline-block mw-100\\">
-              <span class=\\"components-label badge badge-default components-label-dark components-label-with-hover mb-0 pl-0 text-left\\">
-                <span class=\\"mr-1 px-1 bg-primary text-white components-labelWithPercent-percent\\">
+              <span class=\\"components-label badge bg-default components-label-dark components-label-with-hover mb-0 ps-0 text-start\\">
+                <span class=\\"me-1 px-1 bg-primary text-white components-labelWithPercent-percent\\">
                   4
                 </span>
                 <span>
@@ -106,7 +103,7 @@ exports[`<OverviewModalContent /> matches snapshot with labels to show 1`] = `
                   </span>
                 </span>
               </span>
-              <div class=\\"progress components-labelWithPercent-progress mr-1\\">
+              <div class=\\"progress components-labelWithPercent-progress me-1\\">
                 <div class=\\"progress-bar bg-transparent\\"
                      role=\\"progressbar\\"
                      style=\\"width: 75%;\\"
@@ -131,8 +128,8 @@ exports[`<OverviewModalContent /> matches snapshot with labels to show 1`] = `
           <td width=\\"25%\\"
               class=\\"text-nowrap mw-100 p-1\\"
           >
-            <span class=\\"badge badge-light components-label mx-0 mt-0 mb-auto pl-0 text-left\\">
-              <span class=\\"bg-primary text-white mr-1 px-1 components-labelWithPercent-percent\\">
+            <span class=\\"badge bg-light components-label mx-0 mt-0 mb-auto ps-0 text-start\\">
+              <span class=\\"bg-primary text-white me-1 px-1 components-labelWithPercent-percent\\">
                 20
               </span>
               bar
@@ -142,8 +139,8 @@ exports[`<OverviewModalContent /> matches snapshot with labels to show 1`] = `
               class=\\"mw-100 p-1\\"
           >
             <div class=\\"d-inline-block mw-100\\">
-              <span class=\\"components-label badge badge-default components-label-dark components-label-with-hover mb-0 pl-0 text-left\\">
-                <span class=\\"mr-1 px-1 bg-primary text-white components-labelWithPercent-percent\\">
+              <span class=\\"components-label badge bg-default components-label-dark components-label-with-hover mb-0 ps-0 text-start\\">
+                <span class=\\"me-1 px-1 bg-primary text-white components-labelWithPercent-percent\\">
                   1
                 </span>
                 <span>
@@ -155,7 +152,7 @@ exports[`<OverviewModalContent /> matches snapshot with labels to show 1`] = `
                   </span>
                 </span>
               </span>
-              <div class=\\"progress components-labelWithPercent-progress mr-1\\">
+              <div class=\\"progress components-labelWithPercent-progress me-1\\">
                 <div class=\\"progress-bar bg-success\\"
                      role=\\"progressbar\\"
                      style=\\"width: 5%;\\"
@@ -167,8 +164,8 @@ exports[`<OverviewModalContent /> matches snapshot with labels to show 1`] = `
               </div>
             </div>
             <div class=\\"d-inline-block mw-100\\">
-              <span class=\\"components-label badge badge-default components-label-dark components-label-with-hover mb-0 pl-0 text-left\\">
-                <span class=\\"mr-1 px-1 bg-primary text-white components-labelWithPercent-percent\\">
+              <span class=\\"components-label badge bg-default components-label-dark components-label-with-hover mb-0 ps-0 text-start\\">
+                <span class=\\"me-1 px-1 bg-primary text-white components-labelWithPercent-percent\\">
                   1
                 </span>
                 <span>
@@ -180,7 +177,7 @@ exports[`<OverviewModalContent /> matches snapshot with labels to show 1`] = `
                   </span>
                 </span>
               </span>
-              <div class=\\"progress components-labelWithPercent-progress mr-1\\">
+              <div class=\\"progress components-labelWithPercent-progress me-1\\">
                 <div class=\\"progress-bar bg-transparent\\"
                      role=\\"progressbar\\"
                      style=\\"width: 5%;\\"
@@ -200,8 +197,8 @@ exports[`<OverviewModalContent /> matches snapshot with labels to show 1`] = `
               </div>
             </div>
             <div class=\\"d-inline-block mw-100\\">
-              <span class=\\"components-label badge badge-default components-label-dark components-label-with-hover mb-0 pl-0 text-left\\">
-                <span class=\\"mr-1 px-1 bg-primary text-white components-labelWithPercent-percent\\">
+              <span class=\\"components-label badge bg-default components-label-dark components-label-with-hover mb-0 ps-0 text-start\\">
+                <span class=\\"me-1 px-1 bg-primary text-white components-labelWithPercent-percent\\">
                   1
                 </span>
                 <span>
@@ -213,7 +210,7 @@ exports[`<OverviewModalContent /> matches snapshot with labels to show 1`] = `
                   </span>
                 </span>
               </span>
-              <div class=\\"progress components-labelWithPercent-progress mr-1\\">
+              <div class=\\"progress components-labelWithPercent-progress me-1\\">
                 <div class=\\"progress-bar bg-transparent\\"
                      role=\\"progressbar\\"
                      style=\\"width: 10%;\\"
@@ -233,8 +230,8 @@ exports[`<OverviewModalContent /> matches snapshot with labels to show 1`] = `
               </div>
             </div>
             <div class=\\"d-inline-block mw-100\\">
-              <span class=\\"components-label badge badge-default components-label-dark components-label-with-hover mb-0 pl-0 text-left\\">
-                <span class=\\"mr-1 px-1 bg-primary text-white components-labelWithPercent-percent\\">
+              <span class=\\"components-label badge bg-default components-label-dark components-label-with-hover mb-0 ps-0 text-start\\">
+                <span class=\\"me-1 px-1 bg-primary text-white components-labelWithPercent-percent\\">
                   1
                 </span>
                 <span>
@@ -246,7 +243,7 @@ exports[`<OverviewModalContent /> matches snapshot with labels to show 1`] = `
                   </span>
                 </span>
               </span>
-              <div class=\\"progress components-labelWithPercent-progress mr-1\\">
+              <div class=\\"progress components-labelWithPercent-progress me-1\\">
                 <div class=\\"progress-bar bg-transparent\\"
                      role=\\"progressbar\\"
                      style=\\"width: 15%;\\"
@@ -266,8 +263,8 @@ exports[`<OverviewModalContent /> matches snapshot with labels to show 1`] = `
               </div>
             </div>
             <div class=\\"d-inline-block mw-100\\">
-              <span class=\\"components-label badge badge-default components-label-dark components-label-with-hover mb-0 pl-0 text-left\\">
-                <span class=\\"mr-1 px-1 bg-primary text-white components-labelWithPercent-percent\\">
+              <span class=\\"components-label badge bg-default components-label-dark components-label-with-hover mb-0 ps-0 text-start\\">
+                <span class=\\"me-1 px-1 bg-primary text-white components-labelWithPercent-percent\\">
                   1
                 </span>
                 <span>
@@ -279,7 +276,7 @@ exports[`<OverviewModalContent /> matches snapshot with labels to show 1`] = `
                   </span>
                 </span>
               </span>
-              <div class=\\"progress components-labelWithPercent-progress mr-1\\">
+              <div class=\\"progress components-labelWithPercent-progress me-1\\">
                 <div class=\\"progress-bar bg-transparent\\"
                      role=\\"progressbar\\"
                      style=\\"width: 20%;\\"
@@ -299,8 +296,8 @@ exports[`<OverviewModalContent /> matches snapshot with labels to show 1`] = `
               </div>
             </div>
             <div class=\\"d-inline-block mw-100\\">
-              <span class=\\"components-label badge badge-default components-label-dark components-label-with-hover mb-0 pl-0 text-left\\">
-                <span class=\\"mr-1 px-1 bg-primary text-white components-labelWithPercent-percent\\">
+              <span class=\\"components-label badge bg-default components-label-dark components-label-with-hover mb-0 ps-0 text-start\\">
+                <span class=\\"me-1 px-1 bg-primary text-white components-labelWithPercent-percent\\">
                   1
                 </span>
                 <span>
@@ -312,7 +309,7 @@ exports[`<OverviewModalContent /> matches snapshot with labels to show 1`] = `
                   </span>
                 </span>
               </span>
-              <div class=\\"progress components-labelWithPercent-progress mr-1\\">
+              <div class=\\"progress components-labelWithPercent-progress me-1\\">
                 <div class=\\"progress-bar bg-transparent\\"
                      role=\\"progressbar\\"
                      style=\\"width: 25%;\\"
@@ -332,8 +329,8 @@ exports[`<OverviewModalContent /> matches snapshot with labels to show 1`] = `
               </div>
             </div>
             <div class=\\"d-inline-block mw-100\\">
-              <span class=\\"components-label badge badge-default components-label-dark components-label-with-hover mb-0 pl-0 text-left\\">
-                <span class=\\"mr-1 px-1 bg-primary text-white components-labelWithPercent-percent\\">
+              <span class=\\"components-label badge bg-default components-label-dark components-label-with-hover mb-0 ps-0 text-start\\">
+                <span class=\\"me-1 px-1 bg-primary text-white components-labelWithPercent-percent\\">
                   1
                 </span>
                 <span>
@@ -345,7 +342,7 @@ exports[`<OverviewModalContent /> matches snapshot with labels to show 1`] = `
                   </span>
                 </span>
               </span>
-              <div class=\\"progress components-labelWithPercent-progress mr-1\\">
+              <div class=\\"progress components-labelWithPercent-progress me-1\\">
                 <div class=\\"progress-bar bg-transparent\\"
                      role=\\"progressbar\\"
                      style=\\"width: 30%;\\"
@@ -365,8 +362,8 @@ exports[`<OverviewModalContent /> matches snapshot with labels to show 1`] = `
               </div>
             </div>
             <div class=\\"d-inline-block mw-100\\">
-              <span class=\\"components-label badge badge-default components-label-dark components-label-with-hover mb-0 pl-0 text-left\\">
-                <span class=\\"mr-1 px-1 bg-primary text-white components-labelWithPercent-percent\\">
+              <span class=\\"components-label badge bg-default components-label-dark components-label-with-hover mb-0 ps-0 text-start\\">
+                <span class=\\"me-1 px-1 bg-primary text-white components-labelWithPercent-percent\\">
                   1
                 </span>
                 <span>
@@ -378,7 +375,7 @@ exports[`<OverviewModalContent /> matches snapshot with labels to show 1`] = `
                   </span>
                 </span>
               </span>
-              <div class=\\"progress components-labelWithPercent-progress mr-1\\">
+              <div class=\\"progress components-labelWithPercent-progress me-1\\">
                 <div class=\\"progress-bar bg-transparent\\"
                      role=\\"progressbar\\"
                      style=\\"width: 35%;\\"
@@ -398,8 +395,8 @@ exports[`<OverviewModalContent /> matches snapshot with labels to show 1`] = `
               </div>
             </div>
             <div class=\\"d-inline-block mw-100\\">
-              <span class=\\"components-label badge badge-default components-label-dark components-label-with-hover mb-0 pl-0 text-left\\">
-                <span class=\\"mr-1 px-1 bg-primary text-white components-labelWithPercent-percent\\">
+              <span class=\\"components-label badge bg-default components-label-dark components-label-with-hover mb-0 ps-0 text-start\\">
+                <span class=\\"me-1 px-1 bg-primary text-white components-labelWithPercent-percent\\">
                   1
                 </span>
                 <span>
@@ -411,7 +408,7 @@ exports[`<OverviewModalContent /> matches snapshot with labels to show 1`] = `
                   </span>
                 </span>
               </span>
-              <div class=\\"progress components-labelWithPercent-progress mr-1\\">
+              <div class=\\"progress components-labelWithPercent-progress me-1\\">
                 <div class=\\"progress-bar bg-transparent\\"
                      role=\\"progressbar\\"
                      style=\\"width: 40%;\\"
@@ -439,8 +436,8 @@ exports[`<OverviewModalContent /> matches snapshot with labels to show 1`] = `
           <td width=\\"25%\\"
               class=\\"text-nowrap mw-100 p-1\\"
           >
-            <span class=\\"badge badge-light components-label mx-0 mt-0 mb-auto pl-0 text-left\\">
-              <span class=\\"bg-primary text-white mr-1 px-1 components-labelWithPercent-percent\\">
+            <span class=\\"badge bg-light components-label mx-0 mt-0 mb-auto ps-0 text-start\\">
+              <span class=\\"bg-primary text-white me-1 px-1 components-labelWithPercent-percent\\">
                 5
               </span>
               alertname
@@ -450,8 +447,8 @@ exports[`<OverviewModalContent /> matches snapshot with labels to show 1`] = `
               class=\\"mw-100 p-1\\"
           >
             <div class=\\"d-inline-block mw-100\\">
-              <span class=\\"components-label badge badge-dark components-label-dark components-label-with-hover mb-0 pl-0 text-left\\">
-                <span class=\\"mr-1 px-1 bg-primary text-white components-labelWithPercent-percent\\">
+              <span class=\\"components-label badge bg-dark components-label-dark components-label-with-hover mb-0 ps-0 text-start\\">
+                <span class=\\"me-1 px-1 bg-primary text-white components-labelWithPercent-percent\\">
                   5
                 </span>
                 <span>
@@ -463,7 +460,7 @@ exports[`<OverviewModalContent /> matches snapshot with labels to show 1`] = `
                   </span>
                 </span>
               </span>
-              <div class=\\"progress components-labelWithPercent-progress mr-1\\">
+              <div class=\\"progress components-labelWithPercent-progress me-1\\">
                 <div class=\\"progress-bar bg-danger\\"
                      role=\\"progressbar\\"
                      style=\\"width: 100%;\\"
@@ -491,15 +488,12 @@ exports[`<OverviewModalContent /> matches snapshot with no labels to show 1`] =
       Overview
     </h5>
     <button type=\\"button\\"
-            class=\\"close\\"
+            class=\\"btn-close\\"
     >
-      <span class=\\"align-middle\\">
-        ×
-      </span>
     </button>
   </div>
   <div class=\\"modal-body\\">
-    <div class=\\"jumbotron bg-transparent\\">
+    <div class=\\"px-2 py-5 bg-transparent\\">
       <h1 class=\\"display-5 text-placeholder text-center\\">
         No labels to display
       </h1>

ui/src/Components/OverviewModal/index.test.tsx

@@ -62,14 +62,14 @@ describe("<OverviewModal />", () => {
     expect(tree.find(".modal-title")).toHaveLength(0);
   });
 
-  it("hides the modal when button.close is clicked", () => {
+  it("hides the modal when button.btn-close is clicked", () => {
     const tree = MountedOverviewModal();
     const toggle = tree.find("div.navbar-brand");
 
     toggle.simulate("click");
     expect(tree.find(".modal-title").text()).toBe("Overview");
 
-    tree.find("button.close").simulate("click");
+    tree.find("button.btn-close").simulate("click");
     act(() => {
       jest.runOnlyPendingTimers();
     });

ui/src/Components/PaginatedAlertList/index.tsx

@@ -22,7 +22,7 @@ const FetchError: FC<{ message: ReactNode }> = ({ message }) => (
 );
 
 const Placeholder = () => (
-  <div className="jumbotron bg-transparent">
+  <div className="px-2 py-5 bg-transparent">
     <h1 className="display-5 text-placeholder text-center">
       <FontAwesomeIcon icon={faSpinner} size="lg" spin />
     </h1>

ui/src/Components/SilenceModal/AuthorInput.tsx

@@ -16,11 +16,9 @@ const IconInput: FC<{
   readOnly?: boolean;
 }> = ({ type, autoComplete, icon, placeholder, value, onChange, ...extra }) => (
   <div className="input-group mb-3">
-    <div className="input-group-prepend">
-      <span className="input-group-text">
-        <FontAwesomeIcon icon={icon} />
-      </span>
-    </div>
+    <span className="input-group-text text-muted">
+      <FontAwesomeIcon icon={icon} />
+    </span>
     <input
       type={type}
       className="form-control"

ui/src/Components/SilenceModal/Browser/index.tsx

@@ -45,7 +45,7 @@ const Placeholder: FC<{
       classNames="components-animation-fade"
       timeout={context.animations.duration}
     >
-      <div className="jumbotron bg-transparent">
+      <div className="px-2 py-5 bg-transparent">
         <h1 className="display-5 text-placeholder text-center">{content}</h1>
       </div>
     </CSSTransition>
@@ -94,17 +94,17 @@ const Browser: FC<{
         className="d-flex flex-fill flex-lg-row flex-column justify-content-between mb-3"
         data-refresh={settingsStore.fetchConfig.config.interval}
       >
-        <span className="custom-control custom-switch my-auto flex-grow-0 flex-shrink-0">
+        <span className="form-check form-switch my-auto flex-grow-0 flex-shrink-0">
           <input
             id="silence-show-expired"
-            className="custom-control-input"
+            className="form-check-input"
             type="checkbox"
             value=""
             checked={showExpired}
             onChange={() => setShowExpired(!showExpired)}
           />
           <label
-            className="custom-control-label cursor-pointer"
+            className="form-check-label cursor-pointer"
             htmlFor="silence-show-expired"
           >
             Show expired
@@ -124,7 +124,7 @@ const Browser: FC<{
           onClick={() => setSortReverse(!sortReverse)}
         >
           <FontAwesomeIcon
-            className="mr-1"
+            className="me-1"
             icon={sortReverse ? faSortAmountUp : faSortAmountDownAlt}
           />
           Sort order

ui/src/Components/SilenceModal/DateTimeSelect/Duration.tsx

@@ -59,7 +59,7 @@ const Duration: FC<{
               <h2>{value}</h2>
             </td>
             <td className="w-50">
-              <span className="text-muted ml-2">{label}</span>
+              <span className="text-muted ms-2">{label}</span>
             </td>
           </tr>
           <tr>

ui/src/Components/SilenceModal/DateTimeSelect/__snapshots__/index.test.tsx.snap

@@ -5,30 +5,30 @@ exports[`<DateTimeSelect /> 'Duration' tab matches snapshot 1`] = `
 <ul class=\\"nav nav-tabs nav-fill\\">
   <li class=\\"nav-item\\">
     <span class=\\"nav-link cursor-pointer \\">
-      <span class=\\"mr-1\\">
+      <span class=\\"me-1\\">
         Starts
       </span>
-      <span class=\\"badge badge-light\\">
+      <span class=\\"badge bg-light\\">
         now
       </span>
     </span>
   </li>
   <li class=\\"nav-item\\">
     <span class=\\"nav-link cursor-pointer \\">
-      <span class=\\"mr-1\\">
+      <span class=\\"me-1\\">
         Ends
       </span>
-      <span class=\\"badge badge-light\\">
+      <span class=\\"badge bg-light\\">
         in 366d
       </span>
     </span>
   </li>
   <li class=\\"nav-item\\">
     <span class=\\"nav-link cursor-pointer active\\">
-      <span class=\\"mr-1\\">
+      <span class=\\"me-1\\">
         Duration
       </span>
-      <span class=\\"badge badge-light\\">
+      <span class=\\"badge bg-light\\">
         366d
       </span>
     </span>
@@ -68,7 +68,7 @@ exports[`<DateTimeSelect /> 'Duration' tab matches snapshot 1`] = `
               </h2>
             </td>
             <td class=\\"w-50\\">
-              <span class=\\"text-muted ml-2\\">
+              <span class=\\"text-muted ms-2\\">
                 days
               </span>
             </td>
@@ -130,7 +130,7 @@ exports[`<DateTimeSelect /> 'Duration' tab matches snapshot 1`] = `
               </h2>
             </td>
             <td class=\\"w-50\\">
-              <span class=\\"text-muted ml-2\\">
+              <span class=\\"text-muted ms-2\\">
                 hours
               </span>
             </td>
@@ -192,7 +192,7 @@ exports[`<DateTimeSelect /> 'Duration' tab matches snapshot 1`] = `
               </h2>
             </td>
             <td class=\\"w-50\\">
-              <span class=\\"text-muted ml-2\\">
+              <span class=\\"text-muted ms-2\\">
                 minutes
               </span>
             </td>
@@ -232,30 +232,30 @@ exports[`<DateTimeSelect /> 'Ends' tab matches snapshot 1`] = `
 <ul class=\\"nav nav-tabs nav-fill\\">
   <li class=\\"nav-item\\">
     <span class=\\"nav-link cursor-pointer \\">
-      <span class=\\"mr-1\\">
+      <span class=\\"me-1\\">
         Starts
       </span>
-      <span class=\\"badge badge-light\\">
+      <span class=\\"badge bg-light\\">
         now
       </span>
     </span>
   </li>
   <li class=\\"nav-item\\">
     <span class=\\"nav-link cursor-pointer active\\">
-      <span class=\\"mr-1\\">
+      <span class=\\"me-1\\">
         Ends
       </span>
-      <span class=\\"badge badge-light\\">
+      <span class=\\"badge bg-light\\">
         in 366d
       </span>
     </span>
   </li>
   <li class=\\"nav-item\\">
     <span class=\\"nav-link cursor-pointer \\">
-      <span class=\\"mr-1\\">
+      <span class=\\"me-1\\">
         Duration
       </span>
-      <span class=\\"badge badge-light\\">
+      <span class=\\"badge bg-light\\">
         366d
       </span>
     </span>
@@ -784,30 +784,30 @@ exports[`<DateTimeSelect /> 'Starts' tab matches snapshot 1`] = `
 <ul class=\\"nav nav-tabs nav-fill\\">
   <li class=\\"nav-item\\">
     <span class=\\"nav-link cursor-pointer active\\">
-      <span class=\\"mr-1\\">
+      <span class=\\"me-1\\">
         Starts
       </span>
-      <span class=\\"badge badge-light\\">
+      <span class=\\"badge bg-light\\">
         now
       </span>
     </span>
   </li>
   <li class=\\"nav-item\\">
     <span class=\\"nav-link cursor-pointer \\">
-      <span class=\\"mr-1\\">
+      <span class=\\"me-1\\">
         Ends
       </span>
-      <span class=\\"badge badge-light\\">
+      <span class=\\"badge bg-light\\">
         in 366d
       </span>
     </span>
   </li>
   <li class=\\"nav-item\\">
     <span class=\\"nav-link cursor-pointer \\">
-      <span class=\\"mr-1\\">
+      <span class=\\"me-1\\">
         Duration
       </span>
-      <span class=\\"badge badge-light\\">
+      <span class=\\"badge bg-light\\">
         366d
       </span>
     </span>

ui/src/Components/SilenceModal/DateTimeSelect/index.tsx

@@ -30,7 +30,7 @@ const OffsetBadge: FC<{
   const minutes = differenceInMinutes(endDate, startDate) % 60;
 
   return (
-    <span className="badge badge-light">
+    <span className="badge bg-light">
       {days <= 0 && hours <= 0 && minutes <= 0 ? "now" : prefixLabel}
       {days > 0 ? `${days}d ` : null}
       {hours > 0 ? `${hours}h ` : null}
@@ -225,7 +225,7 @@ const DateTimeSelect: FC<{
         <Tab
           title={
             <>
-              <span className="mr-1">Starts</span>
+              <span className="me-1">Starts</span>
               <OffsetBadge
                 prefixLabel="in "
                 startDate={timeNow}
@@ -239,7 +239,7 @@ const DateTimeSelect: FC<{
         <Tab
           title={
             <>
-              <span className="mr-1">Ends</span>
+              <span className="me-1">Ends</span>
               <OffsetBadge
                 prefixLabel="in "
                 startDate={timeNow}
@@ -253,7 +253,7 @@ const DateTimeSelect: FC<{
         <Tab
           title={
             <>
-              <span className="mr-1">Duration</span>
+              <span className="me-1">Duration</span>
               <OffsetBadge
                 prefixLabel=""
                 startDate={silenceFormStore.data.startsAt}

ui/src/Components/SilenceModal/SilenceForm.tsx

@@ -52,34 +52,31 @@ const ShareButton: FC<{
 
   return (
     <div className="input-group mb-3">
-      <div className="input-group-prepend">
-        <span className="input-group-text">
-          <TooltipWrapper title="Link to this form">
-            <FontAwesomeIcon icon={faShareAlt} />
-          </TooltipWrapper>
-        </span>
-      </div>
+      <span className="input-group-text text-muted">
+        <TooltipWrapper title="Link to this form">
+          <FontAwesomeIcon icon={faShareAlt} />
+        </TooltipWrapper>
+      </span>
       <input
         type="text"
         className="form-control"
         value={`${baseURL}?m=${silenceFormStore.data.toBase64}`}
         onChange={() => {}}
       />
-      <div ref={ref} className="input-group-append">
-        <span
-          className="input-group-text cursor-pointer"
-          onClick={() => {
-            copy(`${baseURL}?m=${silenceFormStore.data.toBase64}`);
-            setClickCount(clickCount + 1);
-          }}
-        >
-          <TooltipWrapper title="Copy to clipboard">
-            <CSSTransition {...props}>
-              <FontAwesomeIcon icon={faCopy} />
-            </CSSTransition>
-          </TooltipWrapper>
-        </span>
-      </div>
+      <span
+        ref={ref}
+        className="input-group-text text-muted cursor-pointer"
+        onClick={() => {
+          copy(`${baseURL}?m=${silenceFormStore.data.toBase64}`);
+          setClickCount(clickCount + 1);
+        }}
+      >
+        <TooltipWrapper title="Copy to clipboard">
+          <CSSTransition {...props}>
+            <FontAwesomeIcon icon={faCopy} />
+          </CSSTransition>
+        </TooltipWrapper>
+      </span>
     </div>
   );
 });
@@ -261,15 +258,15 @@ const SilenceForm: FC<{
           {silenceFormStore.data.silenceID === null ? null : (
             <button
               type="button"
-              className="btn btn-danger mr-2"
+              className="btn btn-danger me-2"
               onClick={silenceFormStore.data.resetSilenceID}
             >
-              <FontAwesomeIcon icon={faUndoAlt} className="mr-1" />
+              <FontAwesomeIcon icon={faUndoAlt} className="me-1" />
               Reset
             </button>
           )}
           <button type="submit" className="btn btn-primary">
-            <FontAwesomeIcon icon={faSearch} className="mr-1" />
+            <FontAwesomeIcon icon={faSearch} className="me-1" />
             Preview
           </button>
         </span>

ui/src/Components/SilenceModal/SilenceMatch/MatchCounter.tsx

@@ -36,7 +36,7 @@ const MatchCounter: FC<{
   ) : (
     <TooltipWrapper title="Number of alerts matching this label">
       <span
-        className="badge badge-light badge-pill d-block"
+        className="badge bg-light rounded-pill d-block"
         style={{ fontSize: "85%", lineHeight: "1rem" }}
         data-am={silenceFormStore.data.alertmanagers.length}
       >

ui/src/Components/SilenceModal/SilenceMatch/__snapshots__/MatchCounter.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`<MatchCounter /> matches snapshot 1`] = `
 "
 <div class=\\" tooltip-trigger\\">
-  <span class=\\"badge badge-light badge-pill d-block\\"
+  <span class=\\"badge bg-light rounded-pill d-block\\"
         style=\\"font-size: 85%; line-height: 1rem;\\"
         data-am=\\"0\\"
   >

ui/src/Components/SilenceModal/SilenceMatch/index.tsx

@@ -38,13 +38,13 @@ const SilenceMatch: FC<{
   return (
     <div className="d-flex flex-fill flex-lg-row align-items-center flex-column mb-3">
       <div
-        className="flex-shrink-0 flex-grow-0 pr-lg-2 pb-2 pb-lg-0 w-100"
+        className="flex-shrink-0 flex-grow-0 pe-lg-2 pb-2 pb-lg-0 w-100"
         style={{ flexBasis: "25%" }}
       >
         <LabelNameInput matcher={matcher} isValid={isValid} />
       </div>
       <div
-        className="flex-shrink-0 flex-grow-0 pr-lg-2 pb-2 pb-lg-0 w-100"
+        className="flex-shrink-0 flex-grow-0 pe-lg-2 pb-2 pb-lg-0 w-100"
         style={{ flexBasis: "40%" }}
       >
         <LabelValueInput
@@ -57,12 +57,12 @@ const SilenceMatch: FC<{
         className="flex-shrink-0 flex-grow-1 w-100"
         style={{ flexBasis: "15%" }}
       >
-        <div className="d-flex justify-content-between form-check form-check-inline m-0">
+        <div className="d-flex justify-content-between form-check form-check-inline m-0 p-0">
           <div>
-            <span className="custom-control custom-switch">
+            <span className="form-check form-switch">
               <input
                 id={`isEqual-${matcher.id}`}
-                className="custom-control-input"
+                className="form-check-input"
                 type="checkbox"
                 value=""
                 checked={matcher.isEqual}
@@ -72,16 +72,16 @@ const SilenceMatch: FC<{
                 disabled={!enableIsEqual}
               />
               <label
-                className="custom-control-label cursor-pointer mr-3"
+                className="form-check-label cursor-pointer me-3"
                 htmlFor={`isEqual-${matcher.id}`}
               >
                 {matcher.isEqual ? "Silence matches" : "Exclude matches"}
               </label>
             </span>
-            <span className="custom-control custom-switch">
+            <span className="form-check form-switch">
               <input
                 id={`isRegex-${matcher.id}`}
-                className="custom-control-input"
+                className="form-check-input"
                 type="checkbox"
                 value=""
                 checked={matcher.isRegex}
@@ -93,7 +93,7 @@ const SilenceMatch: FC<{
                 disabled={matcher.values.length > 1}
               />
               <label
-                className="custom-control-label cursor-pointer mr-3"
+                className="form-check-label cursor-pointer me-3"
                 htmlFor={`isRegex-${matcher.id}`}
               >
                 Regex

ui/src/Components/SilenceModal/SilenceModalContent.tsx

@@ -16,9 +16,9 @@ import SilenceSubmitController from "./SilenceSubmit/SilenceSubmitController";
 import Browser from "./Browser";
 
 const ReadOnlyPlaceholder: FC = () => (
-  <div className="jumbotron bg-transparent">
+  <div className="px-2 py-5 bg-transparent">
     <h1 className="display-5 text-placeholder text-center">
-      <FontAwesomeIcon icon={faLock} className="mr-3" />
+      <FontAwesomeIcon icon={faLock} className="me-3" />
       Read only mode
     </h1>
   </div>
@@ -61,9 +61,11 @@ const SilenceModalContent: FC<{
                 active={silenceFormStore.tab.current === "browser"}
                 onClick={() => silenceFormStore.tab.setTab("browser")}
               />
-              <button type="button" className="close" onClick={onHide}>
-                <span>&times;</span>
-              </button>
+              <button
+                type="button"
+                className="btn-close my-auto"
+                onClick={onHide}
+              ></button>
             </nav>
           </div>
           <div

ui/src/Components/SilenceModal/SilencePreview/__snapshots__/index.test.tsx.snap

@@ -10,7 +10,7 @@ exports[`<SilencePreview /> matches snapshot 1`] = `
     <div>
       <ul class=\\"list-group list-group-flush mb-3\\">
         <li class=\\"list-group-item px-0 pt-2 pb-1\\">
-          <span class=\\"components-label badge badge-dark components-label-dark \\">
+          <span class=\\"components-label badge bg-dark components-label-dark \\">
             <span class=\\"components-label-name\\">
               alertname:
             </span>
@@ -18,7 +18,7 @@ exports[`<SilencePreview /> matches snapshot 1`] = `
               foo
             </span>
           </span>
-          <span class=\\"components-label badge badge-default components-label-dark \\">
+          <span class=\\"components-label badge bg-default components-label-dark \\">
             <span class=\\"components-label-name\\">
               job:
             </span>
@@ -26,7 +26,7 @@ exports[`<SilencePreview /> matches snapshot 1`] = `
               foo
             </span>
           </span>
-          <span class=\\"components-label badge badge-default components-label-dark \\">
+          <span class=\\"components-label badge bg-default components-label-dark \\">
             <span class=\\"components-label-name\\">
               instance:
             </span>
@@ -36,7 +36,7 @@ exports[`<SilencePreview /> matches snapshot 1`] = `
           </span>
         </li>
         <li class=\\"list-group-item px-0 pt-2 pb-1\\">
-          <span class=\\"components-label badge badge-dark components-label-dark \\">
+          <span class=\\"components-label badge bg-dark components-label-dark \\">
             <span class=\\"components-label-name\\">
               alertname:
             </span>
@@ -44,7 +44,7 @@ exports[`<SilencePreview /> matches snapshot 1`] = `
               bar
             </span>
           </span>
-          <span class=\\"components-label badge badge-default components-label-dark \\">
+          <span class=\\"components-label badge bg-default components-label-dark \\">
             <span class=\\"components-label-name\\">
               job:
             </span>
@@ -52,7 +52,7 @@ exports[`<SilencePreview /> matches snapshot 1`] = `
               bar
             </span>
           </span>
-          <span class=\\"components-label badge badge-default components-label-dark \\">
+          <span class=\\"components-label badge bg-default components-label-dark \\">
             <span class=\\"components-label-name\\">
               instance:
             </span>
@@ -62,7 +62,7 @@ exports[`<SilencePreview /> matches snapshot 1`] = `
           </span>
         </li>
         <li class=\\"list-group-item px-0 pt-2 pb-1\\">
-          <span class=\\"components-label badge badge-dark components-label-dark \\">
+          <span class=\\"components-label badge bg-dark components-label-dark \\">
             <span class=\\"components-label-name\\">
               alertname:
             </span>
@@ -70,7 +70,7 @@ exports[`<SilencePreview /> matches snapshot 1`] = `
               bar
             </span>
           </span>
-          <span class=\\"components-label badge badge-default components-label-dark \\">
+          <span class=\\"components-label badge bg-default components-label-dark \\">
             <span class=\\"components-label-name\\">
               job:
             </span>
@@ -78,7 +78,7 @@ exports[`<SilencePreview /> matches snapshot 1`] = `
               bar
             </span>
           </span>
-          <span class=\\"components-label badge badge-default components-label-dark \\">
+          <span class=\\"components-label badge bg-default components-label-dark \\">
             <span class=\\"components-label-name\\">
               instance:
             </span>
@@ -101,7 +101,7 @@ exports[`<SilencePreview /> matches snapshot 1`] = `
          focusable=\\"false\\"
          data-prefix=\\"fas\\"
          data-icon=\\"check-circle\\"
-         class=\\"svg-inline--fa fa-check-circle fa-w-16 pr-1\\"
+         class=\\"svg-inline--fa fa-check-circle fa-w-16 pe-1\\"
          role=\\"img\\"
          xmlns=\\"http://www.w3.org/2000/svg\\"
          viewbox=\\"0 0 512 512\\"
@@ -114,13 +114,13 @@ exports[`<SilencePreview /> matches snapshot 1`] = `
     Submit
   </button>
   <button type=\\"button\\"
-          class=\\"btn btn-danger mr-2\\"
+          class=\\"btn btn-danger me-2\\"
   >
     <svg aria-hidden=\\"true\\"
          focusable=\\"false\\"
          data-prefix=\\"fas\\"
          data-icon=\\"arrow-left\\"
-         class=\\"svg-inline--fa fa-arrow-left fa-w-14 pr-1\\"
+         class=\\"svg-inline--fa fa-arrow-left fa-w-14 pe-1\\"
          role=\\"img\\"
          xmlns=\\"http://www.w3.org/2000/svg\\"
          viewbox=\\"0 0 448 512\\"

ui/src/Components/SilenceModal/SilencePreview/index.tsx

@@ -33,15 +33,15 @@ const SilencePreview: FC<{
           className="btn btn-primary"
           onClick={() => silenceFormStore.data.setStage("submit")}
         >
-          <FontAwesomeIcon icon={faCheckCircle} className="pr-1" />
+          <FontAwesomeIcon icon={faCheckCircle} className="pe-1" />
           Submit
         </button>
         <button
           type="button"
-          className="btn btn-danger mr-2"
+          className="btn btn-danger me-2"
           onClick={silenceFormStore.data.resetProgress}
         >
-          <FontAwesomeIcon icon={faArrowLeft} className="pr-1" />
+          <FontAwesomeIcon icon={faArrowLeft} className="pe-1" />
           Back
         </button>
       </div>

ui/src/Components/SilenceModal/SilenceSubmit/SilenceSubmitController.test.tsx

@@ -183,7 +183,7 @@ describe("<SingleClusterStatus />", () => {
       />
     );
     expect(tree.find("div.display-1").at(0).html()).toMatch(/fa-circle-notch/);
-    expect(tree.find("div.badge.badge-primary").text()).toBe("single");
+    expect(tree.find("div.badge.bg-primary").text()).toBe("single");
     expect(tree.find("p")).toHaveLength(0);
   });
 
@@ -201,7 +201,7 @@ describe("<SingleClusterStatus />", () => {
     expect(tree.find("div.display-1").at(0).html()).toMatch(
       /fa-exclamation-circle/
     );
-    expect(tree.find("div.badge.badge-primary").text()).toBe("single");
+    expect(tree.find("div.badge.bg-primary").text()).toBe("single");
     expect(tree.find("p").text()).toBe("fake error");
   });
 
@@ -219,7 +219,7 @@ describe("<SingleClusterStatus />", () => {
     );
 
     expect(tree.find("div.display-1").at(0).html()).toMatch(/fa-check-circle/);
-    expect(tree.find("div.badge.badge-primary").text()).toBe("single");
+    expect(tree.find("div.badge.bg-primary").text()).toBe("single");
     expect(tree.find("p").text()).toBe("123456789");
     expect(tree.find("p").find('a[href="http://localhost"]')).toHaveLength(1);
   });

ui/src/Components/SilenceModal/SilenceSubmit/SilenceSubmitController.tsx

@@ -33,7 +33,7 @@ const SilenceSubmitController: FC<{
           className="btn btn-primary"
           onClick={silenceFormStore.data.resetProgress}
         >
-          <FontAwesomeIcon icon={faArrowLeft} className="pr-1" />
+          <FontAwesomeIcon icon={faArrowLeft} className="pe-1" />
           Back
         </button>
       </div>

ui/src/Components/SilenceModal/SilenceSubmit/SingleClusterStatus.tsx

@@ -41,7 +41,7 @@ const SingleClusterStatus: FC<{
           />
         )}
       </div>
-      <div className="badge badge-primary">{clusterRequest.cluster}</div>
+      <div className="badge bg-primary">{clusterRequest.cluster}</div>
       {clusterRequest.isDone ? (
         <p
           className={`mt-2 rounded text-center ${