diff --git a/src/templates/bootstrap3/grid/html.ejs b/src/templates/bootstrap3/grid/html.ejs
index 0868e2f4..ef9b6b61 100644
--- a/src/templates/bootstrap3/grid/html.ejs
+++ b/src/templates/bootstrap3/grid/html.ejs
@@ -17,6 +17,9 @@
       <div class="spinner-wrapper" ref="loader">
         <div class="spinner-grow"></div>
       </div>
+      {% if (ctx.component.selectAllRows) { %}
+      <div ref="selectAllRowsContainer"></div>
+      {% } %}
       <table class="table{{ ctx.classes }} formio-grid">
         <thead>
           <tr>
diff --git a/src/templates/bootstrap3/index.ts b/src/templates/bootstrap3/index.ts
index eb043700..2562a7c6 100644
--- a/src/templates/bootstrap3/index.ts
+++ b/src/templates/bootstrap3/index.ts
@@ -42,6 +42,7 @@ import pagination from './pagination';
 import columnMenu from './column-menu';
 import tbody from './tbody';
 import paginationBottom from './pagination-bottom';
+import selectAllContent from './selectAllContent';
 
 export default {
   transform(type, text) {
@@ -58,6 +59,7 @@ export default {
     if (builder.scrollResizeObserver) {
       builder.scrollResizeObserver.disconnect();
     }
+    // @ts-ignore
     builder.scrollResizeObserver = new ResizeObserver(() => {
       setTimeout(() => {
         const { form, sidebar } = builder.refs;
@@ -124,5 +126,6 @@ export default {
   pagination,
   columnMenu,
   tbody,
-  paginationBottom
+  paginationBottom,
+  selectAllContent
 };
diff --git a/src/templates/bootstrap3/selectAllContent/html.ejs b/src/templates/bootstrap3/selectAllContent/html.ejs
new file mode 100644
index 00000000..6efae62d
--- /dev/null
+++ b/src/templates/bootstrap3/selectAllContent/html.ejs
@@ -0,0 +1,23 @@
+<div class="formio-grid-select-wrapper alert text-secondary text-center">
+  <span class="formio-grid-select-info">
+    {% if (!ctx.allRowsSelected) { %}
+      All {{ ctx.totalSelected }} records on this page are selected.
+    {% } %}
+    {% if (ctx.allRowsSelected) { %}
+      All {{ ctx.totalItems }} records in the table are selected.
+    {% } %}
+  </span>
+  <span class="formio-grid-select-spinner">
+    <div class="spinner-grow"></div>
+  </span>
+  <span ref="selectAllBtn" class="formio-grid-select-btn text-primary">
+    <span>
+      {% if (!ctx.allRowsSelected) { %}
+        Select all {{ ctx.totalItems }} items in the table.
+      {% } %}
+      {% if (ctx.allRowsSelected) { %}
+        Clear selection.
+      {% } %}
+    </span>
+  </span>
+</div>
\ No newline at end of file
diff --git a/src/templates/bootstrap3/selectAllContent/index.ts b/src/templates/bootstrap3/selectAllContent/index.ts
new file mode 100644
index 00000000..6cc911a1
--- /dev/null
+++ b/src/templates/bootstrap3/selectAllContent/index.ts
@@ -0,0 +1,2 @@
+import html from './html.ejs';
+export default { html };
\ No newline at end of file
diff --git a/src/templates/bootstrap4/componentModal/form.ejs b/src/templates/bootstrap4/componentModal/form.ejs
index 28933d1e..cdae5720 100644
--- a/src/templates/bootstrap4/componentModal/form.ejs
+++ b/src/templates/bootstrap4/componentModal/form.ejs
@@ -9,9 +9,9 @@
       {% } else { %}
       <button class="formio-dialog-close float-right btn btn-secondary btn-sm" aria-label="Close button. Click to get back to the form" ref="modalClose"></button>
       {% } %}
-      <div ref="modalContents">
+      <div ref="modalContent">
         {% if (ctx.visible) { %}
-        {{ctx.children}}
+        <div ref="componentContent">{{ctx.children}}</div>
         {% } %}
         <div class="formio-dialog-buttons">
           {% if (ctx.options.vpat) { %}
diff --git a/src/templates/bootstrap4/datagrid/form.ejs b/src/templates/bootstrap4/datagrid/form.ejs
index 74a23a4c..fd8329fd 100644
--- a/src/templates/bootstrap4/datagrid/form.ejs
+++ b/src/templates/bootstrap4/datagrid/form.ejs
@@ -38,8 +38,8 @@
     {% } %}
     <tr ref="{{ctx.datagridKey}}-row">
       {% if (ctx.component.reorder) { %}
-        <td class="col-1">
-          <button type="button" class="formio-drag-button btn btn-default fa fa-bars" data-key="{{ctx.datagridKey}}"></button>
+        <td>
+          <button type="button" class="formio-drag-button btn btn-default fa fa-bars" data-key="{{ctx.datagridKey}}" style="display: block; margin: 0 auto"></button>
         </td>
       {% } %}
       {% ctx.columns.forEach(function(col) { %}
@@ -49,8 +49,8 @@
       {% }) %}
       {% if (ctx.hasExtraColumn) { %}
         {% if (ctx.hasRemoveButtons) { %}
-        <td class="col-1">
-          <button type="button" class="btn btn-secondary formio-button-remove-row" ref="{{ctx.datagridKey}}-removeRow" tabindex="{{ctx.tabIndex}}" aria-label="{{ctx.t('remove')}}">
+        <td>
+          <button type="button" class="btn btn-secondary formio-button-remove-row" ref="{{ctx.datagridKey}}-removeRow" tabindex="{{ctx.tabIndex}}" aria-label="{{ctx.t('remove')}}" style="display: block; margin: 0 auto">
             <i class="{{ctx.iconClass('remove-circle')}}"></i>
           </button>
         </td>
diff --git a/src/templates/bootstrap4/file/form.ejs b/src/templates/bootstrap4/file/form.ejs
index c1b37136..23062c4c 100644
--- a/src/templates/bootstrap4/file/form.ejs
+++ b/src/templates/bootstrap4/file/form.ejs
@@ -124,6 +124,18 @@
         </span>
       </div>
     {% }) %}
+    {% ctx.filesToUpload.forEach(function(file) { %}
+      {% if (file.status === 'progress') { %}
+        <div class="text-right">{{ctx.fileSize(file.size)}}</div>
+        <div class="status progress">
+          <div id={{file.id}} class="progress-bar" role="progressbar" aria-valuenow="{{file.progress}}" aria-valuemin="0" aria-valuemax="100" style="width: {{file.progress}}%" ref="progress">
+            <span class="sr-only">{{file.progress}}% {{ctx.t('Complete')}}</span>
+          </div>
+        </div>
+      {% } else { %}
+        <div class="status text-{{file.status === 'error' ? 'danger': file.status}}">{{ctx.t(file.message)}}</div>
+      {% } %}
+    {% }) %}
   </div>
 {% } %}
 {% if (!ctx.disabled && (ctx.component.multiple || !ctx.files.length)) { %}
diff --git a/src/templates/bootstrap4/grid/html.ejs b/src/templates/bootstrap4/grid/html.ejs
index ce5536a8..c12e0f8a 100644
--- a/src/templates/bootstrap4/grid/html.ejs
+++ b/src/templates/bootstrap4/grid/html.ejs
@@ -15,6 +15,9 @@
       <div class="spinner-wrapper" ref="loader">
         <div class="spinner-grow"></div>
       </div>
+      {% if (ctx.component.selectAllRows) { %}
+      <div ref="selectAllRowsContainer"></div>
+      {% } %}
       <table class="table{{ ctx.classes }} formio-grid">
         <thead>
           <tr>
diff --git a/src/templates/bootstrap4/index.ts b/src/templates/bootstrap4/index.ts
index 184b1d01..abf8916b 100644
--- a/src/templates/bootstrap4/index.ts
+++ b/src/templates/bootstrap4/index.ts
@@ -67,6 +67,7 @@ import pagination from './pagination';
 import columnMenu from './column-menu';
 import tbody from './tbody';
 import paginationBottom from './pagination-bottom';
+import selectAllContent from './selectAllContent';
 
 export default {
   transform(type, text) {
@@ -148,5 +149,6 @@ export default {
   pagination,
   columnMenu,
   tbody,
-  paginationBottom
+  paginationBottom,
+  selectAllContent
 };
diff --git a/src/templates/bootstrap4/selectAllContent/html.ejs b/src/templates/bootstrap4/selectAllContent/html.ejs
new file mode 100644
index 00000000..6efae62d
--- /dev/null
+++ b/src/templates/bootstrap4/selectAllContent/html.ejs
@@ -0,0 +1,23 @@
+<div class="formio-grid-select-wrapper alert text-secondary text-center">
+  <span class="formio-grid-select-info">
+    {% if (!ctx.allRowsSelected) { %}
+      All {{ ctx.totalSelected }} records on this page are selected.
+    {% } %}
+    {% if (ctx.allRowsSelected) { %}
+      All {{ ctx.totalItems }} records in the table are selected.
+    {% } %}
+  </span>
+  <span class="formio-grid-select-spinner">
+    <div class="spinner-grow"></div>
+  </span>
+  <span ref="selectAllBtn" class="formio-grid-select-btn text-primary">
+    <span>
+      {% if (!ctx.allRowsSelected) { %}
+        Select all {{ ctx.totalItems }} items in the table.
+      {% } %}
+      {% if (ctx.allRowsSelected) { %}
+        Clear selection.
+      {% } %}
+    </span>
+  </span>
+</div>
\ No newline at end of file
diff --git a/src/templates/bootstrap4/selectAllContent/index.ts b/src/templates/bootstrap4/selectAllContent/index.ts
new file mode 100644
index 00000000..6cc911a1
--- /dev/null
+++ b/src/templates/bootstrap4/selectAllContent/index.ts
@@ -0,0 +1,2 @@
+import html from './html.ejs';
+export default { html };
\ No newline at end of file
diff --git a/src/templates/bootstrap5/componentModal/form.ejs b/src/templates/bootstrap5/componentModal/form.ejs
index a331220d..81274f57 100644
--- a/src/templates/bootstrap5/componentModal/form.ejs
+++ b/src/templates/bootstrap5/componentModal/form.ejs
@@ -9,9 +9,9 @@
       {% } else { %}
       <button class="formio-dialog-close float-end btn btn-secondary btn-sm" aria-label="Close button. Click to get back to the form" ref="modalClose"></button>
       {% } %}
-      <div ref="modalContents">
+      <div ref="modalContent">
         {% if (ctx.visible) { %}
-        {{ctx.children}}
+        <div ref="componentContent">{{ctx.children}}</div>
         {% } %}
         <div class="formio-dialog-buttons">
           {% if (ctx.options.vpat) { %}
diff --git a/src/templates/bootstrap5/datagrid/form.ejs b/src/templates/bootstrap5/datagrid/form.ejs
index b3059fda..406b525e 100644
--- a/src/templates/bootstrap5/datagrid/form.ejs
+++ b/src/templates/bootstrap5/datagrid/form.ejs
@@ -38,8 +38,8 @@
     {% } %}
     <tr ref="{{ctx.datagridKey}}-row">
       {% if (ctx.component.reorder) { %}
-        <td class="col-1">
-          <button type="button" class="formio-drag-button btn btn-default bi bi-list" data-key="{{ctx.datagridKey}}"></button>
+        <td>
+          <button type="button" class="formio-drag-button btn btn-default bi bi-list" data-key="{{ctx.datagridKey}}" style="display: block; margin: 0 auto"></button>
         </td>
       {% } %}
       {% ctx.columns.forEach(function(col) { %}
@@ -49,8 +49,8 @@
       {% }) %}
       {% if (ctx.hasExtraColumn) { %}
         {% if (ctx.hasRemoveButtons) { %}
-        <td class="col-1">
-          <button type="button" class="btn btn-secondary formio-button-remove-row" ref="{{ctx.datagridKey}}-removeRow" tabindex="{{ctx.tabIndex}}" aria-label="{{ctx.t('remove')}}">
+        <td>
+          <button type="button" class="btn btn-secondary formio-button-remove-row" ref="{{ctx.datagridKey}}-removeRow" tabindex="{{ctx.tabIndex}}" aria-label="{{ctx.t('remove')}}" style="display: block; margin: 0 auto">
             <i class="{{ctx.iconClass('remove-circle')}}"></i>
           </button>
         </td>
diff --git a/src/templates/bootstrap5/file/form.ejs b/src/templates/bootstrap5/file/form.ejs
index 602a130b..61bc0123 100644
--- a/src/templates/bootstrap5/file/form.ejs
+++ b/src/templates/bootstrap5/file/form.ejs
@@ -124,6 +124,18 @@
         </span>
       </div>
     {% }) %}
+    {% ctx.filesToUpload.forEach(function(file) { %}
+      {% if (file.status === 'progress') { %}
+        <div class="text-end">{{ctx.fileSize(file.size)}}</div>
+        <div class="status progress">
+          <div id="{{file.id}}" class="progress-bar" role="progressbar" aria-valuenow="{{file.progress}}" aria-valuemin="0" aria-valuemax="100" style="width: {{file.progress}}%" ref="progress">
+            <span class="visually-hidden">{{file.progress}}% {{ctx.t('Complete')}}</span>
+          </div>
+        </div>
+      {% } else { %}
+        <div class="status text-{{file.status === 'error' ? 'danger': file.status}}">{{ctx.t(file.message)}}</div>
+      {% } %}
+    {% }) %}
   </div>
 {% } %}
 {% if (!ctx.disabled && (ctx.component.multiple || !ctx.files.length)) { %}