diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.scss b/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.scss
index 494e405404..c0c0305581 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.scss
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/ds-dynamic-form-control-container.component.scss
@@ -40,5 +40,9 @@
 .col-form-label {
   padding-top: 0;
   padding-bottom: 0;
-  margin-bottom: 0.5rem;
+  margin-bottom: 0.25rem;
+}
+
+label {
+  margin-bottom: 0.25rem;
 }
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list.component.html
index c4aade2ed7..3c58f49532 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list.component.html
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list.component.html
@@ -7,10 +7,10 @@
       [formGroupName]="model.id"
       [ngClass]="model.layout.element?.control">
       @for (columnItems of items; track columnItems) {
-        <div class="col-sm ms-3">
+        <div class="col-sm">
           @for (item of columnItems; track item) {
-            <div  class="custom-control custom-checkbox">
-              <input type="checkbox" class="custom-control-input"
+            <div  class="form-check">
+              <input type="checkbox" class="form-check-input"
                 [attr.aria-labelledby]="'label_' + model.id"
                 [attr.tabindex]="item.index"
                 [checked]="item.value"
@@ -21,7 +21,7 @@
                 (blur)="onBlur($event)"
                 (change)="onChange($event)"
                 (focus)="onFocus($event)"/>
-              <label class="custom-control-label"
+              <label class="form-check-label"
                 [class.disabled]="model.disabled"
                 [ngClass]="model.layout.element?.control"
                 [for]="item.id">
@@ -43,10 +43,10 @@
       [ngClass]="model.layout.element?.control"
       (change)="onChange($event)">
       @for (columnItems of items; track columnItems) {
-        <div class="col-sm ms-3">
+        <div class="col-sm">
           @for (item of columnItems; track item) {
-            <div  class="custom-control custom-radio">
-              <input type="radio" class="custom-control-input"
+            <div  class="form-check">
+              <input type="radio" class="form-check-input"
                 [checked]="item.value"
                 [id]="item.id"
                 [name]="model.id"
@@ -54,7 +54,7 @@
                 [value]="item.index"
                 (blur)="onBlur($event)"
                 (focus)="onFocus($event)"/>
-              <label class="custom-control-label"
+              <label class="form-check-label"
                 [class.disabled]="model.disabled"
                 [ngClass]="model.layout.element?.control"
                 [for]="item.id">
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list.component.spec.ts b/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list.component.spec.ts
index 182b85ad50..87f87d357a 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list.component.spec.ts
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/models/list/dynamic-list.component.spec.ts
@@ -179,8 +179,8 @@ describe('DsDynamicListComponent test suite', () => {
       });
 
       it('should set model value properly when a checkbox option is selected', () => {
-        const de = listFixture.debugElement.queryAll(By.css('div.custom-checkbox'));
-        const items = de[0].queryAll(By.css('input.custom-control-input'));
+        const de = listFixture.debugElement.queryAll(By.css('div.form-check'));
+        const items = de[0].queryAll(By.css('input.form-check-input'));
         const item = items[0];
         modelValue = [Object.assign(new VocabularyEntry(), { authority: 1, display: 'one', value: 1 })];
 
@@ -229,8 +229,8 @@ describe('DsDynamicListComponent test suite', () => {
       });
 
       it('should set model value properly when a checkbox option is deselected', () => {
-        const de = listFixture.debugElement.queryAll(By.css('div.custom-checkbox'));
-        const items = de[0].queryAll(By.css('input.custom-control-input'));
+        const de = listFixture.debugElement.queryAll(By.css('div.form-check'));
+        const items = de[0].queryAll(By.css('input.form-check-input'));
         const item = items[0];
         modelValue = [];
 
@@ -267,8 +267,8 @@ describe('DsDynamicListComponent test suite', () => {
       });
 
       it('should set model value when a radio option is selected', () => {
-        const de = listFixture.debugElement.queryAll(By.css('div.custom-radio'));
-        const items = de[0].queryAll(By.css('input.custom-control-input'));
+        const de = listFixture.debugElement.queryAll(By.css('div.form-check'));
+        const items = de[0].queryAll(By.css('input.form-check-input'));
         const item = items[0];
         modelValue = Object.assign(new VocabularyEntry(), { authority: 1, display: 'one', value: 1 });