diff --git a/src/templates/bootstrap5/builder/form.ejs b/src/templates/bootstrap5/builder/form.ejs
index 28fe65559..22a31e878 100644
--- a/src/templates/bootstrap5/builder/form.ejs
+++ b/src/templates/bootstrap5/builder/form.ejs
@@ -1,8 +1,8 @@
 <div class="formio builder row formbuilder">
-  <div class="col-xs-4 col-sm-3 col-md-2 formcomponents">
+  <div class="col-4 col-sm-3 col-md-2 formcomponents">
     {{ctx.sidebar}}
   </div>
-  <div class="col-xs-8 col-sm-9 col-md-10 formarea" ref="form">
+  <div class="col-8 col-sm-9 col-md-10 formarea" ref="form">
     {{ctx.form}}
   </div>
 </div>
diff --git a/src/templates/bootstrap5/builderWizard/form.ejs b/src/templates/bootstrap5/builderWizard/form.ejs
index b971e0d70..bfbc3b470 100644
--- a/src/templates/bootstrap5/builderWizard/form.ejs
+++ b/src/templates/bootstrap5/builderWizard/form.ejs
@@ -1,8 +1,8 @@
 <div class="formio builder row formbuilder">
-  <div class="col-xs-4 col-sm-3 col-md-2 formcomponents">
+  <div class="col-4 col-sm-3 col-md-2 formcomponents">
     {{ctx.sidebar}}
   </div>
-  <div class="col-xs-8 col-sm-9 col-md-10 formarea">
+  <div class="col-8 col-sm-9 col-md-10 formarea">
     <ol class="breadcrumb wizard-pages">
       {% ctx.pages.forEach(function(page, pageIndex) { %}
       <li>
diff --git a/src/templates/bootstrap5/day/form.ejs b/src/templates/bootstrap5/day/form.ejs
index 65ec251a8..97bd2a519 100644
--- a/src/templates/bootstrap5/day/form.ejs
+++ b/src/templates/bootstrap5/day/form.ejs
@@ -10,7 +10,7 @@
   {% } %}
   >
   {% if (ctx.dayFirst && ctx.showDay) { %}
-  <div class="col col-xs-3">
+  <div class="col-3">
     {% if (!ctx.component.hideInputLabels) { %}
     <label for="{{ctx.component.key}}-day" class="{% if(ctx.component.fields.day.required) { %}field-required{% } %}">{{ctx.t('Day')}}</label>
     {% } %}
@@ -18,7 +18,7 @@
   </div>
   {% } %}
   {% if (ctx.showMonth) { %}
-  <div class="col col-xs-4">
+  <div class="col-4">
     {% if (!ctx.component.hideInputLabels) { %}
     <label for="{{ctx.component.key}}-month" class="{% if(ctx.component.fields.month.required) { %}field-required{% } %}">{{ctx.t('Month')}}</label>
     {% } %}
@@ -26,7 +26,7 @@
   </div>
   {% } %}
   {% if (!ctx.dayFirst && ctx.showDay) { %}
-  <div class="col col-xs-3">
+  <div class="col-3">
     {% if (!ctx.component.hideInputLabels) { %}
     <label for="{{ctx.component.key}}-day" class="{% if(ctx.component.fields.day.required) { %}field-required{% } %}">{{ctx.t('Day')}}</label>
     {% } %}
@@ -34,7 +34,7 @@
   </div>
   {% } %}
   {% if (ctx.showYear) { %}
-  <div class="col col-xs-5">
+  <div class="col-5">
     {% if (!ctx.component.hideInputLabels) { %}
     <label for="{{ctx.component.key}}-year" class="{% if(ctx.component.fields.year.required) { %}field-required{% } %}">{{ctx.t('Year')}}</label>
     {% } %}
diff --git a/src/templates/bootstrap5/pdfBuilder/form.ejs b/src/templates/bootstrap5/pdfBuilder/form.ejs
index 6bd3d4537..49a86bb8f 100644
--- a/src/templates/bootstrap5/pdfBuilder/form.ejs
+++ b/src/templates/bootstrap5/pdfBuilder/form.ejs
@@ -1,8 +1,8 @@
 <div class="formio builder row formbuilder">
-  <div class="col-xs-4 col-sm-3 col-md-2 formcomponents">
+  <div class="col-4 col-sm-3 col-md-2 formcomponents">
     {{ctx.sidebar}}
   </div>
-  <div class="col-xs-8 col-sm-9 col-md-10 formarea" ref="form">
+  <div class="col-8 col-sm-9 col-md-10 formarea" ref="form">
 	  <div class="formio-drop-zone" ref="iframeDropzone"></div>
     {{ctx.form}}
   </div>
diff --git a/src/templates/bootstrap5/wizardHeaderClassic/form.ejs b/src/templates/bootstrap5/wizardHeaderClassic/form.ejs
index 14d71900a..3cc13f2c6 100644
--- a/src/templates/bootstrap5/wizardHeaderClassic/form.ejs
+++ b/src/templates/bootstrap5/wizardHeaderClassic/form.ejs
@@ -1,7 +1,7 @@
 <nav aria-label="navigation" id="{{ ctx.wizardKey }}-header">
   <div class="classic-pagination row justify-content-center" style="border-bottom:0;">
     {% ctx.panels.forEach(function(panel, index) { %}
-      <div class="classic-pagination-page col-xs-12 col-sm-6 col-md-3
+      <div class="classic-pagination-page col-12 col-sm-6 col-md-3
           {{ctx.currentPage < index ? ' disabled' : ''}}
           {{ctx.currentPage === index ? ' active' : ''}}
           {{ctx.currentPage > index ? ' complete' : ''}}">
diff --git a/src/templates/bootstrap5/wizardHeaderVertical/form.ejs b/src/templates/bootstrap5/wizardHeaderVertical/form.ejs
index 8feb95501..585372a22 100644
--- a/src/templates/bootstrap5/wizardHeaderVertical/form.ejs
+++ b/src/templates/bootstrap5/wizardHeaderVertical/form.ejs
@@ -1,7 +1,7 @@
 <nav aria-label="navigation" id="{{ ctx.wizardKey }}-header">
   <ul class="pagination flex-column">
     {% ctx.panels.forEach(function(panel, index) { %}
-    <li class="col-xs-12 page-item{{ctx.currentPage === index ? ' active' : ''}}" style="cursor: pointer;">
+    <li class="col-12 page-item{{ctx.currentPage === index ? ' active' : ''}}" style="cursor: pointer;">
       <span class="page-link" ref="{{ctx.wizardKey}}-link" style="margin-left: 0px;">
         {{ctx.t(panel.title, { _userInput: true })}}
         {% if (panel.tooltip && ctx.currentPage === index) { %}