From a1a1b9a8017ddb543c076e1f2d37a01ba4ace4c9 Mon Sep 17 00:00:00 2001
From: vjrj <vjrj@comunes.org>
Date: Tue, 21 Jul 2026 12:44:46 +0200
Subject: [PATCH] deps: react-bootstrap 0.31 -> 2 (Bootstrap 5 CSS deferred as
 debt)

Removes the largest batch of React-19-blocking warnings: the 0.31
components (Grid, FormGroup, ControlLabel, Navbar.Header/Brand, Checkbox,
SafeAnchor) all leaned on legacy context / defaultProps.

29 files converted: Grid->Container, FormGroup/ControlLabel/FormControl/
HelpBlock -> Form.Group/Label/Control/Text, Checkbox -> Form.Check (label
as prop), bsStyle->variant (default->secondary), bsSize->size,
pull-right->float-end. Custom Col.js now re-exports v2's Col; custom
NavItem.js rewritten self-contained (no SafeAnchor/createChainedFunction);
Navigation.js drops react-bootstrap Navbar (raw markup anyway).

CSS stays on Bootstrap 4 (alexwine:bootstrap-4) for now: the BS4->5 jump
is entangled with the jQuery carousel/swipe + navbar-collapse and is
tracked as separate debt in UPGRADE.md. Only .form-label needed a shim
(forms.scss). Browser-verified home carousel+navbar, signup form + terms
checkbox, login form; REST smoke byte-identical.
---
 UPGRADE.md                                    |   2 +
 .../CenterInMyPosition/CenterInMyPosition.js  |   2 +-
 imports/ui/components/Col/Col.js              | 117 +----
 .../DocumentEditor/DocumentEditor.js          |  16 +-
 imports/ui/components/Feedback/Feedback.js    |  14 +-
 imports/ui/components/Footer/Footer.js        |   8 +-
 .../LocationAutocomplete.js                   |  10 +-
 imports/ui/components/NavItem/NavItem.js      |  65 ++-
 .../ui/components/Navigation/Navigation.js    |  20 +-
 imports/ui/components/Prompt/Prompt.js        |   2 +-
 .../ui/components/ReSendEmail/ReSendEmail.js  |   4 +-
 .../components/SelectionMap/SelectionMap.js   |   4 +-
 imports/ui/layouts/App/App.js                 |   6 +-
 imports/ui/pages/Documents/Documents.js       |   8 +-
 imports/ui/pages/Fires/Fires.js               |   8 +-
 imports/ui/pages/FiresMap/FiresMap.js         |  22 +-
 imports/ui/pages/Login/Login.js               |  20 +-
 imports/ui/pages/NotFound/NotFound.js         |   2 +-
 imports/ui/pages/Profile/Profile.js           |  40 +-
 .../pages/RecoverPassword/RecoverPassword.js  |  12 +-
 .../ui/pages/ResetPassword/ResetPassword.js   |  18 +-
 imports/ui/pages/Signup/Signup.js             |  39 +-
 .../ui/pages/Subscriptions/Subscriptions.js   |   6 +-
 .../pages/Subscriptions/SubscriptionsMap.js   |   2 +-
 imports/ui/pages/VerifyEmail/VerifyEmail.js   |   2 +-
 imports/ui/pages/ViewDocument/ViewDocument.js |   4 +-
 .../ViewSubscription/ViewSubscription.js      |   4 +-
 imports/ui/stylesheets/forms.scss             |  12 +-
 package-lock.json                             | 401 +++++++++++++++---
 package.json                                  |   2 +-
 30 files changed, 539 insertions(+), 333 deletions(-)

diff --git a/UPGRADE.md b/UPGRADE.md
index cbd1a83..56ffefc 100644
--- a/UPGRADE.md
+++ b/UPGRADE.md
@@ -317,6 +317,8 @@ MONGO_CONTAINER=tcef-mongo7 MONGO_SHELL=mongosh MONGO_PORT=27019 ./smoke/smoke.s
 | fourseven:scss | 4.5.4 | 4.14.1 | ✅ node-12 compatible |
 | node-gcm | 1.0.2 | — | ✅ removed (dead API, moved to microservice) |
 | react-helmet | 5.2.0 | react-helmet-async 2.0.5 | ✅ done — react-helmet is unmaintained and misbehaves under React 18 StrictMode. Drop-in: same `<Helmet>` children API across the 15 pages; `<HelmetProvider>` wraps `<App/>` in `imports/startup/client/index.js`. Verified in browser: per-page titles, meta description and hreflang alternates injected (`data-rh`). Note: head updates are rAF-deferred (like react-helmet), so hidden/background tabs don't flush — irrelevant for real users. |
+| react-bootstrap | 0.31.5 | 2.10 | ✅ done — kills the biggest batch of React-19-blocking warnings (Grid/FormGroup/ControlLabel/Navbar.Header/Navbar.Brand/Checkbox/SafeAnchor all used legacy context/defaultProps). 29 files: `Grid`→`Container`, `FormGroup/ControlLabel/FormControl/HelpBlock`→`Form.Group/Label/Control/Text`, `Checkbox`→`Form.Check` (label moves to a prop), `bsStyle`→`variant` (×23, `"default"`→`"secondary"`), `bsSize`→`size` (×2), `pull-right`→`float-end` (×7). Custom `Col.js` (used v0.31 `bootstrapUtils`/`StyleConfig` internals) now re-exports v2's `Col`; custom `NavItem.js` rewritten self-contained (dropped `SafeAnchor`+`createChainedFunction`); `Navigation.js` drops the react-bootstrap `Navbar` (was hand-rolled raw markup anyway). **CSS kept at Bootstrap 4** (see next row) — the only BS5-only class v2 emits that BS4 lacks is `.form-label`, shimmed in `forms.scss`. Browser-verified: home carousel+navbar, signup form + terms `Form.Check` (toggles submit), login form; REST smoke byte-identical. |
+| Bootstrap CSS/JS | 4.1 (alexwine:bootstrap-4) | 5.x | ⏸️ **deferred as debt.** The app's CSS+JS still comes from the Atmosphere `alexwine:bootstrap-4` (Bootstrap 4 + jQuery). The BS4→5 jump is a separate invasive sub-project: the home **carousel** uses the jQuery `bootstrap-carousel-swipe` plugin (BS4-only), the **navbar collapse** and ~17 `data-toggle`/`data-slide` attributes across 6 files are BS4 jQuery behaviors, and BS5 is vanilla-JS with `data-bs-*`. react-bootstrap v2 runs fine on BS4 CSS for every component we use (Button/Alert/Row/Col/Table/ButtonGroup/Modal render identical classes; only `.form-label` needed a shim). Do this jump on its own: npm `bootstrap@5` SCSS+JS, rewrite carousel (BS5 has native swipe → drop the plugin), `data-toggle`→`data-bs-toggle`, `ml-auto`→`ms-auto`, etc. |
 | reactstrap | 5.0.0-alpha.3 | — | ✅ removed — zero imports in the codebase (react-bootstrap covers all UI). |
 | react-leaflet-sidebarv2 | 0.5.1 | — | ✅ removed — never imported. |
 | react-router-hash-link | 1.1.1 | — | ✅ removed — only a commented-out import in Index.js. |
diff --git a/imports/ui/components/CenterInMyPosition/CenterInMyPosition.js b/imports/ui/components/CenterInMyPosition/CenterInMyPosition.js
index 02537df..574da35 100644
--- a/imports/ui/components/CenterInMyPosition/CenterInMyPosition.js
+++ b/imports/ui/components/CenterInMyPosition/CenterInMyPosition.js
@@ -48,7 +48,7 @@ class CenterInMyPosition extends React.Component {
     const { onlyIcon, t } = this.props;
     const msg = t('Centrar en tu ubicación');
     return (
-      <Button bsStyle="default" title={msg} onClick={() => this.onClick()}>
+      <Button variant="secondary" title={msg} onClick={() => this.onClick()}>
         <i className="fa fa-crosshairs" />{!onlyIcon ? ` ${msg}` : ''}
       </Button>);
   }
diff --git a/imports/ui/components/Col/Col.js b/imports/ui/components/Col/Col.js
index 2a20586..affc10d 100644
--- a/imports/ui/components/Col/Col.js
+++ b/imports/ui/components/Col/Col.js
@@ -1,111 +1,6 @@
-import classNames from 'classnames';
-import React from 'react';
-import PropTypes from 'prop-types';
-import elementType from 'prop-types-extra/lib/elementType';
-
-import { bsClass, prefix, splitBsProps } from 'react-bootstrap/lib/utils/bootstrapUtils';
-import { DEVICE_SIZES } from 'react-bootstrap/lib/utils/StyleConfig';
-
-const column = PropTypes.oneOfType([
-  PropTypes.oneOf(['auto']),
-  PropTypes.number,
-]);
-
-const propTypes = {
-  componentClass: elementType,
-
-  /**
-   * The number of columns you wish to span
-   *
-   * for Extra small devices Phones (<576px)
-   *
-   * class-prefix `col-`
-   */
-  xs: column,
-
-  /**
-   * The number of columns you wish to span
-   *
-   * for Small devices Tablets (≥576px)
-   *
-   * class-prefix `col-sm-`
-   */
-  sm: column,
-
-  /**
-   * The number of columns you wish to span
-   *
-   * for Medium devices Desktops (≥768px)
-   *
-   * class-prefix `col-md-`
-   */
-  md: column,
-
-  /**
-   * The number of columns you wish to span
-   *
-   * for Large devices Desktops (≥992px)
-   *
-   * class-prefix `col-lg-`
-   */
-  lg: column,
-
-  /**
-   * The number of columns you wish to span
-   *
-   * for Large devices Desktops (≥1200px)
-   *
-   * class-prefix `col-xl-`
-   */
-  xl: column,
-};
-
-const defaultProps = {
-  componentClass: 'div',
-};
-
-class Col extends React.Component {
-  render() {
-    const { componentClass: Component, className, ...props } = this.props;
-    const [bsProps, elementProps] = splitBsProps(props);
-
-    const classes = [];
-
-    DEVICE_SIZES.forEach((size) => {
-      const propValue = elementProps[size];
-
-      if (propValue == null) return;
-
-      if (size === 'xs') {
-        // col and col-4
-        classes.push(propValue === true ?
-          bsProps.bsClass :
-          prefix(bsProps, `${propValue}`),
-        );
-      } else {
-        // col-md-3
-        classes.push(
-          prefix(bsProps, `${size}-${propValue}`),
-        );
-      }
-
-      delete elementProps[size];
-    });
-
-    if (!classes.length) {
-      classes.push(bsProps.bsClass); // plain 'col'
-    }
-
-    return (
-      <Component
-        {...elementProps}
-        className={classNames(className, classes)}
-      />
-    );
-  }
-}
-
-Col.propTypes = propTypes;
-Col.defaultProps = defaultProps;
-
-export default bsClass('col', Col);
+// The old custom Col hand-rolled Bootstrap-4/5 grid classes on top of
+// react-bootstrap 0.31 internals (`bootstrapUtils`, `StyleConfig`), which no
+// longer exist in react-bootstrap v2. v2's own Col produces the exact same
+// `col`/`col-{size}-{n}` output for the xs/sm/md/lg/xl props we use, so we
+// simply re-export it and keep every importer unchanged.
+export { Col as default } from 'react-bootstrap';
diff --git a/imports/ui/components/DocumentEditor/DocumentEditor.js b/imports/ui/components/DocumentEditor/DocumentEditor.js
index 4a42df7..d3ea3ab 100644
--- a/imports/ui/components/DocumentEditor/DocumentEditor.js
+++ b/imports/ui/components/DocumentEditor/DocumentEditor.js
@@ -2,7 +2,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { FormGroup, ControlLabel, Button } from 'react-bootstrap';
+import { Form, Button } from 'react-bootstrap';
 import { Meteor } from 'meteor/meteor';
 import { Bert } from 'meteor/themeteorchef:bert';
 import validate from '../../../modules/validate';
@@ -57,8 +57,8 @@ class DocumentEditor extends React.Component {
   render() {
     const { doc } = this.props;
     return (<form ref={form => (this.form = form)} onSubmit={event => event.preventDefault()}>
-      <FormGroup>
-        <ControlLabel>Title</ControlLabel>
+      <Form.Group>
+        <Form.Label>Title</Form.Label>
         <input
           type="text"
           className="form-control"
@@ -67,9 +67,9 @@ class DocumentEditor extends React.Component {
           defaultValue={doc && doc.title}
           placeholder="Oh, The Places You'll Go!"
         />
-      </FormGroup>
-      <FormGroup>
-        <ControlLabel>Body</ControlLabel>
+      </Form.Group>
+      <Form.Group>
+        <Form.Label>Body</Form.Label>
         <textarea
           className="form-control"
           name="body"
@@ -77,8 +77,8 @@ class DocumentEditor extends React.Component {
           defaultValue={doc && doc.body}
           placeholder="Congratulations! Today is your day. You're off to Great Places! You're off and away!"
         />
-      </FormGroup>
-      <Button type="submit" bsStyle="success">
+      </Form.Group>
+      <Button type="submit" variant="success">
         {doc && doc._id ? 'Save Changes' : 'Add Document'}
       </Button>
     </form>);
diff --git a/imports/ui/components/Feedback/Feedback.js b/imports/ui/components/Feedback/Feedback.js
index b6bc7e1..8e47f71 100644
--- a/imports/ui/components/Feedback/Feedback.js
+++ b/imports/ui/components/Feedback/Feedback.js
@@ -6,7 +6,7 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Meteor } from 'meteor/meteor';
 import { withTranslation } from 'react-i18next';
-import { FormGroup, Button, FormControl } from 'react-bootstrap';
+import { Form, Button } from 'react-bootstrap';
 import { Bert } from 'meteor/themeteorchef:bert';
 import { withTracker } from 'meteor/react-meteor-data';
 import { isHome } from '/imports/ui/components/Utils/location';
@@ -82,7 +82,7 @@ class Feedback extends Component {
                   className="form card-body"
                   onSubmit={event => event.preventDefault()}
               >
-                <FormGroup controlId="formEmail">
+                <Form.Group controlId="formEmail">
                   <input
                       id={testId('emailInput')}
                       onChange={this.handleChange}
@@ -95,8 +95,8 @@ class Feedback extends Component {
                       defaultValue={disabled ? this.props.emailAddress : ''}
                       type="email"
                   />
-                </FormGroup>
-                <FormGroup
+                </Form.Group>
+                <Form.Group
                     controlId="formFeedback"
                 >
                   <textarea
@@ -107,9 +107,9 @@ class Feedback extends Component {
                       placeholder={t('Por favor, escribe aquí tu feedback...')}
                       rows="6"
                   />
-                  <FormControl.Feedback />
-                </FormGroup>
-                <Button type="submit" bsStyle="success" className="float-right" id={testId('sendFeedbackBtn')} >
+                  <Form.Control.Feedback />
+                </Form.Group>
+                <Button type="submit" variant="success" className="float-right" id={testId('sendFeedbackBtn')} >
                   {t('Enviar')}
                 </Button>
               </form>
diff --git a/imports/ui/components/Footer/Footer.js b/imports/ui/components/Footer/Footer.js
index cd01d25..661aedd 100644
--- a/imports/ui/components/Footer/Footer.js
+++ b/imports/ui/components/Footer/Footer.js
@@ -3,7 +3,7 @@
 import React from 'react';
 import { year } from '@cleverbeagle/dates';
 import { Link } from 'react-router-dom';
-import { Grid } from 'react-bootstrap';
+import { Container } from 'react-bootstrap';
 import { withTranslation } from 'react-i18next';
 import { testId } from '/imports/ui/components/Utils/TestUtils';
 
@@ -19,10 +19,10 @@ const Footer = (props) => {
   const { t } = props;
   return (
     <div className="Footer">
-      <Grid>
+      <Container>
         <p className="pull-left"><span className="reverse">&copy;</span><span className="d-none d-md-inline"> Copyleft</span> {copyrightYear()} <a href="https://comunes.org/"><span className="d-none d-md-inline">{t('OrgName')}</span><span className="d-inline d-md-none">{t('OrgName')}</span></a></p>
 
-        <ul className="pull-right">
+        <ul className="float-end">
           <li>
             <Link id={testId('about')} to="/about">
               <span className="d-none d-lg-inline">{t('Sobre nosotr@s')}</span>
@@ -44,7 +44,7 @@ const Footer = (props) => {
           <li><span className="d-none d-md-inline"><Link id={testId('license')} to="/license">{t('Licencia')}</Link></span></li>
           <li><span className="d-none d-md-inline"><Link id={testId('credits')} to="/credits">{t('Créditos')}</Link></span></li>
         </ul>
-      </Grid>
+      </Container>
     </div>
   );
 };
diff --git a/imports/ui/components/LocationAutocomplete/LocationAutocomplete.js b/imports/ui/components/LocationAutocomplete/LocationAutocomplete.js
index 9b085e5..edc4f8e 100644
--- a/imports/ui/components/LocationAutocomplete/LocationAutocomplete.js
+++ b/imports/ui/components/LocationAutocomplete/LocationAutocomplete.js
@@ -3,7 +3,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { withTranslation } from 'react-i18next';
 import PlacesAutocomplete, { geocodeByAddress, getLatLng } from 'react-places-autocomplete';
-import { FormGroup, ControlLabel, HelpBlock } from 'react-bootstrap';
+import { Form } from 'react-bootstrap';
 import { Bert } from 'meteor/themeteorchef:bert';
 
 
@@ -82,8 +82,8 @@ class LocationAutocomplete extends React.Component {
 
     return (
       <form>
-        <FormGroup>
-          { label.length > 0 && <ControlLabel>{t(label)}</ControlLabel> }
+        <Form.Group>
+          { label.length > 0 && <Form.Label>{t(label)}</Form.Label> }
           <PlacesAutocomplete
               styles={myStyles}
               autocompleteItem={AutocompleteItem}
@@ -114,8 +114,8 @@ class LocationAutocomplete extends React.Component {
                   autoFocus: this.props.focusInput
                 }}
           />
-          { helpText.length > 0 && <HelpBlock>{t(helpText)}</HelpBlock> }
-        </FormGroup>
+          { helpText.length > 0 && <Form.Text>{t(helpText)}</Form.Text> }
+        </Form.Group>
       </form>
     );
   }
diff --git a/imports/ui/components/NavItem/NavItem.js b/imports/ui/components/NavItem/NavItem.js
index 84fceea..a3bbad0 100644
--- a/imports/ui/components/NavItem/NavItem.js
+++ b/imports/ui/components/NavItem/NavItem.js
@@ -2,9 +2,9 @@ import classNames from 'classnames';
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import { SafeAnchor } from 'react-bootstrap';
-import createChainedFunction from 'react-bootstrap/lib/utils/createChainedFunction';
-
+// Self-contained NavItem. The old one wrapped react-bootstrap 0.31's
+// `SafeAnchor` + `createChainedFunction` (both gone in v2); the markup this
+// navbar needs is just an <li><a> that toggles the collapsed menu on click.
 const propTypes = {
   active: PropTypes.bool,
   disabled: PropTypes.bool,
@@ -12,7 +12,11 @@ const propTypes = {
   href: PropTypes.string,
   onClick: PropTypes.func,
   onSelect: PropTypes.func,
-  eventKey: PropTypes.any
+  eventKey: PropTypes.any,
+  className: PropTypes.string,
+  anchorClassName: PropTypes.string,
+  style: PropTypes.object,
+  children: PropTypes.node
 };
 
 const defaultProps = {
@@ -21,42 +25,35 @@ const defaultProps = {
 };
 
 class NavItem extends React.Component {
-  constructor(props, context) {
-    super(props, context);
-
+  constructor(props) {
+    super(props);
     this.handleClick = this.handleClick.bind(this);
   }
 
   handleClick(e) {
-    if (this.props.onSelect) {
+    const { disabled, onClick, onSelect, eventKey } = this.props;
+    if (disabled) {
       e.preventDefault();
-
-      if (!this.props.disabled) {
-        this.props.onSelect(this.props.eventKey, e);
-      }
+      return;
+    }
+    if (onClick) onClick(e);
+    if (onSelect) {
+      e.preventDefault();
+      onSelect(eventKey, e);
     }
   }
 
   render() {
     const {
-      active, disabled, onClick, className, anchorClassName, style, ...props
-    } =
-      this.props;
+      active, disabled, role, href, onClick, onSelect, eventKey,
+      className, anchorClassName, style, children, ...props
+    } = this.props;
 
-    delete props.onSelect;
-    delete props.eventKey;
+    const anchorProps = { ...props };
+    if (href) anchorProps.href = href;
+    anchorProps.role = role || (href === '#' ? 'button' : undefined);
+    if (role === 'tab') anchorProps['aria-selected'] = active;
 
-    // These are injected down by `<Nav>` for building `<SubNav>`s.
-    delete props.activeKey;
-    delete props.activeHref;
-
-    if (!props.role) {
-      if (props.href === '#') {
-        props.role = 'button';
-      }
-    } else if (props.role === 'tab') {
-      props['aria-selected'] = active;
-    }
     return (
       <li
         role="presentation"
@@ -65,12 +62,14 @@ class NavItem extends React.Component {
         className={classNames(className, { active, disabled })}
         style={style}
       >
-        <SafeAnchor
-          {...props}
-          disabled={disabled}
+        {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
+        <a
+          {...anchorProps}
           className={anchorClassName}
-          onClick={createChainedFunction(onClick, this.handleClick)}
-        />
+          onClick={this.handleClick}
+        >
+          {children}
+        </a>
       </li>
     );
   }
diff --git a/imports/ui/components/Navigation/Navigation.js b/imports/ui/components/Navigation/Navigation.js
index 0f7eb5b..7a6e42c 100644
--- a/imports/ui/components/Navigation/Navigation.js
+++ b/imports/ui/components/Navigation/Navigation.js
@@ -2,7 +2,6 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Navbar } from 'react-bootstrap';
 import { Link } from 'react-router-dom';
 import { LinkContainer } from 'react-router-bootstrap';
 import { Trans, withTranslation } from 'react-i18next';
@@ -20,19 +19,12 @@ const Navigation = props => (
   <nav className="navbar navbar-expand-lg navbar-dark bg-dark">
     <div style={{ overflow: 'hidden' } /* for ribbon */} className="container">
       {/* <BetaRibbon /> */}
-      {/* <Navbar bsClass="navbar navbar-dark bg-dark"> */}
-      {/* https://github.com/react-bootstrap/react-bootstrap/blob/master/src/Navbar.js */}
-      <Navbar.Header>
-        <Navbar.Brand>
-          <Link to="/" className={window.location.pathname === '/' ? 'hide-brand' : ''} >
-            {props.t('AppNameFull')}
-          </Link>
-        </Navbar.Brand>
-        {/* <Navbar.Toggle/> */}
-        <button className="sr-only navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
-          <span className="navbar-toggler-icon" />
-        </button>
-      </Navbar.Header>
+      <Link to="/" className={`navbar-brand ${window.location.pathname === '/' ? 'hide-brand' : ''}`} >
+        {props.t('AppNameFull')}
+      </Link>
+      <button className="sr-only navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
+        <span className="navbar-toggler-icon" />
+      </button>
       <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
         <span className="navbar-toggler-icon" />
       </button>
diff --git a/imports/ui/components/Prompt/Prompt.js b/imports/ui/components/Prompt/Prompt.js
index d5db620..464d97f 100644
--- a/imports/ui/components/Prompt/Prompt.js
+++ b/imports/ui/components/Prompt/Prompt.js
@@ -40,7 +40,7 @@ class Prompt extends Component {
             <p>{confirmation}</p>
           </Modal.Body>
           <Modal.Footer>
-            <Button className="button-l" bsStyle="primary" onClick={proceed}>{okBtn}</Button>
+            <Button className="button-l" variant="primary" onClick={proceed}>{okBtn}</Button>
             <Button onClick={cancel}>{cancelBtn}</Button>
           </Modal.Footer>
         </Modal>
diff --git a/imports/ui/components/ReSendEmail/ReSendEmail.js b/imports/ui/components/ReSendEmail/ReSendEmail.js
index 5d19792..11b0052 100644
--- a/imports/ui/components/ReSendEmail/ReSendEmail.js
+++ b/imports/ui/components/ReSendEmail/ReSendEmail.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Grid, Alert, Button } from 'react-bootstrap';
+import { Alert, Button } from 'react-bootstrap';
 import { Trans, withTranslation } from 'react-i18next';
 import { T9n } from 'meteor-accounts-t9n';
 
@@ -16,7 +16,7 @@ const handleResendVerificationEmail = (emailAddress, t) => {
 
 const ReSendEmail = props => (
   <div>
-  {props.userId && !props.emailVerified ? <Alert className="verify-email text-center"><p><Trans i18nKey="verifyEmail" values={{ email: props.emailAddress }} /> <Button bsStyle="link" onClick={() => handleResendVerificationEmail(props.emailAddress, props.t)} href="#"><Trans parent="span">Reenviar email de verificación</Trans></Button></p></Alert> : ''}
+  {props.userId && !props.emailVerified ? <Alert className="verify-email text-center"><p><Trans i18nKey="verifyEmail" values={{ email: props.emailAddress }} /> <Button variant="link" onClick={() => handleResendVerificationEmail(props.emailAddress, props.t)} href="#"><Trans parent="span">Reenviar email de verificación</Trans></Button></p></Alert> : ''}
   </div>
 );
 
diff --git a/imports/ui/components/SelectionMap/SelectionMap.js b/imports/ui/components/SelectionMap/SelectionMap.js
index 1954766..bfddc6f 100644
--- a/imports/ui/components/SelectionMap/SelectionMap.js
+++ b/imports/ui/components/SelectionMap/SelectionMap.js
@@ -241,7 +241,7 @@ class SelectionMap extends Component {
                   <ButtonGroup>
                     { this.props.sndBtn && this.props.onSndBtn &&
                       <Button
-                          bsStyle="warning"
+                          variant="warning"
                           title={this.props.sndBtnTitle}
                           onClick={event => this.onSndBtn(event)}
                       >
@@ -249,7 +249,7 @@ class SelectionMap extends Component {
                       </Button>
                     }
                       <Button
-                          bsStyle="success"
+                          variant="success"
                           disabled={this.props.disableFstBtn}
                           onClick={event => this.onFstBtn(event)}
                       >
diff --git a/imports/ui/layouts/App/App.js b/imports/ui/layouts/App/App.js
index 7ab58c0..32a5235 100644
--- a/imports/ui/layouts/App/App.js
+++ b/imports/ui/layouts/App/App.js
@@ -4,7 +4,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Router, Switch, Route } from 'react-router-dom';
-import { Grid } from 'react-bootstrap';
+import { Container } from 'react-bootstrap';
 import { I18nextProvider } from 'react-i18next';
 import { Helmet } from 'react-helmet-async';
 import { Meteor } from 'meteor/meteor';
@@ -115,7 +115,7 @@ const App = props => (
                 <Navigation {...props} />
                 <ReSendEmail {...props} />
 
-                <Grid>
+                <Container>
                   <Switch>
                     <Route exact name="index" path="/" component={Index} />
                     <Authenticated exact path="/subscriptions" component={Subscriptions} {...props} />
@@ -147,7 +147,7 @@ const App = props => (
 
                     <Route component={NotFound} />
                   </Switch>
-                </Grid>
+                </Container>
                 <Footer />
                 <Reconnect {...props} />
                 <Feedback {...props} />
diff --git a/imports/ui/pages/Documents/Documents.js b/imports/ui/pages/Documents/Documents.js
index e88bf4a..bfe9405 100644
--- a/imports/ui/pages/Documents/Documents.js
+++ b/imports/ui/pages/Documents/Documents.js
@@ -27,7 +27,7 @@ const Documents = ({ loading, documents, match, history }) => (!loading ? (
   <div className="Documents">
     <div className="page-header clearfix">
       <h4 className="pull-left">Documents</h4>
-      <Link className="btn btn-success pull-right" to={`${match.url}/new`}>Add Document</Link>
+      <Link className="btn btn-success float-end" to={`${match.url}/new`}>Add Document</Link>
     </div>
     {documents.length ? <Table responsive>
       <thead>
@@ -47,14 +47,14 @@ const Documents = ({ loading, documents, match, history }) => (!loading ? (
             <td>{monthDayYearAtTime(createdAt)}</td>
             <td>
               <Button
-                bsStyle="primary"
+                variant="primary"
                 onClick={() => history.push(`${match.url}/${_id}`)}
                 block
               >View</Button>
             </td>
             <td>
               <Button
-                bsStyle="danger"
+                variant="danger"
                 onClick={() => handleRemove(_id)}
                 block
               >Delete</Button>
@@ -62,7 +62,7 @@ const Documents = ({ loading, documents, match, history }) => (!loading ? (
           </tr>
         ))}
       </tbody>
-    </Table> : <Alert bsStyle="warning">No documents yet!</Alert>}
+    </Table> : <Alert variant="warning">No documents yet!</Alert>}
   </div>
 ) : <Loading />);
 
diff --git a/imports/ui/pages/Fires/Fires.js b/imports/ui/pages/Fires/Fires.js
index a234cc6..e005134 100644
--- a/imports/ui/pages/Fires/Fires.js
+++ b/imports/ui/pages/Fires/Fires.js
@@ -6,7 +6,7 @@ import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import { withTracker } from 'meteor/react-meteor-data';
 import { withTranslation, Trans } from 'react-i18next';
-import { Row, Col, Alert, FormGroup } from 'react-bootstrap';
+import { Row, Col, Alert, Form } from 'react-bootstrap';
 import { Meteor } from 'meteor/meteor';
 import { Bert } from 'meteor/themeteorchef:bert';
 import { Helmet } from 'react-helmet-async';
@@ -191,14 +191,14 @@ class Fire extends React.Component {
                 { (this.props.falsePositives.length > 0 || this.props.industries.length > 0) &&
                   <Row>
                     <Col>
-                      <Alert bsStyle="success"><Trans>Parece que este fuego no es un fuego forestal.</Trans></Alert>
+                      <Alert variant="success"><Trans>Parece que este fuego no es un fuego forestal.</Trans></Alert>
                     </Col>
                   </Row> }
                 <h5>{t('¿No es un fuego forestal?')}</h5>
                 <div>
                   <Trans>Indícanos de que tipo de fuego se trata y ayúdanos así a mejorar nuestras notificaciones:</Trans>
                 </div>
-                <FormGroup>
+                <Form.Group>
                   <div className="btn-group">
                     <button className="btn btn-secondary btn-sm dropdown-toggle lang-selector" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                       {t('Elige un tipo')}
@@ -217,7 +217,7 @@ class Fire extends React.Component {
                       }
                     </div>
                   </div>
-                </FormGroup>
+                </Form.Group>
               </Fragment> }
 
               <h4>{t('Comentarios')}</h4>
diff --git a/imports/ui/pages/FiresMap/FiresMap.js b/imports/ui/pages/FiresMap/FiresMap.js
index 9f9de83..fb15a05 100644
--- a/imports/ui/pages/FiresMap/FiresMap.js
+++ b/imports/ui/pages/FiresMap/FiresMap.js
@@ -4,7 +4,7 @@
 /* eslint-disable react/jsx-indent */
 import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
-import { ButtonGroup, Row, Col, Checkbox } from 'react-bootstrap';
+import { ButtonGroup, Row, Col, Form } from 'react-bootstrap';
 import { Meteor } from 'meteor/meteor';
 import { ReactiveVar } from 'meteor/reactive-var';
 import { withTracker } from 'meteor/react-meteor-data';
@@ -224,13 +224,21 @@ class FiresMap extends React.Component {
                      helpText=""
                      onChange={value => this.onAutocompleteChange(value)}
                  />
-                 <Checkbox inline={false} defaultChecked={this.state.showSubsUnion} onClick={e => this.setShowSubsUnion(e.target.checked)}>
-                   <Trans className="mark-checkbox" parent="span">Resaltar en verde el área vigilada por nuestros usuarios/as</Trans>&nbsp;(*)
-                 </Checkbox>
+                 <Form.Check
+                     type="checkbox"
+                     id="showSubsUnion"
+                     defaultChecked={this.state.showSubsUnion}
+                     onClick={e => this.setShowSubsUnion(e.target.checked)}
+                     label={<span><Trans className="mark-checkbox" parent="span">Resaltar en verde el área vigilada por nuestros usuarios/as</Trans>&nbsp;(*)</span>}
+                 />
                  {(this.state.viewport.zoom >= MAXZOOM) &&
-                  <Checkbox inline={false} defaultChecked={this.state.useMarkers} onClick={e => this.useMarkers(e.target.checked)}>
-                    <Trans className="mark-checkbox" parent="span">Resaltar los fuegos con un marcador</Trans>
-                  </Checkbox>}
+                  <Form.Check
+                      type="checkbox"
+                      id="useMarkers"
+                      defaultChecked={this.state.useMarkers}
+                      onClick={e => this.useMarkers(e.target.checked)}
+                      label={<Trans className="mark-checkbox" parent="span">Resaltar los fuegos con un marcador</Trans>}
+                  />}
                </Fragment>}
             </Col>
             <Col xs={12} sm={6} md={6} lg={6} >
diff --git a/imports/ui/pages/Login/Login.js b/imports/ui/pages/Login/Login.js
index 2c22f6c..6d93223 100644
--- a/imports/ui/pages/Login/Login.js
+++ b/imports/ui/pages/Login/Login.js
@@ -2,7 +2,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Row, FormGroup, ControlLabel, Button } from 'react-bootstrap';
+import { Row, Form, Button } from 'react-bootstrap';
 import { Link } from 'react-router-dom';
 import { Meteor } from 'meteor/meteor';
 import { Bert } from 'meteor/themeteorchef:bert';
@@ -87,28 +87,28 @@ class Login extends React.Component {
               </Col>
             </Row>
             <form ref={form => (this.form = form)} onSubmit={event => event.preventDefault()}>
-              <FormGroup>
-                <ControlLabel>{this.t('Correo electrónico')}</ControlLabel>
+              <Form.Group>
+                <Form.Label>{this.t('Correo electrónico')}</Form.Label>
                 <input
                   type="email"
                   name="emailAddress"
                   ref={emailAddress => (this.emailAddress = emailAddress)}
                   className="form-control"
                 />
-              </FormGroup>
-              <FormGroup>
-                <ControlLabel className="clearfix">
+              </Form.Group>
+              <Form.Group>
+                <Form.Label className="clearfix">
                   <span className="pull-left">{this.t('Contraseña')}</span>
-                  <Link className="pull-right" to="/recover-password">{this.t('¿Olvidaste tu contraseña?')}</Link>
-                </ControlLabel>
+                  <Link className="float-end" to="/recover-password">{this.t('¿Olvidaste tu contraseña?')}</Link>
+                </Form.Label>
                 <input
                   type="password"
                   name="password"
                   ref={password => (this.password = password)}
                   className="form-control"
                 />
-              </FormGroup>
-              <Button id={testId('loginSubmit')} type="submit" bsStyle="success">{this.t('Iniciar sesión')}</Button>
+              </Form.Group>
+              <Button id={testId('loginSubmit')} type="submit" variant="success">{this.t('Iniciar sesión')}</Button>
               <AccountPageFooter>
                 <p>{this.t('¿No tienes una cuenta?')} <Link to="/signup">{this.t('Regístrate')}</Link>.</p>
               </AccountPageFooter>
diff --git a/imports/ui/pages/NotFound/NotFound.js b/imports/ui/pages/NotFound/NotFound.js
index 9c1d6ea..55f2922 100644
--- a/imports/ui/pages/NotFound/NotFound.js
+++ b/imports/ui/pages/NotFound/NotFound.js
@@ -8,7 +8,7 @@ const NotFound = () => (
     <Helmet>
       <title>This page doesn't exist"</title>
     </Helmet>
-    <Alert bsStyle="danger">
+    <Alert variant="danger">
       <p>
         <Trans i18nKey="not-found">Upppps: Esta página no existe</Trans>
       </p>
diff --git a/imports/ui/pages/Profile/Profile.js b/imports/ui/pages/Profile/Profile.js
index 8b8c6c6..e381bda 100644
--- a/imports/ui/pages/Profile/Profile.js
+++ b/imports/ui/pages/Profile/Profile.js
@@ -3,7 +3,7 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Row, FormGroup, ControlLabel, Button } from 'react-bootstrap';
+import { Row, Form, Button } from 'react-bootstrap';
 import _ from 'lodash';
 import { Meteor } from 'meteor/meteor';
 import { Accounts } from 'meteor/accounts-base';
@@ -164,8 +164,8 @@ class Profile extends React.Component {
     return !loading ? (<div>
       <Row>
         <Col xs={6}>
-          <FormGroup>
-            <ControlLabel>{this.t('Nombre')}</ControlLabel>
+          <Form.Group>
+            <Form.Label>{this.t('Nombre')}</Form.Label>
             <input
               type="text"
               name="firstName"
@@ -173,11 +173,11 @@ class Profile extends React.Component {
               ref={firstName => (this.firstName = firstName)}
               className="form-control"
             />
-          </FormGroup>
+          </Form.Group>
         </Col>
         <Col xs={6}>
-          <FormGroup>
-            <ControlLabel>{this.t('Apellidos')}</ControlLabel>
+          <Form.Group>
+            <Form.Label>{this.t('Apellidos')}</Form.Label>
             <input
               type="text"
               name="lastName"
@@ -185,11 +185,11 @@ class Profile extends React.Component {
               ref={lastName => (this.lastName = lastName)}
               className="form-control"
             />
-          </FormGroup>
+          </Form.Group>
         </Col>
       </Row>
-      <FormGroup>
-        <ControlLabel>{this.t('Correo electrónico')}</ControlLabel>
+      <Form.Group>
+        <Form.Label>{this.t('Correo electrónico')}</Form.Label>
         <input
           type="email"
           name="emailAddress"
@@ -197,9 +197,9 @@ class Profile extends React.Component {
           ref={emailAddress => (this.emailAddress = emailAddress)}
           className="form-control"
         />
-      </FormGroup>
-      <FormGroup>
-        <ControlLabel>{this.t('Idioma')}</ControlLabel>
+      </Form.Group>
+      <Form.Group>
+        <Form.Label>{this.t('Idioma')}</Form.Label>
         <div className="btn-group">
           <button className="btn btn-secondary btn-sm dropdown-toggle lang-selector" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
             {langName[i18n.language]}
@@ -219,18 +219,18 @@ class Profile extends React.Component {
           </div>
         </div>
         <InputHint><i className="fa fa-language"></i> <a href="https://translate.comunes.org/projects/todos-contra-el-fuego/" rel="noopener noreferrer" target="_blank">{this.t('Puedes participar en las traducciones')}</a></InputHint>
-      </FormGroup>
-      <FormGroup>
-        <ControlLabel>{this.t('Contraseña actual')}</ControlLabel>
+      </Form.Group>
+      <Form.Group>
+        <Form.Label>{this.t('Contraseña actual')}</Form.Label>
         <input
           type="password"
           name="currentPassword"
           ref={currentPassword => (this.currentPassword = currentPassword)}
           className="form-control"
         />
-      </FormGroup>
-      <FormGroup>
-        <ControlLabel>{this.t('Nueva contraseña')}</ControlLabel>
+      </Form.Group>
+      <Form.Group>
+        <Form.Label>{this.t('Nueva contraseña')}</Form.Label>
         <input
           type="password"
           name="newPassword"
@@ -238,8 +238,8 @@ class Profile extends React.Component {
           className="form-control"
         />
         <InputHint>{this.t('Usa al menos seis caracteres.')}</InputHint>
-      </FormGroup>
-      <Button id={testId('profileSubmit')} type="submit" bsStyle="success">{this.t('Guardar perfíl')}</Button>
+      </Form.Group>
+      <Button id={testId('profileSubmit')} type="submit" variant="success">{this.t('Guardar perfíl')}</Button>
     </div>) : <div />;
   }
 
diff --git a/imports/ui/pages/RecoverPassword/RecoverPassword.js b/imports/ui/pages/RecoverPassword/RecoverPassword.js
index 38d7ed8..80de5b6 100644
--- a/imports/ui/pages/RecoverPassword/RecoverPassword.js
+++ b/imports/ui/pages/RecoverPassword/RecoverPassword.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Row, Alert, FormGroup, ControlLabel, Button } from 'react-bootstrap';
+import { Row, Alert, Form, Button } from 'react-bootstrap';
 import Col from '../../components/Col/Col';
 import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
@@ -61,20 +61,20 @@ class RecoverPassword extends React.Component {
         </Helmet>
         <Col xs={12} sm={6} md={5} lg={4}>
           <h4 className="page-header">{this.t('Recupera tu contraseña')}</h4>
-          <Alert bsStyle="info">
+          <Alert variant="info">
             {this.t('Introduce tu correo abajo para recibir un enlace para resetear tu contraseña.')}
           </Alert>
           <form ref={form => (this.form = form)} onSubmit={event => event.preventDefault()}>
-            <FormGroup>
-              <ControlLabel>{this.t('Correo electrónico')}</ControlLabel>
+            <Form.Group>
+              <Form.Label>{this.t('Correo electrónico')}</Form.Label>
               <input
                 type="email"
                 name="emailAddress"
                 ref={emailAddress => (this.emailAddress = emailAddress)}
                 className="form-control"
               />
-            </FormGroup>
-            <Button type="submit" bsStyle="success">{this.t('Recupera tu contraseña')}</Button>
+            </Form.Group>
+            <Button type="submit" variant="success">{this.t('Recupera tu contraseña')}</Button>
             <AccountPageFooter>
               <p>{this.t('¿Recuerdas tu contraseña?')} <Link to="/login">{this.t('Iniciar sesión')}</Link>.</p>
             </AccountPageFooter>
diff --git a/imports/ui/pages/ResetPassword/ResetPassword.js b/imports/ui/pages/ResetPassword/ResetPassword.js
index a47975b..72e4b4f 100644
--- a/imports/ui/pages/ResetPassword/ResetPassword.js
+++ b/imports/ui/pages/ResetPassword/ResetPassword.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Row, Alert, FormGroup, ControlLabel, Button } from 'react-bootstrap';
+import { Row, Alert, Form, Button } from 'react-bootstrap';
 import Col from '../../components/Col/Col';
 import { Accounts } from 'meteor/accounts-base';
 import { Bert } from 'meteor/themeteorchef:bert';
@@ -67,12 +67,12 @@ class ResetPassword extends React.Component {
         </Helmet>
         <Col xs={12} sm={6} md={4}>
           <h4 className="page-header">{this.t("Resetea tu contraseña")}</h4>
-          <Alert bsStyle="info">
+          <Alert variant="info">
             { this.t("Para resetear tu contraseña, introduce una nueva debajo. Iniciarás la sesión con la nueva contraseña.") }
           </Alert>
           <form ref={form => (this.form = form)} onSubmit={event => event.preventDefault()}>
-            <FormGroup>
-              <ControlLabel>{this.t("Nueva contraseña")}</ControlLabel>
+            <Form.Group>
+              <Form.Label>{this.t("Nueva contraseña")}</Form.Label>
               <input
                 type="password"
                 className="form-control"
@@ -80,9 +80,9 @@ class ResetPassword extends React.Component {
                 name="newPassword"
                 placeholder={this.t("Nueva contraseña")}
               />
-            </FormGroup>
-            <FormGroup>
-              <ControlLabel>{this.t("Repite la nueva contraseña")}</ControlLabel>
+            </Form.Group>
+            <Form.Group>
+              <Form.Label>{this.t("Repite la nueva contraseña")}</Form.Label>
               <input
                 type="password"
                 className="form-control"
@@ -90,8 +90,8 @@ class ResetPassword extends React.Component {
                 name="repeatNewPassword"
                 placeholder={this.t("Repite la nueva contraseña")}
               />
-            </FormGroup>
-            <Button type="submit" bsStyle="success">{this.t("Resetea la contraseña y entra")}</Button>
+            </Form.Group>
+            <Button type="submit" variant="success">{this.t("Resetea la contraseña y entra")}</Button>
           </form>
         </Col>
       </Row>
diff --git a/imports/ui/pages/Signup/Signup.js b/imports/ui/pages/Signup/Signup.js
index 04758ff..964db13 100644
--- a/imports/ui/pages/Signup/Signup.js
+++ b/imports/ui/pages/Signup/Signup.js
@@ -2,7 +2,7 @@
 /* eslint-disable import/no-absolute-path */
 
 import React from 'react';
-import { Row, FormGroup, ControlLabel, Button, Checkbox } from 'react-bootstrap';
+import { Row, Form, Button } from 'react-bootstrap';
 import PropTypes from 'prop-types';
 import { Link } from 'react-router-dom';
 import { Meteor } from 'meteor/meteor';
@@ -152,39 +152,39 @@ class Signup extends React.Component {
           <form ref={form => (this.form = form)} onSubmit={event => event.preventDefault()}>
             <Row>
               <Col xs={6}>
-                <FormGroup>
-                  <ControlLabel>{t('Nombre')}</ControlLabel>
+                <Form.Group>
+                  <Form.Label>{t('Nombre')}</Form.Label>
                   <input
                     type="text"
                     name="firstName"
                     ref={firstName => (this.firstName = firstName)}
                     className="form-control"
                   />
-                </FormGroup>
+                </Form.Group>
               </Col>
               <Col xs={6}>
-                <FormGroup>
-                  <ControlLabel>{t('Apellidos')}</ControlLabel>
+                <Form.Group>
+                  <Form.Label>{t('Apellidos')}</Form.Label>
                   <input
                     type="text"
                     name="lastName"
                     ref={lastName => (this.lastName = lastName)}
                     className="form-control"
                   />
-                </FormGroup>
+                </Form.Group>
               </Col>
             </Row>
-            <FormGroup>
-              <ControlLabel>{t('Correo electrónico')}</ControlLabel>
+            <Form.Group>
+              <Form.Label>{t('Correo electrónico')}</Form.Label>
               <input
                 type="email"
                 name="emailAddress"
                 ref={emailAddress => (this.emailAddress = emailAddress)}
                 className="form-control"
               />
-            </FormGroup>
-            <FormGroup>
-              <ControlLabel>{t('Contraseña')}</ControlLabel>
+            </Form.Group>
+            <Form.Group>
+              <Form.Label>{t('Contraseña')}</Form.Label>
               <input
                 type="password"
                 name="password"
@@ -192,12 +192,17 @@ class Signup extends React.Component {
                 className="form-control"
               />
               <InputHint>{t('Usa al menos seis caracteres.')}</InputHint>
-            </FormGroup>
-            <Checkbox inline={false} name="tos" defaultChecked={this.state.termsAccept} onClick={e => this.setTermsAccept(e.target.checked)}>
-              <Trans className="mark-checkbox" parent="span" i18nKey="termsAccept">Acepto las <a target="_blank" href="/terms">condiciones de servicio</a> de este sitio</Trans>
-            </Checkbox>
+            </Form.Group>
+            <Form.Check
+                type="checkbox"
+                id="tos"
+                name="tos"
+                defaultChecked={this.state.termsAccept}
+                onClick={e => this.setTermsAccept(e.target.checked)}
+                label={<Trans className="mark-checkbox" parent="span" i18nKey="termsAccept">Acepto las <a target="_blank" href="/terms">condiciones de servicio</a> de este sitio</Trans>}
+            />
 
-            <Button id={testId('signUpSubmit')} type="submit" disabled={!this.state.termsAccept} bsStyle="success">{t('Registrarse')}</Button>
+            <Button id={testId('signUpSubmit')} type="submit" disabled={!this.state.termsAccept} variant="success">{t('Registrarse')}</Button>
             <AccountPageFooter>
               <p>{t('¿Ya tienes un cuenta?')} <Link to={{ pathname: '/login', state: this.state }} >{t('Iniciar sesión')}</Link>.</p>
             </AccountPageFooter>
diff --git a/imports/ui/pages/Subscriptions/Subscriptions.js b/imports/ui/pages/Subscriptions/Subscriptions.js
index 1f381b4..3eb682c 100644
--- a/imports/ui/pages/Subscriptions/Subscriptions.js
+++ b/imports/ui/pages/Subscriptions/Subscriptions.js
@@ -91,11 +91,11 @@ class Subscriptions extends Component {
         </Helmet>
         <h4 className="page-header"><Trans>Suscripciones a alertas de fuegos en zonas de mi interés</Trans></h4>
       { subscriptions.length === 0 ?
-        <Alert bsStyle="warning"><Trans>No estás suscrito a fuegos en ninguna zona</Trans></Alert> :
-        <Alert bsStyle="success"><Trans>En verde, áreas de las que recibirás alertas de fuegos</Trans></Alert>
+        <Alert variant="warning"><Trans>No estás suscrito a fuegos en ninguna zona</Trans></Alert> :
+        <Alert variant="success"><Trans>En verde, áreas de las que recibirás alertas de fuegos</Trans></Alert>
       }
         { maxDistance && maxDistance.distance > 20 &&
-          <Alert bsStyle="warning"><Trans>Estás subscrito a una zona muy grande</Trans></Alert>
+          <Alert variant="warning"><Trans>Estás subscrito a una zona muy grande</Trans></Alert>
         }
         <br />
         <SelectionMap
diff --git a/imports/ui/pages/Subscriptions/SubscriptionsMap.js b/imports/ui/pages/Subscriptions/SubscriptionsMap.js
index 4d19c93..c65dd85 100644
--- a/imports/ui/pages/Subscriptions/SubscriptionsMap.js
+++ b/imports/ui/pages/Subscriptions/SubscriptionsMap.js
@@ -135,7 +135,7 @@ class SubscriptionsMap extends React.Component {
              <ButtonGroup>
                <CenterInMyPosition onClick={viewport => this.centerOnUserLocation(viewport)} onlyIcon {... this.props} />
                <Button
-                   bsStyle="success"
+                   variant="success"
                    onClick={() => { this.gotoParticipe(); }}
                >
                  {this.props.t('Participa')}
diff --git a/imports/ui/pages/VerifyEmail/VerifyEmail.js b/imports/ui/pages/VerifyEmail/VerifyEmail.js
index 03a663b..4f3b95b 100644
--- a/imports/ui/pages/VerifyEmail/VerifyEmail.js
+++ b/imports/ui/pages/VerifyEmail/VerifyEmail.js
@@ -36,7 +36,7 @@ class VerifyEmail extends React.Component {
       <Helmet>
         <title>{this.t('AppName')}: {this.t('Verifica tu dirección de correo')}</title>
       </Helmet>
-      <Alert bsStyle={!this.state.error ? 'info' : 'danger'}>
+      <Alert variant={!this.state.error ? 'info' : 'danger'}>
         {!this.state.error ? this.t('Verificando...') : this.state.error}
       </Alert>
     </div>);
diff --git a/imports/ui/pages/ViewDocument/ViewDocument.js b/imports/ui/pages/ViewDocument/ViewDocument.js
index 9c97ded..f8e6b13 100644
--- a/imports/ui/pages/ViewDocument/ViewDocument.js
+++ b/imports/ui/pages/ViewDocument/ViewDocument.js
@@ -25,8 +25,8 @@ const renderDocument = (doc, match, history) => (doc ? (
   <div className="ViewDocument">
     <div className="page-header clearfix">
       <h4 className="pull-left">{ doc && doc.title }</h4>
-      <ButtonToolbar className="pull-right">
-        <ButtonGroup bsSize="small">
+      <ButtonToolbar className="float-end">
+        <ButtonGroup size="sm">
           <Button onClick={() => history.push(`${match.url}/edit`)}>Edit</Button>
           <Button onClick={() => handleRemove(doc._id, history)} className="text-danger">
             Delete
diff --git a/imports/ui/pages/ViewSubscription/ViewSubscription.js b/imports/ui/pages/ViewSubscription/ViewSubscription.js
index 11431ae..de83286 100644
--- a/imports/ui/pages/ViewSubscription/ViewSubscription.js
+++ b/imports/ui/pages/ViewSubscription/ViewSubscription.js
@@ -25,8 +25,8 @@ const renderSubscription = (doc, match, history) => (doc ? (
   <div className="ViewSubscription">
     <div className="page-header clearfix">
       <h4 className="pull-left">{ doc && doc.title }</h4>
-      <ButtonToolbar className="pull-right">
-        <ButtonGroup bsSize="small">
+      <ButtonToolbar className="float-end">
+        <ButtonGroup size="sm">
           <Button onClick={() => history.push(`${match.url}/edit`)}>Edit</Button>
           <Button onClick={() => handleRemove(doc._id, history)} className="text-danger">
             Delete
diff --git a/imports/ui/stylesheets/forms.scss b/imports/ui/stylesheets/forms.scss
index 429a169..432ba91 100644
--- a/imports/ui/stylesheets/forms.scss
+++ b/imports/ui/stylesheets/forms.scss
@@ -1,12 +1,22 @@
 @use './mixins' as *;
 @use './colors' as *;
 
+// react-bootstrap v2 emits Bootstrap 5 form markup (`.form-label`) while we
+// still ship the Bootstrap 4 stylesheet (alexwine:bootstrap-4), which has no
+// `.form-label`. Shim it until the Bootstrap 4 -> 5 CSS jump lands (tracked as
+// debt in UPGRADE.md). v2's Form.Group is a plain div, so restore the old
+// per-field bottom margin the removed `.form-group` used to give.
+.form-label {
+  display: block;
+  margin-bottom: 0.5rem;
+}
+
 form {
   label,
   .control-label {
     display: block;
   }
-  
+
   label.error {
     display: block;
     margin-top: 8px;
diff --git a/package-lock.json b/package-lock.json
index d3dd3a0..2f144a0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -60,7 +60,7 @@
         "rc-slider": "^8.5.0",
         "rc-tooltip": "^3.7.0",
         "react": "^18.3.1",
-        "react-bootstrap": "^0.31.5",
+        "react-bootstrap": "^2.10.10",
         "react-confirm": "^0.1.16",
         "react-dom": "^18.3.1",
         "react-helmet-async": "^2.0.5",
@@ -115,6 +115,33 @@
         "moment-timezone": "^0.5.13"
       }
     },
+    "node_modules/@internationalized/date": {
+      "version": "3.12.2",
+      "resolved": "https://registry.npmjs.org/@internationalized/date/-/date-3.12.2.tgz",
+      "integrity": "sha512-FY1Y+H64NDs+HAF6omlnWxm3mEpfgaCSWtL5l551ZZfImA+kGjPFgrnJrGjH6lfmLL0g8Z/mBu1R3kufeCp6Jw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0"
+      }
+    },
+    "node_modules/@internationalized/number": {
+      "version": "3.6.7",
+      "resolved": "https://registry.npmjs.org/@internationalized/number/-/number-3.6.7.tgz",
+      "integrity": "sha512-3ji1fcrT+FPAK86UqEhB/psHixYo6niWPJtt7+qRaYFynt/BaJG8GhAPimtWUpEiVSTq8ZM8L5psMxGquiB/Vg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0"
+      }
+    },
+    "node_modules/@internationalized/string": {
+      "version": "3.2.9",
+      "resolved": "https://registry.npmjs.org/@internationalized/string/-/string-3.2.9.tgz",
+      "integrity": "sha512-kzP/M/mbQxODlmOt4bIQZ2SBVUWUSqMLXooXixnX7noche8WHaQcA+nwFN1K2KCF/cp+LDUhcJsCicwkvhD1pg==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0"
+      }
+    },
     "node_modules/@mapbox/node-pre-gyp": {
       "version": "1.0.11",
       "resolved": "https://registry.npmjs.org/@mapbox/node-pre-gyp/-/node-pre-gyp-1.0.11.tgz",
@@ -1324,6 +1351,16 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/@prisma/instrumentation": {
       "version": "5.22.0",
       "resolved": "https://registry.npmjs.org/@prisma/instrumentation/-/instrumentation-5.22.0.tgz",
@@ -1379,6 +1416,95 @@
         "node": ">=10"
       }
     },
+    "node_modules/@react-aria/ssr": {
+      "version": "3.10.1",
+      "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.10.1.tgz",
+      "integrity": "sha512-jn038/ZYmu6DpfXJ6r2U9zFFppjbc9wnApPJSCxao2RZVEqep4YyoniHSy8qv6V21/xyS4IV7W9a+X2jOjSuag==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0",
+        "react-aria": "^3.48.0"
+      },
+      "engines": {
+        "node": ">= 12"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1",
+        "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+      }
+    },
+    "node_modules/@react-types/shared": {
+      "version": "3.36.0",
+      "resolved": "https://registry.npmjs.org/@react-types/shared/-/shared-3.36.0.tgz",
+      "integrity": "sha512-DkP/H0C2YjjS7gZWKNqOmU8a16qHPjQNdzMwmTq9SzplM6Iw0kVMTZ0OIoe6FOgGqa+FwMsE2QbPjh/n3g/jXQ==",
+      "license": "Apache-2.0",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+      }
+    },
+    "node_modules/@restart/hooks": {
+      "version": "0.4.16",
+      "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.4.16.tgz",
+      "integrity": "sha512-f7aCv7c+nU/3mF7NWLtVVr0Ra80RqsO89hO72r+Y/nvQr5+q0UFGkocElTH6MJApvReVh6JHUFYn2cw1WdHF3w==",
+      "license": "MIT",
+      "dependencies": {
+        "dequal": "^2.0.3"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@restart/ui": {
+      "version": "1.9.4",
+      "resolved": "https://registry.npmjs.org/@restart/ui/-/ui-1.9.4.tgz",
+      "integrity": "sha512-N4C7haUc3vn4LTwVUPlkJN8Ach/+yIMvRuTVIhjilNHqegY60SGLrzud6errOMNJwSnmYFnt1J0H/k8FE3A4KA==",
+      "license": "MIT",
+      "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"
+      },
+      "peerDependencies": {
+        "react": ">=16.14.0",
+        "react-dom": ">=16.14.0"
+      }
+    },
+    "node_modules/@restart/ui/node_modules/@restart/hooks": {
+      "version": "0.5.1",
+      "resolved": "https://registry.npmjs.org/@restart/hooks/-/hooks-0.5.1.tgz",
+      "integrity": "sha512-EMoH04NHS1pbn07iLTjIjgttuqb7qu4+/EyhAx27MHpoENcB2ZdSsLTNxmKD+WEPnZigo62Qc8zjGnNxoSE/5Q==",
+      "license": "MIT",
+      "dependencies": {
+        "dequal": "^2.0.3"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@restart/ui/node_modules/uncontrollable": {
+      "version": "8.0.4",
+      "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-8.0.4.tgz",
+      "integrity": "sha512-ulRWYWHvscPFc0QQXvyJjY6LIXU56f0h8pQFvhxiKk5V1fcI8gp9Ht9leVAhrVjzqMw0BgjspBINx9r6oyJUvQ==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">=16.14.0"
+      }
+    },
+    "node_modules/@restart/ui/node_modules/warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "node_modules/@sentry-internal/browser-utils": {
       "version": "8.55.2",
       "resolved": "https://registry.npmjs.org/@sentry-internal/browser-utils/-/browser-utils-8.55.2.tgz",
@@ -1520,6 +1646,15 @@
         "@opentelemetry/semantic-conventions": "^1.28.0"
       }
     },
+    "node_modules/@swc/helpers": {
+      "version": "0.5.23",
+      "resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.23.tgz",
+      "integrity": "sha512-5lSsMOTXURePglDfvuAQUqkGek9Hg2kksOYay2m0+XR++b2NWYL/4sWyuvVBIs8oKnJaxkdi9whaL/sqN13afw==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "tslib": "^2.8.0"
+      }
+    },
     "node_modules/@turf/bbox": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/@turf/bbox/-/bbox-6.0.1.tgz",
@@ -1738,6 +1873,30 @@
         "@types/pg": "*"
       }
     },
+    "node_modules/@types/prop-types": {
+      "version": "15.7.15",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.15.tgz",
+      "integrity": "sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==",
+      "license": "MIT"
+    },
+    "node_modules/@types/react": {
+      "version": "19.2.17",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.17.tgz",
+      "integrity": "sha512-MXfmqaVPEVgkBT/aY0aGCkRWWtByiYQXo3xdQ8r5RzuFrPiRn8Gar2tQdXSUQ2GKV3bkXckek89V8wQBY2Q/Aw==",
+      "license": "MIT",
+      "dependencies": {
+        "csstype": "^3.2.2"
+      }
+    },
+    "node_modules/@types/react-transition-group": {
+      "version": "4.4.12",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.12.tgz",
+      "integrity": "sha512-8TV6R3h2j7a91c+1DXdJi3Syo69zzIZbz7Lg5tORM5LEJG7X/E6a1V3drRyBRZq7/utz7A+c4OgYLiLcYGHG6w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/shimmer": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@types/shimmer/-/shimmer-1.2.0.tgz",
@@ -1753,6 +1912,12 @@
         "@types/node": "*"
       }
     },
+    "node_modules/@types/warning": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/warning/-/warning-3.0.4.tgz",
+      "integrity": "sha512-CqN8MnISMwQbLJXO3doBAV4Yw9hx9/Pyr2rZ78+NfaCnhyRA/nKrpyk6E7mKw17ZOaQdLpK9GiUjrqLzBlN3sg==",
+      "license": "MIT"
+    },
     "node_modules/abab": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/abab/-/abab-1.0.4.tgz",
@@ -1967,6 +2132,18 @@
         "sprintf-js": "~1.0.2"
       }
     },
+    "node_modules/aria-hidden": {
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.6.tgz",
+      "integrity": "sha512-ik3ZgC9dY/lYVVM++OISsaYDeg1tb0VtP5uL3ouh1koGOaUMDPpbFIei4JkFimWUFPn90sbMNMXQAIVOlnYKJA==",
+      "license": "MIT",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/aria-query": {
       "version": "0.7.0",
       "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-0.7.0.tgz",
@@ -4158,9 +4335,10 @@
       "license": "MIT"
     },
     "node_modules/classnames": {
-      "version": "2.2.5",
-      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.5.tgz",
-      "integrity": "sha1-+zgB1FNGdknvNgPH1hoCvRKb3m0="
+      "version": "2.5.1",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
+      "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==",
+      "license": "MIT"
     },
     "node_modules/cli-cursor": {
       "version": "2.1.0",
@@ -4208,6 +4386,15 @@
         "node": ">=0.8"
       }
     },
+    "node_modules/clsx": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
+      "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/co": {
       "version": "4.6.0",
       "integrity": "sha1-bqa989hTrlTMuOR7+gvz+QMfsYQ=",
@@ -4627,6 +4814,12 @@
         "cssom": "0.3.x"
       }
     },
+    "node_modules/csstype": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
+      "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
+      "license": "MIT"
+    },
     "node_modules/d": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/d/-/d-1.0.0.tgz",
@@ -4770,6 +4963,15 @@
       "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
       "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o="
     },
+    "node_modules/dequal": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/dequal/-/dequal-2.0.3.tgz",
+      "integrity": "sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/detect-indent": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/detect-indent/-/detect-indent-4.0.0.tgz",
@@ -4824,9 +5026,14 @@
       "integrity": "sha512-yBCGmhzj6SRaeAJlFUK/iMDh6bBpQE7EuChyPnrV8LQFV3vo3XghZw2lgHgj/8o9USFunVlvJ6YXfQWVdGnV8Q=="
     },
     "node_modules/dom-helpers": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-3.2.1.tgz",
-      "integrity": "sha1-MgPgf+0he9H0JLAZc1WC/Deyglo="
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
     },
     "node_modules/dom-serializer": {
       "version": "0.1.0",
@@ -10905,11 +11112,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/keycode": {
-      "version": "2.1.9",
-      "resolved": "https://registry.npmjs.org/keycode/-/keycode-2.1.9.tgz",
-      "integrity": "sha1-lkojxU5IiUBbSGGlyfBIDUUUHfo="
-    },
     "node_modules/kind-of": {
       "version": "3.2.2",
       "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
@@ -19087,16 +19289,27 @@
       }
     },
     "node_modules/prop-types-extra": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.0.1.tgz",
-      "integrity": "sha1-pXvUgQ6C0no/9DF+zBtK0AX3moI=",
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/prop-types-extra/-/prop-types-extra-1.1.1.tgz",
+      "integrity": "sha512-59+AHNnHYCdiC+vMwY52WmvP5dM3QLeoumYuEyceQDi9aEhtwN9zIQ2ZNo25sMyXnbh32h+P1ezDsUpUH3JAew==",
+      "license": "MIT",
       "dependencies": {
-        "warning": "^3.0.0"
+        "react-is": "^16.3.2",
+        "warning": "^4.0.0"
       },
       "peerDependencies": {
         "react": ">=0.14.0"
       }
     },
+    "node_modules/prop-types-extra/node_modules/warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
+      }
+    },
     "node_modules/prr": {
       "version": "0.0.0",
       "resolved": "https://registry.npmjs.org/prr/-/prr-0.0.0.tgz",
@@ -19287,25 +19500,65 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/react-bootstrap": {
-      "version": "0.31.5",
-      "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-0.31.5.tgz",
-      "integrity": "sha512-xgDihgX4QvYHmHzL87faDBMDnGfYyqcrqV0TEbWY+JizePOG1vfb8M3xJN+6MJ3kUYqDtQSZ7v/Q6Y5YDrkMdA==",
+    "node_modules/react-aria": {
+      "version": "3.50.0",
+      "resolved": "https://registry.npmjs.org/react-aria/-/react-aria-3.50.0.tgz",
+      "integrity": "sha512-S0Os6QZk33fzUAKu1QLT9afoUaCBt1ZNdoiq0n2YMVgKIdNIQS8zxiZ8O9hYE6QyDkHKjD6q39LQZ+qaSAIgjw==",
+      "license": "Apache-2.0",
       "dependencies": {
-        "babel-runtime": "^6.11.6",
-        "classnames": "^2.2.5",
-        "dom-helpers": "^3.2.0",
-        "invariant": "^2.2.1",
-        "keycode": "^2.1.2",
-        "prop-types": "^15.5.10",
-        "prop-types-extra": "^1.0.1",
-        "react-overlays": "^0.7.4",
-        "uncontrollable": "^4.1.0",
-        "warning": "^3.0.0"
+        "@internationalized/date": "^3.12.2",
+        "@internationalized/number": "^3.6.7",
+        "@internationalized/string": "^3.2.9",
+        "@react-types/shared": "^3.36.0",
+        "@swc/helpers": "^0.5.0",
+        "aria-hidden": "^1.2.3",
+        "clsx": "^2.0.0",
+        "react-stately": "3.48.0",
+        "use-sync-external-store": "^1.6.0"
       },
       "peerDependencies": {
-        "react": "^0.14.9 || >=15.3.0",
-        "react-dom": "^0.14.9 || >=15.3.0"
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1",
+        "react-dom": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+      }
+    },
+    "node_modules/react-bootstrap": {
+      "version": "2.10.10",
+      "resolved": "https://registry.npmjs.org/react-bootstrap/-/react-bootstrap-2.10.10.tgz",
+      "integrity": "sha512-gMckKUqn8aK/vCnfwoBpBVFUGT9SVQxwsYrp9yDHt0arXMamxALerliKBxr1TPbntirK/HGrUAHYbAeQTa9GHQ==",
+      "license": "MIT",
+      "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"
+      },
+      "peerDependencies": {
+        "@types/react": ">=16.14.8",
+        "react": ">=16.14.0",
+        "react-dom": ">=16.14.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-bootstrap/node_modules/warning": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz",
+      "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.0.0"
       }
     },
     "node_modules/react-confirm": {
@@ -19441,6 +19694,12 @@
         "loose-envify": "^1.0.0"
       }
     },
+    "node_modules/react-lifecycles-compat": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz",
+      "integrity": "sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==",
+      "license": "MIT"
+    },
     "node_modules/react-mobile-store-button": {
       "version": "0.0.3",
       "resolved": "https://registry.npmjs.org/react-mobile-store-button/-/react-mobile-store-button-0.0.3.tgz",
@@ -19468,22 +19727,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/react-overlays": {
-      "version": "0.7.4",
-      "resolved": "https://registry.npmjs.org/react-overlays/-/react-overlays-0.7.4.tgz",
-      "integrity": "sha512-7vsooMx3siLAuEfTs8FYeP/lAORWWFXTO8PON3KgX0Htq1Oa+po6ioSjGyO0/GO5CVSMNhpWt6V2opeexHgBuQ==",
-      "dependencies": {
-        "classnames": "^2.2.5",
-        "dom-helpers": "^3.2.1",
-        "prop-types": "^15.5.10",
-        "prop-types-extra": "^1.0.1",
-        "warning": "^3.0.0"
-      },
-      "peerDependencies": {
-        "react": "^0.14.9 || >=15.3.0",
-        "react-dom": "^0.14.9 || >=15.3.0"
-      }
-    },
     "node_modules/react-places-autocomplete": {
       "version": "5.4.3",
       "resolved": "https://registry.npmjs.org/react-places-autocomplete/-/react-places-autocomplete-5.4.3.tgz",
@@ -19631,6 +19874,39 @@
         "react": "^0.13.0 || ^0.14.0 || ^15.0.0 || ^16.0.0-0"
       }
     },
+    "node_modules/react-stately": {
+      "version": "3.48.0",
+      "resolved": "https://registry.npmjs.org/react-stately/-/react-stately-3.48.0.tgz",
+      "integrity": "sha512-ImicSAG+lTotAe5izcs1fz49Zk48w7pDusqYg04WaPhCoej8BJ24soMu3iLXIrsi273s4P1gZrYGrqReMfgEEA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@internationalized/date": "^3.12.2",
+        "@internationalized/number": "^3.6.7",
+        "@internationalized/string": "^3.2.9",
+        "@react-types/shared": "^3.36.0",
+        "@swc/helpers": "^0.5.0",
+        "use-sync-external-store": "^1.6.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0-rc.1"
+      }
+    },
+    "node_modules/react-transition-group": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
+      "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.6.0",
+        "react-dom": ">=16.6.0"
+      }
+    },
     "node_modules/read-pkg": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-1.1.0.tgz",
@@ -21091,6 +21367,12 @@
       "integrity": "sha1-OTvnMKlEb9Hq1tpZoBQwjzbCics=",
       "dev": true
     },
+    "node_modules/tslib": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
+      "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
+      "license": "0BSD"
+    },
     "node_modules/tunnel-agent": {
       "version": "0.6.0",
       "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.6.0.tgz",
@@ -21172,14 +21454,27 @@
       "optional": true
     },
     "node_modules/uncontrollable": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-4.1.0.tgz",
-      "integrity": "sha1-4DWCkSUuGGUiLZCTmxny9J+Bwak=",
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/uncontrollable/-/uncontrollable-7.2.1.tgz",
+      "integrity": "sha512-svtcfoTADIB0nT9nltgjujTi7BzVmwjZClOmskKu/E8FW9BXzg9os8OLr4f8Dlnk0rYWJIWr4wv9eKUXiQvQwQ==",
+      "license": "MIT",
       "dependencies": {
-        "invariant": "^2.1.0"
+        "@babel/runtime": "^7.6.3",
+        "@types/react": ">=16.9.11",
+        "invariant": "^2.2.4",
+        "react-lifecycles-compat": "^3.0.4"
       },
       "peerDependencies": {
-        "react": ">=0.11.0"
+        "react": ">=15.0.0"
+      }
+    },
+    "node_modules/use-sync-external-store": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz",
+      "integrity": "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
       }
     },
     "node_modules/util-deprecate": {
diff --git a/package.json b/package.json
index e1e369d..188d49e 100644
--- a/package.json
+++ b/package.json
@@ -60,7 +60,7 @@
     "rc-slider": "^8.5.0",
     "rc-tooltip": "^3.7.0",
     "react": "^18.3.1",
-    "react-bootstrap": "^0.31.5",
+    "react-bootstrap": "^2.10.10",
     "react-confirm": "^0.1.16",
     "react-dom": "^18.3.1",
     "react-helmet-async": "^2.0.5",