From fdf872e8d5a5006c554dcce456b4e7aea4f848bb Mon Sep 17 00:00:00 2001
From: Jenny Schweers <jschweers@dimagi.com>
Date: Thu, 19 Sep 2024 16:34:12 -0400
Subject: [PATCH 01/20] Turned on B5 for view

---
 .../apps/export/templates/export/bootstrap5/export_list.html  | 2 +-
 corehq/apps/export/views/list.py                              | 4 +++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/corehq/apps/export/templates/export/bootstrap5/export_list.html b/corehq/apps/export/templates/export/bootstrap5/export_list.html
index dd3fa8a23086..f9845cf02cb2 100644
--- a/corehq/apps/export/templates/export/bootstrap5/export_list.html
+++ b/corehq/apps/export/templates/export/bootstrap5/export_list.html
@@ -1,4 +1,4 @@
-{%  extends 'hqwebapp/bootstrap3/base_section.html' %}
+{%  extends 'hqwebapp/bootstrap5/base_section.html' %}
 {% load crispy_forms_tags %}
 {% load i18n %}
 {% load hq_shared_tags %}
diff --git a/corehq/apps/export/views/list.py b/corehq/apps/export/views/list.py
index 3e81fcc311c8..a1a3beda7630 100644
--- a/corehq/apps/export/views/list.py
+++ b/corehq/apps/export/views/list.py
@@ -68,6 +68,7 @@
     ExportsPermissionsManager,
     user_can_view_deid_exports,
 )
+from corehq.apps.hqwebapp.decorators import use_bootstrap5
 from corehq.apps.locations.models import SQLLocation
 from corehq.apps.locations.permissions import (
     location_restricted_response,
@@ -496,7 +497,7 @@ def create_export_form(self):
 
 
 class BaseExportListView(BaseProjectDataView):
-    template_name = 'export/bootstrap3/export_list.html'
+    template_name = 'export/bootstrap5/export_list.html'
     lead_text = mark_safe(gettext_lazy(  # nosec: no user input
         '''
         Exports are a way to download data in a variety of formats (CSV, Excel, etc.)
@@ -506,6 +507,7 @@ class BaseExportListView(BaseProjectDataView):
     page_title = gettext_lazy("Export Form Data")
 
     @method_decorator(login_and_domain_required)
+    @method_decorator(use_bootstrap5)
     def dispatch(self, request, *args, **kwargs):
         self.permissions = ExportsPermissionsManager(self.form_or_case, request.domain, request.couch_user)
         self.permissions.access_list_exports_or_404(is_deid=self.is_deid, is_odata=self.is_odata)

From 007f808d785ae3df2c4c75512e52c520913a95a4 Mon Sep 17 00:00:00 2001
From: Jenny Schweers <jschweers@dimagi.com>
Date: Thu, 19 Sep 2024 16:35:25 -0400
Subject: [PATCH 02/20] Updated modal headers

---
 .../bulk_delete_custom_export_dialog.html     |  4 +--
 .../delete_custom_export_dialog.html          |  4 +--
 .../bootstrap5/process_deleted_questions.html |  6 ++--
 .../process_deprecated_properties.html        |  6 ++--
 .../export_list_create_export_modal.html      |  6 ++--
 .../bootstrap5/feed_filter_modal.html         |  6 ++--
 .../odata_feed_limit_reached_modal.html       |  6 ++--
 .../export/partials/bootstrap5/table.html     | 33 ++++---------------
 8 files changed, 20 insertions(+), 51 deletions(-)

diff --git a/corehq/apps/export/templates/export/dialogs/bootstrap5/bulk_delete_custom_export_dialog.html b/corehq/apps/export/templates/export/dialogs/bootstrap5/bulk_delete_custom_export_dialog.html
index 3f6fc06b352f..456a3545a17a 100644
--- a/corehq/apps/export/templates/export/dialogs/bootstrap5/bulk_delete_custom_export_dialog.html
+++ b/corehq/apps/export/templates/export/dialogs/bootstrap5/bulk_delete_custom_export_dialog.html
@@ -3,8 +3,7 @@
 <div data-bind="attr: {id: 'bulk-delete-export-modal'}" class="modal fade">
   <div class="modal-dialog">
     <div class="modal-content">
-      <div class="modal-header" style="color:black;">  {# todo B5: css:modal-header, inline style #}
-        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>  {# todo B5: css:close #}
+      <div class="modal-header">
         <h4 class="modal-title">
           <!-- ko if: isOData || isFeed -->
             <!-- ko if: isMultiple -->
@@ -27,6 +26,7 @@ <h4 class="modal-title">
             <!-- /ko -->
           <!-- /ko -->
         </h4>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% trans_html_attr "Close" %}"></button>
       </div>
       <div class="modal-body" style="color:black;">  {# todo B5: inline style #}
         <p>
diff --git a/corehq/apps/export/templates/export/dialogs/bootstrap5/delete_custom_export_dialog.html b/corehq/apps/export/templates/export/dialogs/bootstrap5/delete_custom_export_dialog.html
index 8ea017321807..61b6cd75367d 100644
--- a/corehq/apps/export/templates/export/dialogs/bootstrap5/delete_custom_export_dialog.html
+++ b/corehq/apps/export/templates/export/dialogs/bootstrap5/delete_custom_export_dialog.html
@@ -3,8 +3,7 @@
 <div data-bind="attr: {id: 'delete-export-modal-' + id()}" class="modal fade">
   <div class="modal-dialog">
     <div class="modal-content">
-      <div class="modal-header">  {# todo B5: css:modal-header #}
-        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>  {# todo B5: css:close #}
+      <div class="modal-header">
         <h4 class="modal-title">
           <!-- ko if: isOData() -->
             {% blocktrans %}
@@ -17,6 +16,7 @@ <h4 class="modal-title">
             {% endblocktrans %}
           <!-- /ko -->
         </h4>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% trans_html_attr "Close" %}"></button>
       </div>
       <form name="drop_report" data-bind="attr: {action: deleteUrl}" method="post">
         {% csrf_token %}
diff --git a/corehq/apps/export/templates/export/dialogs/bootstrap5/process_deleted_questions.html b/corehq/apps/export/templates/export/dialogs/bootstrap5/process_deleted_questions.html
index 3ec569aca543..7ebd8b2f81b6 100644
--- a/corehq/apps/export/templates/export/dialogs/bootstrap5/process_deleted_questions.html
+++ b/corehq/apps/export/templates/export/dialogs/bootstrap5/process_deleted_questions.html
@@ -3,10 +3,7 @@
 <div class="modal fade" tabindex="-1" role="dialog" id="export-process-deleted-applications">
   <div class="modal-dialog" role="document">
     <div class="modal-content">
-      <div class="modal-header">  {# todo B5: css:modal-header #}
-        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">  {# todo B5: css:close #}
-          <span aria-hidden="true">&times;</span>
-        </button>
+      <div class="modal-header">
         <h4 class="modal-title">
           {% if export_instance.type == 'form' %}
             {% trans "Show Deleted Questions" %}
@@ -14,6 +11,7 @@ <h4 class="modal-title">
             {% trans "Show Deleted Properties" %}
           {% endif %}
         </h4>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% trans_html_attr "Close" %}"></button>
       </div>
       <div class="modal-body">
         <p>
diff --git a/corehq/apps/export/templates/export/dialogs/bootstrap5/process_deprecated_properties.html b/corehq/apps/export/templates/export/dialogs/bootstrap5/process_deprecated_properties.html
index 2788b8c249b8..96ff213304ab 100644
--- a/corehq/apps/export/templates/export/dialogs/bootstrap5/process_deprecated_properties.html
+++ b/corehq/apps/export/templates/export/dialogs/bootstrap5/process_deprecated_properties.html
@@ -3,13 +3,11 @@
 <div class="modal fade" tabindex="-1" role="dialog" id="export-process-deprecated-properties">
   <div class="modal-dialog" role="document">
     <div class="modal-content">
-      <div class="modal-header">  {# todo B5: css:modal-header #}
-        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">  {# todo B5: css:close #}
-          <span aria-hidden="true">&times;</span>
-        </button>
+      <div class="modal-header">
         <h4 class="modal-title">
           {% trans "Show Deprecated Properties" %}
         </h4>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% trans_html_attr "Close" %}"></button>
       </div>
       <div class="modal-body">
         <p>
diff --git a/corehq/apps/export/templates/export/partials/bootstrap5/export_list_create_export_modal.html b/corehq/apps/export/templates/export/partials/bootstrap5/export_list_create_export_modal.html
index 1f54da3a978f..d8f40d900bab 100644
--- a/corehq/apps/export/templates/export/partials/bootstrap5/export_list_create_export_modal.html
+++ b/corehq/apps/export/templates/export/partials/bootstrap5/export_list_create_export_modal.html
@@ -6,11 +6,9 @@
   <div class="modal-dialog">
     <form name="exportOptionsForm" class="form form-horizontal" data-bind="submit: handleSubmitForm">
       <div class="modal-content">
-        <div class="modal-header">  {# todo B5: css:modal-header #}
-          <button type="button" class="btn-close" data-bs-dismiss="modal">  {# todo B5: css:close #}
-            <span aria-hidden="true">&times;</span><span class="sr-only">{% trans 'Close' %}</span>
-          </button>
+        <div class="modal-header">
           <h4 class="modal-title">{{ create_export_form_title }}</h4>
+          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% trans_html_attr "Close" %}"></button>
         </div>
         <div class="modal-body" data-bind="visible: !isLoaded()">
           <i class="fa fa-spinner fa-spin"></i> {% trans 'Loading Form' %}
diff --git a/corehq/apps/export/templates/export/partials/bootstrap5/feed_filter_modal.html b/corehq/apps/export/templates/export/partials/bootstrap5/feed_filter_modal.html
index 64bd99d79ec1..e02b2b1f60d1 100644
--- a/corehq/apps/export/templates/export/partials/bootstrap5/feed_filter_modal.html
+++ b/corehq/apps/export/templates/export/partials/bootstrap5/feed_filter_modal.html
@@ -6,11 +6,9 @@
   <div class="modal-dialog">
     <form name="feedFiltersForm" class="form form-horizontal" data-bind="submit: commitFilters">
       <div class="modal-content">
-        <div class="modal-header">  {# todo B5: css:modal-header #}
-          <button type="button" class="btn-close" data-bs-dismiss="modal">  {# todo B5: css:close #}
-            <span aria-hidden="true">&times;</span><span class="sr-only">{% trans 'Close' %}</span>
-          </button>
+        <div class="modal-header">
           <h4 class="modal-title">{% trans "Filter Feed" %}</h4>
+          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% trans_html_attr "Close" %}"></button>
         </div>
 
         <div class="modal-body" data-bind="validationOptions: {errorMessageClass: 'help-block'}">
diff --git a/corehq/apps/export/templates/export/partials/bootstrap5/odata_feed_limit_reached_modal.html b/corehq/apps/export/templates/export/partials/bootstrap5/odata_feed_limit_reached_modal.html
index bf29db0c4874..812d10ea93c2 100644
--- a/corehq/apps/export/templates/export/partials/bootstrap5/odata_feed_limit_reached_modal.html
+++ b/corehq/apps/export/templates/export/partials/bootstrap5/odata_feed_limit_reached_modal.html
@@ -3,15 +3,13 @@
 <div class="modal fade" id="odataFeedLimitReachedModal">
   <div class="modal-dialog">
     <div class="modal-content">
-      <div class="modal-header">  {# todo B5: css:modal-header #}
-        <button type="button" class="btn-close" data-bs-dismiss="modal">  {# todo B5: css:close #}
-          <span aria-hidden="true">&times;</span><span class="sr-only">{% trans 'Close' %}</span>
-        </button>
+      <div class="modal-header">
         <h4 class="modal-title">
           {% blocktrans %}
             Maximum number of OData feeds reached.
           {% endblocktrans %}
         </h4>
+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% trans_html_attr "Close" %}"></button>
       </div>
       <div class="modal-body">
         {% blocktrans %}
diff --git a/corehq/apps/export/templates/export/partials/bootstrap5/table.html b/corehq/apps/export/templates/export/partials/bootstrap5/table.html
index a6d89ac09155..761c2e120776 100644
--- a/corehq/apps/export/templates/export/partials/bootstrap5/table.html
+++ b/corehq/apps/export/templates/export/partials/bootstrap5/table.html
@@ -168,18 +168,11 @@ <h4 data-bind="css: {'text-body-secondary': hasEmailedExport && !isAutoRebuildEn
                  data-bind="attr: {id: id() + '-odata-additional'}">
               <div class="modal-dialog">
                 <div class="modal-content">
-                  <div class="modal-header">  {# todo B5: css:modal-header #}
-                    <button type="button"
-                            class="btn-close"  {# todo B5: css:close #}
-                            data-bs-dismiss="modal">
-                      <span aria-hidden="true">&times;</span>
-                      <span class="sr-only">
-                        {% trans 'Close' %}
-                      </span>
-                    </button>
+                  <div class="modal-header">
                     <h4 class="modal-title">
                       {% trans "Additional Feeds" %}
                     </h4>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% trans_html_attr "Close" %}"></button>
                   </div>
                   <div class="modal-body">
                     <p class="lead">
@@ -401,18 +394,11 @@ <h4 class="modal-title">
                  data-bind="attr: {id: 'modalRefreshExportConfirm-' + id() + '-' + emailedExport.groupId()}">
               <div class="modal-dialog">
                 <div class="modal-content">
-                  <div class="modal-header">  {# todo B5: css:modal-header #}
-                    <button type="button"
-                            class="btn-close"  {# todo B5: css:close #}
-                            data-bs-dismiss="modal">
-                      <span aria-hidden="true">&times;</span>
-                      <span class="sr-only">
-                        {% trans 'Close' %}
-                      </span>
-                    </button>
+                  <div class="modal-header">
                     <h4 class="modal-title">
                       {% trans "Confirm data updates" %}
                     </h4>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% trans_html_attr "Close" %}"></button>
                   </div>
                   <div class="modal-body"
                        data-bind="visible: emailedExport.hasFile() && emailedExport.fileData.showExpiredWarning()">
@@ -462,18 +448,11 @@ <h4 class="modal-title">
                  data-bind="attr: {id: 'modalEnableDisableAutoRefresh-' + id() + '-' + emailedExport.groupId()}">
               <div class="modal-dialog">
                 <div class="modal-content">
-                  <div class="modal-header">  {# todo B5: css:modal-header #}
-                    <button type="button"
-                            class="btn-close"  {# todo B5: css:close #}
-                            data-bs-dismiss="modal">
-                      <span aria-hidden="true">&times;</span>
-                      <span class="sr-only">
-                        {% trans 'Close' %}
-                      </span>
-                    </button>
+                  <div class="modal-header">
                     <h4 class="modal-title">
                       {% trans "Confirm data updates." %}
                     </h4>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% trans_html_attr "Close" %}"></button>
                   </div>
                   <div class="modal-body">
                     <p data-bind="if: isDailySaved() && !isAutoRebuildEnabled()">

From 5e1e0735b86cf495fad14c012f207ebff2672973 Mon Sep 17 00:00:00 2001
From: Jenny Schweers <jschweers@dimagi.com>
Date: Thu, 19 Sep 2024 16:38:02 -0400
Subject: [PATCH 03/20] Styling updates, mostly removing inline styles

---
 .../bootstrap5/bulk_delete_custom_export_dialog.html   |  2 +-
 .../export/partials/bootstrap5/export_bulk_notice.html | 10 ++++------
 .../partials/bootstrap5/export_list_controller.html    |  8 ++++----
 .../static/hqwebapp/scss/commcarehq/_variables.scss    |  2 ++
 4 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/corehq/apps/export/templates/export/dialogs/bootstrap5/bulk_delete_custom_export_dialog.html b/corehq/apps/export/templates/export/dialogs/bootstrap5/bulk_delete_custom_export_dialog.html
index 456a3545a17a..51d476a87288 100644
--- a/corehq/apps/export/templates/export/dialogs/bootstrap5/bulk_delete_custom_export_dialog.html
+++ b/corehq/apps/export/templates/export/dialogs/bootstrap5/bulk_delete_custom_export_dialog.html
@@ -28,7 +28,7 @@ <h4 class="modal-title">
         </h4>
         <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% trans_html_attr "Close" %}"></button>
       </div>
-      <div class="modal-body" style="color:black;">  {# todo B5: inline style #}
+      <div class="modal-body">
         <p>
           <!-- ko if: isOData || isFeed -->
             <!-- ko if: isMultiple -->
diff --git a/corehq/apps/export/templates/export/partials/bootstrap5/export_bulk_notice.html b/corehq/apps/export/templates/export/partials/bootstrap5/export_bulk_notice.html
index f61a90c0bbbc..884ac7a890fe 100644
--- a/corehq/apps/export/templates/export/partials/bootstrap5/export_bulk_notice.html
+++ b/corehq/apps/export/templates/export/partials/bootstrap5/export_bulk_notice.html
@@ -1,15 +1,13 @@
 {% load i18n %}
-<div data-bind="visible: bulkExportDownloadCount()"
-     style="float:right; margin-left:8px; margin-bottom:8px">  {# todo B5: inline style #}
-  <form class="form form-inline" method="post"  {# todo B5: css:form-inline #}
+<div data-bind="visible: bulkExportDownloadCount()">
+  <form class="form" method="post"
         data-bind="submit: submitBulkExportDownload"
         action="{{ bulk_download_url }}">
     {% csrf_token %}
-    <div style="min-width:110px;" data-bs-toggle="tooltip-bulkExport" data-container=".tooltip-bulk-export" data-placement="top">  {# todo B5: inline style #}
+    <div data-bs-toggle="tooltip-bulkExport" data-container=".tooltip-bulk-export" data-placement="top">
       <input name="export_list" type="hidden" data-bind="value: bulkExportList" />
       <button type="submit"
-              class="btn btn-primary tooltip-bulk-export"
-              style="width: 100%;">  {# todo B5: inline style #}
+              class="btn btn-primary tooltip-bulk-export">
         {% trans 'Bulk Export' %}
         (<!-- ko text: bulkExportDownloadCount() --><!-- /ko -->)
       </button>
diff --git a/corehq/apps/export/templates/export/partials/bootstrap5/export_list_controller.html b/corehq/apps/export/templates/export/partials/bootstrap5/export_list_controller.html
index f35a4f2ae71f..4350f63f9e3a 100644
--- a/corehq/apps/export/templates/export/partials/bootstrap5/export_list_controller.html
+++ b/corehq/apps/export/templates/export/partials/bootstrap5/export_list_controller.html
@@ -4,7 +4,7 @@
 {% load humanize %}
 
 {% if request|toggle_enabled:"PAGINATED_EXPORTS" %}
-  <div class="alert alert-info">
+  <div class="help-block">
     {% blocktrans with max_rows=max_normal_export_size|intcomma %}
       These exports are paginated. That means exports that have over {{ max_rows }} rows will be split into multiple files.
     {% endblocktrans %}
@@ -38,7 +38,7 @@
 {% endif %}
 
 <div id="export-list" class="ko-template">
-  <div class="container-fluid" style="padding-left: 0; padding-right: 0">  {# todo B5: inline style #}
+  <div class="mb-2 mt-n3 text-end">
     {% if allow_bulk_export %} {# form exports only #}
       {% include 'export/partials/bootstrap5/export_bulk_notice.html' %}
     {% endif %}
@@ -46,8 +46,8 @@
       {% include 'export/partials/bootstrap5/delete_bulk_notice.html' %}
     {% endif %}
   </div>
-  <div data-bind="foreach: panels" style="display: inline">  {# todo B5: inline style #}
-    <div class="card ">  {# todo B5: css:panel #}
+  <div data-bind="foreach: panels">
+    <div class="card mt-3">
       <div class="card-header" data-bind="text: header"></div>
       <div class="card-body">
         {% include 'export/partials/loading_exports.html' %}
diff --git a/corehq/apps/hqwebapp/static/hqwebapp/scss/commcarehq/_variables.scss b/corehq/apps/hqwebapp/static/hqwebapp/scss/commcarehq/_variables.scss
index 879ca77f6b42..85ffb9495fb4 100644
--- a/corehq/apps/hqwebapp/static/hqwebapp/scss/commcarehq/_variables.scss
+++ b/corehq/apps/hqwebapp/static/hqwebapp/scss/commcarehq/_variables.scss
@@ -10,6 +10,8 @@ $container-max-widths: (
   xxl: 1160px
 );
 
+// Spacing override
+$enable-negative-margins: true;
 
 // Typography Overrides
 $font-family-sans-serif: "Nunito Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;

From 46fd30feac950db16694533db0d742f50acd5463 Mon Sep 17 00:00:00 2001
From: Jenny Schweers <jschweers@dimagi.com>
Date: Thu, 19 Sep 2024 16:49:22 -0400
Subject: [PATCH 04/20] Removed bulk delete tooltip

This button pops up a confirmation modal, that's enough.
---
 .../export/js/bootstrap5/export_list.js       | 11 ----
 .../bootstrap5/delete_bulk_notice.html        | 52 +++++++++----------
 2 files changed, 24 insertions(+), 39 deletions(-)

diff --git a/corehq/apps/export/static/export/js/bootstrap5/export_list.js b/corehq/apps/export/static/export/js/bootstrap5/export_list.js
index adfad99ce8e5..03be4d955a14 100644
--- a/corehq/apps/export/static/export/js/bootstrap5/export_list.js
+++ b/corehq/apps/export/static/export/js/bootstrap5/export_list.js
@@ -462,23 +462,12 @@ hqDefine("export/js/bootstrap5/export_list", [
             return true;
         };
 
-        var tooltipText = "";
-        if (self.isOData || self.isFeed) {
-            tooltipText = gettext("All of the selected feeds will be deleted.");
-        } else {
-            tooltipText = gettext("All of the selected exports will be deleted.");
-        }
-
         $(function () {
             $('[data-toggle="tooltip-bulkExport"]').attr('title',
                 gettext("All of the selected exports will be collected for download to a " +
                 "single Excel file, with each export as a separate sheet.")).tooltip();  /* todo B5: plugin:tooltip */
         });
 
-        $(function () {
-            $('[data-toggle="tooltip-bulkDelete"]').attr('title', tooltipText).tooltip({trigger: 'hover'});  /* todo B5: plugin:tooltip */
-        });
-
         self.isMultiple = ko.computed(function () {
             if (self.bulkDeleteList().length > 1) { return true; }
             return false;
diff --git a/corehq/apps/export/templates/export/partials/bootstrap5/delete_bulk_notice.html b/corehq/apps/export/templates/export/partials/bootstrap5/delete_bulk_notice.html
index 6674fc6cf3f5..abb32ca8d016 100644
--- a/corehq/apps/export/templates/export/partials/bootstrap5/delete_bulk_notice.html
+++ b/corehq/apps/export/templates/export/partials/bootstrap5/delete_bulk_notice.html
@@ -1,31 +1,27 @@
 {% load i18n %}
 <div data-bind="visible: bulkExportDownloadCount()">
-  <div class="float-end" data-bs-toggle="tooltip-bulkDelete" data-placement="top">
-    <input name="delete_list" type="hidden"/>
-    <p style="float:right">  {# todo B5: inline style #}
-      <a class="btn btn-outline-danger btn-primary"
-         data-bs-toggle="modal"
-         data-bind="attr: {
-                      href: '#bulk-delete-export-modal'
-                    }">
-        <!-- ko if: isOData || isFeed -->
-          <!-- ko if: isMultiple -->
-            {% trans "Delete Selected Feeds" %}
-          <!-- /ko -->
-          <!-- ko if: !isMultiple() -->
-            {% trans "Delete Selected Feed" %}
-          <!-- /ko -->
-        <!-- /ko -->
-        <!-- ko if: !isOData && !isFeed -->
-          <!-- ko if: isMultiple -->
-            {% trans "Delete Selected Exports" %}
-          <!-- /ko -->
-          <!-- ko if: !isMultiple() -->
-            {% trans "Delete Selected Export" %}
-          <!-- /ko -->
-        <!-- /ko -->
-      </a>
-      {% include "export/dialogs/bootstrap5/bulk_delete_custom_export_dialog.html" %}
-    </p>
-  </div>
+  <input name="delete_list" type="hidden"/>
+  <a class="btn btn-outline-danger"
+     data-bs-toggle="modal"
+     data-bind="attr: {
+                  href: '#bulk-delete-export-modal'
+                }">
+    <!-- ko if: isOData || isFeed -->
+      <!-- ko if: isMultiple -->
+        {% trans "Delete Selected Feeds" %}
+      <!-- /ko -->
+      <!-- ko if: !isMultiple() -->
+        {% trans "Delete Selected Feed" %}
+      <!-- /ko -->
+    <!-- /ko -->
+    <!-- ko if: !isOData && !isFeed -->
+      <!-- ko if: isMultiple -->
+        {% trans "Delete Selected Exports" %}
+      <!-- /ko -->
+      <!-- ko if: !isMultiple() -->
+        {% trans "Delete Selected Export" %}
+      <!-- /ko -->
+    <!-- /ko -->
+  </a>
+  {% include "export/dialogs/bootstrap5/bulk_delete_custom_export_dialog.html" %}
 </div>

From 1a5a60145c6587b50d61ac1c887cdf70247d2dc7 Mon Sep 17 00:00:00 2001
From: Jenny Schweers <jschweers@dimagi.com>
Date: Thu, 19 Sep 2024 17:04:29 -0400
Subject: [PATCH 05/20] Replaced bulk export tooltip with help bubble

This is the stanard pattern in HQ. Bonus, it doesn't need js initialization.
---
 .../export/js/bootstrap5/export_list.js       |  6 -----
 .../bootstrap5/export_bulk_notice.html        | 25 ++++++++-----------
 2 files changed, 11 insertions(+), 20 deletions(-)

diff --git a/corehq/apps/export/static/export/js/bootstrap5/export_list.js b/corehq/apps/export/static/export/js/bootstrap5/export_list.js
index 03be4d955a14..618ebc7e5343 100644
--- a/corehq/apps/export/static/export/js/bootstrap5/export_list.js
+++ b/corehq/apps/export/static/export/js/bootstrap5/export_list.js
@@ -462,12 +462,6 @@ hqDefine("export/js/bootstrap5/export_list", [
             return true;
         };
 
-        $(function () {
-            $('[data-toggle="tooltip-bulkExport"]').attr('title',
-                gettext("All of the selected exports will be collected for download to a " +
-                "single Excel file, with each export as a separate sheet.")).tooltip();  /* todo B5: plugin:tooltip */
-        });
-
         self.isMultiple = ko.computed(function () {
             if (self.bulkDeleteList().length > 1) { return true; }
             return false;
diff --git a/corehq/apps/export/templates/export/partials/bootstrap5/export_bulk_notice.html b/corehq/apps/export/templates/export/partials/bootstrap5/export_bulk_notice.html
index 884ac7a890fe..607c601c525a 100644
--- a/corehq/apps/export/templates/export/partials/bootstrap5/export_bulk_notice.html
+++ b/corehq/apps/export/templates/export/partials/bootstrap5/export_bulk_notice.html
@@ -4,19 +4,16 @@
         data-bind="submit: submitBulkExportDownload"
         action="{{ bulk_download_url }}">
     {% csrf_token %}
-    <div data-bs-toggle="tooltip-bulkExport" data-container=".tooltip-bulk-export" data-placement="top">
-      <input name="export_list" type="hidden" data-bind="value: bulkExportList" />
-      <button type="submit"
-              class="btn btn-primary tooltip-bulk-export">
-        {% trans 'Bulk Export' %}
-        (<!-- ko text: bulkExportDownloadCount() --><!-- /ko -->)
-      </button>
-    </div>
+    <input name="export_list" type="hidden" data-bind="value: bulkExportList" />
+    <button type="submit"
+            class="btn btn-primary">
+      {% trans 'Bulk Export' %}
+      (<!-- ko text: bulkExportDownloadCount() --><!-- /ko -->)
+    </button>
+    <span class="hq-help-template"
+          data-title="{% trans "Bulk Export" %}"
+          data-content="{% trans "All of the selected exports will be collected for download to a single Excel file, with each export as a separate sheet." %}"
+          data-placement="left"
+    ></span>
   </form>
 </div>
-
-<style>
-.tooltip-bulk-export .tooltip .tooltip-inner {
-  margin-right: 10px;
-}
-</style>

From 2760a7a0a52398b41a61ea32de9cae9fb6c94f54 Mon Sep 17 00:00:00 2001
From: Jenny Schweers <jschweers@dimagi.com>
Date: Thu, 19 Sep 2024 17:12:03 -0400
Subject: [PATCH 06/20] Fixed layout of bulk buttons

---
 .../export/partials/bootstrap5/delete_bulk_notice.html    | 4 ++--
 .../export/partials/bootstrap5/export_bulk_notice.html    | 6 +++---
 .../partials/bootstrap5/export_list_controller.html       | 8 ++++----
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/corehq/apps/export/templates/export/partials/bootstrap5/delete_bulk_notice.html b/corehq/apps/export/templates/export/partials/bootstrap5/delete_bulk_notice.html
index abb32ca8d016..9315e4f54aa1 100644
--- a/corehq/apps/export/templates/export/partials/bootstrap5/delete_bulk_notice.html
+++ b/corehq/apps/export/templates/export/partials/bootstrap5/delete_bulk_notice.html
@@ -1,5 +1,5 @@
 {% load i18n %}
-<div data-bind="visible: bulkExportDownloadCount()">
+<span data-bind="visible: bulkExportDownloadCount()">
   <input name="delete_list" type="hidden"/>
   <a class="btn btn-outline-danger"
      data-bs-toggle="modal"
@@ -24,4 +24,4 @@
     <!-- /ko -->
   </a>
   {% include "export/dialogs/bootstrap5/bulk_delete_custom_export_dialog.html" %}
-</div>
+</span>
diff --git a/corehq/apps/export/templates/export/partials/bootstrap5/export_bulk_notice.html b/corehq/apps/export/templates/export/partials/bootstrap5/export_bulk_notice.html
index 607c601c525a..a5351ab5b913 100644
--- a/corehq/apps/export/templates/export/partials/bootstrap5/export_bulk_notice.html
+++ b/corehq/apps/export/templates/export/partials/bootstrap5/export_bulk_notice.html
@@ -1,6 +1,6 @@
 {% load i18n %}
-<div data-bind="visible: bulkExportDownloadCount()">
-  <form class="form" method="post"
+<span class="d-inline-block ms-2" data-bind="visible: bulkExportDownloadCount()">
+  <form class="form d-inline" method="post"
         data-bind="submit: submitBulkExportDownload"
         action="{{ bulk_download_url }}">
     {% csrf_token %}
@@ -16,4 +16,4 @@
           data-placement="left"
     ></span>
   </form>
-</div>
+</span>
diff --git a/corehq/apps/export/templates/export/partials/bootstrap5/export_list_controller.html b/corehq/apps/export/templates/export/partials/bootstrap5/export_list_controller.html
index 4350f63f9e3a..d494c4fa8b76 100644
--- a/corehq/apps/export/templates/export/partials/bootstrap5/export_list_controller.html
+++ b/corehq/apps/export/templates/export/partials/bootstrap5/export_list_controller.html
@@ -38,13 +38,13 @@
 {% endif %}
 
 <div id="export-list" class="ko-template">
-  <div class="mb-2 mt-n3 text-end">
-    {% if allow_bulk_export %} {# form exports only #}
-      {% include 'export/partials/bootstrap5/export_bulk_notice.html' %}
-    {% endif %}
+  <div class="mt-n3 text-end" data-bind="visible: bulkExportDownloadCount()">
     {% if has_edit_permissions %}
       {% include 'export/partials/bootstrap5/delete_bulk_notice.html' %}
     {% endif %}
+    {% if allow_bulk_export %} {# form exports only #}
+      {% include 'export/partials/bootstrap5/export_bulk_notice.html' %}
+    {% endif %}
   </div>
   <div data-bind="foreach: panels">
     <div class="card mt-3">

From 975e3849263360f222a4519db1ad4acc23d18fc7 Mon Sep 17 00:00:00 2001
From: Jenny Schweers <jschweers@dimagi.com>
Date: Tue, 1 Oct 2024 09:30:22 -0400
Subject: [PATCH 07/20] Updated dropdown placeholder to match form label

---
 corehq/apps/export/views/list.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/corehq/apps/export/views/list.py b/corehq/apps/export/views/list.py
index a1a3beda7630..c4120abcf7d8 100644
--- a/corehq/apps/export/views/list.py
+++ b/corehq/apps/export/views/list.py
@@ -996,7 +996,7 @@ def create_export_form(self):
         form.fields['model_type'].label = _("Feed Type")
 
         model_type_choices = [
-            ('', _("Select field type")),
+            ('', _("Select feed type")),
         ]
         if self.has_case_export_permissions:
             model_type_choices.append(('case', _('Case')))

From dad903be30d395eba6810901fced091706de5357 Mon Sep 17 00:00:00 2001
From: Jenny Schweers <jschweers@dimagi.com>
Date: Tue, 1 Oct 2024 09:32:20 -0400
Subject: [PATCH 08/20] Minor text updates

.text-warning isn't readable on a white background, be lazy and change it to .text-danger.
Shorten the 'Copy & Edit Feed' text so it doesn't spill onto two lines.
Remove .btn-link which is a weird affordance, since links don't typically open modals.
---
 .../export/partials/bootstrap5/table.html      | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/corehq/apps/export/templates/export/partials/bootstrap5/table.html b/corehq/apps/export/templates/export/partials/bootstrap5/table.html
index 761c2e120776..8c690280d97b 100644
--- a/corehq/apps/export/templates/export/partials/bootstrap5/table.html
+++ b/corehq/apps/export/templates/export/partials/bootstrap5/table.html
@@ -56,7 +56,7 @@
           {% trans 'Edit' %}
         {% else %}
           {% blocktrans %}
-            Copy &amp; Edit Feed
+            Copy &amp; Edit
           {% endblocktrans %}
         {% endif %}
       </th>
@@ -91,7 +91,7 @@
       </td>
     {% endif %}
       <td>
-        <h4 data-bind="css: {'text-body-secondary': hasEmailedExport && !isAutoRebuildEnabled()}">
+        <div data-bind="css: {'text-body-secondary': hasEmailedExport && !isAutoRebuildEnabled()}">
           <inline-edit params="value: name,
                                url: editNameUrl,
                                placeholder: '{% trans "Enter name here"|escapejs %}',
@@ -101,7 +101,7 @@ <h4 data-bind="css: {'text-body-secondary': hasEmailedExport && !isAutoRebuildEn
                  data-bind="visible: isDeid()">
             {% trans 'De-Identified' %}
           </label>
-        </h4>
+        </div>
         <p data-bind="visible: formname,
                       css: {
                         'text-body-secondary': hasEmailedExport && !isAutoRebuildEnabled()
@@ -149,7 +149,7 @@ <h4 data-bind="css: {'text-body-secondary': hasEmailedExport && !isAutoRebuildEn
           <!-- /ko -->
           <!-- ko if: hasAdditionalODataFeeds -->
             <p>
-              <a class="btn btn-link btn-sm"
+              <a class="btn btn-sm btn-outline-primary"
                  data-bind="attr: {
                               href: '#' + id() + '-odata-additional'
                             },
@@ -224,7 +224,7 @@ <h4 class="modal-title">
         <!-- /ko -->
 
         <!-- ko if: hasEmailedExport && !isAutoRebuildEnabled() -->
-        <p class="text-warning">
+        <p class="text-danger">
           <i class="fa-solid fa-triangle-exclamation"></i>
           {% blocktrans %}
             Automatic updates for this saved {{ export_type }} have been disabled. Click 'Enable'
@@ -332,7 +332,7 @@ <h4 class="modal-title">
           </div>
 
           <div data-bind="if: isLocationSafeForUser()">
-            <p class="text-warning"
+            <p class="text-danger"
                data-bind="if: emailedExport.hasFile() && emailedExport.fileData.showExpiredWarning() && isAutoRebuildEnabled()">
               <i class="fa-solid fa-triangle-exclamation"></i>
               {% blocktrans %}
@@ -567,7 +567,7 @@ <h4 data-bind="text: case_type" style="display: inline-block;"></h4>  {# todo B5
                   <i class="fa fa-pencil"></i>
                   <span>
                     {% blocktrans %}
-                      Copy &amp; Edit Feed
+                      Copy &amp; Edit
                     {% endblocktrans %}
                   </span>
                 </div>
@@ -591,7 +591,7 @@ <h4 data-bind="text: case_type" style="display: inline-block;"></h4>  {# todo B5
                   <i class="fa fa-pencil"></i>
                   <span>
                     {% blocktrans %}
-                      Copy &amp; Edit Feed
+                      Copy &amp; Edit
                     {% endblocktrans %}
                   </span>
                 </div>
@@ -639,7 +639,7 @@ <h4 data-bind="text: case_type" style="display: inline-block;"></h4>  {# todo B5
                 <i class="fa fa-pencil"></i>
                 <span>
                   {% blocktrans %}
-                    Copy &amp; Edit Feed
+                    Copy &amp; Edit
                   {% endblocktrans %}
                 </span>
               </div>

From 3415b9bde1d57373203e32ff84cd2a2b753df0bd Mon Sep 17 00:00:00 2001
From: Jenny Schweers <jschweers@dimagi.com>
Date: Tue, 1 Oct 2024 09:36:04 -0400
Subject: [PATCH 09/20] Made basic CSS updates to checkboxes, etc.

---
 .../export/partials/bootstrap5/table.html     | 70 +++++++------------
 1 file changed, 24 insertions(+), 46 deletions(-)

diff --git a/corehq/apps/export/templates/export/partials/bootstrap5/table.html b/corehq/apps/export/templates/export/partials/bootstrap5/table.html
index 8c690280d97b..35744df60c2c 100644
--- a/corehq/apps/export/templates/export/partials/bootstrap5/table.html
+++ b/corehq/apps/export/templates/export/partials/bootstrap5/table.html
@@ -82,11 +82,10 @@
     <tr>
     {% if has_edit_permissions or allow_bulk_export %}
       <td>
-        <div class="checkbox checkbox-table-cell">  {# todo B5: css:checkbox #}
-          <label>
-            <input type="checkbox"  {# todo B5: css:checkbox #}
-                   data-bind="checked: addedToBulk" />
-          </label>
+        <div class="form-check checkbox-table-cell">
+          <input type="checkbox"
+                 class="form-check-input"
+                 data-bind="checked: addedToBulk" />
         </div>
       </td>
     {% endif %}
@@ -129,16 +128,11 @@
         <!-- ko if: isOData -->
           <!-- ko with: odataFeedUrl -->
           <p>
-            <div class="input-group">
-              <span data-bind="css: {
-                                 'input-group-btn': showLink  {# todo B5: css:input-group-btn #}
-                               },
-                               click: copyLinkRequested">
-                <a class="btn btn-outline-primary btn-sm">
-                  <i class="fa fa-clipboard"></i>
-                  {% trans "Copy OData Feed Link" %}
-                </a>
-              </span>
+            <div data-bind="css: {'input-group': showLink}">
+              <button class="btn btn-outline-primary btn-sm" data-bind="click: copyLinkRequested">
+                <i class="fa fa-clipboard"></i>
+                {% trans "Copy OData Feed Link" %}
+              </button>
               <input data-bind="visible: showLink,
                                 value: url"
                      type="text"
@@ -190,16 +184,11 @@ <h4 class="modal-title">
                     </p>
                     <!-- ko foreach: odataAdditionalFeedUrls -->
                     <p>
-                      <div class="input-group">
-                        <span data-bind="css: {
-                                           'input-group-btn': url.showLink  {# todo B5: css:input-group-btn #}
-                                         },
-                                         click: url.copyLinkRequested">
-                          <a class="btn btn-outline-primary btn-sm">
-                            <i class="fa fa-clipboard"></i>
-                            <span data-bind="text: label"></span>
-                          </a>
-                        </span>
+                      <div data-bind="css: {'input-group': url.showLink}">
+                        <button class="btn btn-outline-primary btn-sm" data-bind="click: url.copyLinkRequested">
+                          <i class="fa fa-clipboard"></i>
+                          <span data-bind="text: label"></span>
+                        </button>
                         <input data-bind="visible: url.showLink,
                                           value: url.url"
                                type="text"
@@ -282,15 +271,9 @@ <h4 class="modal-title">
                 {% trans "Updating Data, please wait..." %}
               </button>
               <div data-bind="if: emailedExport.taskStatus && emailedExport.taskStatus.started()">
-                <div class="progress">  {# todo B5: css:progress #}
-                  <div class="progress-bar progress-bar-striped active"
-                       role="progressbar"
-                       aria-valuemin="0"
-                       aria-valuemax="100"
-                       data-bind="attr: {
-                                    'aria-valuenow': emailedExport.taskStatus.percentComplete(),
-                                    'style': 'width: ' + emailedExport.taskStatus.percentComplete() + '%',
-                                  }">
+                <div class="progress" role="progressbar" aria-valuemin="0" aria-valuemax="100" data-bind="attr: {'aria-valuenow': emailedExport.taskStatus.percentComplete()}">
+                  <div class="progress-bar progress-bar-striped"
+                       data-bind="attr: {style: 'width: ' + emailedExport.taskStatus.percentComplete() + '%'}">
                   </div>
                 </div>
               </div>
@@ -310,17 +293,12 @@ <h4 class="modal-title">
               {% trans "Download" %}
             </a>
             <!-- ko if: isFeed -->
-              <div class="input-group">
+              <div data-bind="css: {'input-group': showLink}">
                 <!-- ko with: feedUrl -->
-                <span data-bind="css: {
-                                   'input-group-btn': showLink  {# todo B5: css:input-group-btn #}
-                                 },
-                                 click: copyLinkRequested">
-                  <a class="btn btn-outline-primary btn-sm">
-                    <i class="fa fa-clipboard"></i>
-                    {% trans "Copy Dashboard Feed Link" %}
-                  </a>
-                </span>
+                <button class="btn btn-outline-primary btn-sm" data-bind="click: copyLinkRequested">
+                  <i class="fa fa-clipboard"></i>
+                  {% trans "Copy Dashboard Feed Link" %}
+                </button>
                 <input data-bind="visible: showLink,
                                   value: url"
                        type="text"
@@ -492,8 +470,8 @@ <h4 class="modal-title">
       </td>
     {% if model_type == "case" %}
       <td>
-        <h4 data-bind="text: case_type" style="display: inline-block;"></h4>  {# todo B5: inline style #}
-        <span data-bind="visible: is_case_type_deprecated" class="badge text-bg-warning" style="display: inline-block;">{% trans "deprecated" %}</span>  {# todo B5: inline style #}
+        <span class="h4" data-bind="text: case_type"></span>
+        <span data-bind="visible: is_case_type_deprecated" class="badge text-bg-warning">{% trans "deprecated" %}</span>
       </td>
     {% endif %}
 

From b9eccb379d04c0e10512279bd587021137875a68 Mon Sep 17 00:00:00 2001
From: Jenny Schweers <jschweers@dimagi.com>
Date: Tue, 1 Oct 2024 10:01:47 -0400
Subject: [PATCH 10/20] Removed TODO

This crispy form is just fine.
---
 .../templates/export/partials/bootstrap5/feed_filter_modal.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/corehq/apps/export/templates/export/partials/bootstrap5/feed_filter_modal.html b/corehq/apps/export/templates/export/partials/bootstrap5/feed_filter_modal.html
index e02b2b1f60d1..5decbfb92195 100644
--- a/corehq/apps/export/templates/export/partials/bootstrap5/feed_filter_modal.html
+++ b/corehq/apps/export/templates/export/partials/bootstrap5/feed_filter_modal.html
@@ -23,7 +23,7 @@ <h4>
               </ul>
             </div>
           <!-- /ko -->
-          {% crispy export_filter_form %}  {# todo B5: check crispy #}
+          {% crispy export_filter_form %}
           <div class="alert alert-danger" role="alert" data-bind="visible: formSubmitErrorMessage">
             <span data-bind="text: formSubmitErrorMessage"></span>
             <span data-bind="visible: !formSubmitErrorMessage()">{% trans "There was an unknown error saving the filters" %}</span>

From 1d68c7f5aa87e8fbbeaec97ca5172c1d343ae32f Mon Sep 17 00:00:00 2001
From: Jenny Schweers <jschweers@dimagi.com>
Date: Tue, 1 Oct 2024 10:17:44 -0400
Subject: [PATCH 11/20] Replaced .well with .card, removed TODO

---
 .../export_list_create_export_modal.html      | 39 +++++++++++--------
 1 file changed, 22 insertions(+), 17 deletions(-)

diff --git a/corehq/apps/export/templates/export/partials/bootstrap5/export_list_create_export_modal.html b/corehq/apps/export/templates/export/partials/bootstrap5/export_list_create_export_modal.html
index d8f40d900bab..852032a76a2e 100644
--- a/corehq/apps/export/templates/export/partials/bootstrap5/export_list_create_export_modal.html
+++ b/corehq/apps/export/templates/export/partials/bootstrap5/export_list_create_export_modal.html
@@ -21,7 +21,7 @@ <h4 class="modal-title">{{ create_export_form_title }}</h4>
               {% blocktrans %}If this problem persists, please <a href="#modalReportIssue" data-bs-toggle="modal">Report an Issue</a>.{% endblocktrans %}
             </p>
           </div>
-          {% crispy create_export_form %}  {# todo B5: check crispy #}
+          {% crispy create_export_form %}
           <div class="alert alert-info" data-bind="visible: showHasNoCaseTypes">
             {% blocktrans %}
               This application does not appear to be using
@@ -36,22 +36,27 @@ <h4 class="modal-title">{{ create_export_form_title }}</h4>
             <i class="fa-solid fa-triangle-exclamation"></i>
             {% trans "Mislabeled" %}
           </div>
-          <div class="card" data-bind="visible: showSuggestions">  {# todo B5: css:well #}
-            <h4>{% trans "Suggestions" %}</h4>
-            <div data-bind="visible: showAppDoesNotExist">
-              {% trans "These form submissions are tagged as if they belong to an application that doesn't exist." %}
-            </div>
-            <div data-bind="visible: showDuplicate">
-              <p>{% trans "These submissions could belong to one of the following forms:" %}</p>
-              <ul data-bind="foreach: duplicatePossibilities">
-                <ul>
-                  <span data-bind="text: app.name"></span> &gt;
-                  <span data-bind="text: $root.selectedFormName"></span>
-                  <span data-bind="visible: app_deleted">
-                                        {% trans "App was deleted." %}
-                                    </span>
-                  </li>
-                </ul>
+          <div class="card" data-bind="visible: showSuggestions">
+            <div class="card-body">
+              <h5 class="card-title">{% trans "Suggestions" %}</h5>
+              <div class="card-text">
+                <div data-bind="visible: showAppDoesNotExist">
+                  {% trans "These form submissions are tagged as if they belong to an application that doesn't exist." %}
+                </div>
+                <div data-bind="visible: showDuplicate">
+                  <p>{% trans "These submissions could belong to one of the following forms:" %}</p>
+                  <ul data-bind="foreach: duplicatePossibilities">
+                    <ul>
+                      <li>
+                        <span data-bind="text: app.name"></span> &gt;
+                        <span data-bind="text: $root.selectedFormName"></span>
+                        <span data-bind="visible: app_deleted">
+                          {% trans "App was deleted." %}
+                        </span>
+                      </li>
+                    </ul>
+                </div>
+              </div>
             </div>
           </div>
         </div>

From f08f313f5050146c66baf0251ffbcfc10bd71071 Mon Sep 17 00:00:00 2001
From: Jenny Schweers <jschweers@dimagi.com>
Date: Tue, 1 Oct 2024 11:09:34 -0400
Subject: [PATCH 12/20] Fixed data-target attribute names

---
 .../export/templates/export/partials/bootstrap5/table.html    | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/corehq/apps/export/templates/export/partials/bootstrap5/table.html b/corehq/apps/export/templates/export/partials/bootstrap5/table.html
index 35744df60c2c..7cf652d43991 100644
--- a/corehq/apps/export/templates/export/partials/bootstrap5/table.html
+++ b/corehq/apps/export/templates/export/partials/bootstrap5/table.html
@@ -257,7 +257,7 @@ <h4 class="modal-title">
                       class="btn btn-outline-primary btn-sm"
                       data-bind="visible: emailedExport.canUpdateData,
                                  attr: {
-                                   'data-target': '#modalRefreshExportConfirm-' + id() + '-' + emailedExport.groupId()
+                                   'data-bs-target': '#modalRefreshExportConfirm-' + id() + '-' + emailedExport.groupId()
                                  }"
                       data-bs-toggle="modal">
                 <i class="fa fa-refresh"></i>
@@ -506,7 +506,7 @@ <h4 class="modal-title">
         <!-- ko if: isLocationSafeForUser() -->
         <a class="btn btn-outline-primary"
            data-bind="attr: {
-                        'data-target': '#modalEnableDisableAutoRefresh-' + id() + '-' + emailedExport.groupId(),
+                        'data-bs-target': '#modalEnableDisableAutoRefresh-' + id() + '-' + emailedExport.groupId(),
                       }"
            data-bs-toggle="modal">
           <span data-bind="visible: !isAutoRebuildEnabled()">

From 5ef6b7a53e8226b53c958c5509c2b5acd0c9f382 Mon Sep 17 00:00:00 2001
From: Jenny Schweers <jschweers@dimagi.com>
Date: Tue, 1 Oct 2024 11:13:17 -0400
Subject: [PATCH 13/20] Updated modals

---
 .../export/static/export/js/bootstrap5/export_list.js | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/corehq/apps/export/static/export/js/bootstrap5/export_list.js b/corehq/apps/export/static/export/js/bootstrap5/export_list.js
index 618ebc7e5343..bdc8a67b76f0 100644
--- a/corehq/apps/export/static/export/js/bootstrap5/export_list.js
+++ b/corehq/apps/export/static/export/js/bootstrap5/export_list.js
@@ -16,6 +16,7 @@ hqDefine("export/js/bootstrap5/export_list", [
     'knockout',
     'underscore',
     'hqwebapp/js/assert_properties',
+    'es6!hqwebapp/js/bootstrap5_loader',
     'clipboard/dist/clipboard',
     'analytix/js/google',
     'analytix/js/kissmetrix',
@@ -28,6 +29,7 @@ hqDefine("export/js/bootstrap5/export_list", [
     ko,
     _,
     assertProperties,
+    bootstrap,
     Clipboard,
     googleAnalytics,
     kissmetricsAnalytics,
@@ -181,7 +183,8 @@ hqDefine("export/js/bootstrap5/export_list", [
                         self.isAutoRebuildEnabled(data.isAutoRebuildEnabled);
                     }
                     $button.enableButton();
-                    $('#modalEnableDisableAutoRefresh-' + self.id() + '-' + self.emailedExport.groupId()).modal('hide');  /* todo B5: plugin:modal */
+                    const modalId = 'modalEnableDisableAutoRefresh-' + self.id() + '-' + self.emailedExport.groupId();
+                    bootstrap.Modal.getInstance('#' + modalId).hide();
                 },
             });
         };
@@ -261,7 +264,9 @@ hqDefine("export/js/bootstrap5/export_list", [
         };
 
         self.updateData = function () {
-            $('#modalRefreshExportConfirm-' + exportId + '-' + self.groupId()).modal('hide');  /* todo B5: plugin:modal */
+            const modalId = 'modalRefreshExportConfirm-' + exportId + '-' + self.groupId();
+            bootstrap.Modal.getInstance('#' + modalId).hide();
+
             self.updatingData(true);
             $.ajax({
                 method: 'POST',
@@ -663,7 +668,7 @@ hqDefine("export/js/bootstrap5/export_list", [
                         if (export_.hasEmailedExport) {
                             export_.emailedExport.pollProgressBar();
                         }
-                        self.$filterModal.modal('hide');  /* todo B5: plugin:modal */
+                        bootstrap.Modal.getInstance(self.$filterModal.get(0)).hide();
                     } else {
                         self.formSubmitErrorMessage(data.error);
                     }

From 86533496de17a90b3f2cdc8862aa3610c2d86d5c Mon Sep 17 00:00:00 2001
From: Jenny Schweers <jschweers@dimagi.com>
Date: Tue, 1 Oct 2024 12:59:26 -0400
Subject: [PATCH 14/20] Turned on B5 for download view

---
 corehq/apps/export/views/download.py | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/corehq/apps/export/views/download.py b/corehq/apps/export/views/download.py
index d17070b5f4b2..18552c12009c 100644
--- a/corehq/apps/export/views/download.py
+++ b/corehq/apps/export/views/download.py
@@ -61,7 +61,7 @@
     ExportsPermissionsManager,
     case_type_or_app_limit_exceeded
 )
-from corehq.apps.hqwebapp.decorators import use_bootstrap5, use_daterangepicker
+from corehq.apps.hqwebapp.decorators import use_bootstrap5, use_tempusdominus
 from corehq.apps.hqwebapp.widgets import DateRangePickerWidget
 from corehq.apps.locations.permissions import location_safe
 from corehq.apps.reports.analytics.esaccessors import media_export_is_too_big
@@ -149,7 +149,7 @@ def get_export(self, export_id=None):
 
 
 class BaseDownloadExportView(BaseProjectDataView):
-    template_name = 'export/bootstrap3/download_export.html'
+    template_name = 'export/bootstrap5/download_export.html'
     http_method_names = ['get', 'post']
     show_date_range = False
     check_for_multimedia = False
@@ -157,7 +157,8 @@ class BaseDownloadExportView(BaseProjectDataView):
     # To serve filters for export from mobile_user_and_group_slugs
     export_filter_class = None
 
-    @use_daterangepicker
+    @use_bootstrap5
+    @use_tempusdominus
     @method_decorator(login_and_domain_required)
     def dispatch(self, request, *args, **kwargs):
         self.permissions = ExportsPermissionsManager(self.form_or_case, request.domain, request.couch_user)

From c311384da0a4eda964722426fef4c7853e292e51 Mon Sep 17 00:00:00 2001
From: Jenny Schweers <jschweers@dimagi.com>
Date: Tue, 1 Oct 2024 13:00:04 -0400
Subject: [PATCH 15/20] Removed unnecessary form CSS classes

---
 corehq/apps/export/forms.py | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/corehq/apps/export/forms.py b/corehq/apps/export/forms.py
index d763206f5ea3..00d81a5cf988 100644
--- a/corehq/apps/export/forms.py
+++ b/corehq/apps/export/forms.py
@@ -932,9 +932,6 @@ def __init__(self, domain_object, *args, **kwargs):
         self.domain_object = domain_object
         super(EmwfFilterFormExport, self).__init__(domain_object, *args, **kwargs)
 
-        self.helper.label_class = 'col-sm-3 col-md-2 col-lg-2'
-        self.helper.field_class = 'col-sm-9 col-md-8 col-lg-3'
-
     def get_model_filter(self, mobile_user_and_group_slugs, can_access_all_locations, accessible_location_ids):
         """
         :param mobile_user_and_group_slugs: slug from request like
@@ -988,8 +985,6 @@ def __init__(self, domain_object, timezone, *args, **kwargs):
         self.timezone = timezone
         super(FilterCaseESExportDownloadForm, self).__init__(domain_object, *args, **kwargs)
 
-        self.helper.label_class = 'col-sm-3 col-md-2 col-lg-2'
-        self.helper.field_class = 'col-sm-9 col-md-8 col-lg-3'
         # update date_range filter's initial values to span the entirety of
         # the domain's submission range
         default_datespan = datespan_from_beginning(self.domain_object, self.timezone)
@@ -1046,8 +1041,6 @@ def __init__(self, domain_object, timezone, *args, **kwargs):
         self.timezone = timezone
         super(FilterSmsESExportDownloadForm, self).__init__(domain_object, *args, **kwargs)
 
-        self.helper.label_class = 'col-sm-3 col-md-2 col-lg-2'
-        self.helper.field_class = 'col-sm-9 col-md-8 col-lg-3'
         # update date_range filter's initial values to span the entirety of
         # the domain's submission range
         default_datespan = datespan_from_beginning(self.domain_object, self.timezone)

From bfcb2e41d046ffb8ae47f841e57f751e45203dc0 Mon Sep 17 00:00:00 2001
From: Jenny Schweers <jschweers@dimagi.com>
Date: Tue, 1 Oct 2024 13:18:51 -0400
Subject: [PATCH 16/20] Migrated export_download_progress.html, all minor
 updates

---
 .../bootstrap5/export_download_progress.html    | 17 +++++++----------
 1 file changed, 7 insertions(+), 10 deletions(-)

diff --git a/corehq/apps/export/templates/export/partials/bootstrap5/export_download_progress.html b/corehq/apps/export/templates/export/partials/bootstrap5/export_download_progress.html
index 33a55bda96f9..a843845b4cbd 100644
--- a/corehq/apps/export/templates/export/partials/bootstrap5/export_download_progress.html
+++ b/corehq/apps/export/templates/export/partials/bootstrap5/export_download_progress.html
@@ -3,8 +3,8 @@
 {% load hq_shared_tags %}
 
 <div id="download-progress" class="ko-template">
-  <div class="form-actions form-actions-exports" data-bind="visible: showDownloadStatus">
-    <div class="col-md-9 offset-md-3">
+  <div data-bind="visible: showDownloadStatus">
+    <div class="col-md-9">
       <div class="row" data-bind="visible: showError">
         <div class="col-md-12">
           <div data-bind="css: {'alert-warning': celeryError(), 'alert-danger': downloadError()}" class="alert">
@@ -22,7 +22,7 @@
       </div>
       <div class="row" data-bind="visible: !showError()">
         <div class="col-sm-6 col-md-4 col-lg-3">
-          <form class="form-inline download-form" method="POST" data-bind="attr: {action: dropboxUrl}">  {# todo B5: css:form-inline #}
+          <form class="download-form" method="POST" data-bind="attr: {action: dropboxUrl}">
             {% csrf_token %}
             <a data-bind="attr: {href: downloadUrl}, visible: isDownloadReady(), click: clickDownload"
                class="btn btn-primary btn-full-width">
@@ -36,7 +36,7 @@
               <span data-bind="visible: !isMultimediaDownload()">{% trans "Collecting Data" %}</span>
               <span data-bind="visible: isMultimediaDownload()">{% trans "Collecting Multimedia" %}</span>
             </button>
-            <button type="button" style="margin-top: 5px;" class="btn btn-full-width"  {# todo B5: inline style #}
+            <button type="button" class="btn btn-full-width mt-1"
                     title="{% trans 'For exports that may take a while to prepare, email a link when download is ready' %}"
                     data-bind="
                                     visible: downloadId() && !isDownloadReady(),
@@ -51,14 +51,11 @@
           </form>
         </div>
         <div class="col-sm-6 col-lg-4" data-bind="visible: !isDownloaded() && !showError()">
-          <div class="progress progress-exports">  {# todo B5: css:progress #}
+          <div class="progress progress-exports mb-1 mt-2" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
             <div id="download-progress-bar" class="progress-bar"
-                 role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
                  data-bind="css: {'bg-success': isDownloadReady}, style: {width: progress() + '%'}">
-                            <span class="sr-only">
-                                <span data-bind="text: progress"></span>%  {# todo B5: css:progress #}
-                                {% trans 'Complete' %}
-                            </span>
+              <!-- ko text: progress --><!-- /ko -->%
+              {% trans 'Complete' %}
             </div>
           </div>
           <div class="badge text-bg-danger label-lg" data-bind="visible: progressError">

From 6ee9c9d56f65f47a3eecf7b078d31ffa29100911 Mon Sep 17 00:00:00 2001
From: Jenny Schweers <jschweers@dimagi.com>
Date: Tue, 1 Oct 2024 13:20:36 -0400
Subject: [PATCH 17/20] Migrated export_download_prepare.html

---
 .../export/bootstrap5/download_export.html    | 30 -------------------
 .../bootstrap5/export_download_prepare.html   | 20 ++++++-------
 2 files changed, 10 insertions(+), 40 deletions(-)

diff --git a/corehq/apps/export/templates/export/bootstrap5/download_export.html b/corehq/apps/export/templates/export/bootstrap5/download_export.html
index ce80ca7417a2..5dd6f6ada92d 100644
--- a/corehq/apps/export/templates/export/bootstrap5/download_export.html
+++ b/corehq/apps/export/templates/export/bootstrap5/download_export.html
@@ -4,36 +4,6 @@
 {% load hq_shared_tags %}
 {% load compress %}
 
-{% block stylesheets %}
-  <style type="text/css">
-    .form-notice-container {
-      position: relative;
-    }
-    .form-notice {
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      background-color: rgba(255, 255, 255, 0.6);
-      /*The z-index is set to cover date input text-box with class .input-group .form-control */
-      /*Its z-index is set to 2 by bootstrap, so making this 3 */
-      z-index: 3;
-
-    }
-    .form-notice .label {
-      display: block;
-    }
-    .progress-exports {
-      margin-bottom: 2px;
-      margin-top: 6px;
-    }
-    .form-actions-exports {
-      margin-bottom: 30px;
-    }
-  </style>
-{% endblock stylesheets %}
-
 {% requirejs_main_b5 'export/js/bootstrap5/download_export' %}
 
 {% block page_title %}
diff --git a/corehq/apps/export/templates/export/partials/bootstrap5/export_download_prepare.html b/corehq/apps/export/templates/export/partials/bootstrap5/export_download_prepare.html
index b4b539ea2472..c7343374ec58 100644
--- a/corehq/apps/export/templates/export/partials/bootstrap5/export_download_prepare.html
+++ b/corehq/apps/export/templates/export/partials/bootstrap5/export_download_prepare.html
@@ -2,19 +2,19 @@
 {% load i18n %}
 {% load hq_shared_tags %}
 
-<form class="form form-horizontal form-notice-container" name="exportFiltersForm" data-bind="submit: prepareExport">
-  <div class="form-notice-container">
+<form class="form form-horizontal" name="exportFiltersForm" data-bind="submit: prepareExport">
+  <div class="position-relative">
     {% if dynamic_filters %}
-      <div class="form-group"  {# todo B5: css:form-group #}
-           data-bind="allowDescendantBindings: false"> {# IMPORTANT: needed because some of the dynamic_filters have their own ko bindings #}
+      <div class="mb-3" data-bind="allowDescendantBindings: false"> {# IMPORTANT: needed because some of the dynamic_filters have their own ko bindings #}
         {{ dynamic_filters }}
       </div>
     {% endif %}
-    {% crispy download_export_form %}  {# todo B5: check crispy #}
-    <div class="form-notice" data-bind="visible: downloadInProgress()">
+    {% crispy download_export_form %}
+    <div class="form-notice position-absolute top-0 start-0 bottom-0 end-0 opacity-75 bg-white"
+         data-bind="visible: downloadInProgress()">
       <div class="row">
-        <div class="col-md-9 col-xl-5 offset-md-3">
-          <div class="badge text-bg-secondary label-lg">
+        <div class="col-md-9 col-xl-5">
+          <div class="badge text-bg-secondary label-lg bg-secondary">
             <i class="fa fa-info-circle"></i>
             {% trans "Filters inactive while download in progress. " %}
           </div>
@@ -22,8 +22,8 @@
       </div>
     </div>
   </div>
-  <div class="form-actions form-actions-exports" data-bind="visible: !downloadInProgress()">
-    <div class="col-md-9 offset-md-3">
+  <div data-bind="visible: !downloadInProgress()">
+    <div class="col-md-9">
       <div class="alert alert-warning" data-bind="visible: prepareExportError()">
         <i class="fa-solid fa-triangle-exclamation"></i>
         <span data-bind="text: prepareExportError"></span>

From b537f7ac77d8337f2eb114d6bf621a20552191af Mon Sep 17 00:00:00 2001
From: Jenny Schweers <jschweers@dimagi.com>
Date: Tue, 1 Oct 2024 13:33:42 -0400
Subject: [PATCH 18/20] Moved date range picker to B5

---
 .../export/js/bootstrap5/download_export.js     | 10 +++-------
 corehq/apps/hqwebapp/widgets.py                 | 17 ++++++++++++++++-
 2 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/corehq/apps/export/static/export/js/bootstrap5/download_export.js b/corehq/apps/export/static/export/js/bootstrap5/download_export.js
index 15af4310c896..b0480354ea5f 100644
--- a/corehq/apps/export/static/export/js/bootstrap5/download_export.js
+++ b/corehq/apps/export/static/export/js/bootstrap5/download_export.js
@@ -13,12 +13,12 @@ hqDefine('export/js/bootstrap5/download_export', [
     'underscore',
     'hqwebapp/js/assert_properties',
     'hqwebapp/js/initial_page_data',
+    'hqwebapp/js/tempus_dominus',
     'analytix/js/google',
     'analytix/js/kissmetrix',
     'reports/js/filters/bootstrap5/main',
     'reports/js/reports.util',
     'export/js/utils',
-    'hqwebapp/js/daterangepicker.config',   // createDateRangePicker
     'jquery.cookie/jquery.cookie',      // for resuming export downloads on refresh
 ], function (
     $,
@@ -26,6 +26,7 @@ hqDefine('export/js/bootstrap5/download_export', [
     _,
     assertProperties,
     initialPageData,
+    hqTempusDominus,
     googleAnalytics,
     kissmetricsAnalytics,
     reportFilters,
@@ -435,12 +436,7 @@ hqDefine('export/js/bootstrap5/download_export', [
 
         $(".hqwebapp-datespan").each(function () {
             var $el = $(this).find("input");
-            $el.createDateRangePicker(  /* todo B5: plugin:createDateRangePicker */
-                $el.data("labels"),
-                $el.data("separator"),
-                $el.data('startDate'),
-                $el.data('endDate')
-            );
+            hqTempusDominus.createDateRangePicker($el.get(0), $el.data("separator"));
         });
     });
 });
diff --git a/corehq/apps/hqwebapp/widgets.py b/corehq/apps/hqwebapp/widgets.py
index 44e62860a384..22afed38e9ff 100644
--- a/corehq/apps/hqwebapp/widgets.py
+++ b/corehq/apps/hqwebapp/widgets.py
@@ -137,12 +137,27 @@ def render(self, name, value, attrs=None, renderer=None):
 
         attrs.update({
             'data-separator': self.separator,
-            'data-labels': json.dumps(self.range_labels),
             'data-start-date': startdate,
             'data-end-date': enddate,
         })
 
+        from corehq.apps.hqwebapp.utils.bootstrap import get_bootstrap_version, BOOTSTRAP_5
+        use_bootstrap5 = get_bootstrap_version() == BOOTSTRAP_5
+        if use_bootstrap5:
+            attrs.update({
+                'data-labels': json.dumps(self.range_labels),
+            })
+
         output = super(DateRangePickerWidget, self).render(name, value, attrs, renderer)
+        if use_bootstrap5:
+            return format_html(
+                '<div class="input-group hqwebapp-datespan">'
+                '   <span class="input-group-text"><i class="fa-solid fa-calendar-days"></i></span>'
+                '   {}'
+                '</div>',
+                output
+            )
+
         return format_html(
             '<div class="input-group hqwebapp-datespan">'
             '   <span class="input-group-addon"><i class="fa-solid fa-calendar-days"></i></span>'

From 3f7bb398f3eba87dfa7c395cd2dabfcf8cd9dd1f Mon Sep 17 00:00:00 2001
From: Jenny Schweers <jschweers@dimagi.com>
Date: Tue, 1 Oct 2024 20:04:41 -0400
Subject: [PATCH 19/20] Fixed lint errors

---
 corehq/apps/export/static/export/js/bootstrap5/export_list.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/corehq/apps/export/static/export/js/bootstrap5/export_list.js b/corehq/apps/export/static/export/js/bootstrap5/export_list.js
index bdc8a67b76f0..9a9e51b2b6c8 100644
--- a/corehq/apps/export/static/export/js/bootstrap5/export_list.js
+++ b/corehq/apps/export/static/export/js/bootstrap5/export_list.js
@@ -472,7 +472,7 @@ hqDefine("export/js/bootstrap5/export_list", [
             return false;
         });
 
-        self.BulkExportDelete = function (observable, event) {
+        self.BulkExportDelete = function () {
             var count = self.bulkExportDownloadCount;
             self.panels().forEach(panel => panel.isBulkDeleting(true));
             var bulkDelete = function () {

From f9a02443a19c3d1f35726cf98a9d735b666a2392 Mon Sep 17 00:00:00 2001
From: Jenny Schweers <jschweers@dimagi.com>
Date: Wed, 2 Oct 2024 00:08:58 +0000
Subject: [PATCH 20/20] "Bootstrap 5 Migration - Rebuilt diffs"

---
 ..._delete_custom_export_dialog.html.diff.txt |  11 +-
 .../delete_custom_export_dialog.html.diff.txt |  15 +-
 .../process_deleted_questions.html.diff.txt   |  25 +-
 ...rocess_deprecated_properties.html.diff.txt |  19 +-
 .../export/download_export.html.diff.txt      |  38 ++-
 .../export/export_list.html.diff.txt          |   6 +-
 .../partials/delete_bulk_notice.html.diff.txt |  70 ++--
 .../partials/export_bulk_notice.html.diff.txt |  43 ++-
 .../export_download_prepare.html.diff.txt     |  34 +-
 .../export_download_progress.html.diff.txt    |  29 +-
 .../export_list_controller.html.diff.txt      |  25 +-
 ...ort_list_create_export_modal.html.diff.txt |  72 +++--
 .../partials/feed_filter_modal.html.diff.txt  |  26 +-
 ...ata_feed_limit_reached_modal.html.diff.txt |  21 +-
 .../export/partials/table.html.diff.txt       | 299 ++++++++++++------
 .../export/js/download_export.js.diff.txt     |  33 +-
 .../export/js/export_list.js.diff.txt         |  65 ++--
 ...cludes_variables._variables.style.diff.txt |   4 +-
 18 files changed, 572 insertions(+), 263 deletions(-)

diff --git a/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/export/dialogs/bulk_delete_custom_export_dialog.html.diff.txt b/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/export/dialogs/bulk_delete_custom_export_dialog.html.diff.txt
index c7e16d3838f8..3393a89a9ba7 100644
--- a/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/export/dialogs/bulk_delete_custom_export_dialog.html.diff.txt
+++ b/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/export/dialogs/bulk_delete_custom_export_dialog.html.diff.txt
@@ -1,22 +1,23 @@
 --- 
 +++ 
-@@ -3,8 +3,8 @@
+@@ -3,8 +3,7 @@
  <div data-bind="attr: {id: 'bulk-delete-export-modal'}" class="modal fade">
    <div class="modal-dialog">
      <div class="modal-content">
 -      <div class="modal-header" style="color:black;">
 -        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-+      <div class="modal-header" style="color:black;">  {# todo B5: css:modal-header, inline style #}
-+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>  {# todo B5: css:close #}
++      <div class="modal-header">
          <h4 class="modal-title">
            <!-- ko if: isOData || isFeed -->
              <!-- ko if: isMultiple -->
-@@ -28,7 +28,7 @@
+@@ -27,8 +26,9 @@
+             <!-- /ko -->
            <!-- /ko -->
          </h4>
++        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% trans_html_attr "Close" %}"></button>
        </div>
 -      <div class="modal-body" style="color:black;">
-+      <div class="modal-body" style="color:black;">  {# todo B5: inline style #}
++      <div class="modal-body">
          <p>
            <!-- ko if: isOData || isFeed -->
              <!-- ko if: isMultiple -->
diff --git a/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/export/dialogs/delete_custom_export_dialog.html.diff.txt b/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/export/dialogs/delete_custom_export_dialog.html.diff.txt
index 5651b193c372..9105049f6309 100644
--- a/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/export/dialogs/delete_custom_export_dialog.html.diff.txt
+++ b/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/export/dialogs/delete_custom_export_dialog.html.diff.txt
@@ -1,16 +1,21 @@
 --- 
 +++ 
-@@ -3,8 +3,8 @@
- <div data-bind="attr: {id: 'delete-export-modal-' + id()}" class="modal fade">
+@@ -4,7 +4,6 @@
    <div class="modal-dialog">
      <div class="modal-content">
--      <div class="modal-header">
+       <div class="modal-header">
 -        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
-+      <div class="modal-header">  {# todo B5: css:modal-header #}
-+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>  {# todo B5: css:close #}
          <h4 class="modal-title">
            <!-- ko if: isOData() -->
              {% blocktrans %}
+@@ -17,6 +16,7 @@
+             {% endblocktrans %}
+           <!-- /ko -->
+         </h4>
++        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% trans_html_attr "Close" %}"></button>
+       </div>
+       <form name="drop_report" data-bind="attr: {action: deleteUrl}" method="post">
+         {% csrf_token %}
 @@ -35,12 +35,12 @@
            </p>
          </div>
diff --git a/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/export/dialogs/process_deleted_questions.html.diff.txt b/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/export/dialogs/process_deleted_questions.html.diff.txt
index b42a5dc63f42..0e61879418e7 100644
--- a/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/export/dialogs/process_deleted_questions.html.diff.txt
+++ b/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/export/dialogs/process_deleted_questions.html.diff.txt
@@ -1,17 +1,24 @@
 --- 
 +++ 
-@@ -3,8 +3,8 @@
- <div class="modal fade" tabindex="-1" role="dialog" id="export-process-deleted-applications">
+@@ -4,9 +4,6 @@
    <div class="modal-dialog" role="document">
      <div class="modal-content">
--      <div class="modal-header">
+       <div class="modal-header">
 -        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-+      <div class="modal-header">  {# todo B5: css:modal-header #}
-+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">  {# todo B5: css:close #}
-           <span aria-hidden="true">&times;</span>
-         </button>
+-          <span aria-hidden="true">&times;</span>
+-        </button>
          <h4 class="modal-title">
-@@ -34,7 +34,7 @@
+           {% if export_instance.type == 'form' %}
+             {% trans "Show Deleted Questions" %}
+@@ -14,6 +11,7 @@
+             {% trans "Show Deleted Properties" %}
+           {% endif %}
+         </h4>
++        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% trans_html_attr "Close" %}"></button>
+       </div>
+       <div class="modal-body">
+         <p>
+@@ -34,7 +32,7 @@
            {% trans "Unable to process applications. Please report an issue if this persists" %}
          </p>
          <div class="spacer"></div>
@@ -20,7 +27,7 @@
            <div class="progress-bar" role="progressbar" data-bind="
                style: {
                    width: buildSchemaProgress() + '%'
-@@ -43,7 +43,7 @@
+@@ -43,7 +41,7 @@
          </div>
        </div>
        <div class="modal-footer">
diff --git a/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/export/dialogs/process_deprecated_properties.html.diff.txt b/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/export/dialogs/process_deprecated_properties.html.diff.txt
index f664db38079b..72d053b1cceb 100644
--- a/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/export/dialogs/process_deprecated_properties.html.diff.txt
+++ b/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/export/dialogs/process_deprecated_properties.html.diff.txt
@@ -1,17 +1,20 @@
 --- 
 +++ 
-@@ -3,8 +3,8 @@
- <div class="modal fade" tabindex="-1" role="dialog" id="export-process-deprecated-properties">
+@@ -4,12 +4,10 @@
    <div class="modal-dialog" role="document">
      <div class="modal-content">
--      <div class="modal-header">
+       <div class="modal-header">
 -        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-+      <div class="modal-header">  {# todo B5: css:modal-header #}
-+        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close">  {# todo B5: css:close #}
-           <span aria-hidden="true">&times;</span>
-         </button>
+-          <span aria-hidden="true">&times;</span>
+-        </button>
          <h4 class="modal-title">
-@@ -21,7 +21,7 @@
+           {% trans "Show Deprecated Properties" %}
+         </h4>
++        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% trans_html_attr "Close" %}"></button>
+       </div>
+       <div class="modal-body">
+         <p>
+@@ -21,7 +19,7 @@
          <div class="spacer"></div>
        </div>
        <div class="modal-footer">
diff --git a/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/export/download_export.html.diff.txt b/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/export/download_export.html.diff.txt
index d79bbd1334cd..8358ca961f26 100644
--- a/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/export/download_export.html.diff.txt
+++ b/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/export/download_export.html.diff.txt
@@ -1,21 +1,49 @@
 --- 
 +++ 
-@@ -1,4 +1,4 @@
+@@ -1,40 +1,10 @@
 -{% extends 'hqwebapp/bootstrap3/base_section.html' %}
 +{% extends 'hqwebapp/bootstrap5/base_section.html' %}
  {% load crispy_forms_tags %}
  {% load i18n %}
  {% load hq_shared_tags %}
-@@ -34,7 +34,7 @@
-   </style>
- {% endblock stylesheets %}
+ {% load compress %}
  
+-{% block stylesheets %}
+-  <style type="text/css">
+-    .form-notice-container {
+-      position: relative;
+-    }
+-    .form-notice {
+-      position: absolute;
+-      top: 0;
+-      left: 0;
+-      width: 100%;
+-      height: 100%;
+-      background-color: rgba(255, 255, 255, 0.6);
+-      /*The z-index is set to cover date input text-box with class .input-group .form-control */
+-      /*Its z-index is set to 2 by bootstrap, so making this 3 */
+-      z-index: 3;
+-
+-    }
+-    .form-notice .label {
+-      display: block;
+-    }
+-    .progress-exports {
+-      margin-bottom: 2px;
+-      margin-top: 6px;
+-    }
+-    .form-actions-exports {
+-      margin-bottom: 30px;
+-    }
+-  </style>
+-{% endblock stylesheets %}
+-
 -{% requirejs_main 'export/js/bootstrap3/download_export' %}
 +{% requirejs_main_b5 'export/js/bootstrap5/download_export' %}
  
  {% block page_title %}
    {{ current_page.title }}
-@@ -99,9 +99,9 @@
+@@ -99,9 +69,9 @@
          </p>
        </div>
      {% else %}
diff --git a/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/export/export_list.html.diff.txt b/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/export/export_list.html.diff.txt
index 98ce4721440d..2ce9f9e4413a 100644
--- a/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/export/export_list.html.diff.txt
+++ b/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/export/export_list.html.diff.txt
@@ -1,6 +1,10 @@
 --- 
 +++ 
-@@ -4,7 +4,7 @@
+@@ -1,10 +1,10 @@
+-{%  extends 'hqwebapp/bootstrap3/base_section.html' %}
++{%  extends 'hqwebapp/bootstrap5/base_section.html' %}
+ {% load crispy_forms_tags %}
+ {% load i18n %}
  {% load hq_shared_tags %}
  {% load compress %}
  
diff --git a/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/export/partials/delete_bulk_notice.html.diff.txt b/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/export/partials/delete_bulk_notice.html.diff.txt
index 0f55d2441cc0..fd77d4ea90f6 100644
--- a/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/export/partials/delete_bulk_notice.html.diff.txt
+++ b/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/export/partials/delete_bulk_notice.html.diff.txt
@@ -1,26 +1,60 @@
 --- 
 +++ 
-@@ -1,10 +1,10 @@
+@@ -1,31 +1,27 @@
  {% load i18n %}
- <div data-bind="visible: bulkExportDownloadCount()">
+-<div data-bind="visible: bulkExportDownloadCount()">
 -  <div class="pull-right" data-toggle="tooltip-bulkDelete" data-placement="top">
-+  <div class="float-end" data-bs-toggle="tooltip-bulkDelete" data-placement="top">
-     <input name="delete_list" type="hidden"/>
+-    <input name="delete_list" type="hidden"/>
 -    <p style="float:right">
 -      <a class="btn btn-danger btn-primary"
 -         data-toggle="modal"
-+    <p style="float:right">  {# todo B5: inline style #}
-+      <a class="btn btn-outline-danger btn-primary"
-+         data-bs-toggle="modal"
-          data-bind="attr: {
-                       href: '#bulk-delete-export-modal'
-                     }">
-@@ -25,7 +25,7 @@
-           <!-- /ko -->
-         <!-- /ko -->
-       </a>
+-         data-bind="attr: {
+-                      href: '#bulk-delete-export-modal'
+-                    }">
+-        <!-- ko if: isOData || isFeed -->
+-          <!-- ko if: isMultiple -->
+-            {% trans "Delete Selected Feeds" %}
+-          <!-- /ko -->
+-          <!-- ko if: !isMultiple() -->
+-            {% trans "Delete Selected Feed" %}
+-          <!-- /ko -->
+-        <!-- /ko -->
+-        <!-- ko if: !isOData && !isFeed -->
+-          <!-- ko if: isMultiple -->
+-            {% trans "Delete Selected Exports" %}
+-          <!-- /ko -->
+-          <!-- ko if: !isMultiple() -->
+-            {% trans "Delete Selected Export" %}
+-          <!-- /ko -->
+-        <!-- /ko -->
+-      </a>
 -      {% include "export/dialogs/bootstrap3/bulk_delete_custom_export_dialog.html" %}
-+      {% include "export/dialogs/bootstrap5/bulk_delete_custom_export_dialog.html" %}
-     </p>
-   </div>
- </div>
+-    </p>
+-  </div>
+-</div>
++<span data-bind="visible: bulkExportDownloadCount()">
++  <input name="delete_list" type="hidden"/>
++  <a class="btn btn-outline-danger"
++     data-bs-toggle="modal"
++     data-bind="attr: {
++                  href: '#bulk-delete-export-modal'
++                }">
++    <!-- ko if: isOData || isFeed -->
++      <!-- ko if: isMultiple -->
++        {% trans "Delete Selected Feeds" %}
++      <!-- /ko -->
++      <!-- ko if: !isMultiple() -->
++        {% trans "Delete Selected Feed" %}
++      <!-- /ko -->
++    <!-- /ko -->
++    <!-- ko if: !isOData && !isFeed -->
++      <!-- ko if: isMultiple -->
++        {% trans "Delete Selected Exports" %}
++      <!-- /ko -->
++      <!-- ko if: !isMultiple() -->
++        {% trans "Delete Selected Export" %}
++      <!-- /ko -->
++    <!-- /ko -->
++  </a>
++  {% include "export/dialogs/bootstrap5/bulk_delete_custom_export_dialog.html" %}
++</span>
diff --git a/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/export/partials/export_bulk_notice.html.diff.txt b/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/export/partials/export_bulk_notice.html.diff.txt
index ea8616a5fa20..6c6d6e8395cb 100644
--- a/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/export/partials/export_bulk_notice.html.diff.txt
+++ b/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/export/partials/export_bulk_notice.html.diff.txt
@@ -1,22 +1,41 @@
 --- 
 +++ 
-@@ -1,15 +1,15 @@
+@@ -1,24 +1,19 @@
  {% load i18n %}
- <div data-bind="visible: bulkExportDownloadCount()"
+-<div data-bind="visible: bulkExportDownloadCount()"
 -     style="float:right; margin-left:8px; margin-bottom:8px">
 -  <form class="form form-inline" method="post"
-+     style="float:right; margin-left:8px; margin-bottom:8px">  {# todo B5: inline style #}
-+  <form class="form form-inline" method="post"  {# todo B5: css:form-inline #}
++<span class="d-inline-block ms-2" data-bind="visible: bulkExportDownloadCount()">
++  <form class="form d-inline" method="post"
          data-bind="submit: submitBulkExportDownload"
          action="{{ bulk_download_url }}">
      {% csrf_token %}
 -    <div style="min-width:110px;" data-toggle="tooltip-bulkExport" data-container=".tooltip-bulk-export" data-placement="top">
-+    <div style="min-width:110px;" data-bs-toggle="tooltip-bulkExport" data-container=".tooltip-bulk-export" data-placement="top">  {# todo B5: inline style #}
-       <input name="export_list" type="hidden" data-bind="value: bulkExportList" />
-       <button type="submit"
-               class="btn btn-primary tooltip-bulk-export"
+-      <input name="export_list" type="hidden" data-bind="value: bulkExportList" />
+-      <button type="submit"
+-              class="btn btn-primary tooltip-bulk-export"
 -              style="width: 100%;">
-+              style="width: 100%;">  {# todo B5: inline style #}
-         {% trans 'Bulk Export' %}
-         (<!-- ko text: bulkExportDownloadCount() --><!-- /ko -->)
-       </button>
+-        {% trans 'Bulk Export' %}
+-        (<!-- ko text: bulkExportDownloadCount() --><!-- /ko -->)
+-      </button>
+-    </div>
++    <input name="export_list" type="hidden" data-bind="value: bulkExportList" />
++    <button type="submit"
++            class="btn btn-primary">
++      {% trans 'Bulk Export' %}
++      (<!-- ko text: bulkExportDownloadCount() --><!-- /ko -->)
++    </button>
++    <span class="hq-help-template"
++          data-title="{% trans "Bulk Export" %}"
++          data-content="{% trans "All of the selected exports will be collected for download to a single Excel file, with each export as a separate sheet." %}"
++          data-placement="left"
++    ></span>
+   </form>
+-</div>
+-
+-<style>
+-.tooltip-bulk-export .tooltip .tooltip-inner {
+-  margin-right: 10px;
+-}
+-</style>
++</span>
diff --git a/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/export/partials/export_download_prepare.html.diff.txt b/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/export/partials/export_download_prepare.html.diff.txt
index a0755d6c475d..5ba432b6f9a3 100644
--- a/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/export/partials/export_download_prepare.html.diff.txt
+++ b/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/export/partials/export_download_prepare.html.diff.txt
@@ -1,32 +1,40 @@
 --- 
 +++ 
-@@ -5,16 +5,16 @@
- <form class="form form-horizontal form-notice-container" name="exportFiltersForm" data-bind="submit: prepareExport">
-   <div class="form-notice-container">
+@@ -2,19 +2,19 @@
+ {% load i18n %}
+ {% load hq_shared_tags %}
+ 
+-<form class="form form-horizontal form-notice-container" name="exportFiltersForm" data-bind="submit: prepareExport">
+-  <div class="form-notice-container">
++<form class="form form-horizontal" name="exportFiltersForm" data-bind="submit: prepareExport">
++  <div class="position-relative">
      {% if dynamic_filters %}
 -      <div class="form-group"
-+      <div class="form-group"  {# todo B5: css:form-group #}
-            data-bind="allowDescendantBindings: false"> {# IMPORTANT: needed because some of the dynamic_filters have their own ko bindings #}
+-           data-bind="allowDescendantBindings: false"> {# IMPORTANT: needed because some of the dynamic_filters have their own ko bindings #}
++      <div class="mb-3" data-bind="allowDescendantBindings: false"> {# IMPORTANT: needed because some of the dynamic_filters have their own ko bindings #}
          {{ dynamic_filters }}
        </div>
      {% endif %}
--    {% crispy download_export_form %}
-+    {% crispy download_export_form %}  {# todo B5: check crispy #}
-     <div class="form-notice" data-bind="visible: downloadInProgress()">
+     {% crispy download_export_form %}
+-    <div class="form-notice" data-bind="visible: downloadInProgress()">
++    <div class="form-notice position-absolute top-0 start-0 bottom-0 end-0 opacity-75 bg-white"
++         data-bind="visible: downloadInProgress()">
        <div class="row">
 -        <div class="col-sm-9 col-lg-5 col-sm-offset-3">
 -          <div class="label label-default label-lg">
-+        <div class="col-md-9 col-xl-5 offset-md-3">
-+          <div class="badge text-bg-secondary label-lg">
++        <div class="col-md-9 col-xl-5">
++          <div class="badge text-bg-secondary label-lg bg-secondary">
              <i class="fa fa-info-circle"></i>
              {% trans "Filters inactive while download in progress. " %}
            </div>
-@@ -23,13 +23,13 @@
+@@ -22,14 +22,14 @@
+       </div>
      </div>
    </div>
-   <div class="form-actions form-actions-exports" data-bind="visible: !downloadInProgress()">
+-  <div class="form-actions form-actions-exports" data-bind="visible: !downloadInProgress()">
 -    <div class="col-sm-9 col-sm-offset-3">
-+    <div class="col-md-9 offset-md-3">
++  <div data-bind="visible: !downloadInProgress()">
++    <div class="col-md-9">
        <div class="alert alert-warning" data-bind="visible: prepareExportError()">
          <i class="fa-solid fa-triangle-exclamation"></i>
          <span data-bind="text: prepareExportError"></span>
diff --git a/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/export/partials/export_download_progress.html.diff.txt b/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/export/partials/export_download_progress.html.diff.txt
index a8706f771140..8ee53b649c98 100644
--- a/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/export/partials/export_download_progress.html.diff.txt
+++ b/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/export/partials/export_download_progress.html.diff.txt
@@ -1,11 +1,13 @@
 --- 
 +++ 
-@@ -4,9 +4,9 @@
+@@ -3,10 +3,10 @@
+ {% load hq_shared_tags %}
  
  <div id="download-progress" class="ko-template">
-   <div class="form-actions form-actions-exports" data-bind="visible: showDownloadStatus">
+-  <div class="form-actions form-actions-exports" data-bind="visible: showDownloadStatus">
 -    <div class="col-sm-9 col-sm-offset-3">
-+    <div class="col-md-9 offset-md-3">
++  <div data-bind="visible: showDownloadStatus">
++    <div class="col-md-9">
        <div class="row" data-bind="visible: showError">
 -        <div class="col-sm-12">
 +        <div class="col-md-12">
@@ -27,7 +29,7 @@
 -        <div class="col-xs-6 col-sm-4 col-md-3">
 -          <form class="form-inline download-form" method="POST" data-bind="attr: {action: dropboxUrl}">
 +        <div class="col-sm-6 col-md-4 col-lg-3">
-+          <form class="form-inline download-form" method="POST" data-bind="attr: {action: dropboxUrl}">  {# todo B5: css:form-inline #}
++          <form class="download-form" method="POST" data-bind="attr: {action: dropboxUrl}">
              {% csrf_token %}
              <a data-bind="attr: {href: downloadUrl}, visible: isDownloadReady(), click: clickDownload"
                 class="btn btn-primary btn-full-width">
@@ -43,7 +45,7 @@
                <span data-bind="visible: isMultimediaDownload()">{% trans "Collecting Multimedia" %}</span>
              </button>
 -            <button type="button" style="margin-top: 5px;" class="btn btn-full-width"
-+            <button type="button" style="margin-top: 5px;" class="btn btn-full-width"  {# todo B5: inline style #}
++            <button type="button" class="btn btn-full-width mt-1"
                      title="{% trans 'For exports that may take a while to prepare, email a link when download is ready' %}"
                      data-bind="
                                      visible: downloadId() && !isDownloadReady(),
@@ -54,23 +56,24 @@
                                  ">
                <i class="fa fa-envelope"></i>
                {% trans "Email me when ready" %}
-@@ -50,25 +50,25 @@
+@@ -50,25 +50,22 @@
              </button>
            </form>
          </div>
 -        <div class="col-xs-6 col-md-4" data-bind="visible: !isDownloaded() && !showError()">
 -          <div class="progress progress-exports">
 +        <div class="col-sm-6 col-lg-4" data-bind="visible: !isDownloaded() && !showError()">
-+          <div class="progress progress-exports">  {# todo B5: css:progress #}
++          <div class="progress progress-exports mb-1 mt-2" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100">
              <div id="download-progress-bar" class="progress-bar"
-                  role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
+-                 role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100"
 -                 data-bind="css: {'progress-bar-success': isDownloadReady}, style: {width: progress() + '%'}">
-+                 data-bind="css: {'bg-success': isDownloadReady}, style: {width: progress() + '%'}">
-                             <span class="sr-only">
+-                            <span class="sr-only">
 -                                <span data-bind="text: progress"></span>%
-+                                <span data-bind="text: progress"></span>%  {# todo B5: css:progress #}
-                                 {% trans 'Complete' %}
-                             </span>
+-                                {% trans 'Complete' %}
+-                            </span>
++                 data-bind="css: {'bg-success': isDownloadReady}, style: {width: progress() + '%'}">
++              <!-- ko text: progress --><!-- /ko -->%
++              {% trans 'Complete' %}
              </div>
            </div>
 -          <div class="label label-danger label-lg" data-bind="visible: progressError">
diff --git a/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/export/partials/export_list_controller.html.diff.txt b/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/export/partials/export_list_controller.html.diff.txt
index 7cb1a1c6d2ac..dc9b826b07a2 100644
--- a/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/export/partials/export_list_controller.html.diff.txt
+++ b/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/export/partials/export_list_controller.html.diff.txt
@@ -1,5 +1,14 @@
 --- 
 +++ 
+@@ -4,7 +4,7 @@
+ {% load humanize %}
+ 
+ {% if request|toggle_enabled:"PAGINATED_EXPORTS" %}
+-  <div class="alert alert-info">
++  <div class="help-block">
+     {% blocktrans with max_rows=max_normal_export_size|intcomma %}
+       These exports are paginated. That means exports that have over {{ max_rows }} rows will be split into multiple files.
+     {% endblocktrans %}
 @@ -22,7 +22,7 @@
  {% if has_edit_permissions %}
    <div id="create-export" class="ko-template">
@@ -24,22 +33,24 @@
  
  <div id="export-list" class="ko-template">
 -  <div class="container-fluid" style="padding-left: 0; padding-right: 0">
-+  <div class="container-fluid" style="padding-left: 0; padding-right: 0">  {# todo B5: inline style #}
++  <div class="mt-n3 text-end" data-bind="visible: bulkExportDownloadCount()">
++    {% if has_edit_permissions %}
++      {% include 'export/partials/bootstrap5/delete_bulk_notice.html' %}
++    {% endif %}
      {% if allow_bulk_export %} {# form exports only #}
 -      {% include 'export/partials/bootstrap3/export_bulk_notice.html' %}
-+      {% include 'export/partials/bootstrap5/export_bulk_notice.html' %}
-     {% endif %}
-     {% if has_edit_permissions %}
+-    {% endif %}
+-    {% if has_edit_permissions %}
 -      {% include 'export/partials/bootstrap3/delete_bulk_notice.html' %}
-+      {% include 'export/partials/bootstrap5/delete_bulk_notice.html' %}
++      {% include 'export/partials/bootstrap5/export_bulk_notice.html' %}
      {% endif %}
    </div>
 -  <div data-bind="foreach: panels" style="display: inline">
 -    <div class="panel panel-default">
 -      <div class="panel-heading" data-bind="text: header"></div>
 -      <div class="panel-body">
-+  <div data-bind="foreach: panels" style="display: inline">  {# todo B5: inline style #}
-+    <div class="card ">  {# todo B5: css:panel #}
++  <div data-bind="foreach: panels">
++    <div class="card mt-3">
 +      <div class="card-header" data-bind="text: header"></div>
 +      <div class="card-body">
          {% include 'export/partials/loading_exports.html' %}
diff --git a/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/export/partials/export_list_create_export_modal.html.diff.txt b/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/export/partials/export_list_create_export_modal.html.diff.txt
index e9be53007664..3498d7fb1298 100644
--- a/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/export/partials/export_list_create_export_modal.html.diff.txt
+++ b/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/export/partials/export_list_create_export_modal.html.diff.txt
@@ -1,17 +1,18 @@
 --- 
 +++ 
-@@ -6,8 +6,8 @@
-   <div class="modal-dialog">
+@@ -7,10 +7,8 @@
      <form name="exportOptionsForm" class="form form-horizontal" data-bind="submit: handleSubmitForm">
        <div class="modal-content">
--        <div class="modal-header">
+         <div class="modal-header">
 -          <button type="button" class="close" data-dismiss="modal">
-+        <div class="modal-header">  {# todo B5: css:modal-header #}
-+          <button type="button" class="btn-close" data-bs-dismiss="modal">  {# todo B5: css:close #}
-             <span aria-hidden="true">&times;</span><span class="sr-only">{% trans 'Close' %}</span>
-           </button>
+-            <span aria-hidden="true">&times;</span><span class="sr-only">{% trans 'Close' %}</span>
+-          </button>
            <h4 class="modal-title">{{ create_export_form_title }}</h4>
-@@ -20,10 +20,10 @@
++          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% trans_html_attr "Close" %}"></button>
+         </div>
+         <div class="modal-body" data-bind="visible: !isLoaded()">
+           <i class="fa fa-spinner fa-spin"></i> {% trans 'Loading Form' %}
+@@ -20,7 +18,7 @@
              <i class="fa-solid fa-triangle-exclamation"></i>
              <strong data-bind="text: drilldownSubmissionError"></strong>
              <p>
@@ -19,21 +20,52 @@
 +              {% blocktrans %}If this problem persists, please <a href="#modalReportIssue" data-bs-toggle="modal">Report an Issue</a>.{% endblocktrans %}
              </p>
            </div>
--          {% crispy create_export_form %}
-+          {% crispy create_export_form %}  {# todo B5: check crispy #}
-           <div class="alert alert-info" data-bind="visible: showHasNoCaseTypes">
-             {% blocktrans %}
-               This application does not appear to be using
-@@ -38,7 +38,7 @@
+           {% crispy create_export_form %}
+@@ -38,22 +36,27 @@
              <i class="fa-solid fa-triangle-exclamation"></i>
              {% trans "Mislabeled" %}
            </div>
 -          <div class="well" data-bind="visible: showSuggestions">
-+          <div class="card" data-bind="visible: showSuggestions">  {# todo B5: css:well #}
-             <h4>{% trans "Suggestions" %}</h4>
-             <div data-bind="visible: showAppDoesNotExist">
-               {% trans "These form submissions are tagged as if they belong to an application that doesn't exist." %}
-@@ -79,7 +79,7 @@
+-            <h4>{% trans "Suggestions" %}</h4>
+-            <div data-bind="visible: showAppDoesNotExist">
+-              {% trans "These form submissions are tagged as if they belong to an application that doesn't exist." %}
+-            </div>
+-            <div data-bind="visible: showDuplicate">
+-              <p>{% trans "These submissions could belong to one of the following forms:" %}</p>
+-              <ul data-bind="foreach: duplicatePossibilities">
+-                <ul>
+-                  <span data-bind="text: app.name"></span> &gt;
+-                  <span data-bind="text: $root.selectedFormName"></span>
+-                  <span data-bind="visible: app_deleted">
+-                                        {% trans "App was deleted." %}
+-                                    </span>
+-                  </li>
+-                </ul>
++          <div class="card" data-bind="visible: showSuggestions">
++            <div class="card-body">
++              <h5 class="card-title">{% trans "Suggestions" %}</h5>
++              <div class="card-text">
++                <div data-bind="visible: showAppDoesNotExist">
++                  {% trans "These form submissions are tagged as if they belong to an application that doesn't exist." %}
++                </div>
++                <div data-bind="visible: showDuplicate">
++                  <p>{% trans "These submissions could belong to one of the following forms:" %}</p>
++                  <ul data-bind="foreach: duplicatePossibilities">
++                    <ul>
++                      <li>
++                        <span data-bind="text: app.name"></span> &gt;
++                        <span data-bind="text: $root.selectedFormName"></span>
++                        <span data-bind="visible: app_deleted">
++                          {% trans "App was deleted." %}
++                        </span>
++                      </li>
++                    </ul>
++                </div>
++              </div>
+             </div>
+           </div>
+         </div>
+@@ -79,7 +82,7 @@
            <p>
              {% blocktrans %}
                If this problem persists, please <a href="#modalReportIssue"
@@ -42,7 +74,7 @@
                message in the description.
              {% endblocktrans %}
            </p>
-@@ -99,8 +99,8 @@
+@@ -99,8 +102,8 @@
          </div>
          <div class="modal-footer">
            <button type="button"
diff --git a/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/export/partials/feed_filter_modal.html.diff.txt b/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/export/partials/feed_filter_modal.html.diff.txt
index 1c9faa5a3a21..55923a7d7d45 100644
--- a/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/export/partials/feed_filter_modal.html.diff.txt
+++ b/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/export/partials/feed_filter_modal.html.diff.txt
@@ -1,26 +1,18 @@
 --- 
 +++ 
-@@ -6,8 +6,8 @@
-   <div class="modal-dialog">
+@@ -7,10 +7,8 @@
      <form name="feedFiltersForm" class="form form-horizontal" data-bind="submit: commitFilters">
        <div class="modal-content">
--        <div class="modal-header">
+         <div class="modal-header">
 -          <button type="button" class="close" data-dismiss="modal">
-+        <div class="modal-header">  {# todo B5: css:modal-header #}
-+          <button type="button" class="btn-close" data-bs-dismiss="modal">  {# todo B5: css:close #}
-             <span aria-hidden="true">&times;</span><span class="sr-only">{% trans 'Close' %}</span>
-           </button>
+-            <span aria-hidden="true">&times;</span><span class="sr-only">{% trans 'Close' %}</span>
+-          </button>
            <h4 class="modal-title">{% trans "Filter Feed" %}</h4>
-@@ -25,7 +25,7 @@
-               </ul>
-             </div>
-           <!-- /ko -->
--          {% crispy export_filter_form %}
-+          {% crispy export_filter_form %}  {# todo B5: check crispy #}
-           <div class="alert alert-danger" role="alert" data-bind="visible: formSubmitErrorMessage">
-             <span data-bind="text: formSubmitErrorMessage"></span>
-             <span data-bind="visible: !formSubmitErrorMessage()">{% trans "There was an unknown error saving the filters" %}</span>
-@@ -33,13 +33,13 @@
++          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% trans_html_attr "Close" %}"></button>
+         </div>
+ 
+         <div class="modal-body" data-bind="validationOptions: {errorMessageClass: 'help-block'}">
+@@ -33,13 +31,13 @@
          </div>
  
          <div class="modal-footer">
diff --git a/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/export/partials/odata_feed_limit_reached_modal.html.diff.txt b/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/export/partials/odata_feed_limit_reached_modal.html.diff.txt
index 6acec603e435..5874dbac08e5 100644
--- a/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/export/partials/odata_feed_limit_reached_modal.html.diff.txt
+++ b/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/export/partials/odata_feed_limit_reached_modal.html.diff.txt
@@ -1,17 +1,22 @@
 --- 
 +++ 
-@@ -3,8 +3,8 @@
- <div class="modal fade" id="odataFeedLimitReachedModal">
+@@ -4,14 +4,12 @@
    <div class="modal-dialog">
      <div class="modal-content">
--      <div class="modal-header">
+       <div class="modal-header">
 -        <button type="button" class="close" data-dismiss="modal">
-+      <div class="modal-header">  {# todo B5: css:modal-header #}
-+        <button type="button" class="btn-close" data-bs-dismiss="modal">  {# todo B5: css:close #}
-           <span aria-hidden="true">&times;</span><span class="sr-only">{% trans 'Close' %}</span>
-         </button>
+-          <span aria-hidden="true">&times;</span><span class="sr-only">{% trans 'Close' %}</span>
+-        </button>
          <h4 class="modal-title">
-@@ -20,7 +20,7 @@
+           {% blocktrans %}
+             Maximum number of OData feeds reached.
+           {% endblocktrans %}
+         </h4>
++        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% trans_html_attr "Close" %}"></button>
+       </div>
+       <div class="modal-body">
+         {% blocktrans %}
+@@ -20,7 +18,7 @@
          {% endblocktrans %}
        </div>
        <div class="modal-footer">
diff --git a/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/export/partials/table.html.diff.txt b/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/export/partials/table.html.diff.txt
index fac3f4f232b0..f26ec8ff2d51 100644
--- a/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/export/partials/table.html.diff.txt
+++ b/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/export/partials/table.html.diff.txt
@@ -40,7 +40,7 @@
        {% if export_filter_form %}
          {% if has_edit_permissions %}
            {% trans "Filters and Files" %}
-@@ -45,11 +45,11 @@
+@@ -45,28 +45,28 @@
      </th>
  
      {% if is_daily_saved_export %}
@@ -54,7 +54,11 @@
          {% if is_daily_saved_export %}
            {% trans "Edit Columns" %}
          {% elif not is_odata %}
-@@ -60,13 +60,13 @@
+           {% trans 'Edit' %}
+         {% else %}
+           {% blocktrans %}
+-            Copy &amp; Edit Feed
++            Copy &amp; Edit
            {% endblocktrans %}
          {% endif %}
        </th>
@@ -70,23 +74,25 @@
            data-bind="visible: showOwnership">
          <span data-bind="visible: myExports">
            {% trans "Share" %}
-@@ -82,29 +82,29 @@
+@@ -82,29 +82,28 @@
      <tr>
      {% if has_edit_permissions or allow_bulk_export %}
        <td>
 -        <div class="checkbox checkbox-table-cell">
-+        <div class="checkbox checkbox-table-cell">  {# todo B5: css:checkbox #}
-           <label>
+-          <label>
 -            <input type="checkbox"
-+            <input type="checkbox"  {# todo B5: css:checkbox #}
-                    data-bind="checked: addedToBulk" />
-           </label>
+-                   data-bind="checked: addedToBulk" />
+-          </label>
++        <div class="form-check checkbox-table-cell">
++          <input type="checkbox"
++                 class="form-check-input"
++                 data-bind="checked: addedToBulk" />
          </div>
        </td>
      {% endif %}
        <td>
 -        <h4 data-bind="css: {'text-muted': hasEmailedExport && !isAutoRebuildEnabled()}">
-+        <h4 data-bind="css: {'text-body-secondary': hasEmailedExport && !isAutoRebuildEnabled()}">
++        <div data-bind="css: {'text-body-secondary': hasEmailedExport && !isAutoRebuildEnabled()}">
            <inline-edit params="value: name,
                                 url: editNameUrl,
                                 placeholder: '{% trans "Enter name here"|escapejs %}',
@@ -97,7 +103,8 @@
                   data-bind="visible: isDeid()">
              {% trans 'De-Identified' %}
            </label>
-         </h4>
+-        </h4>
++        </div>
          <p data-bind="visible: formname,
                        css: {
 -                        'text-muted': hasEmailedExport && !isAutoRebuildEnabled()
@@ -105,20 +112,35 @@
                        }">
            <i class="fa-regular fa-file"></i>
            <strong>
-@@ -131,10 +131,10 @@
+@@ -129,16 +128,11 @@
+         <!-- ko if: isOData -->
+           <!-- ko with: odataFeedUrl -->
            <p>
-             <div class="input-group">
-               <span data-bind="css: {
+-            <div class="input-group">
+-              <span data-bind="css: {
 -                                 'input-group-btn': showLink
-+                                 'input-group-btn': showLink  {# todo B5: css:input-group-btn #}
-                                },
-                                click: copyLinkRequested">
+-                               },
+-                               click: copyLinkRequested">
 -                <a class="btn btn-default btn-sm">
-+                <a class="btn btn-outline-primary btn-sm">
-                   <i class="fa fa-clipboard"></i>
-                   {% trans "Copy OData Feed Link" %}
-                 </a>
-@@ -154,7 +154,7 @@
+-                  <i class="fa fa-clipboard"></i>
+-                  {% trans "Copy OData Feed Link" %}
+-                </a>
+-              </span>
++            <div data-bind="css: {'input-group': showLink}">
++              <button class="btn btn-outline-primary btn-sm" data-bind="click: copyLinkRequested">
++                <i class="fa fa-clipboard"></i>
++                {% trans "Copy OData Feed Link" %}
++              </button>
+               <input data-bind="visible: showLink,
+                                 value: url"
+                      type="text"
+@@ -149,12 +143,12 @@
+           <!-- /ko -->
+           <!-- ko if: hasAdditionalODataFeeds -->
+             <p>
+-              <a class="btn btn-link btn-sm"
++              <a class="btn btn-sm btn-outline-primary"
+                  data-bind="attr: {
                                href: '#' + id() + '-odata-additional'
                              },
                              click: sendAnalyticsOpenAdditionalFeeds"
@@ -127,34 +149,48 @@
                  <i class="fa fa-rss"></i>
                  <!-- ko if: exportType() == 'form' -->
                    {% trans "Show additional feeds for Repeat Group data." %}
-@@ -168,10 +168,10 @@
-                  data-bind="attr: {id: id() + '-odata-additional'}">
+@@ -169,17 +163,10 @@
                <div class="modal-dialog">
                  <div class="modal-content">
--                  <div class="modal-header">
-+                  <div class="modal-header">  {# todo B5: css:modal-header #}
-                     <button type="button"
+                   <div class="modal-header">
+-                    <button type="button"
 -                            class="close"
 -                            data-dismiss="modal">
-+                            class="btn-close"  {# todo B5: css:close #}
-+                            data-bs-dismiss="modal">
-                       <span aria-hidden="true">&times;</span>
-                       <span class="sr-only">
-                         {% trans 'Close' %}
-@@ -199,10 +199,10 @@
+-                      <span aria-hidden="true">&times;</span>
+-                      <span class="sr-only">
+-                        {% trans 'Close' %}
+-                      </span>
+-                    </button>
+                     <h4 class="modal-title">
+                       {% trans "Additional Feeds" %}
+                     </h4>
++                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% trans_html_attr "Close" %}"></button>
+                   </div>
+                   <div class="modal-body">
+                     <p class="lead">
+@@ -197,16 +184,11 @@
+                     </p>
+                     <!-- ko foreach: odataAdditionalFeedUrls -->
                      <p>
-                       <div class="input-group">
-                         <span data-bind="css: {
+-                      <div class="input-group">
+-                        <span data-bind="css: {
 -                                           'input-group-btn': url.showLink
-+                                           'input-group-btn': url.showLink  {# todo B5: css:input-group-btn #}
-                                          },
-                                          click: url.copyLinkRequested">
+-                                         },
+-                                         click: url.copyLinkRequested">
 -                          <a class="btn btn-default btn-sm">
-+                          <a class="btn btn-outline-primary btn-sm">
-                             <i class="fa fa-clipboard"></i>
-                             <span data-bind="text: label"></span>
-                           </a>
-@@ -218,9 +218,9 @@
+-                            <i class="fa fa-clipboard"></i>
+-                            <span data-bind="text: label"></span>
+-                          </a>
+-                        </span>
++                      <div data-bind="css: {'input-group': url.showLink}">
++                        <button class="btn btn-outline-primary btn-sm" data-bind="click: url.copyLinkRequested">
++                          <i class="fa fa-clipboard"></i>
++                          <span data-bind="text: label"></span>
++                        </button>
+                         <input data-bind="visible: url.showLink,
+                                           value: url.url"
+                                type="text"
+@@ -218,9 +200,9 @@
                    </div>
                    <div class="modal-footer">
                      <a href="#"
@@ -166,7 +202,16 @@
                        {% trans "Close" %}
                      </a>
                    </div>
-@@ -272,24 +272,24 @@
+@@ -231,7 +213,7 @@
+         <!-- /ko -->
+ 
+         <!-- ko if: hasEmailedExport && !isAutoRebuildEnabled() -->
+-        <p class="text-warning">
++        <p class="text-danger">
+           <i class="fa-solid fa-triangle-exclamation"></i>
+           {% blocktrans %}
+             Automatic updates for this saved {{ export_type }} have been disabled. Click 'Enable'
+@@ -272,32 +254,26 @@
              &nbsp;&nbsp;
              <div data-bind="if: isLocationSafeForUser()">
                <button type="button"
@@ -174,7 +219,8 @@
 +                      class="btn btn-outline-primary btn-sm"
                        data-bind="visible: emailedExport.canUpdateData,
                                   attr: {
-                                    'data-target': '#modalRefreshExportConfirm-' + id() + '-' + emailedExport.groupId()
+-                                   'data-target': '#modalRefreshExportConfirm-' + id() + '-' + emailedExport.groupId()
++                                   'data-bs-target': '#modalRefreshExportConfirm-' + id() + '-' + emailedExport.groupId()
                                   }"
 -                      data-toggle="modal">
 +                      data-bs-toggle="modal">
@@ -191,11 +237,21 @@
                </button>
                <div data-bind="if: emailedExport.taskStatus && emailedExport.taskStatus.started()">
 -                <div class="progress">
-+                <div class="progress">  {# todo B5: css:progress #}
-                   <div class="progress-bar progress-bar-striped active"
-                        role="progressbar"
-                        aria-valuemin="0"
-@@ -312,7 +312,7 @@
+-                  <div class="progress-bar progress-bar-striped active"
+-                       role="progressbar"
+-                       aria-valuemin="0"
+-                       aria-valuemax="100"
+-                       data-bind="attr: {
+-                                    'aria-valuenow': emailedExport.taskStatus.percentComplete(),
+-                                    'style': 'width: ' + emailedExport.taskStatus.percentComplete() + '%',
+-                                  }">
++                <div class="progress" role="progressbar" aria-valuemin="0" aria-valuemax="100" data-bind="attr: {'aria-valuenow': emailedExport.taskStatus.percentComplete()}">
++                  <div class="progress-bar progress-bar-striped"
++                       data-bind="attr: {style: 'width: ' + emailedExport.taskStatus.percentComplete() + '%'}">
+                   </div>
+                 </div>
+               </div>
+@@ -312,22 +288,17 @@
                              href: emailedExport.fileData.downloadUrl()
                            },
                            click: downloadRequested"
@@ -204,20 +260,36 @@
                <i class="fa-solid fa-cloud-arrow-down"></i>
                {% trans "Download" %}
              </a>
-@@ -320,10 +320,10 @@
-               <div class="input-group">
+             <!-- ko if: isFeed -->
+-              <div class="input-group">
++              <div data-bind="css: {'input-group': showLink}">
                  <!-- ko with: feedUrl -->
-                 <span data-bind="css: {
+-                <span data-bind="css: {
 -                                   'input-group-btn': showLink
-+                                   'input-group-btn': showLink  {# todo B5: css:input-group-btn #}
-                                  },
-                                  click: copyLinkRequested">
+-                                 },
+-                                 click: copyLinkRequested">
 -                  <a class="btn btn-default btn-sm">
-+                  <a class="btn btn-outline-primary btn-sm">
-                     <i class="fa fa-clipboard"></i>
-                     {% trans "Copy Dashboard Feed Link" %}
-                   </a>
-@@ -353,7 +353,7 @@
+-                    <i class="fa fa-clipboard"></i>
+-                    {% trans "Copy Dashboard Feed Link" %}
+-                  </a>
+-                </span>
++                <button class="btn btn-outline-primary btn-sm" data-bind="click: copyLinkRequested">
++                  <i class="fa fa-clipboard"></i>
++                  {% trans "Copy Dashboard Feed Link" %}
++                </button>
+                 <input data-bind="visible: showLink,
+                                   value: url"
+                        type="text"
+@@ -339,7 +310,7 @@
+           </div>
+ 
+           <div data-bind="if: isLocationSafeForUser()">
+-            <p class="text-warning"
++            <p class="text-danger"
+                data-bind="if: emailedExport.hasFile() && emailedExport.fileData.showExpiredWarning() && isAutoRebuildEnabled()">
+               <i class="fa-solid fa-triangle-exclamation"></i>
+               {% blocktrans %}
+@@ -353,7 +324,7 @@
                 data-bind="if: emailedExport.taskStatus && emailedExport.taskStatus.failed() == 'too_large'">
                <i class="fa-solid fa-triangle-exclamation"></i>
                {% blocktrans with max_rows=max_daily_export_size|intcomma %}
@@ -226,7 +298,7 @@
                {% endblocktrans %}
              </p>
  
-@@ -372,7 +372,7 @@
+@@ -372,7 +343,7 @@
                  {% trans "Data update failed!" %}
                </strong>
                {% blocktrans %}
@@ -235,21 +307,26 @@
                {% endblocktrans %}
              </p>
  
-@@ -401,10 +401,10 @@
-                  data-bind="attr: {id: 'modalRefreshExportConfirm-' + id() + '-' + emailedExport.groupId()}">
+@@ -402,17 +373,10 @@
                <div class="modal-dialog">
                  <div class="modal-content">
--                  <div class="modal-header">
-+                  <div class="modal-header">  {# todo B5: css:modal-header #}
-                     <button type="button"
+                   <div class="modal-header">
+-                    <button type="button"
 -                            class="close"
 -                            data-dismiss="modal">
-+                            class="btn-close"  {# todo B5: css:close #}
-+                            data-bs-dismiss="modal">
-                       <span aria-hidden="true">&times;</span>
-                       <span class="sr-only">
-                         {% trans 'Close' %}
-@@ -445,8 +445,8 @@
+-                      <span aria-hidden="true">&times;</span>
+-                      <span class="sr-only">
+-                        {% trans 'Close' %}
+-                      </span>
+-                    </button>
+                     <h4 class="modal-title">
+                       {% trans "Confirm data updates" %}
+                     </h4>
++                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% trans_html_attr "Close" %}"></button>
+                   </div>
+                   <div class="modal-body"
+                        data-bind="visible: emailedExport.hasFile() && emailedExport.fileData.showExpiredWarning()">
+@@ -445,8 +409,8 @@
                    </div>
                    <div class="modal-footer">
                      <a href="#"
@@ -260,21 +337,26 @@
                        {% trans "Cancel" %}
                      </a>
                      <button type="button"
-@@ -462,10 +462,10 @@
-                  data-bind="attr: {id: 'modalEnableDisableAutoRefresh-' + id() + '-' + emailedExport.groupId()}">
+@@ -463,17 +427,10 @@
                <div class="modal-dialog">
                  <div class="modal-content">
--                  <div class="modal-header">
-+                  <div class="modal-header">  {# todo B5: css:modal-header #}
-                     <button type="button"
+                   <div class="modal-header">
+-                    <button type="button"
 -                            class="close"
 -                            data-dismiss="modal">
-+                            class="btn-close"  {# todo B5: css:close #}
-+                            data-bs-dismiss="modal">
-                       <span aria-hidden="true">&times;</span>
-                       <span class="sr-only">
-                         {% trans 'Close' %}
-@@ -489,8 +489,8 @@
+-                      <span aria-hidden="true">&times;</span>
+-                      <span class="sr-only">
+-                        {% trans 'Close' %}
+-                      </span>
+-                    </button>
+                     <h4 class="modal-title">
+                       {% trans "Confirm data updates." %}
+                     </h4>
++                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% trans_html_attr "Close" %}"></button>
+                   </div>
+                   <div class="modal-body">
+                     <p data-bind="if: isDailySaved() && !isAutoRebuildEnabled()">
+@@ -489,8 +446,8 @@
                    </div>
                    <div class="modal-footer">
                      <a href="#"
@@ -285,18 +367,18 @@
                        {% trans "Cancel" %}
                      </a>
                      <button type="button"
-@@ -513,8 +513,8 @@
+@@ -513,8 +470,8 @@
        </td>
      {% if model_type == "case" %}
        <td>
 -        <h4 data-bind="text: case_type" style="display: inline-block;"></h4>
 -        <span data-bind="visible: is_case_type_deprecated" class="label label-warning" style="display: inline-block;">{% trans "deprecated" %}</span>
-+        <h4 data-bind="text: case_type" style="display: inline-block;"></h4>  {# todo B5: inline style #}
-+        <span data-bind="visible: is_case_type_deprecated" class="badge text-bg-warning" style="display: inline-block;">{% trans "deprecated" %}</span>  {# todo B5: inline style #}
++        <span class="h4" data-bind="text: case_type"></span>
++        <span data-bind="visible: is_case_type_deprecated" class="badge text-bg-warning">{% trans "deprecated" %}</span>
        </td>
      {% endif %}
  
-@@ -526,19 +526,19 @@
+@@ -526,19 +483,19 @@
          {{ export_type_caps }}
        </a>
        {% if has_edit_permissions %}
@@ -319,21 +401,22 @@
          <i class="fa fa-download"></i>
          {% trans "DET Config" %}
        </a>
-@@ -547,11 +547,11 @@
+@@ -547,11 +504,11 @@
      {% if is_daily_saved_export %}
        <td>
          <!-- ko if: isLocationSafeForUser() -->
 -        <a class="btn btn-default"
 +        <a class="btn btn-outline-primary"
             data-bind="attr: {
-                         'data-target': '#modalEnableDisableAutoRefresh-' + id() + '-' + emailedExport.groupId(),
+-                        'data-target': '#modalEnableDisableAutoRefresh-' + id() + '-' + emailedExport.groupId(),
++                        'data-bs-target': '#modalEnableDisableAutoRefresh-' + id() + '-' + emailedExport.groupId(),
                        }"
 -           data-toggle="modal">
 +           data-bs-toggle="modal">
            <span data-bind="visible: !isAutoRebuildEnabled()">
              {% trans "Enable" %}
            </span>
-@@ -568,10 +568,10 @@
+@@ -568,10 +525,10 @@
          <div data-bind="if: $parent.showOwnership">
            <div data-bind="if: can_edit()">
              <div data-bind="if: isLocationSafeForUser()">
@@ -346,7 +429,16 @@
                   {% else %}
                   data-bind="attr: {href: editUrl}"
                   {% endif %}>
-@@ -597,7 +597,7 @@
+@@ -588,7 +545,7 @@
+                   <i class="fa fa-pencil"></i>
+                   <span>
+                     {% blocktrans %}
+-                      Copy &amp; Edit Feed
++                      Copy &amp; Edit
+                     {% endblocktrans %}
+                   </span>
+                 </div>
+@@ -597,7 +554,7 @@
            </div>
            <div data-bind="ifnot: can_edit()">
              <div data-bind="if: isLocationSafeForUser()">
@@ -355,7 +447,15 @@
                   data-bind="visible: $parent.myExports">
                  <div data-bind="ifnot: isOData()">
                    <i class="fa fa-pencil"></i>
-@@ -619,7 +619,7 @@
+@@ -612,14 +569,14 @@
+                   <i class="fa fa-pencil"></i>
+                   <span>
+                     {% blocktrans %}
+-                      Copy &amp; Edit Feed
++                      Copy &amp; Edit
+                     {% endblocktrans %}
+                   </span>
+                 </div>
                </a>
                <a data-bind="attr: {href: editUrl},
                              visible: !$parent.myExports"
@@ -364,7 +464,7 @@
                  <div data-bind="ifnot: isOData()">
                    <span data-bind="visible: !isDailySaved()">
                      {% trans 'View' %}
-@@ -640,10 +640,10 @@
+@@ -640,10 +597,10 @@
          </div>
          <div data-bind="ifnot: $parent.showOwnership">
            <div data-bind="if: isLocationSafeForUser()">
@@ -377,7 +477,16 @@
                      {% else %}
                      data-bind="click: editExport"
                      {% endif %}>
-@@ -670,15 +670,15 @@
+@@ -660,7 +617,7 @@
+                 <i class="fa fa-pencil"></i>
+                 <span>
+                   {% blocktrans %}
+-                    Copy &amp; Edit Feed
++                    Copy &amp; Edit
+                   {% endblocktrans %}
+                 </span>
+               </div>
+@@ -670,15 +627,15 @@
        </td>
        <td>
          <div data-bind="if: isLocationSafeForUser()">
@@ -396,7 +505,7 @@
          </div>
        </td>
      {% endif %}
-@@ -698,7 +698,7 @@
+@@ -698,7 +655,7 @@
          </div>
          <div data-bind="visible: !$parent.myExports">
            <div data-bind="visible: owner_username === 'unknown'">
diff --git a/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/javascript/export/js/download_export.js.diff.txt b/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/javascript/export/js/download_export.js.diff.txt
index a34dcad2ed03..435b26b54202 100644
--- a/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/javascript/export/js/download_export.js.diff.txt
+++ b/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/javascript/export/js/download_export.js.diff.txt
@@ -1,6 +1,6 @@
 --- 
 +++ 
-@@ -7,7 +7,7 @@
+@@ -7,18 +7,18 @@
   *      downloadProgressModel: Controls the progress bar, etc. once the user has clicked 'Prepare Export'.
   *          Includes functionality to email the user when the export is done, rather than them waiting for it.
   */
@@ -9,21 +9,38 @@
      'jquery',
      'knockout',
      'underscore',
-@@ -15,7 +15,7 @@
+     'hqwebapp/js/assert_properties',
      'hqwebapp/js/initial_page_data',
++    'hqwebapp/js/tempus_dominus',
      'analytix/js/google',
      'analytix/js/kissmetrix',
 -    'reports/js/filters/bootstrap3/main',
 +    'reports/js/filters/bootstrap5/main',
      'reports/js/reports.util',
      'export/js/utils',
-     'hqwebapp/js/daterangepicker.config',   // createDateRangePicker
-@@ -435,7 +435,7 @@
+-    'hqwebapp/js/daterangepicker.config',   // createDateRangePicker
+     'jquery.cookie/jquery.cookie',      // for resuming export downloads on refresh
+ ], function (
+     $,
+@@ -26,6 +26,7 @@
+     _,
+     assertProperties,
+     initialPageData,
++    hqTempusDominus,
+     googleAnalytics,
+     kissmetricsAnalytics,
+     reportFilters,
+@@ -435,12 +436,7 @@
  
          $(".hqwebapp-datespan").each(function () {
              var $el = $(this).find("input");
 -            $el.createDateRangePicker(
-+            $el.createDateRangePicker(  /* todo B5: plugin:createDateRangePicker */
-                 $el.data("labels"),
-                 $el.data("separator"),
-                 $el.data('startDate'),
+-                $el.data("labels"),
+-                $el.data("separator"),
+-                $el.data('startDate'),
+-                $el.data('endDate')
+-            );
++            hqTempusDominus.createDateRangePicker($el.get(0), $el.data("separator"));
+         });
+     });
+ });
diff --git a/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/javascript/export/js/export_list.js.diff.txt b/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/javascript/export/js/export_list.js.diff.txt
index ebd1a683179f..cadd71a82d8d 100644
--- a/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/javascript/export/js/export_list.js.diff.txt
+++ b/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/javascript/export/js/export_list.js.diff.txt
@@ -1,6 +1,6 @@
 --- 
 +++ 
-@@ -11,7 +11,7 @@
+@@ -11,23 +11,25 @@
   *          bulk export, which is a page-level action (you can select exports across panels to bulk export).
   *          It also controls filter editing (for daily saved / dashboard feeds).
   */
@@ -9,7 +9,9 @@
      'jquery',
      'knockout',
      'underscore',
-@@ -20,8 +20,8 @@
+     'hqwebapp/js/assert_properties',
++    'es6!hqwebapp/js/bootstrap5_loader',
+     'clipboard/dist/clipboard',
      'analytix/js/google',
      'analytix/js/kissmetrix',
      'export/js/utils',
@@ -20,44 +22,71 @@
      'select2/dist/js/select2.full.min',
  ], function (
      $,
-@@ -181,7 +181,7 @@
+     ko,
+     _,
+     assertProperties,
++    bootstrap,
+     Clipboard,
+     googleAnalytics,
+     kissmetricsAnalytics,
+@@ -181,7 +183,8 @@
                          self.isAutoRebuildEnabled(data.isAutoRebuildEnabled);
                      }
                      $button.enableButton();
 -                    $('#modalEnableDisableAutoRefresh-' + self.id() + '-' + self.emailedExport.groupId()).modal('hide');
-+                    $('#modalEnableDisableAutoRefresh-' + self.id() + '-' + self.emailedExport.groupId()).modal('hide');  /* todo B5: plugin:modal */
++                    const modalId = 'modalEnableDisableAutoRefresh-' + self.id() + '-' + self.emailedExport.groupId();
++                    bootstrap.Modal.getInstance('#' + modalId).hide();
                  },
              });
          };
-@@ -261,7 +261,7 @@
+@@ -261,7 +264,9 @@
          };
  
          self.updateData = function () {
 -            $('#modalRefreshExportConfirm-' + exportId + '-' + self.groupId()).modal('hide');
-+            $('#modalRefreshExportConfirm-' + exportId + '-' + self.groupId()).modal('hide');  /* todo B5: plugin:modal */
++            const modalId = 'modalRefreshExportConfirm-' + exportId + '-' + self.groupId();
++            bootstrap.Modal.getInstance('#' + modalId).hide();
++
              self.updatingData(true);
              $.ajax({
                  method: 'POST',
-@@ -472,11 +472,11 @@
-         $(function () {
-             $('[data-toggle="tooltip-bulkExport"]').attr('title',
-                 gettext("All of the selected exports will be collected for download to a " +
--                "single Excel file, with each export as a separate sheet.")).tooltip();
-+                "single Excel file, with each export as a separate sheet.")).tooltip();  /* todo B5: plugin:tooltip */
-         });
+@@ -462,29 +467,12 @@
+             return true;
+         };
  
-         $(function () {
+-        var tooltipText = "";
+-        if (self.isOData || self.isFeed) {
+-            tooltipText = gettext("All of the selected feeds will be deleted.");
+-        } else {
+-            tooltipText = gettext("All of the selected exports will be deleted.");
+-        }
+-
+-        $(function () {
+-            $('[data-toggle="tooltip-bulkExport"]').attr('title',
+-                gettext("All of the selected exports will be collected for download to a " +
+-                "single Excel file, with each export as a separate sheet.")).tooltip();
+-        });
+-
+-        $(function () {
 -            $('[data-toggle="tooltip-bulkDelete"]').attr('title', tooltipText).tooltip({trigger: 'hover'});
-+            $('[data-toggle="tooltip-bulkDelete"]').attr('title', tooltipText).tooltip({trigger: 'hover'});  /* todo B5: plugin:tooltip */
+-        });
+-
+         self.isMultiple = ko.computed(function () {
+             if (self.bulkDeleteList().length > 1) { return true; }
+             return false;
          });
  
-         self.isMultiple = ko.computed(function () {
-@@ -680,7 +680,7 @@
+-        self.BulkExportDelete = function (observable, event) {
++        self.BulkExportDelete = function () {
+             var count = self.bulkExportDownloadCount;
+             self.panels().forEach(panel => panel.isBulkDeleting(true));
+             var bulkDelete = function () {
+@@ -680,7 +668,7 @@
                          if (export_.hasEmailedExport) {
                              export_.emailedExport.pollProgressBar();
                          }
 -                        self.$filterModal.modal('hide');
-+                        self.$filterModal.modal('hide');  /* todo B5: plugin:modal */
++                        bootstrap.Modal.getInstance(self.$filterModal.get(0)).hide();
                      } else {
                          self.formSubmitErrorMessage(data.error);
                      }
diff --git a/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/stylesheets/imports/includes_variables._variables.style.diff.txt b/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/stylesheets/imports/includes_variables._variables.style.diff.txt
index d1632245f476..8059aeaf4122 100644
--- a/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/stylesheets/imports/includes_variables._variables.style.diff.txt
+++ b/corehq/apps/hqwebapp/tests/data/bootstrap5_diffs/stylesheets/imports/includes_variables._variables.style.diff.txt
@@ -1,6 +1,6 @@
 --- 
 +++ 
-@@ -1,124 +1,230 @@
+@@ -1,124 +1,232 @@
 -@import "@{b3-import-variables}";
 -
 -// Nunito Sans is used on dimagi.com and embedded in hqwebapp/base.html
@@ -20,6 +20,8 @@
 +  xxl: 1160px
 +);
 +
++// Spacing override
++$enable-negative-margins: true;
 +
 +// Typography Overrides
 +$font-family-sans-serif: "Nunito Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;