diff --git a/docs/accessibility.md b/docs/accessibility.md
index f2ba2ec386d..774283b8b78 100644
--- a/docs/accessibility.md
+++ b/docs/accessibility.md
@@ -54,7 +54,7 @@ For example:
 </Button>
 ```
 
-Known reactstrap components that accept the `color` prop and work with custom Treeherder colors: `Badge`, `Button`, `Card`, `DropdownToggle`, `FormText`, `NavBar`, `Progress`, `Spinner`.
+Known reactstrap components that accept the `color` prop and work with custom Treeherder colors: `Badge`, `Button`, `Card`, `Dropdown.Toggle`, `FormText`, `NavBar`, `Progress`, `Spinner`.
 
 In case you need to add more custom colors, please add on [treeherder-custom-styles.css](https://github.com/mozilla/treeherder/blob/master/ui/css/treeherder-custom-styles.css#L348) style sheet.
 
@@ -102,7 +102,7 @@ If your case is more specific, please check [this guide](https://css-tricks.com/
 
 ## Interactive elements
 
-When creating elements that have event listeners, prefer any component of the reactstrap interactive elements. Examples are: `Button`, `Input`, `DropdownToggle`. You can also choose a HTML `<a>` element.
+When creating elements that have event listeners, prefer any component of the reactstrap interactive elements. Examples are: `Button`, `Input`, `Dropdown.Toggle`. You can also choose a HTML `<a>` element.
 
 If you need to insert an event listener in a non-interactive element, such as a `span`, add also an `aria-role` of `button`, `link`, `checkbox`, or whatever seems closer to the functionality of the element.
 
@@ -116,10 +116,10 @@ If you need to insert an event listener in a non-interactive element, such as a
 
 There is a special case when you are creating a dropdown menu. First of all, try to follow [reactstrap structure](https://reactstrap.github.io/components/dropdowns/).
 
-Lastly, insert an additional tag `prop` to `DropdownItem` component.
+Lastly, insert an additional tag `prop` to `Dropdown.Item` component.
 
 ```jsx
-<DropdownItem tag="a"> Menu Item </DropdownItem>
+<Dropdown.Item tag="a"> Menu Item </Dropdown.Item>
 ```
 
 ## Forms, inputs and buttons
diff --git a/package.json b/package.json
index 90397a9c9b1..9c68f116534 100644
--- a/package.json
+++ b/package.json
@@ -42,6 +42,7 @@
     "prop-types": "15.8.1",
     "query-string": "7.0.1",
     "react": "18.3.1",
+    "react-bootstrap": "2.10.10",
     "react-dates": "21.8.0",
     "react-dom": "18.3.1",
     "react-helmet": "6.1.0",
@@ -55,7 +56,6 @@
     "react-split-pane": "0.1.92",
     "react-table-6": "6.11.0",
     "react-tabs": "6.1.0",
-    "reactstrap": "8.10.1",
     "redoc": "2.4.0",
     "redux": "4.2.1",
     "redux-debounce": "1.0.1",
diff --git a/ui/infra-compare/InfraCompareTable.jsx b/ui/infra-compare/InfraCompareTable.jsx
index e738572aa53..94121165301 100644
--- a/ui/infra-compare/InfraCompareTable.jsx
+++ b/ui/infra-compare/InfraCompareTable.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Table } from 'reactstrap';
+import { Table } from 'react-bootstrap';
 import PropTypes from 'prop-types';
 
 import { getJobsUrl } from '../helpers/url';
diff --git a/ui/infra-compare/InfraCompareTableControls.jsx b/ui/infra-compare/InfraCompareTableControls.jsx
index 0a04e6bc2f8..aab81f9decd 100644
--- a/ui/infra-compare/InfraCompareTableControls.jsx
+++ b/ui/infra-compare/InfraCompareTableControls.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Container, CustomInput, Label } from 'reactstrap';
+import { Container, Form } from 'react-bootstrap';
 
 import FilterControls from '../shared/FilterControls';
 
@@ -110,11 +110,11 @@ export default class CompareTableControls extends React.Component {
           updateFilter={this.updateFilter}
           updateFilterText={this.updateFilterText}
         />
-        <Label for="filterPercent">Filter percentage: {filterPercent}%</Label>
-        <CustomInput
-          type="range"
+        <Form.Label htmlFor="filterPercent">
+          Filter percentage: {filterPercent}%
+        </Form.Label>
+        <Form.Range
           id="filterPercent"
-          name="customSelect"
           min={0}
           max={20}
           value={filterPercent}
diff --git a/ui/infra-compare/InfraCompareTableRow.jsx b/ui/infra-compare/InfraCompareTableRow.jsx
index 77c53bb0d96..41cb1d616cc 100644
--- a/ui/infra-compare/InfraCompareTableRow.jsx
+++ b/ui/infra-compare/InfraCompareTableRow.jsx
@@ -1,13 +1,12 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { UncontrolledTooltip } from 'reactstrap';
+import { OverlayTrigger, Tooltip } from 'react-bootstrap';
 
 import { getJobsUrl } from '../helpers/url';
 
 export default class InfraCompareTableRow extends React.PureComponent {
   render() {
     const {
-      hashkey,
       rowLevelResults: {
         suite,
         platform,
@@ -24,80 +23,80 @@ export default class InfraCompareTableRow extends React.PureComponent {
     } = this.props;
 
     return (
-      <tr color="danger">
+      <tr className="table-danger">
         <th className="text-left">{suite}</th>
         <td>
-          <span
-            style={{ textDecoration: 'underline', color: 'blue' }}
-            id={`originalValue${hashkey}`}
-          >
-            {originalValue}
-          </span>
-          <UncontrolledTooltip
+          <OverlayTrigger
             placement="top"
-            target={`originalValue${hashkey}`}
-            autohide={false}
+            overlay={
+              <Tooltip>
+                {originalJobs.size > 0 ? (
+                  Array.from(originalJobs).map(([jobName, durations]) => (
+                    <p key={jobName}>
+                      {jobName}: {durations.join(', ')}
+                    </p>
+                  ))
+                ) : (
+                  <p className="lead text-center">No jobs to show</p>
+                )}
+                <a
+                  href={getJobsUrl({
+                    repo: originalProject,
+                    revision: originalRevision,
+                    searchStr: `${platform} ${suite}`,
+                  })}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  Go to treeherder Job View
+                </a>
+              </Tooltip>
+            }
+            delay={{ show: 0, hide: 0 }}
           >
-            {originalJobs.size > 0 ? (
-              Array.from(originalJobs).map(([jobName, durations]) => (
-                <p>
-                  {jobName}: {durations.join(', ')}
-                </p>
-              ))
-            ) : (
-              <p className="lead text-center">No jobs to show</p>
-            )}
-            <a
-              href={getJobsUrl({
-                repo: originalProject,
-                revision: originalRevision,
-                searchStr: `${platform} ${suite}`,
-              })}
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              Go to treeherder Job View
-            </a>
-          </UncontrolledTooltip>
+            <span style={{ textDecoration: 'underline', color: 'blue' }}>
+              {originalValue}
+            </span>
+          </OverlayTrigger>
         </td>
         <td>
           {originalValue < newValue && <span>&lt;</span>}
           {originalValue > newValue && <span>&gt;</span>}
         </td>
         <td>
-          <span
-            style={{ textDecoration: 'underline', color: 'blue' }}
-            id={`newValue${hashkey}`}
+          <OverlayTrigger
+            placement="top"
+            overlay={
+              <Tooltip>
+                {newJobs.size > 0 ? (
+                  Array.from(newJobs).map(([jobName, duration]) => (
+                    <p key={jobName}>
+                      {jobName}: {duration.join(', ')}
+                    </p>
+                  ))
+                ) : (
+                  <p className="lead text-center">No jobs to show</p>
+                )}
+                <a
+                  href={getJobsUrl({
+                    repo: newProject,
+                    revision: newRevision,
+                    searchStr: `${platform} ${suite}`,
+                  })}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  Go to treeherder Job View
+                </a>
+              </Tooltip>
+            }
+            delay={{ show: 0, hide: 0 }}
           >
-            {newValue}
-          </span>
+            <span style={{ textDecoration: 'underline', color: 'blue' }}>
+              {newValue}
+            </span>
+          </OverlayTrigger>
         </td>
-        <UncontrolledTooltip
-          placement="top"
-          target={`newValue${hashkey}`}
-          autohide={false}
-        >
-          {newJobs.size > 0 ? (
-            Array.from(newJobs).map(([jobName, duration]) => (
-              <p>
-                {jobName}: {duration.join(', ')}
-              </p>
-            ))
-          ) : (
-            <p className="lead text-center">No jobs to show</p>
-          )}
-          <a
-            href={getJobsUrl({
-              repo: newProject,
-              revision: newRevision,
-              searchStr: `${platform} ${suite}`,
-            })}
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Go to treeherder Job View
-          </a>
-        </UncontrolledTooltip>
         <td>{originalFailures}</td>
         <td>
           {originalFailures < newFailures && <span>&lt;</span>}
diff --git a/ui/infra-compare/InfraCompareTableView.jsx b/ui/infra-compare/InfraCompareTableView.jsx
index bfb9b6358ca..c409c7526f5 100644
--- a/ui/infra-compare/InfraCompareTableView.jsx
+++ b/ui/infra-compare/InfraCompareTableView.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Col, Row, Container, Alert } from 'reactstrap';
+import { Col, Row, Container, Alert } from 'react-bootstrap';
 
 import ErrorMessages from '../shared/ErrorMessages';
 import { genericErrorMessage, errorMessageClass } from '../helpers/constants';
@@ -211,7 +211,7 @@ export default class InfraCompareTableView extends React.Component {
             {jobsNotDisplayed && jobsNotDisplayed.length > 0 && (
               <Row className="pt-5 justify-content-center">
                 <Col small="12" className="px-0 max-width-default">
-                  <Alert color="warning">
+                  <Alert variant="warning">
                     <TruncatedText
                       title="Tests without results: "
                       maxLength={174}
diff --git a/ui/intermittent-failures/App.jsx b/ui/intermittent-failures/App.jsx
index e097f785912..03d6e139850 100644
--- a/ui/intermittent-failures/App.jsx
+++ b/ui/intermittent-failures/App.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Route, Switch, Redirect } from 'react-router-dom';
-import { Container } from 'reactstrap';
+import { Container } from 'react-bootstrap';
 import { hot } from 'react-hot-loader/root';
 
 import ErrorMessages from '../shared/ErrorMessages';
diff --git a/ui/intermittent-failures/BugDetailsView.jsx b/ui/intermittent-failures/BugDetailsView.jsx
index 534e80aef07..935afb1e1df 100644
--- a/ui/intermittent-failures/BugDetailsView.jsx
+++ b/ui/intermittent-failures/BugDetailsView.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Row, Col, Breadcrumb, BreadcrumbItem } from 'reactstrap';
+import { Row, Col, Breadcrumb, BreadcrumbItem } from 'react-bootstrap';
 import { Link } from 'react-router-dom';
 import ReactTable from 'react-table-6';
 import PropTypes from 'prop-types';
diff --git a/ui/intermittent-failures/DateOptions.jsx b/ui/intermittent-failures/DateOptions.jsx
index 3802d5bbf7f..7cd55b53480 100644
--- a/ui/intermittent-failures/DateOptions.jsx
+++ b/ui/intermittent-failures/DateOptions.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { ButtonDropdown, DropdownToggle } from 'reactstrap';
+import { DropdownButton } from 'react-bootstrap';
 import moment from 'moment';
 import PropTypes from 'prop-types';
 
@@ -12,15 +12,10 @@ export default class DateOptions extends React.Component {
   constructor(props) {
     super(props);
     this.state = {
-      dropdownOpen: false,
       dateRange: '',
     };
   }
 
-  toggle = () => {
-    this.setState((prevState) => ({ dropdownOpen: !prevState.dropdownOpen }));
-  };
-
   updateDateRange = (dateRange) => {
     this.setState({ dateRange });
     if (dateRange === 'custom range') {
@@ -42,7 +37,7 @@ export default class DateOptions extends React.Component {
 
   render() {
     const { updateState } = this.props;
-    const { dropdownOpen, dateRange } = this.state;
+    const { dateRange } = this.state;
     const dateOptions = [
       'last 7 days',
       'last 30 days',
@@ -52,18 +47,13 @@ export default class DateOptions extends React.Component {
 
     return (
       <div className="d-inline-block">
-        <ButtonDropdown
-          className="mr-3"
-          isOpen={dropdownOpen}
-          toggle={this.toggle}
-        >
-          <DropdownToggle caret>date range</DropdownToggle>
+        <DropdownButton className="mr-3" title="date range">
           <DropdownMenuItems
             options={dateOptions}
             updateData={this.updateDateRange}
             selectedItem={dateRange}
           />
-        </ButtonDropdown>
+        </DropdownButton>
         {dateRange === 'custom range' && (
           <DateRangePicker updateState={updateState} />
         )}
diff --git a/ui/intermittent-failures/DateRangePicker.jsx b/ui/intermittent-failures/DateRangePicker.jsx
index 44824d97631..4c6ba12f371 100644
--- a/ui/intermittent-failures/DateRangePicker.jsx
+++ b/ui/intermittent-failures/DateRangePicker.jsx
@@ -5,7 +5,7 @@ import { DateRangePickerPhrases } from 'react-dates/lib/defaultPhrases';
 import { DateRangePicker as DatePickerAirbnb } from 'react-dates';
 import moment from 'moment';
 import PropTypes from 'prop-types';
-import { Button } from 'reactstrap';
+import { Button } from 'react-bootstrap';
 
 import { ISODate } from './helpers';
 
@@ -91,7 +91,7 @@ export default class DateRangePicker extends React.Component {
           isOutsideRange={(day) => moment().diff(day) < 0}
           phrases={defaultPhrases}
         />
-        <Button color="secondary" className="ml-3" onClick={this.updateData}>
+        <Button variant="secondary" className="ml-3" onClick={this.updateData}>
           update
         </Button>
       </div>
diff --git a/ui/intermittent-failures/Graph.jsx b/ui/intermittent-failures/Graph.jsx
index d66f3012c2b..5838e432404 100644
--- a/ui/intermittent-failures/Graph.jsx
+++ b/ui/intermittent-failures/Graph.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { VictoryChart, VictoryLine, VictoryLegend } from 'victory';
-import { Col } from 'reactstrap';
+import { Col } from 'react-bootstrap';
 
 const Graph = ({ graphData, title, legendData }) => (
   <Col
diff --git a/ui/intermittent-failures/GraphsContainer.jsx b/ui/intermittent-failures/GraphsContainer.jsx
index 321de4f81c6..d58c2529c8d 100644
--- a/ui/intermittent-failures/GraphsContainer.jsx
+++ b/ui/intermittent-failures/GraphsContainer.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Row, Button, Col } from 'reactstrap';
+import { Row, Button, Col } from 'react-bootstrap';
 import PropTypes from 'prop-types';
 
 import Graph from './Graph';
@@ -59,7 +59,7 @@ export default class GraphsContainer extends React.Component {
               {showAlternateView ? 'Show graph view' : 'Show table view'}
             </Button>
             <Button
-              color="secondary"
+              variant="secondary"
               onClick={this.toggleGraph}
               className="d-inline-block mr-3"
             >
diff --git a/ui/intermittent-failures/Layout.jsx b/ui/intermittent-failures/Layout.jsx
index 2f9deb1ddca..db1ee680965 100644
--- a/ui/intermittent-failures/Layout.jsx
+++ b/ui/intermittent-failures/Layout.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Container } from 'reactstrap';
+import { Container } from 'react-bootstrap';
 import PropTypes from 'prop-types';
 
 import ErrorBoundary from '../shared/ErrorBoundary';
diff --git a/ui/intermittent-failures/MainView.jsx b/ui/intermittent-failures/MainView.jsx
index 6de670a8b21..a71fef3ba5b 100644
--- a/ui/intermittent-failures/MainView.jsx
+++ b/ui/intermittent-failures/MainView.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Row, Col, Breadcrumb, BreadcrumbItem } from 'reactstrap';
+import { Row, Col, Breadcrumb, BreadcrumbItem } from 'react-bootstrap';
 import PropTypes from 'prop-types';
 import moment from 'moment';
 import ReactTable from 'react-table-6';
diff --git a/ui/intermittent-failures/Navigation.jsx b/ui/intermittent-failures/Navigation.jsx
index 718757f9558..ae81e3d8b8e 100644
--- a/ui/intermittent-failures/Navigation.jsx
+++ b/ui/intermittent-failures/Navigation.jsx
@@ -1,12 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import {
-  Collapse,
-  Navbar,
-  Nav,
-  UncontrolledDropdown,
-  DropdownToggle,
-} from 'reactstrap';
+import { Collapse, Navbar, Nav, Dropdown } from 'react-bootstrap';
 
 import LogoMenu from '../shared/LogoMenu';
 import Login from '../shared/auth/Login';
@@ -35,16 +29,16 @@ export default class Navigation extends React.Component {
         />
         <Collapse isOpen={this.state.isOpen} navbar>
           <Nav navbar />
-          <UncontrolledDropdown>
-            <DropdownToggle className="btn-navbar navbar-link" nav caret>
+          <Dropdown>
+            <Dropdown.Toggle className="btn-navbar navbar-link" nav caret>
               Tree
-            </DropdownToggle>
+            </Dropdown.Toggle>
             <DropdownMenuItems
               options={treeOptions}
               updateData={(tree) => updateState({ tree })}
               selectedItem={tree}
             />
-          </UncontrolledDropdown>
+          </Dropdown>
         </Collapse>
         <Navbar className="ml-auto">
           <HelpMenu />
diff --git a/ui/job-view/App.jsx b/ui/job-view/App.jsx
index 5b3c16f7d02..2a4ffc81e17 100644
--- a/ui/job-view/App.jsx
+++ b/ui/job-view/App.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Modal } from 'reactstrap';
+import { Modal } from 'react-bootstrap';
 import { hot } from 'react-hot-loader/root';
 import SplitPane from 'react-split-pane';
 import pick from 'lodash/pick';
diff --git a/ui/job-view/CustomJobActions.jsx b/ui/job-view/CustomJobActions.jsx
index 511f30c5458..ddc36594f30 100644
--- a/ui/job-view/CustomJobActions.jsx
+++ b/ui/job-view/CustomJobActions.jsx
@@ -6,16 +6,7 @@ import jsonSchemaDefaults from 'json-schema-defaults';
 import keyBy from 'lodash/keyBy';
 import jsyaml from 'js-yaml';
 import tcLibUrls from 'taskcluster-lib-urls';
-import {
-  Button,
-  DropdownToggle,
-  Label,
-  Modal,
-  ModalHeader,
-  ModalBody,
-  ModalFooter,
-  UncontrolledDropdown,
-} from 'reactstrap';
+import { Button, Dropdown, Form, Modal } from 'react-bootstrap';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faCheckSquare } from '@fortawesome/free-regular-svg-icons';
 
@@ -196,11 +187,11 @@ class CustomJobActions extends React.PureComponent {
     const isOpen = true;
 
     return (
-      <Modal isOpen={isOpen} toggle={this.close} size="lg">
-        <ModalHeader toggle={this.close}>
-          Custom Taskcluster Job Actions
-        </ModalHeader>
-        <ModalBody>
+      <Modal show={isOpen} onHide={this.close} size="lg">
+        <Modal.Header closeButton>
+          <Modal.Title>Custom Taskcluster Job Actions</Modal.Title>
+        </Modal.Header>
+        <Modal.Body>
           {!actions && (
             <div>
               <p className="blink"> Getting available actions...</p>
@@ -209,21 +200,21 @@ class CustomJobActions extends React.PureComponent {
           {!!actions && (
             <div>
               <div className="form-group">
-                <Label for="action-select-input">Action</Label>
-                <UncontrolledDropdown
+                <Form.Label for="action-select-input">Action</Form.Label>
+                <Dropdown
                   aria-describedby="selectedActionHelp"
                   className="mb-1"
                   id="action-select-input"
                 >
-                  <DropdownToggle caret outline>
+                  <Dropdown.Toggle caret outline>
                     {selectedAction.name}
-                  </DropdownToggle>
+                  </Dropdown.Toggle>
                   <DropdownMenuItems
                     selectedItem={selectedAction.name}
                     updateData={this.onChangeAction}
                     options={Object.keys(actions)}
                   />
-                </UncontrolledDropdown>
+                </Dropdown>
                 <p id="selectedActionHelp" className="help-block">
                   {selectedAction.description}
                 </p>
@@ -240,9 +231,9 @@ class CustomJobActions extends React.PureComponent {
                 {!!selectedAction.schema && (
                   <React.Fragment>
                     <div className="col-s-12 col-md-6 form-group">
-                      <Label for="payload-textarea" className="w-100">
+                      <Form.Label for="payload-textarea" className="w-100">
                         Payload
-                      </Label>
+                      </Form.Label>
                       <textarea
                         id="payload-textarea"
                         value={payload}
@@ -255,9 +246,9 @@ class CustomJobActions extends React.PureComponent {
                       />
                     </div>
                     <div className="col-s-12 col-md-6 form-group">
-                      <Label for="schema-textarea" className="w-100">
+                      <Form.Label for="schema-textarea" className="w-100">
                         Schema
-                      </Label>
+                      </Form.Label>
                       <textarea
                         id="schema-textarea"
                         className="form-control pre"
@@ -271,10 +262,10 @@ class CustomJobActions extends React.PureComponent {
               </div>
             </div>
           )}
-        </ModalBody>
-        <ModalFooter>
+        </Modal.Body>
+        <Modal.Footer>
           <Button
-            color="darker-info"
+            variant="darker-info"
             className={triggering ? 'disabled' : ''}
             onClick={this.triggerAction}
             title="Trigger this action"
@@ -286,10 +277,10 @@ class CustomJobActions extends React.PureComponent {
             />
             <span>{triggering ? 'Triggering' : 'Trigger'}</span>
           </Button>
-          <Button color="secondary" onClick={toggle}>
+          <Button variant="secondary" onClick={toggle}>
             Cancel
           </Button>
-        </ModalFooter>
+        </Modal.Footer>
       </Modal>
     );
   }
diff --git a/ui/job-view/details/PinBoard.jsx b/ui/job-view/details/PinBoard.jsx
index 785d7aac010..836aa96506b 100644
--- a/ui/job-view/details/PinBoard.jsx
+++ b/ui/job-view/details/PinBoard.jsx
@@ -1,17 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import {
-  Button,
-  ButtonGroup,
-  FormGroup,
-  Input,
-  FormFeedback,
-  DropdownMenu,
-  DropdownItem,
-  DropdownToggle,
-  UncontrolledDropdown,
-} from 'reactstrap';
+import { Button, ButtonGroup, Form, Dropdown } from 'react-bootstrap';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faPlusSquare, faTimes } from '@fortawesome/free-solid-svg-icons';
 
@@ -447,13 +437,12 @@ class PinBoard extends React.Component {
                     onClick={() => setSelectedJob(job)}
                     data-job-id={job.job_id}
                     size={selectedJobId === job.id ? 'large' : 'small'}
-                    outline
+                    variant="outline-secondary"
                   >
                     {job.job_type_symbol}
                   </Button>
                   <Button
-                    color="secondary"
-                    outline
+                    variant="outline-secondary"
                     className={`pinned-job-close-btn ${
                       selectedJobId === job.id
                         ? 'btn-lg selected-job'
@@ -473,7 +462,7 @@ class PinBoard extends React.Component {
           <div id="pinboard-related-bugs">
             <div className="content">
               <Button
-                color="link"
+                variant="link"
                 id="add-related-bug-button"
                 onClick={() => this.toggleEnterBugNumber(!enteringBugNumber)}
                 className="pointable p-0"
@@ -487,7 +476,7 @@ class PinBoard extends React.Component {
               </Button>
               {!this.hasPinnedJobBugs() && (
                 <Button
-                  color="link"
+                  variant="link"
                   className="pinboard-preload-txt pinboard-related-bug-preload-txt p-0 text-decoration-none"
                   onClick={() => this.toggleEnterBugNumber(!enteringBugNumber)}
                 >
@@ -497,7 +486,7 @@ class PinBoard extends React.Component {
               {enteringBugNumber && (
                 <span className="add-related-bugs-form d-flex align-items-start">
                   <div>
-                    <Input
+                    <Form.Control
                       id="related-bug-input"
                       data-bug-input
                       type="text"
@@ -511,10 +500,12 @@ class PinBoard extends React.Component {
                       }}
                       onBlur={this.saveEnteredBugNumber}
                     />
-                    <FormFeedback>Please enter only numbers</FormFeedback>
+                    <Form.Control.Feedback>
+                      Please enter only numbers
+                    </Form.Control.Feedback>
                   </div>
                   <Button
-                    color="link"
+                    variant="link"
                     id="clear-related-bug-button"
                     onClick={() =>
                       this.setState({
@@ -553,8 +544,7 @@ class PinBoard extends React.Component {
                       </a>
                     )}
                     <Button
-                      color="secondary"
-                      outline
+                      variant="outline-secondary"
                       className="btn-xs pinned-job-close-btn"
                       onClick={() => removeBug(bug)}
                       title="remove this bug"
@@ -571,9 +561,9 @@ class PinBoard extends React.Component {
           <div id="pinboard-classification">
             <div className="pinboard-label">classification</div>
             <div id="pinboard-classification-content" className="content">
-              <FormGroup>
-                <Input
-                  type="select"
+              <Form.Group>
+                <Form.Control
+                  as="select"
                   name="failureClassificationId"
                   id="pinboard-classification-select"
                   className="classification-select"
@@ -587,8 +577,8 @@ class PinBoard extends React.Component {
                       {opt.name}
                     </option>
                   ))}
-                </Input>
-              </FormGroup>
+                </Form.Control>
+              </Form.Group>
               {/* Classification comment */}
               <div className="classification-comment-container">
                 <input
@@ -602,11 +592,11 @@ class PinBoard extends React.Component {
                 />
                 {failureClassificationId === 2 && (
                   <div>
-                    <FormGroup>
-                      <Input
+                    <Form.Group>
+                      <Form.Control
                         id="pinboard-revision-select"
                         className="classification-select"
-                        type="select"
+                        as="select"
                         defaultValue={0}
                         onChange={(evt) =>
                           setClassificationComment(evt.target.value)
@@ -624,8 +614,8 @@ class PinBoard extends React.Component {
                             {tip.revision.slice(0, 12)} {tip.author}
                           </option>
                         ))}
-                      </Input>
-                    </FormGroup>
+                      </Form.Control>
+                    </Form.Group>
                   </div>
                 )}
               </div>
@@ -645,15 +635,15 @@ class PinBoard extends React.Component {
                     ? 'disabled'
                     : ''
                 }`}
-                outline
+                variant="outline-secondary"
                 size="xs"
                 title={this.saveUITitle('classification')}
                 onClick={this.save}
               >
                 save
               </Button>
-              <UncontrolledDropdown>
-                <DropdownToggle
+              <Dropdown>
+                <Dropdown.Toggle
                   size="xs"
                   caret
                   className={`bg-light ${
@@ -666,10 +656,10 @@ class PinBoard extends React.Component {
                       ? 'No pinned jobs'
                       : 'Additional pinboard functions'
                   }
-                  outline
+                  variant="outline-secondary"
                 />
-                <DropdownMenu className="save-btn-dropdown-menu">
-                  <DropdownItem
+                <Dropdown.Menu className="save-btn-dropdown-menu">
+                  <Dropdown.Item
                     tag="a"
                     title={
                       !isLoggedIn ? 'Not logged in' : 'Repeat the pinned jobs'
@@ -678,8 +668,8 @@ class PinBoard extends React.Component {
                     onClick={() => !isLoggedIn || this.retriggerAllPinnedJobs()}
                   >
                     Retrigger all
-                  </DropdownItem>
-                  <DropdownItem
+                  </Dropdown.Item>
+                  <Dropdown.Item
                     tag="a"
                     title={this.cancelAllPinnedJobsTitle()}
                     className={this.canCancelAllPinnedJobs() ? '' : 'disabled'}
@@ -689,8 +679,8 @@ class PinBoard extends React.Component {
                     }
                   >
                     Cancel all
-                  </DropdownItem>
-                  <DropdownItem
+                  </Dropdown.Item>
+                  <Dropdown.Item
                     tag="a"
                     title={this.unclassifyAllPinnedJobsTitle()}
                     className={
@@ -702,12 +692,12 @@ class PinBoard extends React.Component {
                     }
                   >
                     Unclassify all
-                  </DropdownItem>
-                  <DropdownItem tag="a" onClick={() => this.unPinAll()}>
+                  </Dropdown.Item>
+                  <Dropdown.Item tag="a" onClick={() => this.unPinAll()}>
                     Clear all
-                  </DropdownItem>
-                </DropdownMenu>
-              </UncontrolledDropdown>
+                  </Dropdown.Item>
+                </Dropdown.Menu>
+              </Dropdown>
             </ButtonGroup>
           </div>
         </div>
diff --git a/ui/job-view/details/summary/ActionBar.jsx b/ui/job-view/details/summary/ActionBar.jsx
index 83762a32370..b883eb08363 100644
--- a/ui/job-view/details/summary/ActionBar.jsx
+++ b/ui/job-view/details/summary/ActionBar.jsx
@@ -1,13 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import {
-  Button,
-  DropdownMenu,
-  DropdownItem,
-  DropdownToggle,
-  UncontrolledDropdown,
-} from 'reactstrap';
+import { Button, Dropdown } from 'react-bootstrap';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faChartBar } from '@fortawesome/free-regular-svg-icons';
 import {
@@ -412,28 +406,31 @@ class ActionBar extends React.PureComponent {
               </li>
             )}
             <li className="ml-auto">
-              <UncontrolledDropdown>
-                <DropdownToggle className="bg-transparent text-light border-0 pr-2 py-2 m-0">
+              <Dropdown>
+                <Dropdown.Toggle className="bg-transparent text-light border-0 pr-2 py-2 m-0">
                   <FontAwesomeIcon
                     icon={faEllipsisH}
                     title="Other job actions"
                     className="align-baseline"
                   />
-                </DropdownToggle>
-                <DropdownMenu className="actionbar-menu dropdown-menu-right">
-                  <DropdownItem
-                    tag="a"
+                </Dropdown.Toggle>
+                <Dropdown.Menu
+                  className="actionbar-menu dropdown-menu"
+                  align="end"
+                >
+                  <Dropdown.Item
+                    as="a"
                     id="backfill-btn"
                     className={`${!this.canBackfill() ? 'disabled' : ''}`}
                     title={this.backfillButtonTitle()}
                     onClick={() => !this.canBackfill() || this.backfillJob()}
                   >
                     Backfill
-                  </DropdownItem>
+                  </Dropdown.Item>
                   {selectedJobFull.task_id && (
                     <React.Fragment>
-                      <DropdownItem
-                        tag="a"
+                      <Dropdown.Item
+                        as="a"
                         target="_blank"
                         rel="noopener noreferrer"
                         className="pl-4"
@@ -444,53 +441,53 @@ class ActionBar extends React.PureComponent {
                         )}
                       >
                         Inspect Task
-                      </DropdownItem>
-                      <DropdownItem
-                        tag="a"
+                      </Dropdown.Item>
+                      <Dropdown.Item
+                        as="a"
                         className="py-2"
                         onClick={this.createInteractiveTask}
                       >
                         Create Interactive Task
-                      </DropdownItem>
+                      </Dropdown.Item>
                       {isPerfTest(selectedJobFull) && (
-                        <DropdownItem
-                          tag="a"
+                        <Dropdown.Item
+                          as="a"
                           className="py-2"
                           onClick={this.createGeckoProfile}
                         >
                           Create Gecko Profile
-                        </DropdownItem>
+                        </Dropdown.Item>
                       )}
                       {isPerfTest(selectedJobFull) &&
                         !selectedJobFull.hasSideBySide && (
-                          <DropdownItem
-                            tag="a"
+                          <Dropdown.Item
+                            as="a"
                             className="py-2"
                             onClick={this.createSideBySide}
                           >
                             Generate side-by-side
-                          </DropdownItem>
+                          </Dropdown.Item>
                         )}
                       {canConfirmFailure(selectedJobFull) && (
-                        <DropdownItem
-                          tag="a"
+                        <Dropdown.Item
+                          as="a"
                           className="py-2"
                           onClick={this.handleConfirmFailure}
                         >
                           Confirm Test Failures
-                        </DropdownItem>
+                        </Dropdown.Item>
                       )}
-                      <DropdownItem
-                        tag="a"
+                      <Dropdown.Item
+                        as="a"
                         onClick={this.toggleCustomJobActions}
                         className="dropdown-item"
                       >
                         Custom Action...
-                      </DropdownItem>
+                      </Dropdown.Item>
                     </React.Fragment>
                   )}
-                </DropdownMenu>
-              </UncontrolledDropdown>
+                </Dropdown.Menu>
+              </Dropdown>
             </li>
           </ul>
         </nav>
diff --git a/ui/job-view/details/summary/LogItem.jsx b/ui/job-view/details/summary/LogItem.jsx
index ee69766d81b..7667aefe3d8 100644
--- a/ui/job-view/details/summary/LogItem.jsx
+++ b/ui/job-view/details/summary/LogItem.jsx
@@ -1,12 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import {
-  Button,
-  UncontrolledDropdown,
-  DropdownItem,
-  DropdownMenu,
-  DropdownToggle,
-} from 'reactstrap';
+import { Button, Dropdown } from 'react-bootstrap';
 
 function getLogUrlProps(logKey, logUrl, logViewerUrl, logViewerFullUrl) {
   if (logKey === 'rawlog') {
@@ -59,17 +53,17 @@ export default function LogItem(props) {
     <li key={logKey}>
       {/* Case 1: Two or more logurls - Display a dropdown */}
       {logUrls.length > 1 && (
-        <UncontrolledDropdown>
-          <DropdownToggle
+        <Dropdown>
+          <Dropdown.Toggle
             title={`Select a ${logDescription}`}
             className="logviewer-btn btn-view-nav"
           >
             {props.children}
-          </DropdownToggle>
-          <DropdownMenu>
+          </Dropdown.Toggle>
+          <Dropdown.Menu>
             {logUrls.map((logUrl) => (
-              <DropdownItem
-                tag="a"
+              <Dropdown.Item
+                as="a"
                 {...getLogUrlProps(
                   logKey,
                   logUrl,
@@ -79,10 +73,10 @@ export default function LogItem(props) {
                 key={`${logKey}-${logUrl.id}`}
               >
                 {logUrl.name} ({logUrl.id})
-              </DropdownItem>
+              </Dropdown.Item>
             ))}
-          </DropdownMenu>
-        </UncontrolledDropdown>
+          </Dropdown.Menu>
+        </Dropdown>
       )}
 
       {/* Case 2: Only one logurl - Display a button */}
diff --git a/ui/job-view/details/tabs/AnnotationsTab.jsx b/ui/job-view/details/tabs/AnnotationsTab.jsx
index dab1501904d..72736837437 100644
--- a/ui/job-view/details/tabs/AnnotationsTab.jsx
+++ b/ui/job-view/details/tabs/AnnotationsTab.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import { Button } from 'reactstrap';
+import { Button } from 'react-bootstrap';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faStar as faStarRegular } from '@fortawesome/free-regular-svg-icons';
 import {
@@ -37,7 +37,7 @@ function RelatedBugSaved(props) {
         </a>
       )}
       <Button
-        color="link"
+        variant="link"
         size="xs"
         className="classification-delete-icon hover-warning pinned-job-close-btn annotations-bug"
         onClick={() => deleteBug(bug)}
@@ -104,7 +104,7 @@ function TableRow(props) {
       <td>{text}</td>
       <td>
         <Button
-          color="link"
+          variant="link"
           onClick={deleteEvent}
           className="classification-delete-icon hover-warning pointable"
           title="Delete this classification"
diff --git a/ui/job-view/details/tabs/PerformanceTab.jsx b/ui/job-view/details/tabs/PerformanceTab.jsx
index f59ea811668..ab044aaf59e 100644
--- a/ui/job-view/details/tabs/PerformanceTab.jsx
+++ b/ui/job-view/details/tabs/PerformanceTab.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Alert, Button } from 'reactstrap';
+import { Alert, Button } from 'react-bootstrap';
 import {
   faInfoCircle,
   faExternalLinkAlt,
@@ -254,7 +254,7 @@ class PerformanceTab extends React.PureComponent {
           // job list only gets populated later. This notification will help the
           // user know the next action.
           triggeredGeckoProfiles > 0 ? (
-            <Alert color="info" className="m-1">
+            <Alert variant="info" className="m-1">
               <FontAwesomeIcon icon={faInfoCircle} className="mr-1" />
               {triggeredGeckoProfiles === 1
                 ? `Triggered ${triggeredGeckoProfiles} profiler run. It will show up ` +
diff --git a/ui/job-view/details/tabs/SideBySide.jsx b/ui/job-view/details/tabs/SideBySide.jsx
index 215e88faa96..5c88061ac77 100644
--- a/ui/job-view/details/tabs/SideBySide.jsx
+++ b/ui/job-view/details/tabs/SideBySide.jsx
@@ -6,7 +6,7 @@ import {
   faExternalLinkAlt,
   faSpinner,
 } from '@fortawesome/free-solid-svg-icons';
-import { Table } from 'reactstrap';
+import { Table } from 'react-bootstrap';
 
 import { getJobsUrl } from '../../../helpers/url';
 import { notify } from '../../redux/stores/notifications';
diff --git a/ui/job-view/details/tabs/SideBySideVideo.jsx b/ui/job-view/details/tabs/SideBySideVideo.jsx
index cec5e393970..3cedf47d163 100644
--- a/ui/job-view/details/tabs/SideBySideVideo.jsx
+++ b/ui/job-view/details/tabs/SideBySideVideo.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button, DropdownToggle, UncontrolledDropdown } from 'reactstrap';
+import { Button, Dropdown } from 'react-bootstrap';
 
 import DropdownMenuItems from '../../../shared/DropdownMenuItems';
 
@@ -43,20 +43,20 @@ export default class SideBySideVideo extends React.Component {
     return (
       <div className="w-100">
         <div className="d-flex mb-1">
-          <UncontrolledDropdown
+          <Dropdown
             className="mr-1 text-nowrap"
             title={value || videos[0].value}
             aria-label={value || videos[0].value}
           >
-            <DropdownToggle size="sm" caret outline>
+            <Dropdown.Toggle size="sm" caret outline>
               {value || videos[0].value}
-            </DropdownToggle>
+            </Dropdown.Toggle>
             <DropdownMenuItems
               options={videos.map((item) => item.value)}
               selectedItem={value || videos[0].value}
               updateData={(value) => this.onSetVideoHandler(value, videos)}
             />
-          </UncontrolledDropdown>
+          </Dropdown>
           <Button size="sm" onClick={this.onReplayHandler}>
             Reload
           </Button>
diff --git a/ui/job-view/details/tabs/SimilarJobsTab.jsx b/ui/job-view/details/tabs/SimilarJobsTab.jsx
index fd2a5983990..ef21dbfaa2c 100644
--- a/ui/job-view/details/tabs/SimilarJobsTab.jsx
+++ b/ui/job-view/details/tabs/SimilarJobsTab.jsx
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faSpinner } from '@fortawesome/free-solid-svg-icons';
-import { Button } from 'reactstrap';
+import { Button } from 'react-bootstrap';
 
 import { thMaxPushFetchSize } from '../../../helpers/constants';
 import { toDateStr, toShortDateStr } from '../../../helpers/display';
@@ -215,7 +215,7 @@ class SimilarJobsTab extends React.Component {
           </table>
           {hasNextPage && (
             <Button
-              outline
+              variant="outline-secondary"
               className="bg-light"
               type="button"
               onClick={this.showNext}
diff --git a/ui/job-view/details/tabs/TabsPanel.jsx b/ui/job-view/details/tabs/TabsPanel.jsx
index d9f772c15cc..56a90bacb00 100644
--- a/ui/job-view/details/tabs/TabsPanel.jsx
+++ b/ui/job-view/details/tabs/TabsPanel.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import { Button } from 'reactstrap';
+import { Button } from 'react-bootstrap';
 import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import {
diff --git a/ui/job-view/headerbars/ActiveFilters.jsx b/ui/job-view/headerbars/ActiveFilters.jsx
index f27f35b88a1..f6b5ad9a625 100644
--- a/ui/job-view/headerbars/ActiveFilters.jsx
+++ b/ui/job-view/headerbars/ActiveFilters.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button } from 'reactstrap';
+import { Button } from 'react-bootstrap';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faTimesCircle } from '@fortawesome/free-solid-svg-icons';
 import { connect } from 'react-redux';
@@ -112,8 +112,7 @@ class ActiveFilters extends React.Component {
         {!!filterBarFilters.length && (
           <div>
             <Button
-              color="darker-info"
-              outline
+              variant="outline-darker-info"
               className="pointable bg-transparent border-0 pt-0 pr-1 pb-1"
               title="Clear all of these filters"
               onClick={() => this.clearAndUpdateRange()}
@@ -133,8 +132,7 @@ class ActiveFilters extends React.Component {
                   key={`${filter.field}${filterValue}`}
                 >
                   <Button
-                    color="darker-info"
-                    outline
+                    variant="outline-darker-info"
                     className="pointable bg-transparent border-0 py-0 pr-1"
                     title={`Clear filter: ${filter.field}`}
                     onClick={() =>
@@ -235,13 +233,13 @@ class ActiveFilters extends React.Component {
                   size="sm"
                   className="bg-light"
                   onClick={this.addNewFieldFilter}
-                  outline
+                  variant="outline-secondary"
                 >
                   add
                 </Button>
                 <Button
                   className="bg-light"
-                  outline
+                  variant="outline-secondary"
                   size="sm"
                   onClick={this.clearNewFieldFilter}
                 >
diff --git a/ui/job-view/headerbars/FiltersMenu.jsx b/ui/job-view/headerbars/FiltersMenu.jsx
index 8aa9c2c561d..bdfb64ba801 100644
--- a/ui/job-view/headerbars/FiltersMenu.jsx
+++ b/ui/job-view/headerbars/FiltersMenu.jsx
@@ -1,12 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import {
-  DropdownMenu,
-  DropdownItem,
-  DropdownToggle,
-  UncontrolledDropdown,
-} from 'reactstrap';
+import { Dropdown } from 'react-bootstrap';
 import { faCheck } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Link } from 'react-router-dom';
@@ -52,19 +47,18 @@ function FiltersMenu({
   };
 
   return (
-    <UncontrolledDropdown>
-      <DropdownToggle
+    <Dropdown>
+      <Dropdown.Toggle
         title="Set filters"
         className="btn-view-nav nav-menu-btn"
-        caret
       >
         Filters
-      </DropdownToggle>
-      <DropdownMenu>
+      </Dropdown.Toggle>
+      <Dropdown.Menu>
         {resultStatusMenuItems.map((filterName) => (
-          <DropdownItem
+          <Dropdown.Item
             key={filterName}
-            tag="a"
+            as="a"
             onClick={() => filterModel.toggleResultStatuses([filterName])}
           >
             <FontAwesomeIcon
@@ -75,11 +69,11 @@ function FiltersMenu({
               title={resultStatus.includes(filterName) ? 'Selected' : ''}
             />
             {filterName}
-          </DropdownItem>
+          </Dropdown.Item>
         ))}
-        <DropdownItem divider />
-        <DropdownItem
-          tag="a"
+        <Dropdown.Divider />
+        <Dropdown.Item
+          as="a"
           onClick={() =>
             arraysEqual(resultStatus, thDefaultFilterResultStatuses) &&
             arraysEqual(classifiedState, ['unclassified', 'classified'])
@@ -103,9 +97,9 @@ function FiltersMenu({
             }
           />
           All jobs
-        </DropdownItem>
-        <DropdownItem
-          tag="a"
+        </Dropdown.Item>
+        <Dropdown.Item
+          as="a"
           onClick={() => filterModel.toggleClassifiedFailures(true)}
         >
           <FontAwesomeIcon
@@ -116,9 +110,9 @@ function FiltersMenu({
             title={filterModel.isClassifiedFailures(true) ? 'Selected' : ''}
           />
           All failures
-        </DropdownItem>
-        <DropdownItem
-          tag="a"
+        </Dropdown.Item>
+        <Dropdown.Item
+          as="a"
           onClick={() => filterModel.toggleUnclassifiedFailures()}
         >
           <FontAwesomeIcon
@@ -129,9 +123,9 @@ function FiltersMenu({
             title={filterModel.isUnclassifiedFailures() ? 'Selected' : ''}
           />
           Unclassified failures
-        </DropdownItem>
-        <DropdownItem
-          tag="a"
+        </Dropdown.Item>
+        <Dropdown.Item
+          as="a"
           onClick={() => filterModel.toggleClassifiedFailures()}
         >
           <FontAwesomeIcon
@@ -142,47 +136,47 @@ function FiltersMenu({
             title={filterModel.isClassifiedFailures() ? 'Selected' : ''}
           />
           Classified failures
-        </DropdownItem>
-        <DropdownItem divider />
-        <DropdownItem
-          tag="a"
+        </Dropdown.Item>
+        <Dropdown.Divider />
+        <Dropdown.Item
+          as="a"
           title="Pin all jobs that pass the global filters"
           onClick={pinAllShownJobs}
         >
           Pin all showing
-        </DropdownItem>
-        <DropdownItem
-          tag="a"
+        </Dropdown.Item>
+        <Dropdown.Item
+          as="a"
           title="Show only superseded jobs"
           onClick={filterModel.setOnlySuperseded}
         >
           Superseded only
-        </DropdownItem>
-        <DropdownItem title={`Show only pushes for ${email}`}>
+        </Dropdown.Item>
+        <Dropdown.Item title={`Show only pushes for ${email}`}>
           <Link
             className="dropdown-link"
             to={{ search: updateParams('author', email) }}
           >
             My pushes only
           </Link>
-        </DropdownItem>
-        <DropdownItem title="Do not show pushes from reviewbot">
+        </Dropdown.Item>
+        <Dropdown.Item title="Do not show pushes from reviewbot">
           <Link
             className="dropdown-link"
             to={{ search: updateParams('author', '-reviewbot') }}
           >
             Hide code review pushes
           </Link>
-        </DropdownItem>
-        <DropdownItem
-          tag="a"
+        </Dropdown.Item>
+        <Dropdown.Item
+          as="a"
           title="Reset to default status filters"
           onClick={filterModel.resetNonFieldFilters}
         >
           Reset
-        </DropdownItem>
-      </DropdownMenu>
-    </UncontrolledDropdown>
+        </Dropdown.Item>
+      </Dropdown.Menu>
+    </Dropdown>
   );
 }
 
diff --git a/ui/job-view/headerbars/InfraMenu.jsx b/ui/job-view/headerbars/InfraMenu.jsx
index ebf97be7622..03c5ffb3ec8 100644
--- a/ui/job-view/headerbars/InfraMenu.jsx
+++ b/ui/job-view/headerbars/InfraMenu.jsx
@@ -1,40 +1,35 @@
 import React from 'react';
-import {
-  DropdownMenu,
-  DropdownItem,
-  DropdownToggle,
-  UncontrolledDropdown,
-} from 'reactstrap';
+import { Dropdown } from 'react-bootstrap';
 
 import { prodFirefoxRootUrl } from '../../taskcluster-auth-callback/constants';
 import { treeStatusUiUrl } from '../../models/treeStatus';
 
 const InfraMenu = () => (
-  <UncontrolledDropdown>
-    <DropdownToggle
+  <Dropdown>
+    <Dropdown.Toggle
       className="btn-view-nav nav-menu-btn"
       title="Infrastructure status"
       caret
     >
       Infra
-    </DropdownToggle>
-    <DropdownMenu right>
-      <DropdownItem
+    </Dropdown.Toggle>
+    <Dropdown.Menu align="end">
+      <Dropdown.Item
         href={`${prodFirefoxRootUrl}/provisioners`}
         target="_blank"
         rel="noopener noreferrer"
       >
         Taskcluster Workers
-      </DropdownItem>
-      <DropdownItem
+      </Dropdown.Item>
+      <Dropdown.Item
         href={`${treeStatusUiUrl()}`}
         target="_blank"
         rel="noopener noreferrer"
       >
         TreeStatus
-      </DropdownItem>
-    </DropdownMenu>
-  </UncontrolledDropdown>
+      </Dropdown.Item>
+    </Dropdown.Menu>
+  </Dropdown>
 );
 
 export default InfraMenu;
diff --git a/ui/job-view/headerbars/NotificationsMenu.jsx b/ui/job-view/headerbars/NotificationsMenu.jsx
index e0e72a9f436..5c90d8a18d5 100644
--- a/ui/job-view/headerbars/NotificationsMenu.jsx
+++ b/ui/job-view/headerbars/NotificationsMenu.jsx
@@ -9,13 +9,7 @@ import {
   faExclamationTriangle,
   faInfoCircle,
 } from '@fortawesome/free-solid-svg-icons';
-import {
-  Button,
-  DropdownMenu,
-  DropdownItem,
-  DropdownToggle,
-  UncontrolledDropdown,
-} from 'reactstrap';
+import { Button, Dropdown } from 'react-bootstrap';
 
 import { shortDateFormat } from '../../helpers/display';
 import { clearStoredNotifications } from '../redux/stores/notifications';
@@ -39,21 +33,21 @@ class NotificationsMenu extends React.Component {
     const { storedNotifications, clearStoredNotifications } = this.props;
 
     return (
-      <UncontrolledDropdown>
-        <DropdownToggle className="btn-view-nav nav-menu-btn">
+      <Dropdown>
+        <Dropdown.Toggle className="btn-view-nav nav-menu-btn">
           <FontAwesomeIcon
             icon={faBell}
             className="lightgray"
             title="Recent notifications"
           />
-        </DropdownToggle>
-        <DropdownMenu id="notification-dropdown" right>
-          <DropdownItem tag="a" title="Notifications" className="pl-0" header>
+        </Dropdown.Toggle>
+        <Dropdown.Menu id="notification-dropdown" align="end">
+          <Dropdown.Item as="a" title="Notifications" className="pl-0" header>
             Recent notifications
             {!!storedNotifications.length && (
               <Button
                 size="xs"
-                outline
+                variant="outline-secondary"
                 className="notification-dropdown-btn"
                 title="Clear all notifications"
                 onClick={clearStoredNotifications}
@@ -61,10 +55,10 @@ class NotificationsMenu extends React.Component {
                 Clear all
               </Button>
             )}
-          </DropdownItem>
+          </Dropdown.Item>
           {storedNotifications.length ? (
             storedNotifications.map((notification) => (
-              <DropdownItem
+              <Dropdown.Item
                 className="pl-0 notification-dropdown-line"
                 key={`${notification.created}${notification.message}`}
               >
@@ -92,15 +86,15 @@ class NotificationsMenu extends React.Component {
                     {notification.linkText}
                   </a>
                 </span>
-              </DropdownItem>
+              </Dropdown.Item>
             ))
           ) : (
-            <DropdownItem tag="a" className="pl-0">
+            <Dropdown.Item as="a" className="pl-0">
               No recent notifications
-            </DropdownItem>
+            </Dropdown.Item>
           )}
-        </DropdownMenu>
-      </UncontrolledDropdown>
+        </Dropdown.Menu>
+      </Dropdown>
     );
   }
 }
diff --git a/ui/job-view/headerbars/PrimaryNavBar.jsx b/ui/job-view/headerbars/PrimaryNavBar.jsx
index cd4df4d1ad4..04df55539e0 100644
--- a/ui/job-view/headerbars/PrimaryNavBar.jsx
+++ b/ui/job-view/headerbars/PrimaryNavBar.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button } from 'reactstrap';
+import { Button } from 'react-bootstrap';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import isEqual from 'lodash/isEqual';
diff --git a/ui/job-view/headerbars/ReposMenu.jsx b/ui/job-view/headerbars/ReposMenu.jsx
index c727bff9002..72ded05450a 100644
--- a/ui/job-view/headerbars/ReposMenu.jsx
+++ b/ui/job-view/headerbars/ReposMenu.jsx
@@ -2,12 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faInfoCircle } from '@fortawesome/free-solid-svg-icons';
-import {
-  DropdownMenu,
-  DropdownItem,
-  DropdownToggle,
-  UncontrolledDropdown,
-} from 'reactstrap';
+import { Dropdown } from 'react-bootstrap';
 import { Link } from 'react-router-dom';
 
 import { updateRepoParams } from '../../helpers/location';
@@ -48,27 +43,26 @@ export default function ReposMenu(props) {
   }));
 
   return (
-    <UncontrolledDropdown
+    <Dropdown
       aria-controls="repo-dropdown"
       aria-expanded="false"
       aria-haspopup="menu"
     >
-      <DropdownToggle
+      <Dropdown.Toggle
         id="repoLabel"
         className="btn-view-nav nav-menu-btn"
-        caret
         title="Watch a repo"
       >
         Repos
-      </DropdownToggle>
-      <DropdownMenu right id="repo-dropdown">
+      </Dropdown.Toggle>
+      <Dropdown.Menu align="end" id="repo-dropdown">
         <ul
           className="checkbox-dropdown-menu row"
           role="menu"
           aria-labelledby="repoLabel"
         >
           {groupedRepos.map((group) => (
-            <DropdownItem
+            <Dropdown.Item
               className="repogroup dropdown-item col"
               key={group.name}
             >
@@ -91,11 +85,11 @@ export default function ReposMenu(props) {
                     </Link>
                   </li>
                 ))}
-            </DropdownItem>
+            </Dropdown.Item>
           ))}
         </ul>
-      </DropdownMenu>
-    </UncontrolledDropdown>
+      </Dropdown.Menu>
+    </Dropdown>
   );
 }
 
diff --git a/ui/job-view/headerbars/SecondaryNavBar.jsx b/ui/job-view/headerbars/SecondaryNavBar.jsx
index e065e251ceb..4add2cda4b7 100644
--- a/ui/job-view/headerbars/SecondaryNavBar.jsx
+++ b/ui/job-view/headerbars/SecondaryNavBar.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button } from 'reactstrap';
+import { Button } from 'react-bootstrap';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
diff --git a/ui/job-view/headerbars/TierIndicator.jsx b/ui/job-view/headerbars/TierIndicator.jsx
index 2b0823ae5f5..605539c456f 100644
--- a/ui/job-view/headerbars/TierIndicator.jsx
+++ b/ui/job-view/headerbars/TierIndicator.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { ButtonGroup, Button } from 'reactstrap';
+import { ButtonGroup, Button } from 'react-bootstrap';
 
 const TIERS = ['1', '2', '3'];
 
@@ -20,8 +20,8 @@ export default function TierIndicator(props) {
                 ? "Can't Toggle because least one tier must be selected at all times"
                 : `Toggle tier ${tier} jobs`
             }
+            variant={shownTiers.includes(tier) ? 'dark' : 'outline-dark'}
             disabled={isOnlyTier}
-            outline={!shownTiers.includes(tier)}
             key={tier}
           >
             {tier}
diff --git a/ui/job-view/headerbars/TiersMenu.jsx b/ui/job-view/headerbars/TiersMenu.jsx
index 4c1bfca019b..39f3434f966 100644
--- a/ui/job-view/headerbars/TiersMenu.jsx
+++ b/ui/job-view/headerbars/TiersMenu.jsx
@@ -1,11 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import {
-  UncontrolledDropdown,
-  DropdownToggle,
-  DropdownMenu,
-  DropdownItem,
-} from 'reactstrap';
+import { Dropdown } from 'react-bootstrap';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faCheck } from '@fortawesome/free-solid-svg-icons';
 
@@ -15,20 +10,20 @@ export default function TiersMenu(props) {
   const TIERS = ['1', '2', '3'];
 
   return (
-    <UncontrolledDropdown>
-      <DropdownToggle
+    <Dropdown>
+      <Dropdown.Toggle
         id="tierLabel"
         title="Show/hide job tiers"
         className="btn-view-nav nav-menu-btn"
         caret
       >
         Tiers
-      </DropdownToggle>
-      <DropdownMenu>
+      </Dropdown.Toggle>
+      <Dropdown.Menu>
         {TIERS.map((tier) => {
           const isOnlyTier = shownTiers.length === 1 && tier === shownTiers[0];
           return (
-            <DropdownItem
+            <Dropdown.Item
               tag="a"
               key={tier}
               onClick={() => filterModel.toggleFilter('tier', tier)}
@@ -44,11 +39,11 @@ export default function TiersMenu(props) {
                 }
               />
               tier {tier}
-            </DropdownItem>
+            </Dropdown.Item>
           );
         })}
-      </DropdownMenu>
-    </UncontrolledDropdown>
+      </Dropdown.Menu>
+    </Dropdown>
   );
 }
 
diff --git a/ui/job-view/headerbars/WatchedRepo.jsx b/ui/job-view/headerbars/WatchedRepo.jsx
index 35af5dd63d8..89a398d90ad 100644
--- a/ui/job-view/headerbars/WatchedRepo.jsx
+++ b/ui/job-view/headerbars/WatchedRepo.jsx
@@ -10,13 +10,7 @@ import {
   faTimes,
   faTimesCircle,
 } from '@fortawesome/free-solid-svg-icons';
-import {
-  Button,
-  DropdownMenu,
-  DropdownItem,
-  DropdownToggle,
-  UncontrolledDropdown,
-} from 'reactstrap';
+import { Button, Dropdown } from 'react-bootstrap';
 import { Link } from 'react-router-dom';
 
 import TreeStatusModel, { treeStatusUiUrl } from '../../models/treeStatus';
@@ -147,13 +141,13 @@ export default class WatchedRepo extends React.Component {
           />{' '}
           {watchedRepo}
         </Link>
-        <UncontrolledDropdown>
-          <DropdownToggle className={`btn-view-nav ${activeClass}`}>
+        <Dropdown>
+          <Dropdown.Toggle className={`btn-view-nav ${activeClass}`}>
             <FontAwesomeIcon
               icon={faInfoCircle}
               title={`${watchedRepo} info`}
             />
-          </DropdownToggle>
+          </Dropdown.Toggle>
           {watchedRepo !== repoName && (
             <Button
               className={`btn-view-nav ${activeClass}`}
@@ -166,55 +160,55 @@ export default class WatchedRepo extends React.Component {
               />
             </Button>
           )}
-          <DropdownMenu>
+          <Dropdown.Menu>
             {status === 'unsupported' && (
               <React.Fragment>
-                <DropdownItem
+                <Dropdown.Item
                   tag="a"
                   href={`${treeStatusUiUrl()}`}
                   target="_blank"
                   rel="noopener noreferrer"
                 >
                   {watchedRepo} is not listed on Tree Status
-                </DropdownItem>
-                <DropdownItem divider />
+                </Dropdown.Item>
+                <Dropdown.Item divider />
               </React.Fragment>
             )}
             {!!reason && (
               <React.Fragment>
-                <DropdownItem tag="a">
+                <Dropdown.Item tag="a">
                   <BugLinkify>{reason}</BugLinkify>
-                </DropdownItem>
-                <DropdownItem divider />
+                </Dropdown.Item>
+                <Dropdown.Item divider />
               </React.Fragment>
             )}
 
             {!!messageOfTheDay && (
               <React.Fragment>
-                <DropdownItem tag="a">
+                <Dropdown.Item tag="a">
                   <BugLinkify>{messageOfTheDay}</BugLinkify>
-                </DropdownItem>
-                <DropdownItem divider />
+                </Dropdown.Item>
+                <Dropdown.Item divider />
               </React.Fragment>
             )}
-            <DropdownItem
+            <Dropdown.Item
               tag="a"
               href={`${treeStatusUiUrl()}${watchedRepo}`}
               target="_blank"
               rel="noopener noreferrer"
             >
               Tree Status
-            </DropdownItem>
-            <DropdownItem
+            </Dropdown.Item>
+            <Dropdown.Item
               tag="a"
               href={repo.pushLogUrl}
               target="_blank"
               rel="noopener noreferrer"
             >
               Pushlog
-            </DropdownItem>
-          </DropdownMenu>
-        </UncontrolledDropdown>
+            </Dropdown.Item>
+          </Dropdown.Menu>
+        </Dropdown>
       </div>
     );
   }
diff --git a/ui/job-view/pushes/FuzzyJobFinder.jsx b/ui/job-view/pushes/FuzzyJobFinder.jsx
index b1811a9dad6..25b943b009f 100644
--- a/ui/job-view/pushes/FuzzyJobFinder.jsx
+++ b/ui/job-view/pushes/FuzzyJobFinder.jsx
@@ -4,15 +4,13 @@ import { connect } from 'react-redux';
 import {
   Button,
   Col,
-  FormGroup,
-  Label,
+  Form,
   Modal,
   ModalHeader,
   ModalBody,
   ModalFooter,
   InputGroup,
-  Input,
-} from 'reactstrap';
+} from 'react-bootstrap';
 import Fuse from 'fuse.js';
 
 import PushModel from '../../models/push';
@@ -210,9 +208,9 @@ class FuzzyJobFinder extends React.Component {
         >
           <ModalHeader>Add New Jobs (Search)</ModalHeader>
           <ModalBody>
-            <FormGroup row>
+            <Form.Group row>
               <Col sm={10}>
-                <Input
+                <Form.Control
                   type="search"
                   onKeyDown={this.filterJobs}
                   placeholder="Filter runnable jobs: 'Android', 'Mochitest', 'Build', etc..."
@@ -221,31 +219,38 @@ class FuzzyJobFinder extends React.Component {
                 />
               </Col>
               <Col sm={2}>
-                <Label
+                <Form.Label
                   className="my-3"
-                  onChange={(evt) => this.toggleFullList(evt)}
                   title="The full list includes thousands of jobs that don't typically get run, and is much slower to render"
                 >
-                  <Input type="checkbox" /> Use full job list
-                </Label>
+                  <Form.Control
+                    type="checkbox"
+                    onChange={(evt) => this.toggleFullList(evt)}
+                  />
+                  Use full job list
+                </Form.Label>
               </Col>
-            </FormGroup>
+            </Form.Group>
             <h4> Runnable Jobs [{this.state.fuzzyList.length}]</h4>
             <div className="fuzzybuttons">
               <Button
                 onClick={this.addJobs}
-                color="success"
+                variant="success"
                 disabled={this.state.addDisabled}
               >
                 Add selected
               </Button>
               &nbsp;
-              <Button color="success" onClick={this.addAllJobs}>
+              <Button variant="success" onClick={this.addAllJobs}>
                 Add all
               </Button>
             </div>
             <InputGroup id="addJobsGroup">
-              <Input type="select" multiple onChange={this.updateAddButton}>
+              <Form.Control
+                as="select"
+                multiple
+                onChange={this.updateAddButton}
+              >
                 {this.state.fuzzyList.sort(sortAlphaNum).map((e) => (
                   <option
                     data-testid="fuzzyList"
@@ -258,21 +263,21 @@ class FuzzyJobFinder extends React.Component {
                     {e.name}
                   </option>
                 ))}
-              </Input>
+              </Form.Control>
             </InputGroup>
             <hr />
             <h4> Selected Jobs [{this.state.selectedList.length}]</h4>
             <div className="fuzzybuttons">
               <Button
                 onClick={this.removeJobs}
-                color="danger"
+                variant="danger"
                 disabled={this.state.removeDisabled}
               >
                 Remove selected
               </Button>
               &nbsp;
               <Button
-                color="danger"
+                variant="danger"
                 onClick={this.removeAllJobs}
                 disabled={this.state.selectedList.length === 0}
               >
@@ -280,18 +285,22 @@ class FuzzyJobFinder extends React.Component {
               </Button>
             </div>
             <InputGroup id="removeJobsGroup">
-              <Input type="select" multiple onChange={this.updateRemoveButton}>
+              <Form.Control
+                as="select"
+                multiple
+                onChange={this.updateRemoveButton}
+              >
                 {this.state.selectedList.sort(sortAlphaNum).map((e) => (
                   <option title={e} key={e}>
                     {e}
                   </option>
                 ))}
-              </Input>
+              </Form.Control>
             </InputGroup>
           </ModalBody>
           <ModalFooter>
             <Button
-              color="primary"
+              variant="primary"
               onClick={this.submitJobs}
               disabled={
                 this.state.selectedList.length === 0 ||
@@ -300,7 +309,7 @@ class FuzzyJobFinder extends React.Component {
             >
               Trigger ({this.state.selectedList.length}) Selected Jobs
             </Button>{' '}
-            <Button color="secondary" onClick={this.props.toggle}>
+            <Button variant="secondary" onClick={this.props.toggle}>
               Cancel
             </Button>
           </ModalFooter>
diff --git a/ui/job-view/pushes/Push.jsx b/ui/job-view/pushes/Push.jsx
index d9dbdd44e5d..d374a4eb438 100644
--- a/ui/job-view/pushes/Push.jsx
+++ b/ui/job-view/pushes/Push.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import sortBy from 'lodash/sortBy';
-import { Col } from 'reactstrap';
+import { Col } from 'react-bootstrap';
 
 import {
   sxsTaskName,
diff --git a/ui/job-view/pushes/PushActionMenu.jsx b/ui/job-view/pushes/PushActionMenu.jsx
index 4b31993d1cd..3e9983ff366 100644
--- a/ui/job-view/pushes/PushActionMenu.jsx
+++ b/ui/job-view/pushes/PushActionMenu.jsx
@@ -1,12 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import {
-  DropdownMenu,
-  DropdownItem,
-  DropdownToggle,
-  UncontrolledDropdown,
-} from 'reactstrap';
+import { Dropdown } from 'react-bootstrap';
 import { push as pushRoute } from 'connected-react-router';
 
 import {
@@ -90,47 +85,47 @@ class PushActionMenu extends React.PureComponent {
 
     return (
       <React.Fragment>
-        <UncontrolledDropdown className="btn-group">
-          <DropdownToggle
+        <Dropdown className="btn-group">
+          <Dropdown.Toggle
             size="sm"
             className="btn-push"
             title="Action menu"
             data-testid="push-action-menu-button"
             caret
           />
-          <DropdownMenu>
+          <Dropdown.Menu>
             {runnableVisible ? (
-              <DropdownItem
+              <Dropdown.Item
                 tag="a"
                 title="Hide Runnable Jobs"
                 onClick={hideRunnableJobs}
               >
                 Hide Runnable Jobs
-              </DropdownItem>
+              </Dropdown.Item>
             ) : (
-              <DropdownItem
+              <Dropdown.Item
                 tag="a"
                 title="Add new jobs to this push"
                 onClick={showRunnableJobs}
               >
                 Add new jobs
-              </DropdownItem>
+              </Dropdown.Item>
             )}
-            <DropdownItem
+            <Dropdown.Item
               tag="a"
               title="Add new jobs to this push via a fuzzy search"
               onClick={showFuzzyJobs}
             >
               Add new jobs (Search)
-            </DropdownItem>
-            <DropdownItem
+            </Dropdown.Item>
+            <Dropdown.Item
               tag="a"
               title="Trigger all jobs that were optimized away"
               onClick={this.triggerMissingJobs}
             >
               Trigger missing jobs
-            </DropdownItem>
-            <DropdownItem
+            </Dropdown.Item>
+            <Dropdown.Item
               tag="a"
               target="_blank"
               rel="noopener noreferrer"
@@ -138,30 +133,30 @@ class PushActionMenu extends React.PureComponent {
               title="Use Bugherder to mark the bugs in this push"
             >
               Mark with Bugherder
-            </DropdownItem>
-            <DropdownItem
+            </Dropdown.Item>
+            <Dropdown.Item
               tag="a"
               onClick={this.toggleCustomJobActions}
               title="View/Edit/Submit Action tasks for this push"
             >
               Custom Push Action...
-            </DropdownItem>
-            <DropdownItem
+            </Dropdown.Item>
+            <Dropdown.Item
               tag="a"
               onClick={() => this.updateParamsAndRange('tochange')}
               data-testid="top-of-range-menu-item"
             >
               Set as top of range
-            </DropdownItem>
-            <DropdownItem
+            </Dropdown.Item>
+            <Dropdown.Item
               tag="a"
               onClick={() => this.updateParamsAndRange('fromchange')}
               data-testid="bottom-of-range-menu-item"
             >
               Set as bottom of range
-            </DropdownItem>
-            <DropdownItem divider />
-            <DropdownItem
+            </Dropdown.Item>
+            <Dropdown.Item divider />
+            <Dropdown.Item
               tag="a"
               href={getPushHealthUrl({ repo: currentRepo.name, revision })}
               target="_blank"
@@ -169,8 +164,8 @@ class PushActionMenu extends React.PureComponent {
               title="Enable Health Badges in the Health menu"
             >
               Push Health
-            </DropdownItem>
-            <DropdownItem
+            </Dropdown.Item>
+            <Dropdown.Item
               tag="a"
               href={getPerfCompareChooserUrl({
                 newRepo: currentRepo.name,
@@ -181,9 +176,9 @@ class PushActionMenu extends React.PureComponent {
               title="Compare performance against another revision"
             >
               Compare Performance
-            </DropdownItem>
-          </DropdownMenu>
-        </UncontrolledDropdown>
+            </Dropdown.Item>
+          </Dropdown.Menu>
+        </Dropdown>
         {customJobActionsShowing && (
           <CustomJobActions
             job={null}
diff --git a/ui/job-view/pushes/PushHeader.jsx b/ui/job-view/pushes/PushHeader.jsx
index 6c2bab07ea3..fec5363e4c3 100644
--- a/ui/job-view/pushes/PushHeader.jsx
+++ b/ui/job-view/pushes/PushHeader.jsx
@@ -12,7 +12,7 @@ import {
   faThumbtack,
   faTimesCircle,
 } from '@fortawesome/free-solid-svg-icons';
-import { Badge, Button } from 'reactstrap';
+import { Badge, Button } from 'react-bootstrap';
 import { Link } from 'react-router-dom';
 
 import { getPercentComplete, toDateStr } from '../../helpers/display';
@@ -323,7 +323,7 @@ class PushHeader extends React.Component {
                 onClick={this.triggerNewJobs}
               >
                 Trigger
-                <Badge color="info" className="mx-1">
+                <Badge bg="info" className="mx-1">
                   {countSelectedRunnableJobs}
                 </Badge>
                 New Job{countSelectedRunnableJobs > 1 ? 's' : ''}
diff --git a/ui/job-view/pushes/PushList.jsx b/ui/job-view/pushes/PushList.jsx
index b968926ed82..6e9f5ca340f 100644
--- a/ui/job-view/pushes/PushList.jsx
+++ b/ui/job-view/pushes/PushList.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button } from 'reactstrap';
+import { Button } from 'react-bootstrap';
 import { connect } from 'react-redux';
 import intersection from 'lodash/intersection';
 import isEqual from 'lodash/isEqual';
@@ -198,8 +198,7 @@ class PushList extends React.Component {
           <div className="btn-group">
             {[10, 20, 50].map((count) => (
               <Button
-                color="darker-secondary"
-                outline
+                variant="outline-dark"
                 className="btn-light-bordered"
                 onClick={() => this.fetchNextPushes(count)}
                 key={count}
diff --git a/ui/logviewer/App.jsx b/ui/logviewer/App.jsx
index fe6de43f3ad..4d78ffd11a2 100644
--- a/ui/logviewer/App.jsx
+++ b/ui/logviewer/App.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { hot } from 'react-hot-loader/root';
 import { LazyLog } from 'react-lazylog';
 import isEqual from 'lodash/isEqual';
-import { Collapse } from 'reactstrap';
+import { Collapse } from 'react-bootstrap';
 
 import {
   getAllUrlParams,
diff --git a/ui/logviewer/Navigation.jsx b/ui/logviewer/Navigation.jsx
index 39408e27f41..771f3eeeefb 100644
--- a/ui/logviewer/Navigation.jsx
+++ b/ui/logviewer/Navigation.jsx
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faChartBar, faFileAlt } from '@fortawesome/free-regular-svg-icons';
 import { faTree } from '@fortawesome/free-solid-svg-icons';
-import { Button } from 'reactstrap';
+import { Button } from 'react-bootstrap';
 
 import LogoMenu from '../shared/LogoMenu';
 
diff --git a/ui/perfherder/App.jsx b/ui/perfherder/App.jsx
index 1410750cb1c..fb3e438711e 100644
--- a/ui/perfherder/App.jsx
+++ b/ui/perfherder/App.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Route, Switch, Redirect } from 'react-router-dom';
 import { hot } from 'react-hot-loader/root';
-import { Container } from 'reactstrap';
+import { Container } from 'react-bootstrap';
 
 import { getData, processResponse } from '../helpers/http';
 import { getApiUrl, repoEndpoint } from '../helpers/url';
diff --git a/ui/perfherder/Navigation.jsx b/ui/perfherder/Navigation.jsx
index a83b3ba45ec..4fc65a18c55 100644
--- a/ui/perfherder/Navigation.jsx
+++ b/ui/perfherder/Navigation.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Navbar, Nav, NavItem } from 'reactstrap';
+import { Navbar, Nav } from 'react-bootstrap';
 import { Link } from 'react-router-dom';
 
 import LogoMenu from '../shared/LogoMenu';
@@ -11,37 +11,37 @@ const Navigation = ({ user, setUser, notify }) => (
   <Navbar expand fixed="top" className="top-navbar">
     <LogoMenu menuText="Perfherder" colorClass="text-info" />
     <Nav className="navbar navbar-inverse">
-      <NavItem>
+      <Nav.Item>
         <Link to="./graphs" className="nav-link btn-view-nav">
           Graphs
         </Link>
-      </NavItem>
-      <NavItem>
+      </Nav.Item>
+      <Nav.Item>
         <Link to="./comparechooser" className="nav-link btn-view-nav">
           Compare
         </Link>
-      </NavItem>
-      <NavItem>
+      </Nav.Item>
+      <Nav.Item>
         <Link
           to="./alerts?hideDwnToInv=1&page=1"
           className="nav-link btn-view-nav"
         >
           Alerts
         </Link>
-      </NavItem>
-      <NavItem>
+      </Nav.Item>
+      <Nav.Item>
         <Link
           to="./alerts?monitoredAlerts=1&page=1"
           className="nav-link btn-view-nav"
         >
           Monitoring
         </Link>
-      </NavItem>
-      <NavItem>
+      </Nav.Item>
+      <Nav.Item>
         <Link to="./tests" className="nav-link btn-view-nav">
           Tests
         </Link>
-      </NavItem>
+      </Nav.Item>
     </Nav>
     <Navbar className="ml-auto">
       <HelpMenu />
diff --git a/ui/perfherder/Validation.jsx b/ui/perfherder/Validation.jsx
index 7ce54285181..09ac76e3be1 100644
--- a/ui/perfherder/Validation.jsx
+++ b/ui/perfherder/Validation.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Container } from 'reactstrap';
+import { Container } from 'react-bootstrap';
 
 import { parseQueryParams, createQueryParams } from '../helpers/url';
 import PushModel from '../models/push';
diff --git a/ui/perfherder/alerts/AlertActionPanel.jsx b/ui/perfherder/alerts/AlertActionPanel.jsx
index 1a59bc0ddb9..bb6e4c25d6b 100644
--- a/ui/perfherder/alerts/AlertActionPanel.jsx
+++ b/ui/perfherder/alerts/AlertActionPanel.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button, Row, Col } from 'reactstrap';
+import { Button, Row, Col } from 'react-bootstrap';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import {
   faCheck,
@@ -200,7 +200,7 @@ export default class AlertActionPanel extends React.Component {
               <SimpleTooltip
                 text={
                   <Button
-                    color="warning"
+                    variant="warning"
                     onClick={() => this.updateAndFetch('untriaged')}
                   >
                     Reset
@@ -217,7 +217,7 @@ export default class AlertActionPanel extends React.Component {
                 <SimpleTooltip
                   text={
                     <Button
-                      color="secondary"
+                      variant="secondary"
                       onClick={() => this.updateAlerts('acknowledged')}
                     >
                       <FontAwesomeIcon icon={faCheck} /> Acknowledge
@@ -231,7 +231,7 @@ export default class AlertActionPanel extends React.Component {
                 <SimpleTooltip
                   text={
                     <Button
-                      color="secondary"
+                      variant="secondary"
                       onClick={() => this.updateAlerts('invalid')}
                     >
                       <FontAwesomeIcon icon={faBan} /> Mark invalid
@@ -245,7 +245,7 @@ export default class AlertActionPanel extends React.Component {
                 <SimpleTooltip
                   text={
                     <Button
-                      color="secondary"
+                      variant="secondary"
                       onClick={() => this.toggle('showDownstreamModal')}
                     >
                       <FontAwesomeIcon icon={faLevelDownAlt} /> Mark downstream
@@ -259,7 +259,7 @@ export default class AlertActionPanel extends React.Component {
                 <SimpleTooltip
                   text={
                     <Button
-                      color="secondary"
+                      variant="secondary"
                       onClick={() => this.toggle('showReassignedModal')}
                     >
                       <FontAwesomeIcon icon={faArrowAltCircleRight} /> Reassign
diff --git a/ui/perfherder/alerts/AlertHeader.jsx b/ui/perfherder/alerts/AlertHeader.jsx
index 3d722dab894..b85c58123a4 100644
--- a/ui/perfherder/alerts/AlertHeader.jsx
+++ b/ui/perfherder/alerts/AlertHeader.jsx
@@ -2,17 +2,14 @@ import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
 import {
-  UncontrolledDropdown,
-  DropdownMenu,
-  DropdownItem,
-  DropdownToggle,
+  Dropdown,
   Container,
   Row,
   Col,
   Button,
-  Input,
+  Form,
   InputGroup,
-} from 'reactstrap';
+} from 'react-bootstrap';
 
 import { getJobsUrl, getPerfCompareBaseURL } from '../../helpers/url';
 import { toMercurialShortDateStr } from '../../helpers/display';
@@ -125,7 +122,7 @@ const AlertHeader = ({
           <Col className="p-0" xs="auto">
             <Button
               className="ml-1"
-              color="darker-secondary"
+              variant="darker-secondary"
               size="xs"
               onClick={handleEditMode}
               title="Click to edit revision"
@@ -135,17 +132,17 @@ const AlertHeader = ({
           </Col>
         )}
         <Col className="p-0" xs="auto">
-          <UncontrolledDropdown tag="span">
-            <DropdownToggle
+          <Dropdown tag="span">
+            <Dropdown.Toggle
               className="btn-xs ml-1"
-              color="secondary"
+              variant="secondary"
               caret
               data-testid="push-dropdown"
             >
               {formattedSummaryRevision}
-            </DropdownToggle>
-            <DropdownMenu>
-              <DropdownItem
+            </Dropdown.Toggle>
+            <Dropdown.Menu>
+              <Dropdown.Item
                 tag="a"
                 className="text-dark"
                 href={getJobsUrl({
@@ -157,8 +154,8 @@ const AlertHeader = ({
                 rel="noopener noreferrer"
               >
                 Jobs
-              </DropdownItem>
-              <DropdownItem
+              </Dropdown.Item>
+              <Dropdown.Item
                 tag="a"
                 className="text-dark"
                 href={repoModel.getPushLogRangeHref({
@@ -169,23 +166,23 @@ const AlertHeader = ({
                 rel="noopener noreferrer"
               >
                 Pushlog
-              </DropdownItem>
-              <DropdownItem
+              </Dropdown.Item>
+              <Dropdown.Item
                 className="text-dark"
                 disabled
                 data-testid="prev-push-revision"
               >
                 From: {`${alertSummary.prev_push_revision.slice(0, 12)}`}
-              </DropdownItem>
-              <DropdownItem
+              </Dropdown.Item>
+              <Dropdown.Item
                 className="text-dark"
                 disabled
                 data-testid="to-push-revision"
               >
                 To: {formattedSummaryRevision}
-              </DropdownItem>
-            </DropdownMenu>
-          </UncontrolledDropdown>
+              </Dropdown.Item>
+            </Dropdown.Menu>
+          </Dropdown>
         </Col>
         {bugNumber && (
           <Col className="p-0" xs="auto">
@@ -270,7 +267,7 @@ const AlertHeader = ({
 
             <Col xs="5" className="p-0">
               <InputGroup size="sm">
-                <Input
+                <Form.Control
                   value={newRevisionFrom}
                   placeholder="Enter desired revision"
                   onChange={handleRevisionChange('from')}
@@ -301,7 +298,7 @@ const AlertHeader = ({
             </Col>
             <Col xs="5" className="p-0">
               <InputGroup size="sm">
-                <Input
+                <Form.Control
                   value={newRevisionTo}
                   placeholder="Enter desired revision"
                   onChange={handleRevisionChange('to')}
@@ -325,7 +322,7 @@ const AlertHeader = ({
           <Row>
             <Col className="p-0">
               <Button
-                color="primary"
+                variant="primary"
                 className="ml-1"
                 size="xs"
                 disabled={newRevisionTo === '' && newRevisionFrom === ''}
@@ -334,7 +331,7 @@ const AlertHeader = ({
                 Save
               </Button>
               <Button
-                color="secondary"
+                variant="secondary"
                 className="ml-1"
                 size="xs"
                 onClick={cancelEditMode}
diff --git a/ui/perfherder/alerts/AlertHeaderTitle.jsx b/ui/perfherder/alerts/AlertHeaderTitle.jsx
index ee922b04244..474ff92213e 100644
--- a/ui/perfherder/alerts/AlertHeaderTitle.jsx
+++ b/ui/perfherder/alerts/AlertHeaderTitle.jsx
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { faExternalLinkAlt } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Link } from 'react-router-dom';
-import { Row, Col, Badge } from 'reactstrap';
+import { Row, Col, Badge } from 'react-bootstrap';
 
 import Clipboard from '../../shared/Clipboard';
 import { getFrameworkName, getTitle } from '../perf-helpers/helpers';
@@ -52,7 +52,7 @@ export default class AlertHeaderTitle extends React.Component {
                 {getFrameworkName(frameworks, alertSummary.framework)}
               </Badge>
               {isCritical ? (
-                <Badge className="mr-2" color="danger">
+                <Badge className="mr-2" bg="danger">
                   critical
                 </Badge>
               ) : null}
@@ -67,7 +67,7 @@ export default class AlertHeaderTitle extends React.Component {
           <Clipboard
             text={`${alertSummary.id}`}
             description="Alert ID"
-            color="transparent"
+            variant="transparent"
           />
         </Col>
       </Row>
diff --git a/ui/perfherder/alerts/AlertModal.jsx b/ui/perfherder/alerts/AlertModal.jsx
index c587f3f6b9e..3737ba60631 100644
--- a/ui/perfherder/alerts/AlertModal.jsx
+++ b/ui/perfherder/alerts/AlertModal.jsx
@@ -2,9 +2,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import {
   Form,
-  FormGroup,
-  Input,
-  Label,
   Button,
   Modal,
   ModalHeader,
@@ -12,7 +9,7 @@ import {
   ModalFooter,
   Col,
   Row,
-} from 'reactstrap';
+} from 'react-bootstrap';
 import debounce from 'lodash/debounce';
 
 export default class AlertModal extends React.Component {
@@ -64,11 +61,11 @@ export default class AlertModal extends React.Component {
         <ModalHeader toggle={toggle}>{header}</ModalHeader>
         <Form>
           <ModalBody>
-            <FormGroup>
+            <Form.Group>
               <Row className="justify-content-center">
                 <Col className="col-4">
-                  <Label for="taskId">{title}</Label>
-                  <Input
+                  <Form.Label htmlFor="taskId">{title}</Form.Label>
+                  <Form.Control
                     value={inputValue}
                     onChange={this.updateInput}
                     name="taskId"
@@ -86,11 +83,11 @@ export default class AlertModal extends React.Component {
                   )}
                 </Col>
               </Row>
-            </FormGroup>
+            </Form.Group>
           </ModalBody>
           <ModalFooter>
             <Button
-              color="secondary"
+              variant="secondary"
               onClick={(event) => updateAndClose(event, inputValue)}
               disabled={invalidInput || !inputValue.length || !validated}
               type="submit"
diff --git a/ui/perfherder/alerts/AlertTable.jsx b/ui/perfherder/alerts/AlertTable.jsx
index 371d6484a59..ed6e2abbf3b 100644
--- a/ui/perfherder/alerts/AlertTable.jsx
+++ b/ui/perfherder/alerts/AlertTable.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Container, Form, FormGroup, Table, Row, Col } from 'reactstrap';
+import { Container, Form, Table, Row, Col } from 'react-bootstrap';
 import orderBy from 'lodash/orderBy';
 
 import {
@@ -333,7 +333,7 @@ export default class AlertTable extends React.Component {
                     xs={10}
                     className="text-left alert-summary-header-element"
                   >
-                    <FormGroup check className="d-inline-flex">
+                    <Form.Group check className="d-inline-flex">
                       <SelectAlertsDropdown
                         setSelectedAlerts={this.setSelectedAlerts}
                         user={user}
@@ -351,7 +351,7 @@ export default class AlertTable extends React.Component {
                         changeRevision={this.changeRevision}
                         updateViewState={updateViewState}
                       />
-                    </FormGroup>
+                    </Form.Group>
                   </Col>
                   <Col className="d-flex justify-content-end p-2">
                     <StatusDropdown
@@ -489,7 +489,7 @@ export default class AlertTable extends React.Component {
                   {alertSummary.notes && (
                     <div className="bg-white px-3 py-4">
                       <TruncatedText
-                        color="darker-info"
+                        variant="darker-info"
                         title="Notes: "
                         maxLength={167}
                         text={alertSummary.notes}
diff --git a/ui/perfherder/alerts/AlertTableRow.jsx b/ui/perfherder/alerts/AlertTableRow.jsx
index 2173814d7bb..eaa8f1e2562 100644
--- a/ui/perfherder/alerts/AlertTableRow.jsx
+++ b/ui/perfherder/alerts/AlertTableRow.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button, FormGroup, Input, Label } from 'reactstrap';
+import { Button, Form, Badge } from 'react-bootstrap';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import {
   faStar as faStarSolid,
@@ -13,7 +13,6 @@ import {
 } from '@fortawesome/free-solid-svg-icons';
 import { faStar as faStarRegular } from '@fortawesome/free-regular-svg-icons';
 import { Link } from 'react-router-dom';
-import Badge from 'reactstrap/lib/Badge';
 
 import { getPerfCompareBaseSubtestsURL } from '../../helpers/url';
 import {
@@ -140,7 +139,7 @@ export default class AlertTableRow extends React.Component {
       <React.Fragment>
         (
         {statusColor === 'text-success' && (
-          <FontAwesomeIcon icon={faCheck} color="#28a745" />
+          <FontAwesomeIcon icon={faCheck} variant="#28a745" />
         )}
         <span className={statusColor}>{alertStatus}</span>
         {alert.related_summary_id && this.getReassignment(alert)})
@@ -427,9 +426,9 @@ export default class AlertTableRow extends React.Component {
         data-testid={alert.id}
       >
         <td className="table-width-xs px-1">
-          <FormGroup check className="ml-2 pl-4">
-            <Label hidden>alert {alert.id} title</Label>
-            <Input
+          <Form.Group check className="ml-2 pl-4">
+            <Form.Label hidden>alert {alert.id} title</Form.Label>
+            <Form.Control
               aria-label={`alert ${alert.id} title`}
               data-testid={`alert ${alert.id} checkbox`}
               type="checkbox"
@@ -442,11 +441,11 @@ export default class AlertTableRow extends React.Component {
                 )
               }
             />
-          </FormGroup>
+          </Form.Group>
         </td>
         <td className="px-0 d-flex flex-column align-items-start border-top-0">
           <Button
-            color="black"
+            variant="black"
             aria-label={
               starred
                 ? 'Remove bookmark from this Alert'
@@ -522,7 +521,7 @@ export default class AlertTableRow extends React.Component {
                 </a>
               </span>
             ) : (
-              <Badge className="mb-1" color="light">
+              <Badge className="mb-1" bg="light">
                 None
               </Badge>
             )}
diff --git a/ui/perfherder/alerts/AlertTableTagsOptions.jsx b/ui/perfherder/alerts/AlertTableTagsOptions.jsx
index dcd13c115a4..4efba2f6562 100644
--- a/ui/perfherder/alerts/AlertTableTagsOptions.jsx
+++ b/ui/perfherder/alerts/AlertTableTagsOptions.jsx
@@ -1,8 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import UncontrolledTooltip from 'reactstrap/lib/UncontrolledTooltip';
-import Button from 'reactstrap/lib/Button';
-import Badge from 'reactstrap/lib/Badge';
+import { Button, Badge, OverlayTrigger, Tooltip } from 'react-bootstrap';
 
 import SimpleTooltip from '../../shared/SimpleTooltip';
 
@@ -27,7 +25,7 @@ export default class AlertTableTagsOptions extends React.Component {
     return items.map((item) => (
       <Badge
         className="mr-1 custom-tooltip"
-        color="light"
+        bg="light"
         key={`${item.name}`}
         data-testid={badgeId[this.getBadgeType(item)]}
       >
@@ -51,7 +49,6 @@ export default class AlertTableTagsOptions extends React.Component {
   };
 
   displayItems = (items) => {
-    const { alertId } = this.props;
     const { displayAllItems } = this.state;
 
     return items.length ? (
@@ -61,29 +58,27 @@ export default class AlertTableTagsOptions extends React.Component {
       >
         {this.showItems(items.slice(0, this.visibleItems))}
         {!displayAllItems && items.length > this.visibleItems && (
-          <Button
-            color="link"
-            size="sm"
-            id={`alert-${alertId}-tags-options`}
-            onClick={() =>
-              this.setState((prevState) => ({
-                displayAllItems: !prevState.displayAllItems,
-              }))
-            }
+          <OverlayTrigger
+            placement="top"
+            overlay={<Tooltip>Show more</Tooltip>}
           >
-            <span data-testid="show-more-tags-options">...</span>
-            <UncontrolledTooltip
-              placement="top"
-              target={`alert-${alertId}-tags-options`}
+            <Button
+              variant="link"
+              size="sm"
+              onClick={() =>
+                this.setState((prevState) => ({
+                  displayAllItems: !prevState.displayAllItems,
+                }))
+              }
             >
-              Show more
-            </UncontrolledTooltip>
-          </Button>
+              <span data-testid="show-more-tags-options">...</span>
+            </Button>
+          </OverlayTrigger>
         )}
         {displayAllItems && this.showItems(items.slice(this.visibleItems))}
       </div>
     ) : (
-      <Badge className="mb-1" color="light">
+      <Badge className="mb-1" bg="light">
         No tags or options
       </Badge>
     );
@@ -109,5 +104,4 @@ AlertTableTagsOptions.propTypes = {
       tagAndOption: PropTypes.bool.isRequired,
     }),
   ).isRequired,
-  alertId: PropTypes.number.isRequired,
 };
diff --git a/ui/perfherder/alerts/AlertsView.jsx b/ui/perfherder/alerts/AlertsView.jsx
index 090b2057717..ab699563d3e 100644
--- a/ui/perfherder/alerts/AlertsView.jsx
+++ b/ui/perfherder/alerts/AlertsView.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Alert, Container } from 'reactstrap';
+import { Alert, Container } from 'react-bootstrap';
 import cloneDeep from 'lodash/cloneDeep';
 
 import withValidation from '../Validation';
@@ -358,14 +358,14 @@ class AlertsView extends React.Component {
           )}
 
           {!user.isStaff && (
-            <Alert color="info">
+            <Alert variant="info">
               You must be logged into perfherder/treeherder and be a sheriff to
               make changes
             </Alert>
           )}
 
           {notSupportedAlertFilters.length > 0 && (
-            <Alert color="warning">
+            <Alert variant="warning">
               {notSupportedAlertFiltersMessage(notSupportedAlertFilters)}
             </Alert>
           )}
diff --git a/ui/perfherder/alerts/AlertsViewControls.jsx b/ui/perfherder/alerts/AlertsViewControls.jsx
index ae739aca0fd..77a4dff3330 100644
--- a/ui/perfherder/alerts/AlertsViewControls.jsx
+++ b/ui/perfherder/alerts/AlertsViewControls.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Row, Button, Container } from 'reactstrap';
+import { Row, Button, Container } from 'react-bootstrap';
 
 import FilterControls from '../../shared/FilterControls';
 import { summaryStatusMap, scrollTypes } from '../perf-helpers/constants';
@@ -198,7 +198,7 @@ export default class AlertsViewControls extends React.Component {
               <div className="d-flex justify-content-end mb-1 mr-2">
                 <Button
                   className="mr-2"
-                  color="info"
+                  variant="info"
                   onClick={() => this.onScrollAlert(scrollTypes.prev)}
                   disabled={disableButtons.prev}
                   data-testid="scroll-prev-alert"
@@ -206,7 +206,7 @@ export default class AlertsViewControls extends React.Component {
                   Previous alert
                 </Button>
                 <Button
-                  color="info"
+                  variant="info"
                   onClick={() => this.onScrollAlert(scrollTypes.next)}
                   disabled={disableButtons.next}
                   data-testid="scroll-next-alert"
diff --git a/ui/perfherder/alerts/Assignee.jsx b/ui/perfherder/alerts/Assignee.jsx
index fdc3e7e3d92..5037faa67fb 100644
--- a/ui/perfherder/alerts/Assignee.jsx
+++ b/ui/perfherder/alerts/Assignee.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button, Input, InputGroup } from 'reactstrap';
+import { Button, Form, InputGroup } from 'react-bootstrap';
 
 export default class Assignee extends React.Component {
   constructor(props) {
@@ -105,7 +105,7 @@ export default class Assignee extends React.Component {
       <React.Fragment>
         <Button
           className="ml-1"
-          color="darker-secondary"
+          variant="darker-secondary"
           size="xs"
           onClick={this.goToEditMode}
           title="Click to change assignee"
@@ -115,7 +115,7 @@ export default class Assignee extends React.Component {
         {!assigneeUsername && (
           <Button
             className="ml-1"
-            color="darker-secondary"
+            variant="darker-secondary"
             size="xs"
             disabled={!user.isStaff}
             onClick={this.prefillWithLoggedInUsername}
@@ -126,7 +126,7 @@ export default class Assignee extends React.Component {
       </React.Fragment>
     ) : (
       <InputGroup size="sm">
-        <Input
+        <Form.Control
           disabled={!user.isStaff}
           placeholder={placeholder}
           value={newAssigneeUsername}
diff --git a/ui/perfherder/alerts/BadgeTooltip.jsx b/ui/perfherder/alerts/BadgeTooltip.jsx
index 919f8d3126a..af0a309c844 100644
--- a/ui/perfherder/alerts/BadgeTooltip.jsx
+++ b/ui/perfherder/alerts/BadgeTooltip.jsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { UncontrolledTooltip } from 'reactstrap';
-import Badge from 'reactstrap/lib/Badge';
+import { Badge, OverlayTrigger, Tooltip } from 'react-bootstrap';
 
 export default class BadgeTooltip extends React.Component {
   constructor(props) {
@@ -16,26 +15,19 @@ export default class BadgeTooltip extends React.Component {
       placement,
       textClass,
       innerClassName,
-      autohide,
     } = this.props;
 
     return (
-      <React.Fragment>
-        <span ref={this.tooltipRef} className={`${textClass} pb-1`}>
-          <Badge color="light" data-testid="alert-noise-profile">
+      <OverlayTrigger
+        placement={placement}
+        overlay={<Tooltip className={innerClassName}>{tooltipText}</Tooltip>}
+      >
+        <span className={`${textClass} pb-1`}>
+          <Badge bg="light" data-testid="alert-noise-profile">
             {text}
           </Badge>
         </span>
-
-        <UncontrolledTooltip
-          placement={placement}
-          target={this.tooltipRef}
-          innerClassName={innerClassName}
-          autohide={autohide}
-        >
-          {tooltipText}
-        </UncontrolledTooltip>
-      </React.Fragment>
+      </OverlayTrigger>
     );
   }
 }
@@ -46,12 +38,10 @@ BadgeTooltip.propTypes = {
   textClass: PropTypes.string,
   placement: PropTypes.string,
   innerClassName: PropTypes.string,
-  autohide: PropTypes.bool,
 };
 
 BadgeTooltip.defaultProps = {
   textClass: '',
   placement: 'top',
   innerClassName: '',
-  autohide: true,
 };
diff --git a/ui/perfherder/alerts/FileBugModal.jsx b/ui/perfherder/alerts/FileBugModal.jsx
index 78dbfa40e2d..c864b2d1b7f 100644
--- a/ui/perfherder/alerts/FileBugModal.jsx
+++ b/ui/perfherder/alerts/FileBugModal.jsx
@@ -2,9 +2,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import {
   Form,
-  FormGroup,
-  Input,
-  Label,
   Button,
   Modal,
   ModalHeader,
@@ -12,7 +9,7 @@ import {
   ModalFooter,
   Col,
   Row,
-} from 'reactstrap';
+} from 'react-bootstrap';
 import debounce from 'lodash/debounce';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faInfoCircle } from '@fortawesome/free-solid-svg-icons';
@@ -84,16 +81,16 @@ export default class FileBugModal extends React.Component {
               <div className="alert alert-danger">{errorMessage}</div>
             )}
             {user.isLoggedIn ? (
-              <FormGroup>
+              <Form.Group>
                 <Row className="justify-content-left">
                   <Col className="col-6">
-                    <Label for="culpritBugId">
+                    <Form.Label htmlFor="culpritBugId">
                       {title} <i>(optional): </i>
                       <span className="text-secondary">
                         <FontAwesomeIcon icon={faInfoCircle} title={infoText} />
                       </span>
-                    </Label>
-                    <Input
+                    </Form.Label>
+                    <Form.Control
                       value={inputValue}
                       onChange={this.updateInput}
                       name="culpritBugId"
@@ -110,7 +107,7 @@ export default class FileBugModal extends React.Component {
                     )}
                   </Col>
                 </Row>
-              </FormGroup>
+              </Form.Group>
             ) : (
               <div>
                 <p>You need to log in to access this feature.</p>
diff --git a/ui/perfherder/alerts/NotesModal.jsx b/ui/perfherder/alerts/NotesModal.jsx
index f85008877b9..34d6ed75020 100644
--- a/ui/perfherder/alerts/NotesModal.jsx
+++ b/ui/perfherder/alerts/NotesModal.jsx
@@ -2,15 +2,12 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import {
   Form,
-  FormGroup,
-  Input,
-  Label,
   Button,
   Modal,
   ModalHeader,
   ModalBody,
   ModalFooter,
-} from 'reactstrap';
+} from 'react-bootstrap';
 
 export default class NotesModal extends React.Component {
   constructor(props) {
@@ -33,21 +30,21 @@ export default class NotesModal extends React.Component {
         <ModalHeader toggle={toggle}>Alert Notes</ModalHeader>
         <Form>
           <ModalBody>
-            <FormGroup>
-              <Label for="editableNotes">Add or edit notes</Label>
-              <Input
+            <Form.Group>
+              <Form.Label htmlFor="editableNotes">Add or edit notes</Form.Label>
+              <Form.Control
                 value={inputValue || ''}
                 onChange={this.updateInput}
                 name="editableNotes"
-                type="textarea"
+                as="textarea"
                 cols="50"
                 rows="10"
               />
-            </FormGroup>
+            </Form.Group>
           </ModalBody>
           <ModalFooter>
             <Button
-              color="secondary"
+              variant="secondary"
               onClick={(event) =>
                 updateAndClose(
                   event,
diff --git a/ui/perfherder/alerts/SelectAlertsDropdown.jsx b/ui/perfherder/alerts/SelectAlertsDropdown.jsx
index 05f02088eb1..7b49d09e33c 100644
--- a/ui/perfherder/alerts/SelectAlertsDropdown.jsx
+++ b/ui/perfherder/alerts/SelectAlertsDropdown.jsx
@@ -1,11 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import DropdownItem from 'reactstrap/lib/DropdownItem';
-import DropdownMenu from 'reactstrap/lib/DropdownMenu';
-import DropdownToggle from 'reactstrap/lib/DropdownToggle';
-import UncontrolledDropdown from 'reactstrap/lib/UncontrolledDropdown';
-import Input from 'reactstrap/lib/Input';
-import Label from 'reactstrap/lib/Label';
+import { Dropdown, Form } from 'react-bootstrap';
 
 import { alertStatusMap } from '../perf-helpers/constants';
 import { getStatus } from '../perf-helpers/helpers';
@@ -54,8 +49,8 @@ class SelectAlertsDropdown extends React.Component {
 
     return (
       <React.Fragment>
-        <Label check className="pl-1">
-          <Input
+        <Form.Label check className="pl-1">
+          <Form.Control
             data-testid={`alert summary ${alertSummaryId} checkbox`}
             type="checkbox"
             checked={allSelected}
@@ -66,30 +61,29 @@ class SelectAlertsDropdown extends React.Component {
                 : this.selectAlertsByStatus(all);
             }}
           />
-        </Label>
-        <UncontrolledDropdown size="sm" className="mr-2">
-          <DropdownToggle
+        </Form.Label>
+        <Dropdown size="sm" className="mr-2">
+          <Dropdown.Toggle
             aria-label="alert selection options"
-            caret
             className="d-flex mt-1"
             disabled={!user.isStaff}
           />
-          <DropdownMenu>
-            <DropdownItem header>Check alerts</DropdownItem>
-            <DropdownItem onClick={() => this.selectAlertsByStatus(all)}>
+          <Dropdown.Menu>
+            <Dropdown.Header>Check alerts</Dropdown.Header>
+            <Dropdown.Item onClick={() => this.selectAlertsByStatus(all)}>
               All
-            </DropdownItem>
-            <DropdownItem onClick={() => this.selectAlertsByStatus(none)}>
+            </Dropdown.Item>
+            <Dropdown.Item onClick={() => this.selectAlertsByStatus(none)}>
               None
-            </DropdownItem>
-            <DropdownItem onClick={() => this.selectAlertsByStatus(triaged)}>
+            </Dropdown.Item>
+            <Dropdown.Item onClick={() => this.selectAlertsByStatus(triaged)}>
               Triaged
-            </DropdownItem>
-            <DropdownItem onClick={() => this.selectAlertsByStatus(untriaged)}>
+            </Dropdown.Item>
+            <Dropdown.Item onClick={() => this.selectAlertsByStatus(untriaged)}>
               Untriaged
-            </DropdownItem>
-          </DropdownMenu>
-        </UncontrolledDropdown>
+            </Dropdown.Item>
+          </Dropdown.Menu>
+        </Dropdown>
       </React.Fragment>
     );
   }
diff --git a/ui/perfherder/alerts/StatusDropdown.jsx b/ui/perfherder/alerts/StatusDropdown.jsx
index 712a5e2db9c..f0fc372d0d3 100644
--- a/ui/perfherder/alerts/StatusDropdown.jsx
+++ b/ui/perfherder/alerts/StatusDropdown.jsx
@@ -1,13 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import {
-  UncontrolledDropdown,
-  DropdownMenu,
-  DropdownItem,
-  DropdownToggle,
-  Col,
-  Label,
-} from 'reactstrap';
+import { Dropdown, Col, Form } from 'react-bootstrap';
 import template from 'lodash/template';
 import templateSettings from 'lodash/templateSettings';
 
@@ -361,11 +354,13 @@ The following [documentation link](https://firefox-source-docs.mozilla.org/testi
             submitButtonText="Assign"
             dropdownOption={
               <Col>
-                <Label for="issueTrackerSelector">Select Bug Tracker</Label>
-                <UncontrolledDropdown>
-                  <DropdownToggle caret outline>
+                <Form.Label htmlFor="issueTrackerSelector">
+                  Select Bug Tracker
+                </Form.Label>
+                <Dropdown>
+                  <Dropdown.Toggle variant="outline-secondary">
                     {selectedValue}
-                  </DropdownToggle>
+                  </Dropdown.Toggle>
                   <DropdownMenuItems
                     updateData={(selectedValue) =>
                       this.setState({ selectedValue })
@@ -373,7 +368,7 @@ The following [documentation link](https://firefox-source-docs.mozilla.org/testi
                     selectedItem={selectedValue}
                     options={issueTrackers.map((item) => item.text)}
                   />
-                </UncontrolledDropdown>
+                </Dropdown>
               </Col>
             }
           />
@@ -433,44 +428,44 @@ The following [documentation link](https://firefox-source-docs.mozilla.org/testi
           performanceTags={performanceTags}
           updateAndClose={this.updateAndClose}
         />
-        <UncontrolledDropdown tag="span" className="status-drop-down-container">
-          <DropdownToggle className="btn-xs" color="darker-secondary" caret>
+        <Dropdown as="span" className="status-drop-down-container">
+          <Dropdown.Toggle className="btn-xs" variant="darker-secondary">
             {getStatus(alertSummary.status)}
-          </DropdownToggle>
-          <DropdownMenu>
-            <DropdownItem tag="a" onClick={this.copySummary}>
+          </Dropdown.Toggle>
+          <Dropdown.Menu>
+            <Dropdown.Item as="a" onClick={this.copySummary}>
               Copy Summary
-            </DropdownItem>
+            </Dropdown.Item>
             {!alertSummary.bug_number && user.isStaff && (
-              <DropdownItem
-                tag="a"
+              <Dropdown.Item
+                as="a"
                 onClick={() => this.toggle('showFileBugModal')}
               >
                 File bug
-              </DropdownItem>
+              </Dropdown.Item>
             )}
             {!alertSummary.bug_number &&
               frameworkName in criticalTestsList &&
               user.isStaff && (
-                <DropdownItem
-                  tag="a"
+                <Dropdown.Item
+                  as="a"
                   onClick={() => this.toggle('showCriticalFileBugModal')}
                 >
                   Request backout
-                </DropdownItem>
+                </Dropdown.Item>
               )}
             {user.isStaff && (
               <React.Fragment>
                 {!alertSummary.bug_number ? (
-                  <DropdownItem
-                    tag="a"
+                  <Dropdown.Item
+                    as="a"
                     onClick={() => this.toggle('showBugModal')}
                   >
                     Link to bug
-                  </DropdownItem>
+                  </Dropdown.Item>
                 ) : (
-                  <DropdownItem
-                    tag="a"
+                  <Dropdown.Item
+                    as="a"
                     onClick={() =>
                       this.changeAlertSummary({
                         bug_number: null,
@@ -478,17 +473,17 @@ The following [documentation link](https://firefox-source-docs.mozilla.org/testi
                     }
                   >
                     Unlink from bug
-                  </DropdownItem>
+                  </Dropdown.Item>
                 )}
-                <DropdownItem
-                  tag="a"
+                <Dropdown.Item
+                  as="a"
                   onClick={() => this.toggle('showNotesModal')}
                 >
                   {!alertSummary.notes ? 'Add notes' : 'Edit notes'}
-                </DropdownItem>
+                </Dropdown.Item>
                 {this.isResolved(alertStatus) && (
-                  <DropdownItem
-                    tag="a"
+                  <Dropdown.Item
+                    as="a"
                     onClick={() =>
                       this.changeAlertSummary({
                         status: summaryStatusMap.investigating,
@@ -496,11 +491,11 @@ The following [documentation link](https://firefox-source-docs.mozilla.org/testi
                     }
                   >
                     Re-open
-                  </DropdownItem>
+                  </Dropdown.Item>
                 )}
                 {this.isValidStatus(alertStatus, 'wontfix') && (
-                  <DropdownItem
-                    tag="a"
+                  <Dropdown.Item
+                    as="a"
                     onClick={() =>
                       this.changeAlertSummary({
                         status: summaryStatusMap.wontfix,
@@ -508,12 +503,12 @@ The following [documentation link](https://firefox-source-docs.mozilla.org/testi
                     }
                   >
                     Mark as won&apos;t fix
-                  </DropdownItem>
+                  </Dropdown.Item>
                 )}
 
                 {this.isValidStatus(alertStatus, 'backedout') && (
-                  <DropdownItem
-                    tag="a"
+                  <Dropdown.Item
+                    as="a"
                     onClick={() =>
                       this.changeAlertSummary({
                         status: summaryStatusMap.backedout,
@@ -521,12 +516,12 @@ The following [documentation link](https://firefox-source-docs.mozilla.org/testi
                     }
                   >
                     Mark as backed out
-                  </DropdownItem>
+                  </Dropdown.Item>
                 )}
 
                 {this.isValidStatus(alertStatus, 'fixed') && (
-                  <DropdownItem
-                    tag="a"
+                  <Dropdown.Item
+                    as="a"
                     onClick={() =>
                       this.changeAlertSummary({
                         status: summaryStatusMap.fixed,
@@ -534,20 +529,20 @@ The following [documentation link](https://firefox-source-docs.mozilla.org/testi
                     }
                   >
                     Mark as fixed
-                  </DropdownItem>
+                  </Dropdown.Item>
                 )}
 
-                <DropdownItem
-                  tag="a"
+                <Dropdown.Item
+                  as="a"
                   onClick={() => this.toggle('showTagsModal')}
                 >
                   {!alertSummaryActiveTags.length ? 'Add tags' : 'Edit tags'}
-                </DropdownItem>
+                </Dropdown.Item>
               </React.Fragment>
             )}
-          </DropdownMenu>
+          </Dropdown.Menu>
           {!isWeekend && <AlertStatusCountdown alertSummary={alertSummary} />}
-        </UncontrolledDropdown>
+        </Dropdown>
       </React.Fragment>
     );
   }
diff --git a/ui/perfherder/alerts/TagsList.jsx b/ui/perfherder/alerts/TagsList.jsx
index 32f6cbe7d31..b12b509609f 100644
--- a/ui/perfherder/alerts/TagsList.jsx
+++ b/ui/perfherder/alerts/TagsList.jsx
@@ -1,20 +1,21 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Badge, UncontrolledTooltip } from 'reactstrap';
+import { Badge, OverlayTrigger, Tooltip } from 'react-bootstrap';
 
 import { tooltipMessages } from '../perf-helpers/constants';
 
 const TagsList = ({ tags }) => {
   if (tags.length > 0) {
     return tags.map((tag) => (
-      <Badge key={tag} className="mr-2" pill>
-        <span data-testid={`performance-tag ${tag}`} id={`${tag}-perf-tag`}>
-          {tag}
-        </span>
-        <UncontrolledTooltip placement="top" target={`${tag}-perf-tag`}>
-          {tooltipMessages[tag]}
-        </UncontrolledTooltip>
-      </Badge>
+      <OverlayTrigger
+        key={tag}
+        placement="top"
+        overlay={<Tooltip>{tooltipMessages[tag]}</Tooltip>}
+      >
+        <Badge className="mr-2" pill>
+          <span data-testid={`performance-tag ${tag}`}>{tag}</span>
+        </Badge>
+      </OverlayTrigger>
     ));
   }
 
diff --git a/ui/perfherder/alerts/TagsModal.jsx b/ui/perfherder/alerts/TagsModal.jsx
index 57bff9203b5..27bf3b7adad 100644
--- a/ui/perfherder/alerts/TagsModal.jsx
+++ b/ui/perfherder/alerts/TagsModal.jsx
@@ -7,10 +7,7 @@ import {
   ModalFooter,
   Button,
   Form,
-  FormGroup,
-  Label,
-  CustomInput,
-} from 'reactstrap';
+} from 'react-bootstrap';
 
 export default class TagsModal extends React.Component {
   constructor(props) {
@@ -44,7 +41,7 @@ export default class TagsModal extends React.Component {
   listTags = () => {
     return this.state.tags.map((tag, index) => {
       return (
-        <CustomInput
+        <Form.Check
           key={tag.name}
           data-testid={`modal-perf-tag ${tag.name}`}
           type="checkbox"
@@ -88,12 +85,12 @@ export default class TagsModal extends React.Component {
         <ModalHeader toggle={this.toggleModal}>Alert Tags</ModalHeader>
         <Form>
           <ModalBody>
-            <Label for="performanceTags" />
-            <FormGroup>{this.listTags()}</FormGroup>
+            <Form.Label htmlFor="performanceTags" />
+            <Form.Group>{this.listTags()}</Form.Group>
           </ModalBody>
           <ModalFooter>
             <Button
-              color="darker-secondary"
+              variant="darker-secondary"
               onClick={(event) => {
                 updateAndClose(
                   event,
diff --git a/ui/perfherder/compare/CompareSelectorView.jsx b/ui/perfherder/compare/CompareSelectorView.jsx
index cd190ae9d99..684510a8e12 100644
--- a/ui/perfherder/compare/CompareSelectorView.jsx
+++ b/ui/perfherder/compare/CompareSelectorView.jsx
@@ -5,10 +5,9 @@ import {
   Row,
   Button,
   ButtonGroup,
-  ButtonDropdown,
-  DropdownToggle,
+  DropdownButton,
   Alert,
-} from 'reactstrap';
+} from 'react-bootstrap';
 
 import { parseQueryParams, createQueryParams } from '../../helpers/url';
 import ErrorMessages from '../../shared/ErrorMessages';
@@ -36,7 +35,6 @@ export default class CompareSelectorView extends React.Component {
       missingRevision: false,
       framework: 1,
       frameworkName: 'talos',
-      frameworkDropdownIsOpen: false,
       frameworks: [...this.props.frameworks, { id: 0, name: 'infra' }],
     };
   }
@@ -92,12 +90,6 @@ export default class CompareSelectorView extends React.Component {
     }
   };
 
-  toggleFrameworkDropdown = () => {
-    this.setState((prevState) => ({
-      frameworkDropdownIsOpen: !prevState.frameworkDropdownIsOpen,
-    }));
-  };
-
   render() {
     const {
       originalProject,
@@ -108,7 +100,6 @@ export default class CompareSelectorView extends React.Component {
       errorMessages,
       disableButton,
       missingRevision,
-      frameworkDropdownIsOpen,
       frameworks,
     } = this.state;
 
@@ -137,7 +128,7 @@ export default class CompareSelectorView extends React.Component {
               </Col>
             </Row>
             <Row className="justify-content-center">
-              <Alert color="info">
+              <Alert variant="info">
                 Compare View will be deprecated soon. Please consider using{' '}
                 <a href="https://perf.compare/">PerfCompare</a> as an
                 alternative.
@@ -145,7 +136,7 @@ export default class CompareSelectorView extends React.Component {
             </Row>
             <Row className="justify-content-center">
               {showWarning && (
-                <Alert color="warning">
+                <Alert variant="warning">
                   It is not recommended to compare a <b>try</b> build against a{' '}
                   <b>mozilla-central</b> build, unless it is based on latest
                   mozilla-central.
@@ -179,19 +170,15 @@ export default class CompareSelectorView extends React.Component {
             <Row className="justify-content-center pt-3">
               <Col sm="8" className="text-right px-1">
                 <ButtonGroup>
-                  <ButtonDropdown
-                    isOpen={frameworkDropdownIsOpen}
-                    toggle={this.toggleFrameworkDropdown}
-                  >
-                    <DropdownToggle caret>{frameworkName}</DropdownToggle>
+                  <DropdownButton title={frameworkName}>
                     <DropdownMenuItems
                       options={frameworkNames}
                       selectedItem={frameworkName}
                       updateData={this.updateFramework}
                     />
-                  </ButtonDropdown>
+                  </DropdownButton>
                   <Button
-                    color="darker-info"
+                    variant="darker-info"
                     onClick={
                       newRevision !== '' && disableButton
                         ? null
diff --git a/ui/perfherder/compare/CompareSubtestDistributionView.jsx b/ui/perfherder/compare/CompareSubtestDistributionView.jsx
index 990ab4d4ccc..7160e101413 100644
--- a/ui/perfherder/compare/CompareSubtestDistributionView.jsx
+++ b/ui/perfherder/compare/CompareSubtestDistributionView.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Container, Row } from 'reactstrap';
+import { Container, Row } from 'react-bootstrap';
 
 import RepositoryModel from '../../models/repository';
 import PushModel from '../../models/push';
diff --git a/ui/perfherder/compare/CompareTable.jsx b/ui/perfherder/compare/CompareTable.jsx
index a2ebf2a10ac..86ce90020bc 100644
--- a/ui/perfherder/compare/CompareTable.jsx
+++ b/ui/perfherder/compare/CompareTable.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button, Table } from 'reactstrap';
+import { Button, Table } from 'react-bootstrap';
 import PropTypes from 'prop-types';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faHashtag } from '@fortawesome/free-solid-svg-icons';
@@ -154,7 +154,7 @@ export default class CompareTable extends React.Component {
                 {onPermalinkClick && (
                   <Button
                     className="permalink p-0 ml-1"
-                    color="link"
+                    variant="link"
                     onClick={() =>
                       onPermalinkClick(
                         getHashBasedId(testName, hashFunction),
diff --git a/ui/perfherder/compare/CompareTableControls.jsx b/ui/perfherder/compare/CompareTableControls.jsx
index 40c06c42772..8eb49c25d6e 100644
--- a/ui/perfherder/compare/CompareTableControls.jsx
+++ b/ui/perfherder/compare/CompareTableControls.jsx
@@ -1,8 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Container, Row } from 'reactstrap';
+import { Container, Row, Button } from 'react-bootstrap';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import Button from 'reactstrap/lib/Button';
 import { faFileDownload } from '@fortawesome/free-solid-svg-icons';
 
 import { filterText } from '../perf-helpers/constants';
@@ -357,8 +356,7 @@ export default class CompareTableControls extends React.Component {
         <div className="download-json-container">
           {hasTryProject() && (
             <Button
-              color="darker-info"
-              outline
+              variant="outline-info"
               className="btn"
               type="button"
               onClick={this.updateReplicates}
diff --git a/ui/perfherder/compare/CompareTableRow.jsx b/ui/perfherder/compare/CompareTableRow.jsx
index 1597dda2165..a8b2bbe7fcf 100644
--- a/ui/perfherder/compare/CompareTableRow.jsx
+++ b/ui/perfherder/compare/CompareTableRow.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button } from 'reactstrap';
+import { Button } from 'react-bootstrap';
 import PropTypes from 'prop-types';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import {
@@ -64,7 +64,7 @@ export default class CompareTableRow extends React.PureComponent {
               <span>
                 <Button
                   className="permalink p-0 ml-1"
-                  color="link"
+                  variant="link"
                   onClick={() =>
                     onPermalinkClick(
                       getHashBasedId(
diff --git a/ui/perfherder/compare/CompareTableView.jsx b/ui/perfherder/compare/CompareTableView.jsx
index 56600206353..d114c822a79 100644
--- a/ui/perfherder/compare/CompareTableView.jsx
+++ b/ui/perfherder/compare/CompareTableView.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Alert, Col, Row, Container } from 'reactstrap';
+import { Alert, Col, Row, Container } from 'react-bootstrap';
 import { Link } from 'react-router-dom';
 
 import ErrorMessages from '../../shared/ErrorMessages';
@@ -325,7 +325,7 @@ export default class CompareTableView extends React.Component {
         >
           <React.Fragment>
             <Row className="justify-content-center">
-              <Alert color="info">
+              <Alert variant="info">
                 <a
                   href={perfCompareURL}
                   target="_blank"
@@ -386,7 +386,7 @@ export default class CompareTableView extends React.Component {
               {testsNoResults && (
                 <Row className="pt-5 justify-content-center">
                   <Col small="12" className="px-0 max-width-default">
-                    <Alert color="warning">
+                    <Alert variant="warning">
                       <TruncatedText
                         title="Tests without results: "
                         maxLength={174}
diff --git a/ui/perfherder/compare/NoiseTable.jsx b/ui/perfherder/compare/NoiseTable.jsx
index a6e575e7953..eadcdd8fb12 100644
--- a/ui/perfherder/compare/NoiseTable.jsx
+++ b/ui/perfherder/compare/NoiseTable.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Table, Alert } from 'reactstrap';
+import { Table, Alert } from 'react-bootstrap';
 import PropTypes from 'prop-types';
 
 const NoiseTable = ({ testsWithNoise, hasSubtests }) => {
@@ -11,7 +11,7 @@ const NoiseTable = ({ testsWithNoise, hasSubtests }) => {
   };
 
   return (
-    <Alert color="info">
+    <Alert variant="info">
       <p className="font-weight-bold">
         Tests with too much noise to be considered in the noise metric
       </p>
diff --git a/ui/perfherder/compare/RetriggerButton.jsx b/ui/perfherder/compare/RetriggerButton.jsx
index dfbe996d496..520ec017055 100644
--- a/ui/perfherder/compare/RetriggerButton.jsx
+++ b/ui/perfherder/compare/RetriggerButton.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button } from 'reactstrap';
+import { Button } from 'react-bootstrap';
 import PropTypes from 'prop-types';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faRedo } from '@fortawesome/free-solid-svg-icons';
diff --git a/ui/perfherder/compare/RetriggerModal.jsx b/ui/perfherder/compare/RetriggerModal.jsx
index fedbb2f161f..a932dc0706f 100644
--- a/ui/perfherder/compare/RetriggerModal.jsx
+++ b/ui/perfherder/compare/RetriggerModal.jsx
@@ -3,16 +3,13 @@ import PropTypes from 'prop-types';
 import {
   Col,
   Form,
-  Input,
   InputGroup,
-  InputGroupAddon,
-  InputGroupText,
   Button,
   Modal,
   ModalHeader,
   ModalBody,
   ModalFooter,
-} from 'reactstrap';
+} from 'react-bootstrap';
 
 export default class RetriggerModal extends React.Component {
   constructor(props) {
@@ -143,10 +140,8 @@ export default class RetriggerModal extends React.Component {
             <div className="row">
               <Col className="col-xs-10 col-sm-6 col-md-6 col-lg-6 form-inline">
                 <InputGroup title={this.getInputTitle(true)}>
-                  <InputGroupAddon addonType="prepend">
-                    <InputGroupText>Base revision:</InputGroupText>
-                  </InputGroupAddon>
-                  <Input
+                  <InputGroup.Text>Base revision:</InputGroup.Text>
+                  <Form.Control
                     data-testid="input baseRetriggerTimes"
                     defaultValue={this.getInitialValue(true)}
                     min={0}
@@ -163,10 +158,8 @@ export default class RetriggerModal extends React.Component {
               </Col>
               <Col className="col-xs-10 col-sm-6 col-md-6 col-lg-6 form-inline">
                 <InputGroup title={this.getInputTitle()}>
-                  <InputGroupAddon addonType="prepend">
-                    <InputGroupText>New revision:</InputGroupText>
-                  </InputGroupAddon>
-                  <Input
+                  <InputGroup.Text>New revision:</InputGroup.Text>
+                  <Form.Control
                     data-testid="input newRetriggerTimes"
                     defaultValue={this.getInitialValue()}
                     min={0}
@@ -189,7 +182,7 @@ export default class RetriggerModal extends React.Component {
           </ModalBody>
           <ModalFooter>
             <Button
-              color="info"
+              variant="info"
               onClick={this.onRetriggerClick}
               disabled={invalidInput}
             >
diff --git a/ui/perfherder/compare/SelectorCard.jsx b/ui/perfherder/compare/SelectorCard.jsx
index d5155545a94..12a83e49c2e 100644
--- a/ui/perfherder/compare/SelectorCard.jsx
+++ b/ui/perfherder/compare/SelectorCard.jsx
@@ -3,18 +3,11 @@ import PropTypes from 'prop-types';
 import {
   Col,
   Card,
-  CardHeader,
-  CardText,
-  CardBody,
-  DropdownItem,
-  Input,
-  CardSubtitle,
-  ButtonDropdown,
-  DropdownToggle,
-  DropdownMenu,
   InputGroup,
-  InputGroupButtonDropdown,
-} from 'reactstrap';
+  DropdownButton,
+  Dropdown,
+  Form,
+} from 'react-bootstrap';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faCheck } from '@fortawesome/free-solid-svg-icons';
 
@@ -186,21 +179,21 @@ export default class SelectorCard extends React.Component {
     return (
       <Col sm="4" className="p-2 text-left">
         <Card className="card-height">
-          <CardHeader className="bg-lightgray">{title}</CardHeader>
-          <CardBody>
-            <CardSubtitle className="pb-2 pt-3">Project</CardSubtitle>
-            <ButtonDropdown
+          <Card.Header className="bg-lightgray">{title}</Card.Header>
+          <Card.Body>
+            <Card.Subtitle className="pb-2 pt-3">Project</Card.Subtitle>
+            <DropdownButton
               className="mr-3 w-25 text-nowrap"
               isOpen={buttonDropdownOpen}
               toggle={() => this.toggle('buttonDropdownOpen')}
             >
-              <DropdownToggle caret outline>
+              <Dropdown.Toggle caret outline>
                 {selectedRepo}
-              </DropdownToggle>
+              </Dropdown.Toggle>
               {projects.length > 0 && (
-                <DropdownMenu className="overflow-auto dropdown-menu-height">
+                <Dropdown.Menu className="overflow-auto dropdown-menu-height">
                   {projects.map((item) => (
-                    <DropdownItem
+                    <Dropdown.Item
                       tag="a"
                       key={item.name}
                       onClick={(event) =>
@@ -215,21 +208,21 @@ export default class SelectorCard extends React.Component {
                         title={selectedRepo === item.name ? 'Checked' : ''}
                       />
                       {item.name}
-                    </DropdownItem>
+                    </Dropdown.Item>
                   ))}
-                </DropdownMenu>
+                </Dropdown.Menu>
               )}
-            </ButtonDropdown>
+            </DropdownButton>
             {invalidProject && (
-              <CardText className="text-danger pt-1 mb-0">
+              <Card.Text className="text-danger pt-1 mb-0">
                 {invalidProject}
-              </CardText>
+              </Card.Text>
             )}
 
             <React.Fragment>
-              <CardSubtitle className="pt-4 pb-2">Revision</CardSubtitle>
+              <Card.Subtitle className="pt-4 pb-2">Revision</Card.Subtitle>
               <InputGroup>
-                <Input
+                <Form.Control
                   valid={!invalidRevision && !validating && validated}
                   placeholder={selectorCardText.revisionPlaceHolder}
                   value={selectedRevision}
@@ -241,18 +234,18 @@ export default class SelectorCard extends React.Component {
                     })
                   }
                 />
-                <InputGroupButtonDropdown
+                <InputGroup.Append
                   addonType="append"
                   isOpen={inputDropdownOpen}
                   toggle={() => this.toggle('inputDropdownOpen')}
                 >
-                  <DropdownToggle caret outline disabled={disabled}>
+                  <Dropdown.Toggle caret outline disabled={disabled}>
                     Recent
-                  </DropdownToggle>
+                  </Dropdown.Toggle>
                   {!!data.results && data.results.length > 0 && (
-                    <DropdownMenu>
+                    <Dropdown.Menu>
                       {data.results.map((item) => (
-                        <DropdownItem
+                        <Dropdown.Item
                           tag="a"
                           key={item.id}
                           onClick={(event) =>
@@ -273,21 +266,21 @@ export default class SelectorCard extends React.Component {
                             }
                           />
                           {`${item.revision} ${item.author}`}
-                        </DropdownItem>
+                        </Dropdown.Item>
                       ))}
-                    </DropdownMenu>
+                    </Dropdown.Menu>
                   )}
-                </InputGroupButtonDropdown>
+                </InputGroup.Append>
               </InputGroup>
               {(validating || invalidRevision || missingRevision) && (
-                <CardText
+                <Card.Text
                   className={validating ? 'text-info pt-1' : 'text-danger pt-1'}
                 >
                   {validating || invalidRevision || missingRevision}
-                </CardText>
+                </Card.Text>
               )}
             </React.Fragment>
-          </CardBody>
+          </Card.Body>
         </Card>
       </Col>
     );
diff --git a/ui/perfherder/compare/TableAverage.jsx b/ui/perfherder/compare/TableAverage.jsx
index 98282f8a04e..ba60b8560ce 100644
--- a/ui/perfherder/compare/TableAverage.jsx
+++ b/ui/perfherder/compare/TableAverage.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Badge } from 'reactstrap';
+import { Badge } from 'react-bootstrap';
 
 import SimpleTooltip from '../../shared/SimpleTooltip';
 import { replicatesMaxLength } from '../perf-helpers/constants';
@@ -88,7 +88,7 @@ const TableAverage = ({ value, stddev, stddevpct, replicates, app }) => {
       )}
       {app && (
         <p className="d-flex align-items-start m-0">
-          <Badge color="light">{app}</Badge>
+          <Badge bg="light">{app}</Badge>
         </p>
       )}
     </td>
diff --git a/ui/perfherder/compare/TooltipGraph.jsx b/ui/perfherder/compare/TooltipGraph.jsx
index 75cf64dca7c..a22a6f0ca8a 100644
--- a/ui/perfherder/compare/TooltipGraph.jsx
+++ b/ui/perfherder/compare/TooltipGraph.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Table } from 'reactstrap';
+import { Table } from 'react-bootstrap';
 
 import { abbreviatedNumber } from '../perf-helpers/helpers';
 
diff --git a/ui/perfherder/graphs/GraphTooltip.jsx b/ui/perfherder/graphs/GraphTooltip.jsx
index 42160191a18..ee97a728dad 100644
--- a/ui/perfherder/graphs/GraphTooltip.jsx
+++ b/ui/perfherder/graphs/GraphTooltip.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import countBy from 'lodash/countBy';
-import { Button } from 'reactstrap';
+import { Button } from 'react-bootstrap';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import {
   faExclamationCircle,
@@ -172,7 +172,7 @@ const GraphTooltip = ({
       >
         <Button
           outline
-          color="secondary"
+          variant="secondary"
           className="close mr-3 my-2 ml-2"
           onClick={closeTooltip}
         >
@@ -311,7 +311,7 @@ const GraphTooltip = ({
               <p className="pt-2">
                 {user.isStaff ? (
                   <Button
-                    color="darker-info"
+                    variant="darker-info"
                     outline
                     size="sm"
                     onClick={createAlert}
diff --git a/ui/perfherder/graphs/GraphsContainer.jsx b/ui/perfherder/graphs/GraphsContainer.jsx
index d813a0779db..3685c491532 100644
--- a/ui/perfherder/graphs/GraphsContainer.jsx
+++ b/ui/perfherder/graphs/GraphsContainer.jsx
@@ -1,7 +1,7 @@
 // disabling due to a new bug with this rule: https://github.com/eslint/eslint/issues/12117
 /* eslint-disable no-unused-vars */
 import React from 'react';
-import { Row, Col } from 'reactstrap';
+import { Row, Col } from 'react-bootstrap';
 import PropTypes from 'prop-types';
 import {
   VictoryBar,
diff --git a/ui/perfherder/graphs/GraphsView.jsx b/ui/perfherder/graphs/GraphsView.jsx
index 18b317005ad..918e13a655f 100644
--- a/ui/perfherder/graphs/GraphsView.jsx
+++ b/ui/perfherder/graphs/GraphsView.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button, Container, Col, Row } from 'reactstrap';
+import { Button, Container, Col, Row } from 'react-bootstrap';
 import unionBy from 'lodash/unionBy';
 import queryString from 'query-string';
 
diff --git a/ui/perfherder/graphs/GraphsViewControls.jsx b/ui/perfherder/graphs/GraphsViewControls.jsx
index 66af3db3e4a..606952f9053 100644
--- a/ui/perfherder/graphs/GraphsViewControls.jsx
+++ b/ui/perfherder/graphs/GraphsViewControls.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button, Col, Container, Input, Row } from 'reactstrap';
+import { Button, Col, Container, Form, Row } from 'react-bootstrap';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faChartArea, faTable } from '@fortawesome/free-solid-svg-icons';
 import moment from 'moment';
@@ -100,7 +100,7 @@ export default class GraphsViewControls extends React.Component {
           {!hasNoData && (
             <Col sm="auto" className="pl-0 py-2 pr-3">
               <Button
-                color="darker-info"
+                variant="darker-info"
                 onClick={toggleTableView}
                 title="Toggle between table view and graphs view"
               >
@@ -120,7 +120,11 @@ export default class GraphsViewControls extends React.Component {
             />
           </Col>
           <Col sm="auto" className="p-2">
-            <Button color="darker-info" title="Add test data" onClick={toggle}>
+            <Button
+              variant="darker-info"
+              title="Add test data"
+              onClick={toggle}
+            >
               Add test data
             </Button>
           </Col>
@@ -147,7 +151,7 @@ export default class GraphsViewControls extends React.Component {
                 highlightedRevisions.map((revision, index) => (
                   // eslint-disable-next-line react/no-array-index-key
                   <Col sm="2" className="pl-0 pr-3" key={index}>
-                    <Input
+                    <Form.Control
                       type="text"
                       name={`revision ${revision}`}
                       placeholder="revision to highlight"
@@ -164,7 +168,7 @@ export default class GraphsViewControls extends React.Component {
               {!showTable && (
                 <Col sm="auto" className="pl-0">
                   <Button
-                    color="darker-info"
+                    variant="darker-info"
                     outline
                     onClick={() =>
                       updateStateParams({
@@ -177,7 +181,7 @@ export default class GraphsViewControls extends React.Component {
                   </Button>
                   <Button
                     className="ml-3"
-                    color="darker-info"
+                    variant="darker-info"
                     outline
                     onClick={() =>
                       updateStateParams({
@@ -190,7 +194,7 @@ export default class GraphsViewControls extends React.Component {
                   </Button>
                   <Button
                     className="ml-3"
-                    color="darker-info"
+                    variant="darker-info"
                     outline
                     onClick={() =>
                       updateStateParams({
@@ -203,7 +207,7 @@ export default class GraphsViewControls extends React.Component {
                   </Button>
                   <Button
                     className="ml-3"
-                    color="darker-info"
+                    variant="darker-info"
                     outline
                     onClick={() =>
                       updateStateParams({
diff --git a/ui/perfherder/graphs/LegendCard.jsx b/ui/perfherder/graphs/LegendCard.jsx
index 748a966984f..f5355aae004 100644
--- a/ui/perfherder/graphs/LegendCard.jsx
+++ b/ui/perfherder/graphs/LegendCard.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Badge, Button, FormGroup, Input } from 'reactstrap';
+import { Badge, Button, Form } from 'react-bootstrap';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faTimes } from '@fortawesome/free-solid-svg-icons';
 
@@ -137,7 +137,7 @@ const LegendCard = ({
   const perfdocs = new Perfdocs(framework, suite, platform);
   const hasDocumentation = perfdocs.hasDocumentation();
   return (
-    <FormGroup check className="pl-0 border">
+    <Form.Group check className="pl-0 border">
       <Button
         className="close mr-3 my-2 ml-2 bg-transparent"
         onClick={removeTest}
@@ -152,7 +152,7 @@ const LegendCard = ({
       </Button>
       <div className={`${series.color[0]} graph-legend-card p-3`}>
         <Button
-          color="link"
+          variant="link"
           outline
           className={`p-0 mb-0 pointer border-0 ${
             series.visible ? series.color[0] : 'text-muted'
@@ -179,7 +179,7 @@ const LegendCard = ({
           )}
         </div>
         <Button
-          color="link"
+          variant="link"
           outline
           className={`w-100  ${subtitleStyle}`}
           onClick={() => addTestData('addRelatedBranches')}
@@ -188,7 +188,7 @@ const LegendCard = ({
           {series.repository_name}
         </Button>
         <Button
-          color="link"
+          variant="link"
           outline
           className={`w-100  ${subtitleStyle}`}
           onClick={() => addTestData('addRelatedPlatform')}
@@ -198,7 +198,7 @@ const LegendCard = ({
         </Button>
         {series.application && (
           <Button
-            color="link"
+            variant="link"
             outline
             className={`w-100  ${subtitleStyle}`}
             title="Add related applications"
@@ -217,7 +217,7 @@ const LegendCard = ({
         <div className="small">{`alert_threshold: ${series.alertThreshold}`}</div>
         <div className="small">{`${series.signatureHash.slice(0, 16)}...`}</div>
       </div>
-      <Input
+      <Form.Control
         className="show-hide-check"
         type="checkbox"
         checked={series.visible}
@@ -225,7 +225,7 @@ const LegendCard = ({
         title="Show/Hide series"
         onChange={updateSelectedTest}
       />
-    </FormGroup>
+    </Form.Group>
   );
 };
 
diff --git a/ui/perfherder/graphs/TableView.jsx b/ui/perfherder/graphs/TableView.jsx
index b6f1f7a5b6a..fb641ff41e1 100644
--- a/ui/perfherder/graphs/TableView.jsx
+++ b/ui/perfherder/graphs/TableView.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import ReactTable from 'react-table-6';
-import { Badge } from 'reactstrap';
+import { Badge } from 'react-bootstrap';
 import moment from 'moment';
 import { groupBy, forIn } from 'lodash';
 import numeral from 'numeral';
diff --git a/ui/perfherder/graphs/TestDataModal.jsx b/ui/perfherder/graphs/TestDataModal.jsx
index d12709a7418..7f0ed75789c 100644
--- a/ui/perfherder/graphs/TestDataModal.jsx
+++ b/ui/perfherder/graphs/TestDataModal.jsx
@@ -4,15 +4,12 @@ import {
   Button,
   Col,
   Form,
-  Input,
-  Label,
   Modal,
   ModalHeader,
   ModalBody,
   Row,
-  FormGroup,
   Badge,
-} from 'reactstrap';
+} from 'react-bootstrap';
 import flatMap from 'lodash/flatMap';
 
 import { createDropdowns } from '../../shared/FilterControls';
@@ -534,7 +531,7 @@ export default class TestDataModal extends React.Component {
               )}
               <Col sm="auto" className="p-2">
                 <Button
-                  color="darker-info"
+                  variant="darker-info"
                   outline
                   onClick={() =>
                     this.setState(
@@ -561,11 +558,11 @@ export default class TestDataModal extends React.Component {
               <>
                 <Row className="justify-content-start">
                   <Col className="p-2">
-                    <FormGroup>
-                      <Label for="selectMultiTags">Tags</Label>
-                      <Input
+                    <Form.Group>
+                      <Form.Label htmlFor="selectMultiTags">Tags</Form.Label>
+                      <Form.Control
                         className="fa"
-                        type="select"
+                        as="select"
                         name="selectMultiTags"
                         id="selectMultiTags"
                         multiple
@@ -579,8 +576,8 @@ export default class TestDataModal extends React.Component {
                             {tag}
                           </option>
                         ))}
-                      </Input>
-                    </FormGroup>
+                      </Form.Control>
+                    </Form.Group>
                   </Col>
                 </Row>
                 <Row className="pb-2 justify-content-start">
@@ -606,13 +603,13 @@ export default class TestDataModal extends React.Component {
             )}
             <Row className="p-2 justify-content-start">
               <Col className="p-0">
-                <Label for="exampleSelect">
+                <Form.Label htmlFor="exampleSelect">
                   {relatedTests.length > 0 ? 'Related tests' : 'Tests'}
-                </Label>
-                <Input
+                </Form.Label>
+                <Form.Control
                   className="fa"
                   data-testid="tests"
-                  type="select"
+                  as="select"
                   name="selectMulti"
                   id="selectTests"
                   multiple
@@ -629,7 +626,7 @@ export default class TestDataModal extends React.Component {
                         {this.getOriginalTestName(test)}
                       </option>
                     ))}
-                </Input>
+                </Form.Control>
                 {showNoRelatedTests && (
                   <p className="text-info pt-2">No related tests found.</p>
                 )}
@@ -637,13 +634,13 @@ export default class TestDataModal extends React.Component {
             </Row>
             <Row className="p-2 justify-content-start">
               <Col className="p-0">
-                <Label for="exampleSelect">
+                <Form.Label htmlFor="exampleSelect">
                   Selected tests{' '}
                   <span className="small">(click a test to remove it)</span>
-                </Label>
-                <Input
+                </Form.Label>
+                <Form.Control
                   data-testid="selectedTests"
-                  type="select"
+                  as="select"
                   name="selectMulti"
                   id="selectTests"
                   multiple
@@ -659,7 +656,7 @@ export default class TestDataModal extends React.Component {
                         {this.getFullTestName(test)}
                       </option>
                     ))}
-                </Input>
+                </Form.Control>
                 {selectedTests.length > 6 && (
                   <p className="text-info pt-2">
                     Displaying more than 6 graphs at a time is not supported in
@@ -671,7 +668,7 @@ export default class TestDataModal extends React.Component {
             <Row className="p-2">
               <Col className="py-2 px-0 text-right">
                 <Button
-                  color="darker-info"
+                  variant="darker-info"
                   disabled={!selectedTests.length}
                   onClick={this.submitData}
                   onKeyPress={(event) => event.preventDefault()}
diff --git a/ui/perfherder/graphs/TimeRangeDropdown.jsx b/ui/perfherder/graphs/TimeRangeDropdown.jsx
index 0b7f5730200..cf32e9c4b6d 100644
--- a/ui/perfherder/graphs/TimeRangeDropdown.jsx
+++ b/ui/perfherder/graphs/TimeRangeDropdown.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { DropdownToggle, UncontrolledDropdown } from 'reactstrap';
+import { Dropdown } from 'react-bootstrap';
 import PropTypes from 'prop-types';
 
 import DropdownMenuItems from '../../shared/DropdownMenuItems';
@@ -10,12 +10,12 @@ class TimeRangeDropdown extends React.PureComponent {
     const { timeRangeText, updateTimeRange } = this.props;
 
     return (
-      <UncontrolledDropdown
+      <Dropdown
         className="mr-0 text-nowrap"
         title="Time range"
         aria-label="Time range"
       >
-        <DropdownToggle caret>{timeRangeText}</DropdownToggle>
+        <Dropdown.Toggle caret>{timeRangeText}</Dropdown.Toggle>
         <DropdownMenuItems
           options={phTimeRanges.map((item) => item.text)}
           selectedItem={timeRangeText}
@@ -25,7 +25,7 @@ class TimeRangeDropdown extends React.PureComponent {
             )
           }
         />
-      </UncontrolledDropdown>
+      </Dropdown>
     );
   }
 }
diff --git a/ui/perfherder/shared/Pagination.jsx b/ui/perfherder/shared/Pagination.jsx
index ad012f5d8a9..1841a6ce9ec 100644
--- a/ui/perfherder/shared/Pagination.jsx
+++ b/ui/perfherder/shared/Pagination.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Pagination, PaginationItem, PaginationLink } from 'reactstrap';
+import { Pagination } from 'react-bootstrap';
 
 class PaginationGroup extends React.Component {
   navigatePage = (page) => {
@@ -25,49 +25,37 @@ class PaginationGroup extends React.Component {
          aren't working correctly (icons aren't visible)
          so they haven't been added */
       <Pagination aria-label={`Page ${currentPage}`}>
-        <PaginationItem className="text-info" disabled={!firstButtonAvailable}>
-          <PaginationLink
-            className="text-info"
-            first
-            onClick={() => this.navigatePage(1)}
-          />
-        </PaginationItem>
-        <PaginationItem disabled={!prevButtonAvailable}>
-          <PaginationLink
-            className="text-info"
-            previous
-            onClick={() => this.navigatePage(currentPage - 1)}
-          />
-        </PaginationItem>
+        <Pagination.First
+          className="text-info"
+          disabled={!firstButtonAvailable}
+          onClick={() => this.navigatePage(1)}
+        />
+        <Pagination.Prev
+          className="text-info"
+          disabled={!prevButtonAvailable}
+          onClick={() => this.navigatePage(currentPage - 1)}
+        />
         {viewablePageNums.map((num) => (
-          <PaginationItem
+          <Pagination.Item
             key={num}
             active={num === currentPage}
             className="text-info pagination-active"
+            onClick={() => this.navigatePage(num)}
+            aria-label={`pagination-button-${num}`}
           >
-            <PaginationLink
-              className="text-info"
-              onClick={() => this.navigatePage(num)}
-              aria-label={`pagination-button-${num}`}
-            >
-              {num}
-            </PaginationLink>
-          </PaginationItem>
+            {num}
+          </Pagination.Item>
         ))}
-        <PaginationItem disabled={!nextButtonAvailable}>
-          <PaginationLink
-            className="text-info"
-            next
-            onClick={() => this.navigatePage(currentPage + 1)}
-          />
-        </PaginationItem>
-        <PaginationItem className="text-info" disabled={!lastButtonAvailable}>
-          <PaginationLink
-            className="text-info"
-            last
-            onClick={() => this.navigatePage(count)}
-          />
-        </PaginationItem>
+        <Pagination.Next
+          className="text-info"
+          disabled={!nextButtonAvailable}
+          onClick={() => this.navigatePage(currentPage + 1)}
+        />
+        <Pagination.Last
+          className="text-info"
+          disabled={!lastButtonAvailable}
+          onClick={() => this.navigatePage(count)}
+        />
       </Pagination>
     );
   }
diff --git a/ui/perfherder/shared/SortButton.jsx b/ui/perfherder/shared/SortButton.jsx
index 0a1b6a6d9fe..ffddd23d5ba 100644
--- a/ui/perfherder/shared/SortButton.jsx
+++ b/ui/perfherder/shared/SortButton.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Badge } from 'reactstrap';
+import { Badge } from 'react-bootstrap';
 import PropTypes from 'prop-types';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import {
diff --git a/ui/perfherder/shared/SortButtonDisabled.jsx b/ui/perfherder/shared/SortButtonDisabled.jsx
index 9ed23231c78..bcab38d17f6 100644
--- a/ui/perfherder/shared/SortButtonDisabled.jsx
+++ b/ui/perfherder/shared/SortButtonDisabled.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Badge } from 'reactstrap';
+import { Badge } from 'react-bootstrap';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faSort } from '@fortawesome/free-solid-svg-icons';
 
diff --git a/ui/perfherder/tests/TestsTable.jsx b/ui/perfherder/tests/TestsTable.jsx
index 2cd71fc4044..199bf2751c9 100644
--- a/ui/perfherder/tests/TestsTable.jsx
+++ b/ui/perfherder/tests/TestsTable.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Container } from 'reactstrap';
+import { Container } from 'react-bootstrap';
 import ReactTable from 'react-table-6';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import {
diff --git a/ui/perfherder/tests/TestsTableControls.jsx b/ui/perfherder/tests/TestsTableControls.jsx
index 9840a94a8e3..9230bf4a9a3 100644
--- a/ui/perfherder/tests/TestsTableControls.jsx
+++ b/ui/perfherder/tests/TestsTableControls.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Container } from 'reactstrap';
+import { Container } from 'react-bootstrap';
 
 import FilterControls from '../../shared/FilterControls';
 import { containsText } from '../perf-helpers/helpers';
diff --git a/ui/perfherder/tests/TestsView.jsx b/ui/perfherder/tests/TestsView.jsx
index e109bd86fae..10707df147c 100644
--- a/ui/perfherder/tests/TestsView.jsx
+++ b/ui/perfherder/tests/TestsView.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Col, Container, Row } from 'reactstrap';
+import { Col, Container, Row } from 'react-bootstrap';
 
 import withValidation from '../Validation';
 import { getFrameworkData } from '../perf-helpers/helpers';
diff --git a/ui/push-health/ClassificationGroup.jsx b/ui/push-health/ClassificationGroup.jsx
index 340b0629366..d03ffe0a292 100644
--- a/ui/push-health/ClassificationGroup.jsx
+++ b/ui/push-health/ClassificationGroup.jsx
@@ -10,16 +10,12 @@ import {
   Row,
   Collapse,
   ButtonGroup,
-  ButtonDropdown,
+  DropdownButton,
   Button,
-  DropdownMenu,
-  DropdownToggle,
-  DropdownItem,
+  Dropdown,
   Navbar,
   Nav,
-  NavItem,
-  UncontrolledButtonDropdown,
-} from 'reactstrap';
+} from 'react-bootstrap';
 import groupBy from 'lodash/groupBy';
 
 import JobModel from '../models/job';
@@ -146,7 +142,7 @@ class ClassificationGroup extends React.PureComponent {
         {hasRetriggerAll && groupLength > 0 && detailsShowing && (
           <Navbar className="mb-4">
             <Nav>
-              <NavItem>
+              <Nav.Item>
                 <ButtonGroup size="sm">
                   <Button
                     title="Retrigger all 'Need Investigation' jobs once"
@@ -161,15 +157,15 @@ class ClassificationGroup extends React.PureComponent {
                     />
                     Retrigger all
                   </Button>
-                  <ButtonDropdown
+                  <DropdownButton
                     isOpen={retriggerDropdownOpen}
                     toggle={this.toggleRetrigger}
                     size="sm"
                   >
-                    <DropdownToggle caret />
-                    <DropdownMenu>
+                    <Dropdown.Toggle caret />
+                    <Dropdown.Menu>
                       {[5, 10, 15].map((times) => (
-                        <DropdownItem
+                        <Dropdown.Item
                           key={times}
                           title={`Retrigger all 'Need Investigation' jobs ${times} times`}
                           onClick={() => this.retriggerAll(times)}
@@ -177,15 +173,15 @@ class ClassificationGroup extends React.PureComponent {
                           tag="a"
                         >
                           Retrigger all {times} times
-                        </DropdownItem>
+                        </Dropdown.Item>
                       ))}
-                    </DropdownMenu>
-                  </ButtonDropdown>
+                    </Dropdown.Menu>
+                  </DropdownButton>
                 </ButtonGroup>
-              </NavItem>
-              <NavItem>
-                <UncontrolledButtonDropdown size="sm" className="ml-1">
-                  <DropdownToggle
+              </Nav.Item>
+              <Nav.Item>
+                <DropdownButton size="sm" className="ml-1">
+                  <Dropdown.Toggle
                     className="btn-sm ml-1 text-capitalize"
                     id="groupTestsDropdown"
                     caret
@@ -193,16 +189,16 @@ class ClassificationGroup extends React.PureComponent {
                     data-testid="groupTestsDropdown"
                   >
                     Group By: {groupedBy}
-                  </DropdownToggle>
-                  <DropdownMenu toggler="groupTestsDropdown">
-                    <DropdownItem
+                  </Dropdown.Toggle>
+                  <Dropdown.Menu toggler="groupTestsDropdown">
+                    <Dropdown.Item
                       className="pointable"
                       tag="a"
                       onClick={() => setGroupedBy('none')}
                     >
                       None
-                    </DropdownItem>
-                    <DropdownItem
+                    </Dropdown.Item>
+                    <Dropdown.Item
                       className="pointable"
                       tag="a"
                       onClick={() => {
@@ -210,29 +206,29 @@ class ClassificationGroup extends React.PureComponent {
                       }}
                     >
                       Path
-                    </DropdownItem>
-                    <DropdownItem
+                    </Dropdown.Item>
+                    <Dropdown.Item
                       className="pointable"
                       tag="a"
                       onClick={() => setGroupedBy('platform')}
                     >
                       Platform
-                    </DropdownItem>
-                  </DropdownMenu>
-                </UncontrolledButtonDropdown>
-              </NavItem>
-              <NavItem>
-                <UncontrolledButtonDropdown size="sm" className="ml-1">
-                  <DropdownToggle
+                    </Dropdown.Item>
+                  </Dropdown.Menu>
+                </DropdownButton>
+              </Nav.Item>
+              <Nav.Item>
+                <DropdownButton size="sm" className="ml-1">
+                  <Dropdown.Toggle
                     className="btn-sm ml-1 text-capitalize"
                     id="groupTestsDropdown"
                     caret
                     outline
                   >
                     Order By: {orderedBy}
-                  </DropdownToggle>
-                  <DropdownMenu toggler="groupTestsDropdown">
-                    <DropdownItem
+                  </Dropdown.Toggle>
+                  <Dropdown.Menu toggler="groupTestsDropdown">
+                    <Dropdown.Item
                       className="pointable"
                       tag="a"
                       onClick={() => {
@@ -240,8 +236,8 @@ class ClassificationGroup extends React.PureComponent {
                       }}
                     >
                       Count
-                    </DropdownItem>
-                    <DropdownItem
+                    </Dropdown.Item>
+                    <Dropdown.Item
                       className="pointable"
                       tag="a"
                       onClick={() => {
@@ -249,10 +245,10 @@ class ClassificationGroup extends React.PureComponent {
                       }}
                     >
                       Text
-                    </DropdownItem>
-                  </DropdownMenu>
-                </UncontrolledButtonDropdown>
-              </NavItem>
+                    </Dropdown.Item>
+                  </Dropdown.Menu>
+                </DropdownButton>
+              </Nav.Item>
             </Nav>
           </Navbar>
         )}
diff --git a/ui/push-health/CommitHistory.jsx b/ui/push-health/CommitHistory.jsx
index 1d15ab01d69..56569084704 100644
--- a/ui/push-health/CommitHistory.jsx
+++ b/ui/push-health/CommitHistory.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Alert, Button } from 'reactstrap';
+import { Alert, Button } from 'react-bootstrap';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faCaretUp, faCaretRight } from '@fortawesome/free-solid-svg-icons';
 
@@ -139,7 +139,7 @@ class CommitHistory extends React.PureComponent {
               <span>
                 {!exactMatch && (
                   <div>
-                    <Alert color="warning" className="m-3 font-italics">
+                    <Alert variant="warning" className="m-3 font-italics">
                       Warning: Could not find an exact match parent Push in
                       Treeherder.
                     </Alert>
@@ -183,7 +183,7 @@ class CommitHistory extends React.PureComponent {
             <Button
               onClick={this.toggleDetails}
               outline
-              color="darker-secondary"
+              variant="darker-secondary"
               className="border-0 pl-0 shadow-none"
               role="button"
               aria-expanded={isExpanded}
diff --git a/ui/push-health/Health.jsx b/ui/push-health/Health.jsx
index 420162b430c..52e4bd48000 100644
--- a/ui/push-health/Health.jsx
+++ b/ui/push-health/Health.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Container, Spinner, Navbar, Nav } from 'reactstrap';
+import { Container, Spinner, Navbar, Nav } from 'react-bootstrap';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import camelCase from 'lodash/camelCase';
 import { Helmet } from 'react-helmet';
@@ -179,7 +179,7 @@ export default class Health extends React.PureComponent {
     const { notify } = this.props;
     return (
       <React.Fragment>
-        <Navbar color="light" light expand="sm" className="w-100">
+        <Navbar variant="light" light expand="sm" className="w-100">
           {!!tests && (
             <Nav className="mb-2 pt-2 pl-3 justify-content-between w-100">
               <span />
diff --git a/ui/push-health/MyPushes.jsx b/ui/push-health/MyPushes.jsx
index 36ad5d3eb7a..60dd449e20a 100644
--- a/ui/push-health/MyPushes.jsx
+++ b/ui/push-health/MyPushes.jsx
@@ -3,11 +3,10 @@ import {
   Container,
   Row,
   Col,
-  UncontrolledButtonDropdown,
-  DropdownToggle,
+  DropdownButton,
   Navbar,
   Nav,
-} from 'reactstrap';
+} from 'react-bootstrap';
 import { Helmet } from 'react-helmet';
 
 import faviconBroken from '../img/push-health-broken.png';
@@ -150,15 +149,16 @@ class MyPushes extends React.Component {
 
     return (
       <React.Fragment>
-        <Navbar color="light" light expand="sm" className="w-100">
+        <Navbar variant="light" light expand="sm" className="w-100">
           <Nav className="mb-2 pt-2 pl-3 justify-content-between w-100">
             <span />
             <span className="mr-3 d-flex">
-              <UncontrolledButtonDropdown>
-                <DropdownToggle
-                  caret
-                  size="sm"
-                >{`${selectedRepo} pushes`}</DropdownToggle>
+              <DropdownButton
+                variant="secondary"
+                title={`${selectedRepo} pushes`}
+                caret
+                size="sm"
+              >
                 <DropdownMenuItems
                   updateData={(selectedRepo) =>
                     this.setState({ selectedRepo, loading: true }, () =>
@@ -168,7 +168,7 @@ class MyPushes extends React.Component {
                   selectedItem={selectedRepo}
                   options={['try', 'all']}
                 />
-              </UncontrolledButtonDropdown>
+              </DropdownButton>
             </span>
           </Nav>
         </Navbar>
diff --git a/ui/push-health/Navigation.jsx b/ui/push-health/Navigation.jsx
index 36881a0480a..2fc7e7405db 100644
--- a/ui/push-health/Navigation.jsx
+++ b/ui/push-health/Navigation.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Navbar, Nav, NavItem } from 'reactstrap';
+import { Navbar, Nav } from 'react-bootstrap';
 import { Link } from 'react-router-dom';
 
 import LogoMenu from '../shared/LogoMenu';
@@ -11,11 +11,11 @@ const Navigation = ({ user, setUser, notify }) => (
   <Navbar expand sticky="top" className="top-navbar">
     <LogoMenu menuText="Push Health" />
     <Nav className="navbar navbar-inverse">
-      <NavItem>
+      <Nav.Item>
         <Link to="/push-health" className="menu-items nav-link btn-view-nav">
           My Pushes
         </Link>
-      </NavItem>
+      </Nav.Item>
     </Nav>
     <Navbar className="ml-auto">
       <HelpMenu />
diff --git a/ui/push-health/NotFound.jsx b/ui/push-health/NotFound.jsx
index fb07ee277d7..16528eb8e95 100644
--- a/ui/push-health/NotFound.jsx
+++ b/ui/push-health/NotFound.jsx
@@ -1,11 +1,11 @@
 import React from 'react';
-import { Container, Row, Col, Alert } from 'reactstrap';
+import { Container, Row, Col, Alert } from 'react-bootstrap';
 
 const NotFound = () => (
   <Container fluid style={{ marginTop: 40 }}>
     <Row>
       <Col>
-        <Alert color="danger">
+        <Alert variant="danger">
           Missing required URL parameters of <code>repo</code> and{' '}
           <code>revision</code>.
         </Alert>
diff --git a/ui/push-health/PlatformConfig.jsx b/ui/push-health/PlatformConfig.jsx
index 86cf4315026..8d55620e478 100644
--- a/ui/push-health/PlatformConfig.jsx
+++ b/ui/push-health/PlatformConfig.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button, Row, Col } from 'reactstrap';
+import { Button, Row, Col } from 'react-bootstrap';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faRedo } from '@fortawesome/free-solid-svg-icons';
 import sortBy from 'lodash/sortBy';
diff --git a/ui/push-health/TaskSelection.jsx b/ui/push-health/TaskSelection.jsx
index ee96f232299..83df18faf09 100644
--- a/ui/push-health/TaskSelection.jsx
+++ b/ui/push-health/TaskSelection.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Row, Col, Input } from 'reactstrap';
+import { Row, Col, Form } from 'react-bootstrap';
 
 class TaskSelection extends React.PureComponent {
   constructor(props) {
@@ -41,7 +41,7 @@ class TaskSelection extends React.PureComponent {
     return (
       <React.Fragment>
         <Col xs="auto">
-          <Input
+          <Form.Control
             type="checkbox"
             checked={isTestSelected}
             onChange={this.selectTest}
diff --git a/ui/push-health/Test.jsx b/ui/push-health/Test.jsx
index 72a37f62014..c96fe32e6a6 100644
--- a/ui/push-health/Test.jsx
+++ b/ui/push-health/Test.jsx
@@ -5,16 +5,11 @@ import {
   Collapse,
   Nav,
   Navbar,
-  NavItem,
-  UncontrolledButtonDropdown,
+  DropdownButton,
   ButtonGroup,
-  DropdownMenu,
-  DropdownToggle,
-  DropdownItem,
-  Input,
-  FormGroup,
-  Label,
-} from 'reactstrap';
+  Dropdown,
+  Form,
+} from 'react-bootstrap';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import {
   faCaretDown,
@@ -271,7 +266,7 @@ class Test extends PureComponent {
           <Collapse isOpen={detailsShowing}>
             <Navbar className="mb-3">
               <Nav>
-                <NavItem>
+                <Nav.Item>
                   <ButtonGroup size="sm" className="ml-5">
                     <Button
                       title="Retrigger selected jobs once"
@@ -286,11 +281,11 @@ class Test extends PureComponent {
                       />
                       Retrigger Selected
                     </Button>
-                    <UncontrolledButtonDropdown size="sm">
-                      <DropdownToggle caret />
-                      <DropdownMenu>
+                    <DropdownButton size="sm">
+                      <Dropdown.Toggle caret />
+                      <Dropdown.Menu>
                         {[5, 10, 15].map((times) => (
-                          <DropdownItem
+                          <Dropdown.Item
                             key={times}
                             title={`Retrigger selected jobs ${times} times`}
                             onClick={() => this.retriggerSelected(times)}
@@ -298,15 +293,15 @@ class Test extends PureComponent {
                             tag="a"
                           >
                             Retrigger selected {times} times
-                          </DropdownItem>
+                          </Dropdown.Item>
                         ))}
-                      </DropdownMenu>
-                    </UncontrolledButtonDropdown>
+                      </Dropdown.Menu>
+                    </DropdownButton>
                   </ButtonGroup>
                   <Button
                     size="sm"
                     outline
-                    color="primary"
+                    variant="primary"
                     className="mx-3"
                     title="Mark selected jobs as investigated"
                     onClick={() => this.markAsInvestigated()}
@@ -316,26 +311,28 @@ class Test extends PureComponent {
                   <Button
                     size="sm"
                     outline
-                    color="primary"
+                    variant="primary"
                     className="mx-3"
                     title="Mark selected jobs as Uninvestigated"
                     onClick={() => this.markAsUninvestigated()}
                   >
                     Mark as Uninvestigated
                   </Button>
-                </NavItem>
+                </Nav.Item>
               </Nav>
             </Navbar>
             <div className="ml-5 pl-2 position-relative">
-              <FormGroup className="mb-1 pl-4">
-                <Input
+              <Form.Group className="mb-1 pl-4">
+                <Form.Control
                   aria-label="Select all platforms for this test"
                   type="checkbox"
                   checked={allPlatformsSelected}
                   onChange={this.selectAll}
                 />
-                <Label className="text-darker-secondary ml-4">select all</Label>
-              </FormGroup>
+                <Form.Label className="text-darker-secondary ml-4">
+                  select all
+                </Form.Label>
+              </Form.Group>
             </div>
             {tests.map((failure) => (
               <PlatformConfig
diff --git a/ui/push-health/Usage.jsx b/ui/push-health/Usage.jsx
index 72f078585b5..71861e55d1d 100644
--- a/ui/push-health/Usage.jsx
+++ b/ui/push-health/Usage.jsx
@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-import { Alert, Table, Jumbotron, Badge } from 'reactstrap';
+import { Alert, Table, Card, Badge } from 'react-bootstrap';
 import { Link } from 'react-router-dom';
 
 import { getData } from '../helpers/http';
@@ -34,13 +34,15 @@ class Usage extends Component {
 
     return (
       <div>
-        <Jumbotron>
-          <h4>Push Health Try Usage</h4>
-          <p>
-            This shows the difference in count of need intermittents by push
-            over time.
-          </p>
-        </Jumbotron>
+        <Card className="mb-3">
+          <Card.Body>
+            <Card.Title>Push Health Try Usage</Card.Title>
+            <Card.Text>
+              This shows the difference in count of need intermittents by push
+              over time.
+            </Card.Text>
+          </Card.Body>
+        </Card>
         <Table>
           <thead>
             <tr>
@@ -81,7 +83,7 @@ class Usage extends Component {
                   <td>{latestNI}</td>
                   <td>{toShortDateStr(latestTime)}</td>
                   <td>
-                    <Badge color="success">
+                    <Badge bg="success" text="light">
                       {peakNI - latestNI > 0 && peakNI - latestNI}
                     </Badge>
                   </td>
@@ -91,7 +93,7 @@ class Usage extends Component {
             })}
           </tbody>
         </Table>
-        {failureMessage && <Alert color="danger">{failureMessage}</Alert>}
+        {failureMessage && <Alert variant="danger">{failureMessage}</Alert>}
       </div>
     );
   }
diff --git a/ui/push-health/details/DetailsPanel.jsx b/ui/push-health/details/DetailsPanel.jsx
index 5e93f438475..d6ecb9a545c 100644
--- a/ui/push-health/details/DetailsPanel.jsx
+++ b/ui/push-health/details/DetailsPanel.jsx
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faTimes } from '@fortawesome/free-solid-svg-icons';
 import { Tab, TabList, TabPanel, Tabs } from 'react-tabs';
-import { Col, Button, Spinner } from 'reactstrap';
+import { Col, Button, Spinner } from 'react-bootstrap';
 
 import { getArtifactsUrl, getLogViewerUrl } from '../../helpers/url';
 import { formatArtifacts } from '../../helpers/display';
diff --git a/ui/shared/BugFiler.jsx b/ui/shared/BugFiler.jsx
index e4cd4ff8a3f..26cb0e48f7c 100644
--- a/ui/shared/BugFiler.jsx
+++ b/ui/shared/BugFiler.jsx
@@ -8,10 +8,8 @@ import {
   ModalBody,
   ModalFooter,
   Tooltip,
-  FormGroup,
-  Input,
-  Label,
-} from 'reactstrap';
+  Form,
+} from 'react-bootstrap';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import {
   faChevronCircleDown,
@@ -642,7 +640,7 @@ export class BugFilerClass extends React.Component {
           <ModalBody>
             <form className="d-flex flex-column">
               <div className="d-inline-flex">
-                <Input
+                <Form.Control
                   name="modalProductFinderSearch"
                   id="modalProductFinderSearch"
                   onKeyDown={this.productSearchEnter}
@@ -661,7 +659,7 @@ export class BugFilerClass extends React.Component {
                   Manually search for a product
                 </Tooltip>
                 <Button
-                  color="secondary"
+                  variant="secondary"
                   className="ml-1 btn-sm"
                   type="button"
                   onClick={this.findProduct}
@@ -681,14 +679,14 @@ export class BugFilerClass extends React.Component {
                     Searching {productSearch}
                   </div>
                 )}
-                <FormGroup tag="fieldset" className="mt-1">
+                <Form.Group tag="fieldset" className="mt-1">
                   {suggestedProducts.map((product) => (
                     <div
                       className="ml-4"
                       key={`modalProductSuggestion${product}`}
                     >
-                      <Label check>
-                        <Input
+                      <Form.Label check>
+                        <Form.Control
                           type="radio"
                           value={product}
                           checked={product === selectedProduct}
@@ -698,12 +696,12 @@ export class BugFilerClass extends React.Component {
                           name="productGroup"
                         />
                         {product}
-                      </Label>
+                      </Form.Label>
                     </div>
                   ))}
-                </FormGroup>
+                </Form.Group>
               </div>
-              <Label for="summary">Summary:</Label>
+              <Form.Label htmlFor="summary">Summary:</Form.Label>
               <div className="d-flex">
                 {!!unhelpfulSummaryReason && (
                   <div>
@@ -730,7 +728,7 @@ export class BugFilerClass extends React.Component {
                     ))}
                   </div>
                 )}
-                <Input
+                <Form.Control
                   id="summary"
                   className="flex-grow-1"
                   type="text"
@@ -779,9 +777,9 @@ export class BugFilerClass extends React.Component {
               </div>
               {isFilerSummaryVisible && (
                 <span>
-                  <Input
+                  <Form.Control
                     className="w-100"
-                    type="textarea"
+                    as="textarea"
                     value={thisFailure}
                     readOnly
                     onChange={(evt) =>
@@ -792,8 +790,8 @@ export class BugFilerClass extends React.Component {
               )}
               <div className="ml-5 mt-2">
                 <div>
-                  <Label>
-                    <Input
+                  <Form.Label>
+                    <Form.Control
                       type="checkbox"
                       checked={checkedLogLinks.has('Parsed log')}
                       onChange={() =>
@@ -807,11 +805,11 @@ export class BugFilerClass extends React.Component {
                     >
                       Include Parsed Log Link
                     </a>
-                  </Label>
+                  </Form.Label>
                 </div>
                 <div>
-                  <Label>
-                    <Input
+                  <Form.Label>
+                    <Form.Control
                       type="checkbox"
                       checked={checkedLogLinks.has('Full log')}
                       onChange={() =>
@@ -821,12 +819,12 @@ export class BugFilerClass extends React.Component {
                     <a target="_blank" rel="noopener noreferrer" href={fullLog}>
                       Include Full Log Link
                     </a>
-                  </Label>
+                  </Form.Label>
                 </div>
                 {!!reftestUrl && (
                   <div>
-                    <Label>
-                      <Input
+                    <Form.Label>
+                      <Form.Control
                         type="checkbox"
                         checked={checkedLogLinks.has('Reftest URL')}
                         onChange={() =>
@@ -840,19 +838,19 @@ export class BugFilerClass extends React.Component {
                       >
                         Include Reftest Viewer Link
                       </a>
-                    </Label>
+                    </Form.Label>
                   </div>
                 )}
               </div>
               <div className="d-flex flex-column">
-                <Label for="summary-input">Comment:</Label>
-                <Input
+                <Form.Label htmlFor="summary-input">Comment:</Form.Label>
+                <Form.Control
                   onChange={(evt) =>
                     this.setState({ comment: evt.target.value }, () =>
                       this.checkForSecurityIssue(),
                     )
                   }
-                  type="textarea"
+                  as="textarea"
                   id="summary-input"
                   className="flex-grow-1"
                   rows={5}
@@ -860,8 +858,8 @@ export class BugFilerClass extends React.Component {
               </div>
               <div className="d-inline-flex mt-2 ml-5">
                 <div className="mt-2">
-                  <Label>
-                    <Input
+                  <Form.Label>
+                    <Form.Control
                       onChange={() =>
                         this.setState({ isIntermittent: !isIntermittent })
                       }
@@ -869,10 +867,10 @@ export class BugFilerClass extends React.Component {
                       checked={isIntermittent}
                     />
                     This is an intermittent failure
-                  </Label>
+                  </Form.Label>
                 </div>
                 <div className="d-inline-flex ml-2">
-                  <Input
+                  <Form.Control
                     id="regressedBy"
                     type="text"
                     className="ml-1"
@@ -889,7 +887,7 @@ export class BugFilerClass extends React.Component {
                   >
                     Comma-separated list of bugs
                   </Tooltip>
-                  <Input
+                  <Form.Control
                     id="seeAlso"
                     className="ml-1"
                     type="text"
@@ -909,8 +907,8 @@ export class BugFilerClass extends React.Component {
                 </div>
               </div>
               <div className="d-inline-flex mt-2 ml-5">
-                <Label>
-                  <Input
+                <Form.Label>
+                  <Form.Control
                     id="securityIssue"
                     onChange={() =>
                       this.setState({ isSecurityIssue: !isSecurityIssue })
@@ -919,14 +917,14 @@ export class BugFilerClass extends React.Component {
                     checked={isSecurityIssue}
                   />
                   Report this as a security issue
-                </Label>
+                </Form.Label>
               </div>
               {['autoland', 'mozilla-central', 'try'].includes(
                 currentRepo.name,
               ) && (
                 <div className="d-inline-flex mt-2 ml-5">
-                  <Label>
-                    <Input
+                  <Form.Label>
+                    <Form.Control
                       type="checkbox"
                       checked={launchConfirmFailure}
                       onChange={() =>
@@ -936,14 +934,14 @@ export class BugFilerClass extends React.Component {
                       }
                     />
                     Launch the Confirm Failures task at bug submission
-                  </Label>
+                  </Form.Label>
                 </div>
               )}
               {!!crashSignatures.length && (
                 <div>
-                  <Label for="signature-input">Signature:</Label>
-                  <Input
-                    type="textarea"
+                  <Form.Label htmlFor="signature-input">Signature:</Form.Label>
+                  <Form.Control
+                    as="textarea"
                     id="signature-input"
                     onChange={(evt) =>
                       this.setState({ crashSignatures: evt.target.value })
@@ -957,10 +955,10 @@ export class BugFilerClass extends React.Component {
             </form>
           </ModalBody>
           <ModalFooter>
-            <Button color="secondary" onClick={this.submitFiler}>
+            <Button variant="secondary" onClick={this.submitFiler}>
               Submit Bug
             </Button>{' '}
-            <Button color="secondary" onClick={toggle}>
+            <Button variant="secondary" onClick={toggle}>
               Cancel
             </Button>
           </ModalFooter>
diff --git a/ui/shared/CallbackMessage.jsx b/ui/shared/CallbackMessage.jsx
index 22b7d0ae1c2..71c270fa2c1 100644
--- a/ui/shared/CallbackMessage.jsx
+++ b/ui/shared/CallbackMessage.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Row } from 'reactstrap';
+import { Row } from 'react-bootstrap';
 
 import ErrorMessages from './ErrorMessages';
 
diff --git a/ui/shared/Clipboard.jsx b/ui/shared/Clipboard.jsx
index 24308befb80..68d9150e22b 100644
--- a/ui/shared/Clipboard.jsx
+++ b/ui/shared/Clipboard.jsx
@@ -5,7 +5,7 @@ import {
   faClipboard,
   faCheckCircle,
 } from '@fortawesome/free-regular-svg-icons';
-import { Button } from 'reactstrap';
+import { Button } from 'react-bootstrap';
 
 export default class Clipboard extends React.Component {
   constructor(props) {
@@ -40,11 +40,11 @@ export default class Clipboard extends React.Component {
           this.copyToClipboard(text);
         }}
         className="py-0 px-1"
-        color={`${color || 'light'}`}
+        variant={`${color || 'light'}`}
         outline={outline}
       >
         {copied ? (
-          <FontAwesomeIcon icon={faCheckCircle} color="#2da745" />
+          <FontAwesomeIcon icon={faCheckCircle} variant="#2da745" />
         ) : (
           <FontAwesomeIcon icon={faClipboard} />
         )}
diff --git a/ui/shared/ComparePageTitle.jsx b/ui/shared/ComparePageTitle.jsx
index 056c44d7488..a3202a3f4a5 100644
--- a/ui/shared/ComparePageTitle.jsx
+++ b/ui/shared/ComparePageTitle.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Helmet } from 'react-helmet';
 import PropTypes from 'prop-types';
-import { Button, Input, InputGroup } from 'reactstrap';
+import { Button, Form, InputGroup } from 'react-bootstrap';
 import { faEdit } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
@@ -112,7 +112,7 @@ export default class ComparePageTitle extends React.Component {
           <Button
             className="text-center"
             size="lg"
-            color="white"
+            variant="white"
             onClick={this.goToEditMode}
             title="Click to change the page title"
           >
@@ -126,10 +126,10 @@ export default class ComparePageTitle extends React.Component {
           </Button>
         ) : (
           <InputGroup>
-            <Input
+            <Form.Control
               className="pb-1 col-sm-12 page-title-input"
               ref={this.inputRef}
-              color="white"
+              variant="white"
               style={{
                 textAlign: 'center',
                 fontSize: 'xx-large',
@@ -143,12 +143,12 @@ export default class ComparePageTitle extends React.Component {
               className="ml-3 my-2"
               vertical="center"
               size="lg"
-              color="secondary"
+              variant="secondary"
               onClick={this.injectEnter}
             >
               Save
             </Button>
-            <Button size="lg" color="link" onClick={this.injectEscape}>
+            <Button size="lg" variant="link" onClick={this.injectEscape}>
               Cancel
             </Button>
           </InputGroup>
diff --git a/ui/shared/DropdownMenuItems.jsx b/ui/shared/DropdownMenuItems.jsx
index 829dc324ebe..cac87a1830d 100644
--- a/ui/shared/DropdownMenuItems.jsx
+++ b/ui/shared/DropdownMenuItems.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { DropdownMenu, DropdownItem } from 'reactstrap';
+import { Dropdown } from 'react-bootstrap';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faCheck } from '@fortawesome/free-solid-svg-icons';
 
@@ -12,8 +12,8 @@ const createDropdownItem = (
   className,
 ) => {
   return (
-    <DropdownItem
-      tag="a"
+    <Dropdown.Item
+      as="a"
       key={`${namespace}${item}`}
       onClick={() => updateData(item)}
       className={`${className || ''}`}
@@ -24,7 +24,7 @@ const createDropdownItem = (
         title={selectedItem === item ? 'Selected' : ''}
       />
       {item}
-    </DropdownItem>
+    </Dropdown.Item>
   );
 };
 
@@ -36,7 +36,7 @@ const DropdownMenuItems = ({
   namespace,
   otherPinned,
 }) => (
-  <DropdownMenu className="overflow-auto dropdown-menu-height">
+  <>
     {/* Items pinned to top of dropdown */}
     {pinned.length > 0 && (
       <React.Fragment>
@@ -49,7 +49,7 @@ const DropdownMenuItems = ({
             'top-pinned',
           ),
         )}
-        <DropdownItem divider />
+        <Dropdown.Divider />
       </React.Fragment>
     )}
     {options.map((item) =>
@@ -58,7 +58,7 @@ const DropdownMenuItems = ({
     {/* Items pinned to bottom of dropdown */}
     {otherPinned.length > 0 && (
       <React.Fragment>
-        <DropdownItem divider />
+        <Dropdown.Divider />
         {otherPinned.map((item) =>
           createDropdownItem(
             item,
@@ -70,7 +70,7 @@ const DropdownMenuItems = ({
         )}
       </React.Fragment>
     )}
-  </DropdownMenu>
+  </>
 );
 
 DropdownMenuItems.propTypes = {
diff --git a/ui/shared/ErrorMessages.jsx b/ui/shared/ErrorMessages.jsx
index 05197da63b7..b4535f992af 100644
--- a/ui/shared/ErrorMessages.jsx
+++ b/ui/shared/ErrorMessages.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Alert } from 'reactstrap';
+import { Alert } from 'react-bootstrap';
 
 class ErrorMessages extends React.PureComponent {
   constructor(props) {
@@ -33,7 +33,7 @@ class ErrorMessages extends React.PureComponent {
       <div>
         {messages.map((message) => (
           <Alert
-            color="danger"
+            variant="danger"
             isOpen={visible}
             toggle={() => this.setState({ visible: !visible })}
             key={message}
diff --git a/ui/shared/FilterControls.jsx b/ui/shared/FilterControls.jsx
index 470df3c3b7d..d437303c388 100644
--- a/ui/shared/FilterControls.jsx
+++ b/ui/shared/FilterControls.jsx
@@ -1,13 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import {
-  Col,
-  Row,
-  Container,
-  Button,
-  UncontrolledDropdown,
-  DropdownToggle,
-} from 'reactstrap';
+import { Col, Row, Container, Button, Dropdown } from 'react-bootstrap';
 
 import SimpleTooltip from './SimpleTooltip';
 import DropdownMenuItems from './DropdownMenuItems';
@@ -21,14 +14,14 @@ export const createDropdowns = (dropdownOptions, colClass, outline = false) => (
         className={colClass}
         key={`dropdown ${dropdown.namespace || ''}${dropdown.selectedItem}`}
       >
-        <UncontrolledDropdown
+        <Dropdown
           className="mr-0 text-nowrap"
           title={dropdown.title}
           aria-label={dropdown.title}
         >
-          <DropdownToggle caret outline={outline}>
+          <Dropdown.Toggle caret outline={outline}>
             {dropdown.selectedItem}
-          </DropdownToggle>
+          </Dropdown.Toggle>
           <DropdownMenuItems
             pinned={dropdown.pinnedProjects || dropdown.pinned}
             otherPinned={dropdown.otherPinned}
@@ -37,7 +30,7 @@ export const createDropdowns = (dropdownOptions, colClass, outline = false) => (
             updateData={dropdown.updateData}
             namespace={dropdown.namespace}
           />
-        </UncontrolledDropdown>
+        </Dropdown>
       </Col>
     ))}
   </React.Fragment>
@@ -54,7 +47,7 @@ const FilterControls = ({
 }) => {
   const createButton = (filter) => (
     <Button
-      color="darker-info"
+      variant="darker-info"
       outline
       onClick={() => updateFilter(filter.stateName)}
       active={filter.state}
diff --git a/ui/shared/HelpMenu.jsx b/ui/shared/HelpMenu.jsx
index 4964b23b587..fe1c92a7f58 100644
--- a/ui/shared/HelpMenu.jsx
+++ b/ui/shared/HelpMenu.jsx
@@ -13,12 +13,7 @@ import {
   faQuestion,
   faQuestionCircle,
 } from '@fortawesome/free-solid-svg-icons';
-import {
-  DropdownMenu,
-  DropdownItem,
-  DropdownToggle,
-  UncontrolledDropdown,
-} from 'reactstrap';
+import { Dropdown } from 'react-bootstrap';
 
 const menuItems = [
   {
@@ -71,14 +66,14 @@ const menuItems = [
 ];
 
 const HelpMenu = () => (
-  <UncontrolledDropdown>
-    <DropdownToggle className="btn-view-nav nav-menu-btn" caret>
+  <Dropdown>
+    <Dropdown.Toggle className="btn-view-nav nav-menu-btn">
       Help
-    </DropdownToggle>
-    <DropdownMenu right className="icon-menu">
+    </Dropdown.Toggle>
+    <Dropdown.Menu align="end" className="icon-menu">
       {menuItems.map((item) => (
-        <DropdownItem
-          tag="a"
+        <Dropdown.Item
+          as="a"
           target="_blank"
           rel="noopener noreferrer"
           href={item.href}
@@ -90,10 +85,10 @@ const HelpMenu = () => (
             className="midgray mr-2"
           />
           {item.text}
-        </DropdownItem>
+        </Dropdown.Item>
       ))}
-    </DropdownMenu>
-  </UncontrolledDropdown>
+    </Dropdown.Menu>
+  </Dropdown>
 );
 
 export default HelpMenu;
diff --git a/ui/shared/InputFilter.jsx b/ui/shared/InputFilter.jsx
index b811919d8f7..1c028c03e82 100644
--- a/ui/shared/InputFilter.jsx
+++ b/ui/shared/InputFilter.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { InputGroup, Input } from 'reactstrap';
+import { InputGroup, Form } from 'react-bootstrap';
 import debounce from 'lodash/debounce';
 
 import { filterText } from '../perfherder/perf-helpers/constants';
@@ -56,7 +56,7 @@ export default class InputFilter extends React.Component {
 
     return (
       <InputGroup>
-        <Input
+        <Form.Control
           onChange={this.updateInput}
           onKeyDown={updateOnEnter ? this.userActionListener : undefined}
           placeholder={placeholder}
diff --git a/ui/shared/InternalIssueFiler.jsx b/ui/shared/InternalIssueFiler.jsx
index bd330c0dc3a..a58da5cf347 100644
--- a/ui/shared/InternalIssueFiler.jsx
+++ b/ui/shared/InternalIssueFiler.jsx
@@ -7,9 +7,8 @@ import {
   ModalHeader,
   ModalBody,
   ModalFooter,
-  Input,
-  Label,
-} from 'reactstrap';
+  Form,
+} from 'react-bootstrap';
 
 import { create } from '../helpers/http';
 import { getApiUrl } from '../helpers/url';
@@ -169,9 +168,9 @@ export class InternalIssueFilerClass extends React.Component {
           </ModalHeader>
           <ModalBody>
             <form className="d-flex flex-column">
-              <Label for="summary">Summary:</Label>
+              <Form.Label htmlFor="summary">Summary:</Form.Label>
               <div className="d-flex">
-                <Input
+                <Form.Control
                   id="summary"
                   className="flex-grow-1"
                   type="text"
@@ -194,10 +193,10 @@ export class InternalIssueFilerClass extends React.Component {
             </form>
           </ModalBody>
           <ModalFooter>
-            <Button color="secondary" onClick={this.submitInternalIssue}>
+            <Button variant="secondary" onClick={this.submitInternalIssue}>
               Submit Internal Issue
             </Button>{' '}
-            <Button color="secondary" onClick={toggle}>
+            <Button variant="secondary" onClick={toggle}>
               Cancel
             </Button>
           </ModalFooter>
diff --git a/ui/shared/LogoMenu.jsx b/ui/shared/LogoMenu.jsx
index 94bf0929e26..3375eadd101 100644
--- a/ui/shared/LogoMenu.jsx
+++ b/ui/shared/LogoMenu.jsx
@@ -1,11 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import {
-  UncontrolledDropdown,
-  DropdownToggle,
-  DropdownMenu,
-  DropdownItem,
-} from 'reactstrap';
+import { Dropdown } from 'react-bootstrap';
 import { Link } from 'react-router-dom';
 
 const choices = [
@@ -21,11 +16,10 @@ export default class LogoMenu extends React.PureComponent {
 
     const menuChoices = choices.filter((choice) => choice.text !== menuText);
     return (
-      <UncontrolledDropdown>
-        <DropdownToggle
+      <Dropdown>
+        <Dropdown.Toggle
           className="btn-view-nav menu-items"
           id="th-logo"
-          caret
           title="Treeherder services"
         >
           {menuImage ? (
@@ -33,15 +27,15 @@ export default class LogoMenu extends React.PureComponent {
           ) : (
             <span className={colorClass}>{menuText}</span>
           )}
-        </DropdownToggle>
-        <DropdownMenu>
+        </Dropdown.Toggle>
+        <Dropdown.Menu>
           {menuChoices.map((choice) => (
-            <DropdownItem key={choice.text}>
+            <Dropdown.Item key={choice.text}>
               <Link to={choice.url}>{choice.text}</Link>
-            </DropdownItem>
+            </Dropdown.Item>
           ))}
-        </DropdownMenu>
-      </UncontrolledDropdown>
+        </Dropdown.Menu>
+      </Dropdown>
     );
   }
 }
diff --git a/ui/shared/NotificationList.jsx b/ui/shared/NotificationList.jsx
index c8d85bc387c..0626fd1b882 100644
--- a/ui/shared/NotificationList.jsx
+++ b/ui/shared/NotificationList.jsx
@@ -7,7 +7,7 @@ import {
   faCircle,
   faExclamationTriangle,
 } from '@fortawesome/free-solid-svg-icons';
-import { Alert, Button } from 'reactstrap';
+import { Alert, Button } from 'react-bootstrap';
 
 class NotificationList extends React.Component {
   static getIcon(severity) {
@@ -31,7 +31,7 @@ class NotificationList extends React.Component {
       <ul id="notification-box" className="list-unstyled">
         {notifications.map((notification, idx) => (
           <li key={notification.created}>
-            <Alert color={notification.severity}>
+            <Alert variant={notification.severity}>
               <FontAwesomeIcon
                 icon={NotificationList.getIcon(notification.severity)}
                 title={notification.severity}
diff --git a/ui/shared/ProgressBar.jsx b/ui/shared/ProgressBar.jsx
index f346cbf0291..5d373ce52e1 100644
--- a/ui/shared/ProgressBar.jsx
+++ b/ui/shared/ProgressBar.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Progress } from 'reactstrap';
+import { ProgressBar as BSProgressBar } from 'react-bootstrap';
 
 import SimpleTooltip from './SimpleTooltip';
 
@@ -11,25 +11,28 @@ const ProgressBar = ({ magnitude, regression, color }) => {
   return (
     <SimpleTooltip
       text={
-        <Progress
-          multi
+        <BSProgressBar
           aria-label={`Lower is better. Metric: ${truncMag} % regressed`}
         >
           {/* the % of the bars that are colored and transparent is based on the newIsBetter metric,
           which determines whether the colored bar for magnitude is displayed on the left or right */}
           <div aria-hidden="true" className="progress w-100">
-            <Progress
-              bar
-              value={regression ? 100 - magnitude : magnitude}
-              color={regression ? 'transparent' : color}
+            <BSProgressBar
+              now={regression ? 100 - magnitude : magnitude}
+              variant={regression ? undefined : color}
+              style={
+                regression ? { backgroundColor: 'transparent' } : undefined
+              }
             />
-            <Progress
-              bar
-              value={regression ? magnitude : 100 - magnitude}
-              color={regression ? color : 'transparent'}
+            <BSProgressBar
+              now={regression ? magnitude : 100 - magnitude}
+              variant={regression ? color : undefined}
+              style={
+                regression ? undefined : { backgroundColor: 'transparent' }
+              }
             />
           </div>
-        </Progress>
+        </BSProgressBar>
       }
       tooltipText="Relative magnitude of change (scale from 0 - 20%+)"
     />
diff --git a/ui/shared/PushHealthStatus.jsx b/ui/shared/PushHealthStatus.jsx
index 231fb392f7b..268a6bb8e9d 100644
--- a/ui/shared/PushHealthStatus.jsx
+++ b/ui/shared/PushHealthStatus.jsx
@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { Badge } from 'reactstrap';
+import { Badge } from 'react-bootstrap';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import {
   faCheck,
diff --git a/ui/shared/PushHealthSummary.jsx b/ui/shared/PushHealthSummary.jsx
index a62e7b9fb92..23fa559ed29 100644
--- a/ui/shared/PushHealthSummary.jsx
+++ b/ui/shared/PushHealthSummary.jsx
@@ -1,6 +1,6 @@
 import React, { PureComponent } from 'react';
 import PropTypes from 'prop-types';
-import { Col, Row } from 'reactstrap';
+import { Col, Row } from 'react-bootstrap';
 import { faHeart } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
@@ -60,7 +60,7 @@ class PushHealthSummary extends PureComponent {
                     icon={faHeart}
                     height={heartSize}
                     width={heartSize}
-                    color="darker-secondary"
+                    variant="darker-secondary"
                   />
                 </span>
               )}
diff --git a/ui/shared/Revision.jsx b/ui/shared/Revision.jsx
index 315a23bb61d..9571edc35bd 100644
--- a/ui/shared/Revision.jsx
+++ b/ui/shared/Revision.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faUser } from '@fortawesome/free-regular-svg-icons';
-import { Row, UncontrolledTooltip } from 'reactstrap';
+import { Row, OverlayTrigger, Tooltip } from 'react-bootstrap';
 
 import { parseAuthor } from '../helpers/revision';
 
@@ -101,33 +101,34 @@ export class Revision extends React.PureComponent {
           </a>
         </span>
         <AuthorInitials title={`${name}: ${email}`} author={name} />
-        <span
-          data-testid={comment}
-          className={`ml-2 revision-comment overflow-hidden text-truncate ${commentColor} ${commentFont}`}
-          id={`revision${revision}`}
-        >
-          <span className="text-wrap">
-            <BugLinkify id={revision}>{comment}</BugLinkify>
-          </span>
-        </span>
-        <UncontrolledTooltip
+        <OverlayTrigger
           placement="top-start"
-          innerClassName="tooltip-content"
-          target={`revision${revision}`}
+          overlay={
+            <Tooltip className="tooltip-content">
+              {bugSummaryMap &&
+                !!bugMatches &&
+                bugMatches.map((bug) => {
+                  const bugId = bug.split(' ')[1];
+                  return (
+                    <div key={bugId} className="mb-3">
+                      Bug {bugId} - {bugSummaryMap[bugId]}
+                    </div>
+                  );
+                })}
+              <div>Commit:</div>
+              <span>{comment}</span>
+            </Tooltip>
+          }
         >
-          {bugSummaryMap &&
-            !!bugMatches &&
-            bugMatches.map((bug) => {
-              const bugId = bug.split(' ')[1];
-              return (
-                <div key={bugId} className="mb-3">
-                  Bug {bugId} - {bugSummaryMap[bugId]}
-                </div>
-              );
-            })}
-          <div>Commit:</div>
-          <span>{comment}</span>
-        </UncontrolledTooltip>
+          <span
+            data-testid={comment}
+            className={`ml-2 revision-comment overflow-hidden text-truncate ${commentColor} ${commentFont}`}
+          >
+            <span className="text-wrap">
+              <BugLinkify id={revision}>{comment}</BugLinkify>
+            </span>
+          </span>
+        </OverlayTrigger>
       </Row>
     );
   }
diff --git a/ui/shared/RevisionInformation.jsx b/ui/shared/RevisionInformation.jsx
index 3c432ae7c70..24958d87015 100644
--- a/ui/shared/RevisionInformation.jsx
+++ b/ui/shared/RevisionInformation.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { ListGroup, ListGroupItem } from 'reactstrap';
+import { ListGroup } from 'react-bootstrap';
 
 import { getJobsUrl } from '../helpers/url';
 
@@ -61,17 +61,17 @@ export default function RevisionInformation(props) {
   return (
     <ListGroup className="push-information m-0 list-group">
       {originalRevision && (
-        <ListGroupItem className="d-inline border-0 p-0">
+        <ListGroup.Item className="d-inline border-0 p-0">
           {getRevisionSpecificDetails(
             originalRevision,
             originalProject,
             true,
             originalResultSet,
           )}
-        </ListGroupItem>
+        </ListGroup.Item>
       )}
       {selectedTimeRange && (
-        <ListGroupItem className="d-inline border-0 p-0">
+        <ListGroup.Item className="d-inline border-0 p-0">
           {getRevisionSpecificDetails(
             originalRevision,
             originalProject,
@@ -79,18 +79,18 @@ export default function RevisionInformation(props) {
             null,
             selectedTimeRange,
           )}
-        </ListGroupItem>
+        </ListGroup.Item>
       )}
       —
       {newRevision && (
-        <ListGroupItem className="d-inline border-0 p-0">
+        <ListGroup.Item className="d-inline border-0 p-0">
           {getRevisionSpecificDetails(
             newRevision,
             newProject,
             false,
             newResultSet,
           )}
-        </ListGroupItem>
+        </ListGroup.Item>
       )}
     </ListGroup>
   );
diff --git a/ui/shared/RevisionList.jsx b/ui/shared/RevisionList.jsx
index e42d577ab60..55c0428a684 100644
--- a/ui/shared/RevisionList.jsx
+++ b/ui/shared/RevisionList.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Col, Row } from 'reactstrap';
+import { Col, Row } from 'react-bootstrap';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faExternalLinkSquareAlt } from '@fortawesome/free-solid-svg-icons';
 
diff --git a/ui/shared/SimpleTooltip.jsx b/ui/shared/SimpleTooltip.jsx
index 9c2be9db862..0654bea8c59 100644
--- a/ui/shared/SimpleTooltip.jsx
+++ b/ui/shared/SimpleTooltip.jsx
@@ -1,40 +1,29 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { UncontrolledTooltip } from 'reactstrap';
+import { OverlayTrigger, Tooltip } from 'react-bootstrap';
 
-export default class SimpleTooltip extends React.Component {
-  constructor(props) {
-    super(props);
-    this.tooltipRef = React.createRef();
-  }
+const SimpleTooltip = ({
+  text,
+  tooltipText,
+  placement,
+  textClass,
+  innerClassName,
+  autohide,
+}) => {
+  const tooltip = <Tooltip className={innerClassName}>{tooltipText}</Tooltip>;
 
-  render() {
-    const {
-      text,
-      tooltipText,
-      placement,
-      textClass,
-      innerClassName,
-      autohide,
-    } = this.props;
+  return (
+    <OverlayTrigger
+      placement={placement}
+      overlay={tooltip}
+      delay={{ show: autohide ? 250 : 0, hide: autohide ? 250 : 0 }}
+    >
+      <span className={textClass}>{text}</span>
+    </OverlayTrigger>
+  );
+};
 
-    return (
-      <React.Fragment>
-        <span ref={this.tooltipRef} className={textClass}>
-          {text}
-        </span>
-        <UncontrolledTooltip
-          placement={placement}
-          target={this.tooltipRef}
-          innerClassName={innerClassName}
-          autohide={autohide}
-        >
-          {tooltipText}
-        </UncontrolledTooltip>
-      </React.Fragment>
-    );
-  }
-}
+export default SimpleTooltip;
 SimpleTooltip.propTypes = {
   text: PropTypes.oneOfType([PropTypes.shape({}), PropTypes.string]).isRequired,
   tooltipText: PropTypes.oneOfType([PropTypes.shape({}), PropTypes.string])
diff --git a/ui/shared/TruncatedText.jsx b/ui/shared/TruncatedText.jsx
index 00dc71088f1..e32ba002845 100644
--- a/ui/shared/TruncatedText.jsx
+++ b/ui/shared/TruncatedText.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Button } from 'reactstrap';
+import { Button } from 'react-bootstrap';
 import PropTypes from 'prop-types';
 
 export default class TruncatedText extends React.Component {
diff --git a/ui/shared/auth/Login.jsx b/ui/shared/auth/Login.jsx
index 5fde23fbb78..b125eae7b9d 100644
--- a/ui/shared/auth/Login.jsx
+++ b/ui/shared/auth/Login.jsx
@@ -1,12 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import {
-  Button,
-  DropdownMenu,
-  DropdownItem,
-  DropdownToggle,
-  UncontrolledDropdown,
-} from 'reactstrap';
+import { Button, Dropdown } from 'react-bootstrap';
 import isEqual from 'lodash/isEqual';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faUser } from '@fortawesome/free-solid-svg-icons';
@@ -110,9 +104,9 @@ class Login extends React.Component {
     return (
       <React.Fragment>
         {user && user.isLoggedIn ? (
-          <UncontrolledDropdown>
-            <DropdownToggle
-              color="transparent"
+          <Dropdown>
+            <Dropdown.Toggle
+              variant="transparent"
               className="navbar-link nav-menu-btn"
               nav
               caret
@@ -124,13 +118,13 @@ class Login extends React.Component {
                 <FontAwesomeIcon icon={faUser} size="xs" />
               </span>
               <span>{user.fullName}</span>
-            </DropdownToggle>
-            <DropdownMenu right>
-              <DropdownItem tag="a" onClick={this.logout}>
+            </Dropdown.Toggle>
+            <Dropdown.Menu right>
+              <Dropdown.Item tag="a" onClick={this.logout}>
                 Logout
-              </DropdownItem>
-            </DropdownMenu>
-          </UncontrolledDropdown>
+              </Dropdown.Item>
+            </Dropdown.Menu>
+          </Dropdown>
         ) : (
           <Button onClick={this.login} className="btn-view-nav nav-menu-btn">
             Login / Register
diff --git a/ui/shared/tabs/failureSummary/BugListItem.jsx b/ui/shared/tabs/failureSummary/BugListItem.jsx
index 55b317029c5..1cf1ff03cb9 100644
--- a/ui/shared/tabs/failureSummary/BugListItem.jsx
+++ b/ui/shared/tabs/failureSummary/BugListItem.jsx
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import Highlighter from 'react-highlight-words';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faBug, faThumbtack } from '@fortawesome/free-solid-svg-icons';
-import { Button } from 'reactstrap';
+import { Button } from 'react-bootstrap';
 
 import { getSearchWords } from '../../../helpers/display';
 import { getBugUrl } from '../../../helpers/url';
@@ -24,7 +24,7 @@ function BugListItem(props) {
   const internalOccurrenceButton = (
     <Button
       className="bg-light px-2 py-1"
-      outline
+      variant="outline-secondary"
       style={{ fontSize: '8px' }}
       type="button"
       onClick={() => addBug(bug, selectedJob)}
@@ -36,7 +36,7 @@ function BugListItem(props) {
   const bugzillaButton = (
     <Button
       className="bg-light py-1 px-2"
-      outline
+      variant="outline-secondary"
       style={{ fontSize: '8px' }}
       onClick={() => toggleBugFiler(suggestion)}
       title={
diff --git a/ui/shared/tabs/failureSummary/FailureSummaryTab.jsx b/ui/shared/tabs/failureSummary/FailureSummaryTab.jsx
index 30e20cf4f9b..997832ed6a9 100644
--- a/ui/shared/tabs/failureSummary/FailureSummaryTab.jsx
+++ b/ui/shared/tabs/failureSummary/FailureSummaryTab.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button } from 'reactstrap';
+import { Button } from 'react-bootstrap';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { faSpinner } from '@fortawesome/free-solid-svg-icons';
 
diff --git a/ui/shared/tabs/failureSummary/SuggestionsListItem.jsx b/ui/shared/tabs/failureSummary/SuggestionsListItem.jsx
index 6ab6652a7c2..b36977465cd 100644
--- a/ui/shared/tabs/failureSummary/SuggestionsListItem.jsx
+++ b/ui/shared/tabs/failureSummary/SuggestionsListItem.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button } from 'reactstrap';
+import { Button } from 'react-bootstrap';
 import { Link } from 'react-router-dom';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import {
@@ -91,7 +91,7 @@ export default class SuggestionsListItem extends React.Component {
         suggestions.push(
           <Button
             key="show-hide-more"
-            color="link"
+            variant="link"
             rel="noopener"
             onClick={this.clickShowMore}
             className={`bg-light px-2 py-1 btn btn-outline-secondary btn-xs my-2 show-hide-more ${
@@ -197,7 +197,7 @@ export default class SuggestionsListItem extends React.Component {
             <span>
               <Button
                 className="bg-light py-1 px-2 mr-2"
-                outline
+                variant="outline-secondary"
                 style={{ fontSize: '8px' }}
                 onClick={() => toggleInternalIssueFiler(suggestion)}
                 title="File an internal issue for this failure"
@@ -247,7 +247,7 @@ export default class SuggestionsListItem extends React.Component {
               </a>
               <Button
                 className="bg-light py-1 px-2 ml-2"
-                outline
+                variant="outline-secondary"
                 style={{ fontSize: '8px' }}
                 onClick={() => toggleBugFiler(suggestion)}
                 title="File a bug for this failure"
diff --git a/yarn.lock b/yarn.lock
index 82f474d9ba8..b265c1017fb 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1015,6 +1015,11 @@
   dependencies:
     regenerator-runtime "^0.14.0"
 
+"@babel/runtime@^7.24.7", "@babel/runtime@^7.26.0", "@babel/runtime@^7.6.3":
+  version "7.28.2"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.28.2.tgz#2ae5a9d51cc583bd1f5673b3bb70d6d819682473"
+  integrity sha512-KHp2IflsnGywDjBWDkR9iEqiWSpc8GIi0lgTT3mOElT0PP1tG26P4tmFI2YvAdzgq9RGyoHZQEIEdZy6Ec5xCA==
+
 "@babel/runtime@^7.27.1", "@babel/runtime@^7.5.5":
   version "7.27.6"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.27.6.tgz#ec4070a04d76bae8ddbb10770ba55714a417b7c6"
@@ -1279,14 +1284,6 @@
   resolved "https://registry.yarnpkg.com/@humanwhocodes/retry/-/retry-0.4.3.tgz#c2b9d2e374ee62c586d3adbea87199b1d7a7a6ba"
   integrity sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==
 
-"@hypnosphi/create-react-context@^0.3.1":
-  version "0.3.1"
-  resolved "https://registry.yarnpkg.com/@hypnosphi/create-react-context/-/create-react-context-0.3.1.tgz#f8bfebdc7665f5d426cba3753e0e9c7d3154d7c6"
-  integrity sha512-V1klUed202XahrWJLLOT3EXNeCpFHCcJntdFGI15ntCwau+jfT386w7OFTMaCqOgXUH1fa0w/I1oZs+i/Rfr0A==
-  dependencies:
-    gud "^1.0.0"
-    warning "^4.0.3"
-
 "@isaacs/cliui@^8.0.2":
   version "8.0.2"
   resolved "https://registry.yarnpkg.com/@isaacs/cliui/-/cliui-8.0.2.tgz#b37667b7bc181c168782259bab42474fbf52b550"
@@ -1823,6 +1820,13 @@
     tar-fs "^3.0.8"
     yargs "^17.7.2"
 
+"@react-aria/ssr@^3.5.0":
+  version "3.9.10"
+  resolved "https://registry.yarnpkg.com/@react-aria/ssr/-/ssr-3.9.10.tgz#7fdc09e811944ce0df1d7e713de1449abd7435e6"
+  integrity sha512-hvTm77Pf+pMBhuBm760Li0BVIO38jv1IBws1xFm1NoL26PU+fe+FMW5+VZWyANR6nYL65joaJKZqOdTQMkO9IQ==
+  dependencies:
+    "@swc/helpers" "^0.5.0"
+
 "@redocly/ajv@^8.11.2":
   version "8.11.2"
   resolved "https://registry.yarnpkg.com/@redocly/ajv/-/ajv-8.11.2.tgz#46e1bf321ec0ac1e0fd31dea41a3d1fcbdcda0b5"
@@ -1853,6 +1857,35 @@
     pluralize "^8.0.0"
     yaml-ast-parser "0.0.43"
 
+"@restart/hooks@^0.4.9":
+  version "0.4.16"
+  resolved "https://registry.yarnpkg.com/@restart/hooks/-/hooks-0.4.16.tgz#95ae8ac1cc7e2bd4fed5e39800ff85604c6d59fb"
+  integrity sha512-f7aCv7c+nU/3mF7NWLtVVr0Ra80RqsO89hO72r+Y/nvQr5+q0UFGkocElTH6MJApvReVh6JHUFYn2cw1WdHF3w==
+  dependencies:
+    dequal "^2.0.3"
+
+"@restart/hooks@^0.5.0":
+  version "0.5.1"
+  resolved "https://registry.yarnpkg.com/@restart/hooks/-/hooks-0.5.1.tgz#6776b3859e33aea72b23b81fc47021edf17fd247"
+  integrity sha512-EMoH04NHS1pbn07iLTjIjgttuqb7qu4+/EyhAx27MHpoENcB2ZdSsLTNxmKD+WEPnZigo62Qc8zjGnNxoSE/5Q==
+  dependencies:
+    dequal "^2.0.3"
+
+"@restart/ui@^1.9.4":
+  version "1.9.4"
+  resolved "https://registry.yarnpkg.com/@restart/ui/-/ui-1.9.4.tgz#9d61f56f2647f5ab8a33d87b278b9ce183511a26"
+  integrity sha512-N4C7haUc3vn4LTwVUPlkJN8Ach/+yIMvRuTVIhjilNHqegY60SGLrzud6errOMNJwSnmYFnt1J0H/k8FE3A4KA==
+  dependencies:
+    "@babel/runtime" "^7.26.0"
+    "@popperjs/core" "^2.11.8"
+    "@react-aria/ssr" "^3.5.0"
+    "@restart/hooks" "^0.5.0"
+    "@types/warning" "^3.0.3"
+    dequal "^2.0.3"
+    dom-helpers "^5.2.0"
+    uncontrollable "^8.0.4"
+    warning "^4.0.3"
+
 "@rtsao/scc@^1.1.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@rtsao/scc/-/scc-1.1.0.tgz#927dd2fae9bc3361403ac2c7a00c32ddce9ad7e8"
@@ -1899,6 +1932,13 @@
   dependencies:
     "@sinonjs/commons" "^3.0.0"
 
+"@swc/helpers@^0.5.0":
+  version "0.5.17"
+  resolved "https://registry.yarnpkg.com/@swc/helpers/-/helpers-0.5.17.tgz#5a7be95ac0f0bf186e7e6e890e7a6f6cda6ce971"
+  integrity sha512-5IKx/Y13RsYd+sauPb2x+U/xZikHjolzfuDgTAl/Tdf3Q8rslRvC19NKDLgAJQ6wsqADk10ntlv08nPFw/gO/A==
+  dependencies:
+    tslib "^2.8.0"
+
 "@testing-library/dom@10.4.0":
   version "10.4.0"
   resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-10.4.0.tgz#82a9d9462f11d240ecadbf406607c6ceeeff43a8"
@@ -2224,7 +2264,7 @@
   dependencies:
     undici-types "~6.20.0"
 
-"@types/prop-types@^15.7.14":
+"@types/prop-types@^15.7.12", "@types/prop-types@^15.7.14":
   version "15.7.15"
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.15.tgz#e6e5a86d602beaca71ce5163fadf5f95d70931c7"
   integrity sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==
@@ -2244,7 +2284,7 @@
   resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-19.0.4.tgz#bedba97f9346bd4c0fe5d39e689713804ec9ac89"
   integrity sha512-4fSQ8vWFkg+TGhePfUzVmat3eC14TXYSsiiDSLI0dVLsrm9gZFABjPy/Qu6TKgl1tq1Bu1yDsuQgY3A3DOjCcg==
 
-"@types/react-transition-group@^4.4.12":
+"@types/react-transition-group@^4.4.12", "@types/react-transition-group@^4.4.6":
   version "4.4.12"
   resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.12.tgz#b5d76568485b02a307238270bfe96cb51ee2a044"
   integrity sha512-8TV6R3h2j7a91c+1DXdJi3Syo69zzIZbz7Lg5tORM5LEJG7X/E6a1V3drRyBRZq7/utz7A+c4OgYLiLcYGHG6w==
@@ -2256,6 +2296,13 @@
   dependencies:
     csstype "^3.0.2"
 
+"@types/react@>=16.9.11":
+  version "19.1.9"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-19.1.9.tgz#f42b24f35474566a39b5c3a98e4d0c425b79a849"
+  integrity sha512-WmdoynAX8Stew/36uTSVMcLJJ1KRh6L3IZRx1PZ7qJtBqT3dYTgyDTx8H1qoRghErydW7xw9mSJ3wS//tCRpFA==
+  dependencies:
+    csstype "^3.0.2"
+
 "@types/retry@0.12.2":
   version "0.12.2"
   resolved "https://registry.yarnpkg.com/@types/retry/-/retry-0.12.2.tgz#ed279a64fa438bb69f2480eda44937912bb7480a"
@@ -2324,6 +2371,11 @@
   resolved "https://registry.yarnpkg.com/@types/use-sync-external-store/-/use-sync-external-store-0.0.3.tgz#b6725d5f4af24ace33b36fafd295136e75509f43"
   integrity sha512-EwmlvuaxPNej9+T4v5AuBPJa2x2UOJVdjCtDHgcDqitUeOtjnJKJ+apYjVcAoBEMjKW1VVFGZLUb5+qqa09XFA==
 
+"@types/warning@^3.0.3":
+  version "3.0.3"
+  resolved "https://registry.yarnpkg.com/@types/warning/-/warning-3.0.3.tgz#d1884c8cc4a426d1ac117ca2611bf333834c6798"
+  integrity sha512-D1XC7WK8K+zZEveUPY+cf4+kgauk8N4eHr/XIHXGlGYkHLud6hK9lYfZk1ry1TNh798cZUCgb6MqGEG8DkJt6Q==
+
 "@types/whatwg-streams@^0.0.7":
   version "0.0.7"
   resolved "https://registry.yarnpkg.com/@types/whatwg-streams/-/whatwg-streams-0.0.7.tgz#28bfe73dc850562296367249c4b32a50db81e9d3"
@@ -3468,7 +3520,7 @@ cjs-module-lexer@^1.0.0:
   resolved "https://registry.yarnpkg.com/cjs-module-lexer/-/cjs-module-lexer-1.4.3.tgz#0f79731eb8cfe1ec72acd4066efac9d61991b00d"
   integrity sha512-9z8TZaGM1pfswYeXrUpzPrkx8UnWYdhJclsiYMm6x/w5+nN+8Tf/LnAgfLGQCm59qAOxU8WwHEq2vNwF6i4j+Q==
 
-classnames@^2.2.3, classnames@^2.2.5, classnames@^2.3.2:
+classnames@^2.2.5, classnames@^2.3.2:
   version "2.5.1"
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.5.1.tgz#ba774c614be0f016da105c858e7159eae8e7687b"
   integrity sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==
@@ -4058,18 +4110,6 @@ dedent@^1.0.0:
   resolved "https://registry.yarnpkg.com/dedent/-/dedent-1.5.3.tgz#99aee19eb9bae55a67327717b6e848d0bf777e5a"
   integrity sha512-NHQtfOOW68WD8lgypbLA5oT+Bt0xXJhiYvoR6SmmNXZfpzOGXwdKWmcwG8N7PwVVWV3eF/68nmD9BaJSsTBhyQ==
 
-deep-equal@^1.1.1:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-1.1.2.tgz#78a561b7830eef3134c7f6f3a3d6af272a678761"
-  integrity sha512-5tdhKF6DbU7iIzrIOa1AOUt39ZRm13cmL1cGEh//aqR8x9+tNfbywRf0n5FD/18OKMdo7DNEtrX2t22ZAkI+eg==
-  dependencies:
-    is-arguments "^1.1.1"
-    is-date-object "^1.0.5"
-    is-regex "^1.1.4"
-    object-is "^1.1.5"
-    object-keys "^1.1.1"
-    regexp.prototype.flags "^1.5.1"
-
 deep-extend@^0.6.0:
   version "0.6.0"
   resolved "https://registry.yarnpkg.com/deep-extend/-/deep-extend-0.6.0.tgz#c4fa7c95404a17a9c3e8ca7e1537312b736330ac"
@@ -4273,14 +4313,7 @@ dom-converter@^0.2.0:
   dependencies:
     utila "~0.4"
 
-dom-helpers@^3.4.0:
-  version "3.4.0"
-  resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-3.4.0.tgz#e9b369700f959f62ecde5a6babde4bccd9169af8"
-  integrity sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA==
-  dependencies:
-    "@babel/runtime" "^7.1.2"
-
-dom-helpers@^5.0.1, dom-helpers@^5.1.3:
+dom-helpers@^5.0.1, dom-helpers@^5.1.3, dom-helpers@^5.2.0, dom-helpers@^5.2.1:
   version "5.2.1"
   resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.2.1.tgz#d9400536b2bf8225ad98fe052e029451ac40e902"
   integrity sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==
@@ -5530,11 +5563,6 @@ graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.2.0, graceful-fs@^4.2.11,
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.11.tgz#4183e4e8bf08bb6e05bbb2f7d2e0c8f712ca40e3"
   integrity sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==
 
-gud@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/gud/-/gud-1.0.0.tgz#a489581b17e6a70beca9abe3ae57de7a499852c0"
-  integrity sha512-zGEOVKFM5sVPPrYs7J5/hYEw2Pof8KCyOwyhG8sAF26mCAeUFAcYPu1mwB7hhpIP29zOIBaDqwuHdLp0jvZXjw==
-
 handle-thing@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/handle-thing/-/handle-thing-2.0.1.tgz#857f79ce359580c340d43081cc648970d0bb234e"
@@ -5990,6 +6018,13 @@ interpret@^3.1.1:
   resolved "https://registry.yarnpkg.com/interpret/-/interpret-3.1.1.tgz#5be0ceed67ca79c6c4bc5cf0d7ee843dcea110c4"
   integrity sha512-6xwYfHbajpoF0xLW+iwLkhwgvLoZDfjYfoFNu8ftMoXINzwuymNLd9u/KmwtdT2GbR+/Cz66otEGEVVUHX9QLQ==
 
+invariant@^2.2.4:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
+  integrity sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==
+  dependencies:
+    loose-envify "^1.0.0"
+
 ip-address@^9.0.5:
   version "9.0.5"
   resolved "https://registry.yarnpkg.com/ip-address/-/ip-address-9.0.5.tgz#117a960819b08780c3bd1f14ef3c1cc1d3f3ea5a"
@@ -6013,7 +6048,7 @@ is-absolute-url@^3.0.3:
   resolved "https://registry.yarnpkg.com/is-absolute-url/-/is-absolute-url-3.0.3.tgz#96c6a22b6a23929b11ea0afb1836c36ad4a5d698"
   integrity sha512-opmNIX7uFnS96NtPmhWQgQx6/NYFgsUXYMllcfzwWKUMwfo8kku1TvE6hkNcH+Q1ts5cMVrsY7j0bxXQDciu9Q==
 
-is-arguments@^1.0.4, is-arguments@^1.1.1:
+is-arguments@^1.0.4:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/is-arguments/-/is-arguments-1.2.0.tgz#ad58c6aecf563b78ef2bf04df540da8f5d7d8e1b"
   integrity sha512-7bVbi0huj/wrIAOzb8U1aszg9kdi3KN/CyU19CTI7tAoZYEZoL9yCDXpbXN+uPsuWnP02cyug1gleqq+TU+YCA==
@@ -6215,7 +6250,7 @@ is-potential-custom-element-name@^1.0.1:
   resolved "https://registry.yarnpkg.com/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz#171ed6f19e3ac554394edf78caa05784a45bebb5"
   integrity sha512-bCYeRA2rVibKZd+s2625gGnGF/t7DSqDs4dP7CrLA1m7jKWz6pps0LpYLJN8Q64HtmPKJ1hrN3nzPNKFEKOUiQ==
 
-is-regex@^1.1.0, is-regex@^1.1.4, is-regex@^1.2.1:
+is-regex@^1.1.0, is-regex@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/is-regex/-/is-regex-1.2.1.tgz#76d70a3ed10ef9be48eb577887d74205bf0cad22"
   integrity sha512-MjYsKHO5O7mCsmRGxWcLWheFqN9DJ/2TmngvjKXihe6efViPqc274+Fx/4fYj/r03+ESvBdTXK0V6tA3rgez1g==
@@ -8236,11 +8271,6 @@ polished@^4.2.2:
   dependencies:
     "@babel/runtime" "^7.17.8"
 
-popper.js@^1.14.4:
-  version "1.16.1"
-  resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.1.tgz#2a223cb3dc7b6213d740e40372be40de43e65b1b"
-  integrity sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==
-
 possible-typed-array-names@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/possible-typed-array-names/-/possible-typed-array-names-1.1.0.tgz#93e3582bc0e5426586d9d07b79ee40fc841de4ae"
@@ -8388,6 +8418,14 @@ prop-types-exact@^1.2.0:
     object.assign "^4.1.7"
     own-keys "^1.0.0"
 
+prop-types-extra@^1.1.0:
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/prop-types-extra/-/prop-types-extra-1.1.1.tgz#58c3b74cbfbb95d304625975aa2f0848329a010b"
+  integrity sha512-59+AHNnHYCdiC+vMwY52WmvP5dM3QLeoumYuEyceQDi9aEhtwN9zIQ2ZNo25sMyXnbh32h+P1ezDsUpUH3JAew==
+  dependencies:
+    react-is "^16.3.2"
+    warning "^4.0.0"
+
 prop-types@15.8.1, prop-types@^15.5.0, prop-types@^15.5.4, prop-types@^15.5.8, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
@@ -8586,6 +8624,25 @@ raw-body@2.5.2:
     iconv-lite "0.4.24"
     unpipe "1.0.0"
 
+react-bootstrap@2.10.10:
+  version "2.10.10"
+  resolved "https://registry.yarnpkg.com/react-bootstrap/-/react-bootstrap-2.10.10.tgz#be0b0d951a69987152d75c0e6986c80425efdf21"
+  integrity sha512-gMckKUqn8aK/vCnfwoBpBVFUGT9SVQxwsYrp9yDHt0arXMamxALerliKBxr1TPbntirK/HGrUAHYbAeQTa9GHQ==
+  dependencies:
+    "@babel/runtime" "^7.24.7"
+    "@restart/hooks" "^0.4.9"
+    "@restart/ui" "^1.9.4"
+    "@types/prop-types" "^15.7.12"
+    "@types/react-transition-group" "^4.4.6"
+    classnames "^2.3.2"
+    dom-helpers "^5.2.1"
+    invariant "^2.2.4"
+    prop-types "^15.8.1"
+    prop-types-extra "^1.1.0"
+    react-transition-group "^4.4.5"
+    uncontrollable "^7.2.1"
+    warning "^4.0.3"
+
 react-dates@21.8.0:
   version "21.8.0"
   resolved "https://registry.yarnpkg.com/react-dates/-/react-dates-21.8.0.tgz#355c3c7a243a7c29568fe00aca96231e171a5e94"
@@ -8661,7 +8718,7 @@ react-hot-loader@4.13.1:
     shallowequal "^1.1.0"
     source-map "^0.7.3"
 
-react-is@^16.13.1, react-is@^16.6.0, react-is@^16.7.0:
+react-is@^16.13.1, react-is@^16.3.2, react-is@^16.6.0, react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@@ -8728,19 +8785,6 @@ react-outside-click-handler@^1.2.4:
     object.values "^1.1.0"
     prop-types "^15.7.2"
 
-react-popper@^1.3.6:
-  version "1.3.11"
-  resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-1.3.11.tgz#a2cc3f0a67b75b66cfa62d2c409f9dd1fcc71ffd"
-  integrity sha512-VSA/bS+pSndSF2fiasHK/PTEEAyOpX60+H5EPAjoArr8JGm+oihu4UbrqcEBpQibJxBVCpYyjAX7abJ+7DoYVg==
-  dependencies:
-    "@babel/runtime" "^7.1.2"
-    "@hypnosphi/create-react-context" "^0.3.1"
-    deep-equal "^1.1.1"
-    popper.js "^1.14.4"
-    prop-types "^15.6.1"
-    typed-styles "^0.0.7"
-    warning "^4.0.2"
-
 react-portal@^4.2.0:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/react-portal/-/react-portal-4.3.0.tgz#92ca3492b1309883134f317a6aa88004534c860f"
@@ -8832,16 +8876,6 @@ react-tabs@6.1.0, react-tabs@^6.0.2:
     clsx "^2.0.0"
     prop-types "^15.5.0"
 
-react-transition-group@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-3.0.0.tgz#36efa4db970d5eec5e3028e0c458931163fa3b9b"
-  integrity sha512-A9ojB/LWECbFj58SNfjK1X9aaAU+1olLS0DFSikvrr2KfMaiBELemHDa5dKNvcTk2t3gUtDL/PJpFrBKDfMpLg==
-  dependencies:
-    dom-helpers "^3.4.0"
-    loose-envify "^1.4.0"
-    prop-types "^15.6.2"
-    react-lifecycles-compat "^3.0.4"
-
 react-transition-group@^4.4.5:
   version "4.4.5"
   resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.5.tgz#e53d4e3f3344da8521489fbef8f2581d42becdd1"
@@ -8904,17 +8938,6 @@ react@18.3.1:
   dependencies:
     loose-envify "^1.1.0"
 
-reactstrap@8.10.1:
-  version "8.10.1"
-  resolved "https://registry.yarnpkg.com/reactstrap/-/reactstrap-8.10.1.tgz#43ea596c7f82f88997a9c8aae203417910262d3f"
-  integrity sha512-StjLADa/12yMNjafrSs+UD7sZAGtKpLO9fZp++2Dj0IzJinqY7eQhXlM3nFf0q40YsIcLvQdFc9pKF8PF4f0Qg==
-  dependencies:
-    "@babel/runtime" "^7.12.5"
-    classnames "^2.2.3"
-    prop-types "^15.5.8"
-    react-popper "^1.3.6"
-    react-transition-group "^3.0.0"
-
 readable-stream@^2.0.1, readable-stream@^2.3.8:
   version "2.3.8"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.8.tgz#91125e8042bba1b9887f49345f6277027ce8be9b"
@@ -9062,7 +9085,7 @@ regenerator-transform@^0.15.2:
   dependencies:
     "@babel/runtime" "^7.8.4"
 
-regexp.prototype.flags@^1.5.1, regexp.prototype.flags@^1.5.3:
+regexp.prototype.flags@^1.5.3:
   version "1.5.4"
   resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.5.4.tgz#1ad6c62d44a259007e55b3970e00f746efbcaa19"
   integrity sha512-dYqgNSZbDwkaJ2ceRd9ojCGjBq+mOm9LmtXnAnEGyHhN/5R7iDW2TRw3h+o/jCFxus3P2LfWIIiwowAjANm7IA==
@@ -10236,7 +10259,7 @@ tslib@2.6.2:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.6.2.tgz#703ac29425e7b37cd6fd456e92404d46d1f3e4ae"
   integrity sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==
 
-tslib@^2.0.0, tslib@^2.0.1, tslib@^2.0.3, tslib@^2.1.0:
+tslib@^2.0.0, tslib@^2.0.1, tslib@^2.0.3, tslib@^2.1.0, tslib@^2.8.0:
   version "2.8.1"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.8.1.tgz#612efe4ed235d567e8aba5f2a5fab70280ade83f"
   integrity sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==
@@ -10316,11 +10339,6 @@ typed-query-selector@^2.12.0:
   resolved "https://registry.yarnpkg.com/typed-query-selector/-/typed-query-selector-2.12.0.tgz#92b65dbc0a42655fccf4aeb1a08b1dddce8af5f2"
   integrity sha512-SbklCd1F0EiZOyPiW192rrHZzZ5sBijB6xM+cpmrwDqObvdtunOHHIk9fCGsoK5JVIYXoyEp4iEdE3upFH3PAg==
 
-typed-styles@^0.0.7:
-  version "0.0.7"
-  resolved "https://registry.yarnpkg.com/typed-styles/-/typed-styles-0.0.7.tgz#93392a008794c4595119ff62dde6809dbc40a3d9"
-  integrity sha512-pzP0PWoZUhsECYjABgCGQlRGL1n7tOHsgwYv3oIiEpJwGhFTuty/YNeduxQYzXXa3Ge5BdT6sHYIQYpl4uJ+5Q==
-
 uc.micro@^1.0.1:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/uc.micro/-/uc.micro-1.0.6.tgz#9c411a802a409a91fc6cf74081baba34b24499ac"
@@ -10341,6 +10359,21 @@ unbox-primitive@^1.1.0:
     has-symbols "^1.1.0"
     which-boxed-primitive "^1.1.1"
 
+uncontrollable@^7.2.1:
+  version "7.2.1"
+  resolved "https://registry.yarnpkg.com/uncontrollable/-/uncontrollable-7.2.1.tgz#1fa70ba0c57a14d5f78905d533cf63916dc75738"
+  integrity sha512-svtcfoTADIB0nT9nltgjujTi7BzVmwjZClOmskKu/E8FW9BXzg9os8OLr4f8Dlnk0rYWJIWr4wv9eKUXiQvQwQ==
+  dependencies:
+    "@babel/runtime" "^7.6.3"
+    "@types/react" ">=16.9.11"
+    invariant "^2.2.4"
+    react-lifecycles-compat "^3.0.4"
+
+uncontrollable@^8.0.4:
+  version "8.0.4"
+  resolved "https://registry.yarnpkg.com/uncontrollable/-/uncontrollable-8.0.4.tgz#a0a8307f638795162fafd0550f4a1efa0f8c5eb6"
+  integrity sha512-ulRWYWHvscPFc0QQXvyJjY6LIXU56f0h8pQFvhxiKk5V1fcI8gp9Ht9leVAhrVjzqMw0BgjspBINx9r6oyJUvQ==
+
 undici-types@~6.20.0:
   version "6.20.0"
   resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-6.20.0.tgz#8171bf22c1f588d1554d55bf204bc624af388433"
@@ -10846,7 +10879,7 @@ walker@^1.0.8:
   dependencies:
     makeerror "1.0.12"
 
-warning@^4.0.2, warning@^4.0.3:
+warning@^4.0.0, warning@^4.0.3:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3"
   integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==