From 9975dae39a0ea1a7543bc6ecd5a7a7880e11c348 Mon Sep 17 00:00:00 2001
From: Roman <romaletsuk@gmail.com>
Date: Thu, 7 Dec 2023 19:09:31 +0300
Subject: [PATCH] fixed tests (#5430)

---
 package.json                                  |  2 +-
 .../component-bootstrap-columns-multiple.html | 16 ++-----
 .../component-bootstrap-columns-readOnly.html | 16 ++-----
 .../component-bootstrap-columns-required.html | 16 ++-----
 test/renders/component-bootstrap-columns.html | 16 ++-----
 ...component-bootstrap-datagrid-readOnly.html |  2 +-
 .../component-bootstrap-datamap-readOnly.html |  2 +-
 .../component-bootstrap-file-readOnly.html    |  4 +-
 test/renders/form-bootstrap-columnsForm.html  | 16 ++-----
 test/renders/form-bootstrap-defaults.html     | 16 ++-----
 ...form-bootstrap-formWithCollapsedPanel.html |  2 +-
 ...-bootstrap-formWithDateTimeComponents.html |  2 +-
 ...orm-bootstrap-initiallyCollapsedPanel.html |  2 +-
 test/renders/form-bootstrap-layout.html       | 44 +++++--------------
 ...pleTextareaInsideConditionalComponent.html | 16 ++-----
 ...Only-calculateValueWithManualOverride.html |  2 +-
 .../form-bootstrap-readOnly-columnsForm.html  | 16 ++-----
 .../renders/form-bootstrap-readOnly-data.html |  6 +--
 .../form-bootstrap-readOnly-defaults.html     | 18 +++-----
 ...strap-readOnly-formWithCollapsedPanel.html |  2 +-
 ...rap-readOnly-formWithCustomFormatDate.html |  2 +-
 ...p-readOnly-formWithDateTimeComponents.html |  2 +-
 ...trap-readOnly-initiallyCollapsedPanel.html |  2 +-
 .../form-bootstrap-readOnly-layout.html       | 44 +++++--------------
 ...pleTextareaInsideConditionalComponent.html | 16 ++-----
 .../form-bootstrap-readOnly-premium.html      |  4 +-
 ...form-bootstrap-readOnly-settingErrors.html | 16 ++-----
 .../renders/form-bootstrap-settingErrors.html | 16 ++-----
 yarn.lock                                     |  8 ++--
 29 files changed, 97 insertions(+), 229 deletions(-)

diff --git a/package.json b/package.json
index 9de818ead2..25013bfc55 100644
--- a/package.json
+++ b/package.json
@@ -78,7 +78,7 @@
   },
   "homepage": "https://github.com/formio/formio.js#readme",
   "dependencies": {
-    "@formio/bootstrap": "^3.0.0-rc.13",
+    "@formio/bootstrap": "^3.0.0-rc.20",
     "@formio/choices.js": "^10.2.0",
     "@formio/core": "1.3.0-rc.16",
     "@formio/text-mask-addons": "^3.8.0-formio.2",
diff --git a/test/renders/component-bootstrap-columns-multiple.html b/test/renders/component-bootstrap-columns-multiple.html
index 37857bd664..41d74a3f1d 100644
--- a/test/renders/component-bootstrap-columns-multiple.html
+++ b/test/renders/component-bootstrap-columns-multiple.html
@@ -1,17 +1,9 @@
 <div id="columns" class="row formio-component formio-component-columns formio-component-columns formio-component-multiple  formio-component-label-hidden" ref="component">
-  <div class="
-    col-md-6
-    col-md-offset-0
-    col-md-push-0
-    col-md-pull-0
-  " ref="column-columns">
+  <div class="col-md-6
+    offset-md-0" ref="column-columns">
   </div>
-  <div class="
-    col-md-6
-    col-md-offset-0
-    col-md-push-0
-    col-md-pull-0
-  " ref="column-columns">
+  <div class="col-md-6
+    offset-md-0" ref="column-columns">
   </div>
   <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
 </div>
\ No newline at end of file
diff --git a/test/renders/component-bootstrap-columns-readOnly.html b/test/renders/component-bootstrap-columns-readOnly.html
index ffc36051c6..04b93cc135 100644
--- a/test/renders/component-bootstrap-columns-readOnly.html
+++ b/test/renders/component-bootstrap-columns-readOnly.html
@@ -1,17 +1,9 @@
 <div id="columns" class="row formio-component formio-component-columns formio-component-columns  formio-component-label-hidden" ref="component">
-  <div class="
-    col-md-6
-    col-md-offset-0
-    col-md-push-0
-    col-md-pull-0
-  " ref="column-columns">
+  <div class="col-md-6
+    offset-md-0" ref="column-columns">
   </div>
-  <div class="
-    col-md-6
-    col-md-offset-0
-    col-md-push-0
-    col-md-pull-0
-  " ref="column-columns">
+  <div class="col-md-6
+    offset-md-0" ref="column-columns">
   </div>
   <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
 </div>
\ No newline at end of file
diff --git a/test/renders/component-bootstrap-columns-required.html b/test/renders/component-bootstrap-columns-required.html
index dc26778e24..1250234f3c 100644
--- a/test/renders/component-bootstrap-columns-required.html
+++ b/test/renders/component-bootstrap-columns-required.html
@@ -1,18 +1,10 @@
 <div id="columns" class="row formio-component formio-component-columns formio-component-columns  formio-component-label-hidden" ref="component">
   <label class=" control-label--hidden"></label>
-  <div class="
-    col-md-6
-    col-md-offset-0
-    col-md-push-0
-    col-md-pull-0
-  " ref="column-columns">
+  <div class="col-md-6
+    offset-md-0" ref="column-columns">
   </div>
-  <div class="
-    col-md-6
-    col-md-offset-0
-    col-md-push-0
-    col-md-pull-0
-  " ref="column-columns">
+  <div class="col-md-6
+    offset-md-0" ref="column-columns">
   </div>
   <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
 </div>
\ No newline at end of file
diff --git a/test/renders/component-bootstrap-columns.html b/test/renders/component-bootstrap-columns.html
index ffc36051c6..04b93cc135 100644
--- a/test/renders/component-bootstrap-columns.html
+++ b/test/renders/component-bootstrap-columns.html
@@ -1,17 +1,9 @@
 <div id="columns" class="row formio-component formio-component-columns formio-component-columns  formio-component-label-hidden" ref="component">
-  <div class="
-    col-md-6
-    col-md-offset-0
-    col-md-push-0
-    col-md-pull-0
-  " ref="column-columns">
+  <div class="col-md-6
+    offset-md-0" ref="column-columns">
   </div>
-  <div class="
-    col-md-6
-    col-md-offset-0
-    col-md-push-0
-    col-md-pull-0
-  " ref="column-columns">
+  <div class="col-md-6
+    offset-md-0" ref="column-columns">
   </div>
   <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
 </div>
\ No newline at end of file
diff --git a/test/renders/component-bootstrap-datagrid-readOnly.html b/test/renders/component-bootstrap-datagrid-readOnly.html
index 6a7f7653dc..c441df38be 100644
--- a/test/renders/component-bootstrap-datagrid-readOnly.html
+++ b/test/renders/component-bootstrap-datagrid-readOnly.html
@@ -3,7 +3,7 @@
     Data Grid
   </label>
   <table class="table datagrid-table table-bordered
-    ">
+    " style="table-layout: fixed;">
     <tbody ref="datagrid-dataGrid-tbody" data-key="datagrid-dataGrid">
       <tr ref="datagrid-dataGrid-row">
       </tr>
diff --git a/test/renders/component-bootstrap-datamap-readOnly.html b/test/renders/component-bootstrap-datamap-readOnly.html
index 41a3a923d6..86d1e396b1 100644
--- a/test/renders/component-bootstrap-datamap-readOnly.html
+++ b/test/renders/component-bootstrap-datamap-readOnly.html
@@ -3,7 +3,7 @@
     Data Map
   </label>
   <table class="table datagrid-table table-bordered
-    ">
+    " style="table-layout: fixed;">
     <thead>
       <tr>
         <th class="">
diff --git a/test/renders/component-bootstrap-file-readOnly.html b/test/renders/component-bootstrap-file-readOnly.html
index 4454286bad..7073b3787d 100644
--- a/test/renders/component-bootstrap-file-readOnly.html
+++ b/test/renders/component-bootstrap-file-readOnly.html
@@ -5,8 +5,10 @@
   <ul class="list-group list-group-striped">
     <li class="list-group-item list-group-header hidden-xs hidden-sm">
       <div class="row">
-        <div class="col-md-9"><strong>File Name</strong></div>
+        <div class="col-md-10"><strong>File Name</strong></div>
         <div class="col-md-2"><strong>Size</strong></div>
+        <div class="col-md-0 justify-center">
+        </div>
       </div>
     </li>
   </ul>
diff --git a/test/renders/form-bootstrap-columnsForm.html b/test/renders/form-bootstrap-columnsForm.html
index 3b6d0adb1e..36a55c167f 100644
--- a/test/renders/form-bootstrap-columnsForm.html
+++ b/test/renders/form-bootstrap-columnsForm.html
@@ -1,19 +1,11 @@
 <div id="" class="formio-component formio-component-form  formio-component-label-hidden" ref="component">
   <div class="formio-form" ref="webform" novalidate>
     <div id="columns" class="row formio-component formio-component-columns formio-component-columns  formio-component-label-hidden" ref="component">
-      <div class="
-    col-md-6
-    col-md-offset-0
-    col-md-push-0
-    col-md-pull-0
-  " ref="column-columns">
+      <div class="col-md-6
+    offset-md-0" ref="column-columns">
       </div>
-      <div class="
-    col-md-6
-    col-md-offset-0
-    col-md-push-0
-    col-md-pull-0
-  " ref="column-columns">
+      <div class="col-md-6
+    offset-md-0" ref="column-columns">
       </div>
       <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
     </div>
diff --git a/test/renders/form-bootstrap-defaults.html b/test/renders/form-bootstrap-defaults.html
index 8428cd395e..201abbe9e8 100644
--- a/test/renders/form-bootstrap-defaults.html
+++ b/test/renders/form-bootstrap-defaults.html
@@ -271,12 +271,8 @@
       <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
     </div>
     <div id="columns" class="row formio-component formio-component-columns formio-component-columns  formio-component-label-hidden" ref="component">
-      <div class="
-    col-md-6
-    col-md-offset-0
-    col-md-push-0
-    col-md-pull-0
-  " ref="column-columns">
+      <div class="col-md-6
+    offset-md-0" ref="column-columns">
         <div id="textField" class="mb-2 formio-form-group has-feedback formio-component formio-component-textfield formio-component-textField " ref="component">
           <label ref="label" class="col-form-label " for="textField-textField" id="l-textField-textField">
             Text Field
@@ -287,12 +283,8 @@
           <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
         </div>
       </div>
-      <div class="
-    col-md-6
-    col-md-offset-0
-    col-md-push-0
-    col-md-pull-0
-  " ref="column-columns">
+      <div class="col-md-6
+    offset-md-0" ref="column-columns">
       </div>
       <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
     </div>
diff --git a/test/renders/form-bootstrap-formWithCollapsedPanel.html b/test/renders/form-bootstrap-formWithCollapsedPanel.html
index adc22bb934..39fbc5878e 100644
--- a/test/renders/form-bootstrap-formWithCollapsedPanel.html
+++ b/test/renders/form-bootstrap-formWithCollapsedPanel.html
@@ -4,7 +4,7 @@
       <div class="mb-2 card border">
         <div class="card-header bg-default" tabindex="0" role="button" aria-expanded="false" aria-controls="panel-panel" ref="header">
           <span class="mb-0 card-title ">
-        <i class="formio-collapse-icon fa fa-plus-square-o bi bi-plus-square-o text-muted" data-title="Collapse Panel"></i>
+        <i class="formio-collapse-icon fa fa-plus-square-o bi bi-plus-square text-muted" data-title="Collapse Panel"></i>
       Panel
     </span>
         </div>
diff --git a/test/renders/form-bootstrap-formWithDateTimeComponents.html b/test/renders/form-bootstrap-formWithDateTimeComponents.html
index d9740cf607..adf192482b 100644
--- a/test/renders/form-bootstrap-formWithDateTimeComponents.html
+++ b/test/renders/form-bootstrap-formWithDateTimeComponents.html
@@ -4,7 +4,7 @@
       <div class="mb-2 card border">
         <div class="card-header bg-default" tabindex="0" role="button" aria-expanded="true" aria-controls="panel-panel" ref="header">
           <span class="mb-0 card-title ">
-        <i class="formio-collapse-icon fa fa-minus-square-o bi bi-minus-square-o text-muted" data-title="Collapse Panel"></i>
+        <i class="formio-collapse-icon fa fa-minus-square-o bi bi-dash-square text-muted" data-title="Collapse Panel"></i>
       Panel
     </span>
         </div>
diff --git a/test/renders/form-bootstrap-initiallyCollapsedPanel.html b/test/renders/form-bootstrap-initiallyCollapsedPanel.html
index adc22bb934..39fbc5878e 100644
--- a/test/renders/form-bootstrap-initiallyCollapsedPanel.html
+++ b/test/renders/form-bootstrap-initiallyCollapsedPanel.html
@@ -4,7 +4,7 @@
       <div class="mb-2 card border">
         <div class="card-header bg-default" tabindex="0" role="button" aria-expanded="false" aria-controls="panel-panel" ref="header">
           <span class="mb-0 card-title ">
-        <i class="formio-collapse-icon fa fa-plus-square-o bi bi-plus-square-o text-muted" data-title="Collapse Panel"></i>
+        <i class="formio-collapse-icon fa fa-plus-square-o bi bi-plus-square text-muted" data-title="Collapse Panel"></i>
       Panel
     </span>
         </div>
diff --git a/test/renders/form-bootstrap-layout.html b/test/renders/form-bootstrap-layout.html
index efbca30fbb..b5ea605fc2 100644
--- a/test/renders/form-bootstrap-layout.html
+++ b/test/renders/form-bootstrap-layout.html
@@ -1,12 +1,8 @@
 <div id="" class="formio-component formio-component-form  formio-component-label-hidden" ref="component">
   <div class="formio-form" ref="webform" novalidate>
     <div id="columns" class="row formio-component formio-component-columns formio-component-columns  formio-component-label-hidden" ref="component">
-      <div class="
-    col-md-6
-    col-md-offset-0
-    col-md-push-0
-    col-md-pull-0
-  " ref="column-columns">
+      <div class="col-md-6
+    offset-md-0" ref="column-columns">
         <div id="columnsText" class="mb-2 formio-form-group has-feedback formio-component formio-component-textfield formio-component-columnsText " ref="component">
           <label ref="label" class="col-form-label " for="columnsText-columnsText" id="l-columnsText-columnsText">
             Text
@@ -17,22 +13,14 @@
           <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
         </div>
       </div>
-      <div class="
-    col-md-6
-    col-md-offset-0
-    col-md-push-0
-    col-md-pull-0
-  " ref="column-columns">
+      <div class="col-md-6
+    offset-md-0" ref="column-columns">
       </div>
       <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
     </div>
     <div id="columns2" class="row formio-component formio-component-columns formio-component-columns2  formio-component-label-hidden" ref="component">
-      <div class="
-    col-md-5
-    col-md-offset-0
-    col-md-push-0
-    col-md-pull-0
-  " ref="column-columns2">
+      <div class="col-md-5
+    offset-md-0" ref="column-columns2">
         <div id="columns2Text" class="mb-2 formio-form-group has-feedback formio-component formio-component-textfield formio-component-columns2Text " ref="component">
           <label ref="label" class="col-form-label " for="columns2Text-columns2Text" id="l-columns2Text-columns2Text">
             Text
@@ -43,19 +31,11 @@
           <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
         </div>
       </div>
-      <div class="
-    col-md-5
-    col-md-offset-0
-    col-md-push-0
-    col-md-pull-0
-  " ref="column-columns2">
+      <div class="col-md-5
+    offset-md-0" ref="column-columns2">
       </div>
-      <div class="
-    col-md-2
-    col-md-offset-0
-    col-md-push-0
-    col-md-pull-0
-  " ref="column-columns2">
+      <div class="col-md-2
+    offset-md-0" ref="column-columns2">
       </div>
       <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
     </div>
@@ -106,7 +86,7 @@
       <div class="mb-2 card border">
         <div class="card-header bg-default" tabindex="0" role="button" aria-expanded="false" aria-controls="panel2-panel2" ref="header">
           <span class="mb-0 card-title ">
-        <i class="formio-collapse-icon fa fa-plus-square-o bi bi-plus-square-o text-muted" data-title="Collapse Panel"></i>
+        <i class="formio-collapse-icon fa fa-plus-square-o bi bi-plus-square text-muted" data-title="Collapse Panel"></i>
     </span>
         </div>
       </div>
@@ -116,7 +96,7 @@
       <div class="mb-2 card border">
         <div class="card-header bg-default" tabindex="0" role="button" aria-expanded="true" aria-controls="panel3-panel3" ref="header">
           <span class="mb-0 card-title ">
-        <i class="formio-collapse-icon fa fa-minus-square-o bi bi-minus-square-o text-muted" data-title="Collapse Panel"></i>
+        <i class="formio-collapse-icon fa fa-minus-square-o bi bi-dash-square text-muted" data-title="Collapse Panel"></i>
     </span>
         </div>
         <div class="card-body" ref="nested-panel3" id="panel3-panel3">
diff --git a/test/renders/form-bootstrap-multipleTextareaInsideConditionalComponent.html b/test/renders/form-bootstrap-multipleTextareaInsideConditionalComponent.html
index 3d297afc22..fbb6a6b414 100644
--- a/test/renders/form-bootstrap-multipleTextareaInsideConditionalComponent.html
+++ b/test/renders/form-bootstrap-multipleTextareaInsideConditionalComponent.html
@@ -1,12 +1,8 @@
 <div id="" class="formio-component formio-component-form  formio-component-label-hidden" ref="component">
   <div class="formio-form" ref="webform" novalidate>
     <div id="columns3" class="row formio-component formio-component-columns formio-component-columns3  formio-component-label-hidden" ref="component">
-      <div class="
-    col-md-6
-    col-md-offset-0
-    col-md-push-0
-    col-md-pull-0
-  " ref="column-columns3">
+      <div class="col-md-6
+    offset-md-0" ref="column-columns3">
         <div id="issues" class="" ref="component">
           <div class="card card-body bg-light mb-3">
             <div ref="nested-issues">
@@ -32,12 +28,8 @@
           <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
         </div>
       </div>
-      <div class="
-    col-md-6
-    col-md-offset-0
-    col-md-push-0
-    col-md-pull-0
-  " ref="column-columns3">
+      <div class="col-md-6
+    offset-md-0" ref="column-columns3">
       </div>
       <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
     </div>
diff --git a/test/renders/form-bootstrap-readOnly-calculateValueWithManualOverride.html b/test/renders/form-bootstrap-readOnly-calculateValueWithManualOverride.html
index 5892e52ae0..d924be2828 100644
--- a/test/renders/form-bootstrap-readOnly-calculateValueWithManualOverride.html
+++ b/test/renders/form-bootstrap-readOnly-calculateValueWithManualOverride.html
@@ -31,7 +31,7 @@
               grid
             </label>
             <table class="table datagrid-table table-bordered
-    ">
+    " style="table-layout: fixed;">
               <thead>
                 <tr>
                   <th class="">
diff --git a/test/renders/form-bootstrap-readOnly-columnsForm.html b/test/renders/form-bootstrap-readOnly-columnsForm.html
index 6456ddef39..e51c7902d1 100644
--- a/test/renders/form-bootstrap-readOnly-columnsForm.html
+++ b/test/renders/form-bootstrap-readOnly-columnsForm.html
@@ -1,19 +1,11 @@
 <div id="" class="formio-component formio-component-form  formio-component-label-hidden" ref="component">
   <div class="formio-form formio-read-only" ref="webform" novalidate>
     <div id="columns" class="row formio-component formio-component-columns formio-component-columns  formio-component-label-hidden" ref="component">
-      <div class="
-    col-md-6
-    col-md-offset-0
-    col-md-push-0
-    col-md-pull-0
-  " ref="column-columns">
+      <div class="col-md-6
+    offset-md-0" ref="column-columns">
       </div>
-      <div class="
-    col-md-6
-    col-md-offset-0
-    col-md-push-0
-    col-md-pull-0
-  " ref="column-columns">
+      <div class="col-md-6
+    offset-md-0" ref="column-columns">
       </div>
       <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
     </div>
diff --git a/test/renders/form-bootstrap-readOnly-data.html b/test/renders/form-bootstrap-readOnly-data.html
index a70ce608f3..5b952d9b10 100644
--- a/test/renders/form-bootstrap-readOnly-data.html
+++ b/test/renders/form-bootstrap-readOnly-data.html
@@ -25,7 +25,7 @@
         Data Grid
       </label>
       <table class="table datagrid-table table-bordered
-    ">
+    " style="table-layout: fixed;">
         <thead>
           <tr>
             <th class="">
@@ -171,7 +171,7 @@
         Data Grid
       </label>
       <table class="table datagrid-table table-bordered
-    ">
+    " style="table-layout: fixed;">
         <tbody ref="datagrid-dataGrid2-tbody" data-key="datagrid-dataGrid2">
           <tr ref="datagrid-dataGrid2-row">
             <td ref="datagrid-dataGrid2">
@@ -207,7 +207,7 @@
         Conditional Data Grid
       </label>
       <table class="table datagrid-table table-bordered
-    ">
+    " style="table-layout: fixed;">
         <thead>
           <tr>
             <th class="">
diff --git a/test/renders/form-bootstrap-readOnly-defaults.html b/test/renders/form-bootstrap-readOnly-defaults.html
index e1a2696d7c..01b58b5764 100644
--- a/test/renders/form-bootstrap-readOnly-defaults.html
+++ b/test/renders/form-bootstrap-readOnly-defaults.html
@@ -275,12 +275,8 @@
       <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
     </div>
     <div id="columns" class="row formio-component formio-component-columns formio-component-columns  formio-component-label-hidden" ref="component">
-      <div class="
-    col-md-6
-    col-md-offset-0
-    col-md-push-0
-    col-md-pull-0
-  " ref="column-columns">
+      <div class="col-md-6
+    offset-md-0" ref="column-columns">
         <div id="textField" class="mb-2 formio-form-group has-feedback formio-component formio-component-textfield formio-component-textField " ref="component">
           <label ref="label" class="col-form-label " for="textField-textField" id="l-textField-textField">
             Text Field
@@ -291,12 +287,8 @@
           <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
         </div>
       </div>
-      <div class="
-    col-md-6
-    col-md-offset-0
-    col-md-push-0
-    col-md-pull-0
-  " ref="column-columns">
+      <div class="col-md-6
+    offset-md-0" ref="column-columns">
       </div>
       <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
     </div>
@@ -413,7 +405,7 @@
         Data Grid
       </label>
       <table class="table datagrid-table table-bordered
-    ">
+    " style="table-layout: fixed;">
         <thead>
           <tr>
             <th class="">
diff --git a/test/renders/form-bootstrap-readOnly-formWithCollapsedPanel.html b/test/renders/form-bootstrap-readOnly-formWithCollapsedPanel.html
index 630affe70f..eb286bceba 100644
--- a/test/renders/form-bootstrap-readOnly-formWithCollapsedPanel.html
+++ b/test/renders/form-bootstrap-readOnly-formWithCollapsedPanel.html
@@ -4,7 +4,7 @@
       <div class="mb-2 card border">
         <div class="card-header bg-default" tabindex="0" role="button" aria-expanded="false" aria-controls="panel-panel" ref="header">
           <span class="mb-0 card-title ">
-        <i class="formio-collapse-icon fa fa-plus-square-o bi bi-plus-square-o text-muted" data-title="Collapse Panel"></i>
+        <i class="formio-collapse-icon fa fa-plus-square-o bi bi-plus-square text-muted" data-title="Collapse Panel"></i>
       Panel
     </span>
         </div>
diff --git a/test/renders/form-bootstrap-readOnly-formWithCustomFormatDate.html b/test/renders/form-bootstrap-readOnly-formWithCustomFormatDate.html
index 3299bcfe08..3f125cb977 100644
--- a/test/renders/form-bootstrap-readOnly-formWithCustomFormatDate.html
+++ b/test/renders/form-bootstrap-readOnly-formWithCustomFormatDate.html
@@ -5,7 +5,7 @@
         Data Grid
       </label>
       <table class="table datagrid-table table-bordered
-    ">
+    " style="table-layout: fixed;">
         <thead>
           <tr>
             <th class="">
diff --git a/test/renders/form-bootstrap-readOnly-formWithDateTimeComponents.html b/test/renders/form-bootstrap-readOnly-formWithDateTimeComponents.html
index 35f6c5fbec..c396a1c286 100644
--- a/test/renders/form-bootstrap-readOnly-formWithDateTimeComponents.html
+++ b/test/renders/form-bootstrap-readOnly-formWithDateTimeComponents.html
@@ -4,7 +4,7 @@
       <div class="mb-2 card border">
         <div class="card-header bg-default" tabindex="0" role="button" aria-expanded="true" aria-controls="panel-panel" ref="header">
           <span class="mb-0 card-title ">
-        <i class="formio-collapse-icon fa fa-minus-square-o bi bi-minus-square-o text-muted" data-title="Collapse Panel"></i>
+        <i class="formio-collapse-icon fa fa-minus-square-o bi bi-dash-square text-muted" data-title="Collapse Panel"></i>
       Panel
     </span>
         </div>
diff --git a/test/renders/form-bootstrap-readOnly-initiallyCollapsedPanel.html b/test/renders/form-bootstrap-readOnly-initiallyCollapsedPanel.html
index 630affe70f..eb286bceba 100644
--- a/test/renders/form-bootstrap-readOnly-initiallyCollapsedPanel.html
+++ b/test/renders/form-bootstrap-readOnly-initiallyCollapsedPanel.html
@@ -4,7 +4,7 @@
       <div class="mb-2 card border">
         <div class="card-header bg-default" tabindex="0" role="button" aria-expanded="false" aria-controls="panel-panel" ref="header">
           <span class="mb-0 card-title ">
-        <i class="formio-collapse-icon fa fa-plus-square-o bi bi-plus-square-o text-muted" data-title="Collapse Panel"></i>
+        <i class="formio-collapse-icon fa fa-plus-square-o bi bi-plus-square text-muted" data-title="Collapse Panel"></i>
       Panel
     </span>
         </div>
diff --git a/test/renders/form-bootstrap-readOnly-layout.html b/test/renders/form-bootstrap-readOnly-layout.html
index 25ff20f8de..b95b05780c 100644
--- a/test/renders/form-bootstrap-readOnly-layout.html
+++ b/test/renders/form-bootstrap-readOnly-layout.html
@@ -1,12 +1,8 @@
 <div id="" class="formio-component formio-component-form  formio-component-label-hidden" ref="component">
   <div class="formio-form formio-read-only" ref="webform" novalidate>
     <div id="columns" class="row formio-component formio-component-columns formio-component-columns  formio-component-label-hidden" ref="component">
-      <div class="
-    col-md-6
-    col-md-offset-0
-    col-md-push-0
-    col-md-pull-0
-  " ref="column-columns">
+      <div class="col-md-6
+    offset-md-0" ref="column-columns">
         <div id="columnsText" class="mb-2 formio-form-group has-feedback formio-component formio-component-textfield formio-component-columnsText " ref="component">
           <label ref="label" class="col-form-label " for="columnsText-columnsText" id="l-columnsText-columnsText">
             Text
@@ -17,22 +13,14 @@
           <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
         </div>
       </div>
-      <div class="
-    col-md-6
-    col-md-offset-0
-    col-md-push-0
-    col-md-pull-0
-  " ref="column-columns">
+      <div class="col-md-6
+    offset-md-0" ref="column-columns">
       </div>
       <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
     </div>
     <div id="columns2" class="row formio-component formio-component-columns formio-component-columns2  formio-component-label-hidden" ref="component">
-      <div class="
-    col-md-5
-    col-md-offset-0
-    col-md-push-0
-    col-md-pull-0
-  " ref="column-columns2">
+      <div class="col-md-5
+    offset-md-0" ref="column-columns2">
         <div id="columns2Text" class="mb-2 formio-form-group has-feedback formio-component formio-component-textfield formio-component-columns2Text " ref="component">
           <label ref="label" class="col-form-label " for="columns2Text-columns2Text" id="l-columns2Text-columns2Text">
             Text
@@ -43,19 +31,11 @@
           <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
         </div>
       </div>
-      <div class="
-    col-md-5
-    col-md-offset-0
-    col-md-push-0
-    col-md-pull-0
-  " ref="column-columns2">
+      <div class="col-md-5
+    offset-md-0" ref="column-columns2">
       </div>
-      <div class="
-    col-md-2
-    col-md-offset-0
-    col-md-push-0
-    col-md-pull-0
-  " ref="column-columns2">
+      <div class="col-md-2
+    offset-md-0" ref="column-columns2">
       </div>
       <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
     </div>
@@ -106,7 +86,7 @@
       <div class="mb-2 card border">
         <div class="card-header bg-default" tabindex="0" role="button" aria-expanded="false" aria-controls="panel2-panel2" ref="header">
           <span class="mb-0 card-title ">
-        <i class="formio-collapse-icon fa fa-plus-square-o bi bi-plus-square-o text-muted" data-title="Collapse Panel"></i>
+        <i class="formio-collapse-icon fa fa-plus-square-o bi bi-plus-square text-muted" data-title="Collapse Panel"></i>
     </span>
         </div>
       </div>
@@ -116,7 +96,7 @@
       <div class="mb-2 card border">
         <div class="card-header bg-default" tabindex="0" role="button" aria-expanded="true" aria-controls="panel3-panel3" ref="header">
           <span class="mb-0 card-title ">
-        <i class="formio-collapse-icon fa fa-minus-square-o bi bi-minus-square-o text-muted" data-title="Collapse Panel"></i>
+        <i class="formio-collapse-icon fa fa-minus-square-o bi bi-dash-square text-muted" data-title="Collapse Panel"></i>
     </span>
         </div>
         <div class="card-body" ref="nested-panel3" id="panel3-panel3">
diff --git a/test/renders/form-bootstrap-readOnly-multipleTextareaInsideConditionalComponent.html b/test/renders/form-bootstrap-readOnly-multipleTextareaInsideConditionalComponent.html
index 1545ad1883..b93924f510 100644
--- a/test/renders/form-bootstrap-readOnly-multipleTextareaInsideConditionalComponent.html
+++ b/test/renders/form-bootstrap-readOnly-multipleTextareaInsideConditionalComponent.html
@@ -1,12 +1,8 @@
 <div id="" class="formio-component formio-component-form  formio-component-label-hidden" ref="component">
   <div class="formio-form formio-read-only" ref="webform" novalidate>
     <div id="columns3" class="row formio-component formio-component-columns formio-component-columns3  formio-component-label-hidden" ref="component">
-      <div class="
-    col-md-6
-    col-md-offset-0
-    col-md-push-0
-    col-md-pull-0
-  " ref="column-columns3">
+      <div class="col-md-6
+    offset-md-0" ref="column-columns3">
         <div id="issues" class="" ref="component">
           <div class="card card-body bg-light mb-3">
             <div ref="nested-issues">
@@ -32,12 +28,8 @@
           <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
         </div>
       </div>
-      <div class="
-    col-md-6
-    col-md-offset-0
-    col-md-push-0
-    col-md-pull-0
-  " ref="column-columns3">
+      <div class="col-md-6
+    offset-md-0" ref="column-columns3">
       </div>
       <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
     </div>
diff --git a/test/renders/form-bootstrap-readOnly-premium.html b/test/renders/form-bootstrap-readOnly-premium.html
index 267a50058a..bdc6a3c936 100644
--- a/test/renders/form-bootstrap-readOnly-premium.html
+++ b/test/renders/form-bootstrap-readOnly-premium.html
@@ -7,8 +7,10 @@
       <ul class="list-group list-group-striped">
         <li class="list-group-item list-group-header hidden-xs hidden-sm">
           <div class="row">
-            <div class="col-md-9"><strong>File Name</strong></div>
+            <div class="col-md-10"><strong>File Name</strong></div>
             <div class="col-md-2"><strong>Size</strong></div>
+            <div class="col-md-0 justify-center">
+            </div>
           </div>
         </li>
       </ul>
diff --git a/test/renders/form-bootstrap-readOnly-settingErrors.html b/test/renders/form-bootstrap-readOnly-settingErrors.html
index 5fa8f8d49f..953f005243 100644
--- a/test/renders/form-bootstrap-readOnly-settingErrors.html
+++ b/test/renders/form-bootstrap-readOnly-settingErrors.html
@@ -40,12 +40,8 @@
                   <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
                 </div>
                 <div id="columns" class="row formio-component formio-component-columns formio-component-columns  formio-component-label-hidden" ref="component">
-                  <div class="
-    col-md-6
-    col-md-offset-0
-    col-md-push-0
-    col-md-pull-0
-  " ref="column-columns">
+                  <div class="col-md-6
+    offset-md-0" ref="column-columns">
                     <div id="selectColumn" class="mb-2 formio-form-group has-feedback formio-component formio-component-select formio-component-selectColumn  required" ref="component">
                       <label ref="label" class="col-form-label  field-required" for="selectColumn-selectColumn" id="l-selectColumn-selectColumn">
                         Select - Column
@@ -55,12 +51,8 @@
                       <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
                     </div>
                   </div>
-                  <div class="
-    col-md-6
-    col-md-offset-0
-    col-md-push-0
-    col-md-pull-0
-  " ref="column-columns">
+                  <div class="col-md-6
+    offset-md-0" ref="column-columns">
                     <div id="checkboxColumn" class="mb-2 formio-form-group has-feedback formio-component formio-component-checkbox formio-component-checkboxColumn  required" ref="component">
                       <div class="form-check checkbox">
                         <input ref="input" name="data[checkboxColumn]" type="checkbox" class="form-check-input" lang="en" disabled="disabled" value="0" aria-required="true">
diff --git a/test/renders/form-bootstrap-settingErrors.html b/test/renders/form-bootstrap-settingErrors.html
index e86179af86..39d901b354 100644
--- a/test/renders/form-bootstrap-settingErrors.html
+++ b/test/renders/form-bootstrap-settingErrors.html
@@ -40,12 +40,8 @@
                   <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
                 </div>
                 <div id="columns" class="row formio-component formio-component-columns formio-component-columns  formio-component-label-hidden" ref="component">
-                  <div class="
-    col-md-6
-    col-md-offset-0
-    col-md-push-0
-    col-md-pull-0
-  " ref="column-columns">
+                  <div class="col-md-6
+    offset-md-0" ref="column-columns">
                     <div id="selectColumn" class="mb-2 formio-form-group has-feedback formio-component formio-component-select formio-component-selectColumn  required" ref="component">
                       <label ref="label" class="col-form-label  field-required" for="selectColumn-selectColumn" id="l-selectColumn-selectColumn">
                         Select - Column
@@ -55,12 +51,8 @@
                       <div ref="messageContainer" class="formio-errors invalid-feedback"></div>
                     </div>
                   </div>
-                  <div class="
-    col-md-6
-    col-md-offset-0
-    col-md-push-0
-    col-md-pull-0
-  " ref="column-columns">
+                  <div class="col-md-6
+    offset-md-0" ref="column-columns">
                     <div id="checkboxColumn" class="mb-2 formio-form-group has-feedback formio-component formio-component-checkbox formio-component-checkboxColumn  required" ref="component">
                       <div class="form-check checkbox">
                         <input ref="input" name="data[checkboxColumn]" type="checkbox" class="form-check-input" lang="en" value="0" aria-required="true">
diff --git a/yarn.lock b/yarn.lock
index 5597f5e203..c975dc21a7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -249,10 +249,10 @@
   resolved "https://registry.npmjs.org/@eslint/js/-/js-8.46.0.tgz#3f7802972e8b6fe3f88ed1aabc74ec596c456db6"
   integrity sha512-a8TLtmPi8xzPkCbp/OGFUo5yhRkHM2Ko9kOWP4znJr0WAhWyThaw3PnwX4vOTWOAMsV2uRt32PPDcEz63esSaA==
 
-"@formio/bootstrap@^3.0.0-rc.13":
-  version "3.0.0-rc.13"
-  resolved "https://registry.npmjs.org/@formio/bootstrap/-/bootstrap-3.0.0-rc.13.tgz#d4ddedabc4fe9ffc2fa589750cdcc8efb8f9e0ae"
-  integrity sha512-3UWb1dmNUj9R9ZB0zdvsOoUM5aHkjx8cdv6pIfjF9wTe+1pVwaU9jTxL9elb503IEMhcEmAZ0gmWBVfFxfkxEQ==
+"@formio/bootstrap@^3.0.0-rc.20":
+  version "3.0.0-rc.20"
+  resolved "https://registry.yarnpkg.com/@formio/bootstrap/-/bootstrap-3.0.0-rc.20.tgz#de3eabd8c8bc81167d67e0ec6d95a4be21f0ce0a"
+  integrity sha512-R1woezpxiLmHT0ntQulbKzej9OGQujCaGveS8/HFjGWwPOJj8k+ZQFfD+R1A8SuQYdZCSisw6VdGcKJYb9dcJA==
 
 "@formio/choices.js@^10.2.0":
   version "10.2.0"