diff --git a/frontend/src/components/Transaction.vue b/frontend/src/components/Transaction.vue
index 4358a3596..4071e809d 100644
--- a/frontend/src/components/Transaction.vue
+++ b/frontend/src/components/Transaction.vue
@@ -19,40 +19,40 @@
 
         <!-- type  -->
         <b-row>
-          <b-col col="6" class="text-right">
+          <b-col cols="6" class="text-right">
             {{ getLinesByType(gdtEntryType).description }}
           </b-col>
-          <b-col col="6">
+          <b-col cols="6">
             {{ getLinesByType(gdtEntryType).descriptiontext }}
           </b-col>
         </b-row>
 
         <!-- credit -->
         <b-row>
-          <b-col col="6" class="text-right">
+          <b-col cols="6" class="text-right">
             {{ $t('gdt.credit') }}
           </b-col>
-          <b-col col="6">
+          <b-col cols="6">
             {{ getLinesByType(gdtEntryType).credittext }}
           </b-col>
         </b-row>
 
         <!-- Message-->
         <b-row v-if="comment && gdtEntryType !== 7">
-          <b-col col="6" class="text-right">
+          <b-col cols="6" class="text-right">
             {{ $t('form.memo') }}
           </b-col>
-          <b-col col="6">
+          <b-col cols="6">
             {{ comment }}
           </b-col>
         </b-row>
 
         <!-- date-->
         <b-row class="gdt-list-row text-header">
-          <b-col col="6" class="text-right">
+          <b-col cols="6" class="text-right">
             {{ $t('form.date') }}
           </b-col>
-          <b-col col="6">
+          <b-col cols="6">
             {{ $d($moment(date), 'long') }} {{ $i18n.locale === 'de' ? 'Uhr' : '' }}
           </b-col>
         </b-row>
diff --git a/frontend/src/components/TransactionCollapse.vue b/frontend/src/components/TransactionCollapse.vue
index 444012820..aacc3b4f6 100644
--- a/frontend/src/components/TransactionCollapse.vue
+++ b/frontend/src/components/TransactionCollapse.vue
@@ -4,21 +4,21 @@
     style="border: 0px; background-color: #f1f1f1"
   >
     <b-row class="gdt-list-collapse-header-text text-center pb-3">
-      <div id="collapse-headline" class="col">
+      <b-col id="collapse-headline">
         <b>{{ getLinesByType(gdtEntryType).headline }}</b>
-      </div>
+      </b-col>
     </b-row>
     <b-row class="gdt-list-collapse-box--all">
-      <div class="col-6 text-right collapse-col-left">
+      <b-col cols="6" class="text-right collapse-col-left">
         <div id="collapse-first">{{ getLinesByType(gdtEntryType).first }}</div>
         <div id="collapse-second">{{ getLinesByType(gdtEntryType).second }}</div>
-      </div>
-      <div class="col-6 collapse-col-right">
+      </b-col>
+      <b-col cols="6" class="collapse-col-right">
         <div id="collapse-firstMath">{{ getLinesByType(gdtEntryType).firstMath }}</div>
         <div id="collapse-secondMath">
           {{ getLinesByType(gdtEntryType).secondMath }}
         </div>
-      </div>
+      </b-col>
     </b-row>
   </div>
 </template>
@@ -33,6 +33,8 @@ export default {
   },
   methods: {
     getLinesByType(givenType) {
+      if (givenType === 2 || givenType === 3 || givenType === 5 || givenType === 6) givenType = 1
+
       const linesByType = {
         1: {
           headline: this.$t('gdt.calculation'),