Replace Bootstrap 3 with something else

[midmarch]

Part of epic #3699

As part of the migration to Update React v17 find an alternative for replace Bootstrap 3.
(See also #3374)

Minor Issues

• Font size for buttons is too large.
• Default blue color does not comply with the ANET blue.
• Scroll behavior is buggy for advancedSearch.
• Labels are left aligned. They were right next to the input field which they represent in the old version of ANET.
• Forms are not centered. ← is this still relevant? it looks OK to me
• Add white background to merge pages to make UI more consistent with the rest of the application.
• Some buttons have underline effect when hovered over (related to link to).
• Home page snapshots are only clickable on the text.
• Almost all clickable components leave a focus effect (thin border) after click.
• FullCalendar buttons does not comply with the current theme.
• In search results navigation, badges are not right aligned.
• pull-left and pull-right classes are still in use.
• ‘Take a guided tour’ link stays in the middle in it's container on create a report page.
• controlId is ignored on <FormControl> when id is specified error is present on several pages.
• When you edit avatar, the image you add looks enormous. ← is this still relevant? it looks OK to me
• In avatar edit modal, the (x) icon to clear the image is now top-center instead of top-left.
• Several button designs are used throughout the system.
• Several fields, e.g. in 'Create a new objective/effort' page, 'Description of this objective' field, are a 'text' field (should be 'text-area').
• In 'Create a new objective/effort' page, the placeholder in the 'Description of this objective' field is vertically centered instead of at the top of the input.
• Height of textarea is now calculated differently, making them smaller:

  textarea.form-control {
    min-height: calc(1.5em + 0.75rem + 2px);
  }
  

  Before, it was:

  textarea.form-control {
    height: auto;
  }
  

• 'Array of objects' items are not properly aligned (remove button placement).
• On 'create report' page, when you expand sensitive information, authorization groups field icon is missing.
• When logged in as an advisor, 'New Report' text does not fit in to the button on NavBar.
• When logged in as an Advisor with no position (Nick Nicholson), home page warning is misplaced.
• Bootstrap 5.1.1 is released.
• Version number font is too big.
• Assessment modal stays under NavBar.
• On assessments page, assessment results has cards with text invisible inside the card header.
• 'Latitude & Longitude' field buttons are not vertically centered on 'create a new location' page.
• 'AdvancedSearch' component falls out of the screen on narrow windows (responsiveness).
• On all merge pages, center column (container/div) floats a bit below compared to the left & right columns (container/div).
• On 'dashboard0' page, buttons have no functionality.
• On 'dashboard0' page, there is no icon inside buttons.
• All button groups print the following warning to the console on every click:

  Formik called `handleBlur`, but you forgot to pass an `id` or `name` attribute to your input:
  

• Navigation drop-down menus have different and incorrect spacing with respect to their corresponding buttons.
• Make destructive buttons (delete and such) consistently red.
• Change the body text of the delete confirmation dialog to include the object id, and remove it from the button text.
• "Create" dropdown disappears behind notes panel; put it at the front.
• The labels of the filters in the advanced search dialog should all have the same alignment; now some of them appear left-aligned and some right-aligned.
• Edit history modal in merge positions page must be as wide as before (90vw)

Remaining items are handled in #3896 .