diff --git a/packages/vue-components/src/__tests__/__snapshots__/Questions.spec.js.snap b/packages/vue-components/src/__tests__/__snapshots__/Questions.spec.js.snap
index 78a2a9b26e..30831c2786 100644
--- a/packages/vue-components/src/__tests__/__snapshots__/Questions.spec.js.snap
+++ b/packages/vue-components/src/__tests__/__snapshots__/Questions.spec.js.snap
@@ -15,7 +15,7 @@ exports[`Checkbox Questions and QOptions of answered correctly with unshown hint
         class="form-control danger"
       >
         <label
-          class="checkbox-label disabled"
+          class="row checkbox-label m-0 disabled"
         >
           <input
             class="checkbox"
@@ -31,7 +31,7 @@ exports[`Checkbox Questions and QOptions of answered correctly with unshown hint
           </div>
            
           <div
-            class="col-1"
+            class="col-auto"
           >
             <div>
               <i
@@ -47,7 +47,7 @@ exports[`Checkbox Questions and QOptions of answered correctly with unshown hint
         class="form-control danger"
       >
         <label
-          class="checkbox-label disabled"
+          class="row checkbox-label m-0 disabled"
         >
           <input
             class="checkbox"
@@ -63,7 +63,7 @@ exports[`Checkbox Questions and QOptions of answered correctly with unshown hint
           </div>
            
           <div
-            class="col-1"
+            class="col-auto"
           >
             <div>
               <i
@@ -87,7 +87,7 @@ exports[`Checkbox Questions and QOptions of answered correctly with unshown hint
         class="form-control success"
       >
         <label
-          class="checkbox-label disabled"
+          class="row checkbox-label m-0 disabled"
         >
           <input
             class="checkbox"
@@ -103,7 +103,7 @@ exports[`Checkbox Questions and QOptions of answered correctly with unshown hint
           </div>
            
           <div
-            class="col-1"
+            class="col-auto"
           >
             <div>
               <i
@@ -119,7 +119,7 @@ exports[`Checkbox Questions and QOptions of answered correctly with unshown hint
         class="form-control success"
       >
         <label
-          class="checkbox-label disabled"
+          class="row checkbox-label m-0 disabled"
         >
           <input
             class="checkbox"
@@ -135,7 +135,7 @@ exports[`Checkbox Questions and QOptions of answered correctly with unshown hint
           </div>
            
           <div
-            class="col-1"
+            class="col-auto"
           >
             <div>
               <i
@@ -216,7 +216,7 @@ exports[`Checkbox Questions and QOptions of answered wrongly with header without
         class="form-control danger"
       >
         <label
-          class="checkbox-label disabled"
+          class="row checkbox-label m-0 disabled"
         >
           <input
             class="checkbox"
@@ -232,7 +232,7 @@ exports[`Checkbox Questions and QOptions of answered wrongly with header without
           </div>
            
           <div
-            class="col-1"
+            class="col-auto"
           >
             <div>
               <i
@@ -248,7 +248,7 @@ exports[`Checkbox Questions and QOptions of answered wrongly with header without
         class="form-control danger"
       >
         <label
-          class="checkbox-label disabled"
+          class="row checkbox-label m-0 disabled"
         >
           <input
             class="checkbox"
@@ -264,7 +264,7 @@ exports[`Checkbox Questions and QOptions of answered wrongly with header without
           </div>
            
           <div
-            class="col-1"
+            class="col-auto"
           >
             <div>
               <i
@@ -288,7 +288,7 @@ exports[`Checkbox Questions and QOptions of answered wrongly with header without
         class="form-control success"
       >
         <label
-          class="checkbox-label disabled"
+          class="row checkbox-label m-0 disabled"
         >
           <input
             class="checkbox"
@@ -304,7 +304,7 @@ exports[`Checkbox Questions and QOptions of answered wrongly with header without
           </div>
            
           <div
-            class="col-1"
+            class="col-auto"
           >
             <div>
               <i
@@ -320,7 +320,7 @@ exports[`Checkbox Questions and QOptions of answered wrongly with header without
         class="form-control success"
       >
         <label
-          class="checkbox-label disabled"
+          class="row checkbox-label m-0 disabled"
         >
           <input
             class="checkbox"
@@ -336,7 +336,7 @@ exports[`Checkbox Questions and QOptions of answered wrongly with header without
           </div>
            
           <div
-            class="col-1"
+            class="col-auto"
           >
             <div>
               <i
@@ -406,7 +406,7 @@ exports[`Checkbox Questions and QOptions of checked wrongly with shown hint with
         class="form-control alert-light text-dark border border-secondary"
       >
         <label
-          class="checkbox-label"
+          class="row checkbox-label m-0"
         >
           <input
             class="checkbox"
@@ -421,7 +421,7 @@ exports[`Checkbox Questions and QOptions of checked wrongly with shown hint with
           </div>
            
           <div
-            class="col-1"
+            class="col-auto"
           >
             <!---->
           </div>
@@ -433,7 +433,7 @@ exports[`Checkbox Questions and QOptions of checked wrongly with shown hint with
         class="form-control alert-light text-dark border border-secondary"
       >
         <label
-          class="checkbox-label"
+          class="row checkbox-label m-0"
         >
           <input
             class="checkbox"
@@ -448,7 +448,7 @@ exports[`Checkbox Questions and QOptions of checked wrongly with shown hint with
           </div>
            
           <div
-            class="col-1"
+            class="col-auto"
           >
             <!---->
           </div>
@@ -460,7 +460,7 @@ exports[`Checkbox Questions and QOptions of checked wrongly with shown hint with
         class="form-control alert-light text-dark border border-secondary"
       >
         <label
-          class="checkbox-label"
+          class="row checkbox-label m-0"
         >
           <input
             class="checkbox"
@@ -475,7 +475,7 @@ exports[`Checkbox Questions and QOptions of checked wrongly with shown hint with
           </div>
            
           <div
-            class="col-1"
+            class="col-auto"
           >
             <!---->
           </div>
@@ -487,7 +487,7 @@ exports[`Checkbox Questions and QOptions of checked wrongly with shown hint with
         class="form-control alert-light text-dark border border-secondary"
       >
         <label
-          class="checkbox-label"
+          class="row checkbox-label m-0"
         >
           <input
             class="checkbox"
@@ -502,7 +502,7 @@ exports[`Checkbox Questions and QOptions of checked wrongly with shown hint with
           </div>
            
           <div
-            class="col-1"
+            class="col-auto"
           >
             <!---->
           </div>
@@ -583,7 +583,7 @@ exports[`Checkbox Questions and QOptions of unanswered with header without hint
         class="form-control alert-light text-dark border border-secondary"
       >
         <label
-          class="checkbox-label"
+          class="row checkbox-label m-0"
         >
           <input
             class="checkbox"
@@ -598,7 +598,7 @@ exports[`Checkbox Questions and QOptions of unanswered with header without hint
           </div>
            
           <div
-            class="col-1"
+            class="col-auto"
           >
             <!---->
           </div>
@@ -610,7 +610,7 @@ exports[`Checkbox Questions and QOptions of unanswered with header without hint
         class="form-control"
       >
         <label
-          class="checkbox-label"
+          class="row checkbox-label m-0"
         >
           <input
             class="checkbox"
@@ -625,7 +625,7 @@ exports[`Checkbox Questions and QOptions of unanswered with header without hint
           </div>
            
           <div
-            class="col-1"
+            class="col-auto"
           >
             <!---->
           </div>
@@ -637,7 +637,7 @@ exports[`Checkbox Questions and QOptions of unanswered with header without hint
         class="form-control alert-light text-dark border border-secondary"
       >
         <label
-          class="checkbox-label"
+          class="row checkbox-label m-0"
         >
           <input
             class="checkbox"
@@ -652,7 +652,7 @@ exports[`Checkbox Questions and QOptions of unanswered with header without hint
           </div>
            
           <div
-            class="col-1"
+            class="col-auto"
           >
             <!---->
           </div>
@@ -664,7 +664,7 @@ exports[`Checkbox Questions and QOptions of unanswered with header without hint
         class="form-control"
       >
         <label
-          class="checkbox-label"
+          class="row checkbox-label m-0"
         >
           <input
             class="checkbox"
@@ -679,7 +679,7 @@ exports[`Checkbox Questions and QOptions of unanswered with header without hint
           </div>
            
           <div
-            class="col-1"
+            class="col-auto"
           >
             <!---->
           </div>
@@ -744,27 +744,31 @@ exports[`Mcq Questions and QOptions of answered correctly with unshown hint with
         <div
           class="row disabled"
         >
-          <svg
-            class="radio-svg"
-            viewBox="0 0 100 100"
-          >
-            <circle
-              cx="50"
-              cy="50"
-              fill="none"
-              r="47"
-              stroke="black"
-              stroke-width="4"
-            />
-             
-            <circle
-              cx="50"
-              cy="50"
-              fill="dodgerblue"
-              r="25"
-              style="display: none;"
-            />
-          </svg>
+          <div
+            class="col-auto p-0"
+          >
+            <svg
+              class="radio-svg"
+              viewBox="0 0 100 100"
+            >
+              <circle
+                cx="50"
+                cy="50"
+                fill="none"
+                r="47"
+                stroke="black"
+                stroke-width="4"
+              />
+               
+              <circle
+                cx="50"
+                cy="50"
+                fill="dodgerblue"
+                r="25"
+                style="display: none;"
+              />
+            </svg>
+          </div>
            
           <div
             class="col content"
@@ -791,27 +795,31 @@ exports[`Mcq Questions and QOptions of answered correctly with unshown hint with
         <div
           class="row disabled"
         >
-          <svg
-            class="radio-svg"
-            viewBox="0 0 100 100"
-          >
-            <circle
-              cx="50"
-              cy="50"
-              fill="none"
-              r="47"
-              stroke="black"
-              stroke-width="4"
-            />
-             
-            <circle
-              cx="50"
-              cy="50"
-              fill="dodgerblue"
-              r="25"
-              style="display: none;"
-            />
-          </svg>
+          <div
+            class="col-auto p-0"
+          >
+            <svg
+              class="radio-svg"
+              viewBox="0 0 100 100"
+            >
+              <circle
+                cx="50"
+                cy="50"
+                fill="none"
+                r="47"
+                stroke="black"
+                stroke-width="4"
+              />
+               
+              <circle
+                cx="50"
+                cy="50"
+                fill="dodgerblue"
+                r="25"
+                style="display: none;"
+              />
+            </svg>
+          </div>
            
           <div
             class="col content"
@@ -846,27 +854,31 @@ exports[`Mcq Questions and QOptions of answered correctly with unshown hint with
         <div
           class="row disabled"
         >
-          <svg
-            class="radio-svg"
-            viewBox="0 0 100 100"
-          >
-            <circle
-              cx="50"
-              cy="50"
-              fill="none"
-              r="47"
-              stroke="black"
-              stroke-width="4"
-            />
-             
-            <circle
-              cx="50"
-              cy="50"
-              fill="dodgerblue"
-              r="25"
-              style=""
-            />
-          </svg>
+          <div
+            class="col-auto p-0"
+          >
+            <svg
+              class="radio-svg"
+              viewBox="0 0 100 100"
+            >
+              <circle
+                cx="50"
+                cy="50"
+                fill="none"
+                r="47"
+                stroke="black"
+                stroke-width="4"
+              />
+               
+              <circle
+                cx="50"
+                cy="50"
+                fill="dodgerblue"
+                r="25"
+                style=""
+              />
+            </svg>
+          </div>
            
           <div
             class="col content"
@@ -893,27 +905,31 @@ exports[`Mcq Questions and QOptions of answered correctly with unshown hint with
         <div
           class="row disabled"
         >
-          <svg
-            class="radio-svg"
-            viewBox="0 0 100 100"
-          >
-            <circle
-              cx="50"
-              cy="50"
-              fill="none"
-              r="47"
-              stroke="black"
-              stroke-width="4"
-            />
-             
-            <circle
-              cx="50"
-              cy="50"
-              fill="dodgerblue"
-              r="25"
-              style="display: none;"
-            />
-          </svg>
+          <div
+            class="col-auto p-0"
+          >
+            <svg
+              class="radio-svg"
+              viewBox="0 0 100 100"
+            >
+              <circle
+                cx="50"
+                cy="50"
+                fill="none"
+                r="47"
+                stroke="black"
+                stroke-width="4"
+              />
+               
+              <circle
+                cx="50"
+                cy="50"
+                fill="dodgerblue"
+                r="25"
+                style="display: none;"
+              />
+            </svg>
+          </div>
            
           <div
             class="col content"
@@ -1005,27 +1021,31 @@ exports[`Mcq Questions and QOptions of answered wrongly with header without hint
         <div
           class="row disabled"
         >
-          <svg
-            class="radio-svg"
-            viewBox="0 0 100 100"
-          >
-            <circle
-              cx="50"
-              cy="50"
-              fill="none"
-              r="47"
-              stroke="black"
-              stroke-width="4"
-            />
-             
-            <circle
-              cx="50"
-              cy="50"
-              fill="dodgerblue"
-              r="25"
-              style="display: none;"
-            />
-          </svg>
+          <div
+            class="col-auto p-0"
+          >
+            <svg
+              class="radio-svg"
+              viewBox="0 0 100 100"
+            >
+              <circle
+                cx="50"
+                cy="50"
+                fill="none"
+                r="47"
+                stroke="black"
+                stroke-width="4"
+              />
+               
+              <circle
+                cx="50"
+                cy="50"
+                fill="dodgerblue"
+                r="25"
+                style="display: none;"
+              />
+            </svg>
+          </div>
            
           <div
             class="col content"
@@ -1052,27 +1072,31 @@ exports[`Mcq Questions and QOptions of answered wrongly with header without hint
         <div
           class="row disabled"
         >
-          <svg
-            class="radio-svg"
-            viewBox="0 0 100 100"
-          >
-            <circle
-              cx="50"
-              cy="50"
-              fill="none"
-              r="47"
-              stroke="black"
-              stroke-width="4"
-            />
-             
-            <circle
-              cx="50"
-              cy="50"
-              fill="dodgerblue"
-              r="25"
-              style=""
-            />
-          </svg>
+          <div
+            class="col-auto p-0"
+          >
+            <svg
+              class="radio-svg"
+              viewBox="0 0 100 100"
+            >
+              <circle
+                cx="50"
+                cy="50"
+                fill="none"
+                r="47"
+                stroke="black"
+                stroke-width="4"
+              />
+               
+              <circle
+                cx="50"
+                cy="50"
+                fill="dodgerblue"
+                r="25"
+                style=""
+              />
+            </svg>
+          </div>
            
           <div
             class="col content"
@@ -1107,27 +1131,31 @@ exports[`Mcq Questions and QOptions of answered wrongly with header without hint
         <div
           class="row disabled"
         >
-          <svg
-            class="radio-svg"
-            viewBox="0 0 100 100"
-          >
-            <circle
-              cx="50"
-              cy="50"
-              fill="none"
-              r="47"
-              stroke="black"
-              stroke-width="4"
-            />
-             
-            <circle
-              cx="50"
-              cy="50"
-              fill="dodgerblue"
-              r="25"
-              style="display: none;"
-            />
-          </svg>
+          <div
+            class="col-auto p-0"
+          >
+            <svg
+              class="radio-svg"
+              viewBox="0 0 100 100"
+            >
+              <circle
+                cx="50"
+                cy="50"
+                fill="none"
+                r="47"
+                stroke="black"
+                stroke-width="4"
+              />
+               
+              <circle
+                cx="50"
+                cy="50"
+                fill="dodgerblue"
+                r="25"
+                style="display: none;"
+              />
+            </svg>
+          </div>
            
           <div
             class="col content"
@@ -1154,27 +1182,31 @@ exports[`Mcq Questions and QOptions of answered wrongly with header without hint
         <div
           class="row disabled"
         >
-          <svg
-            class="radio-svg"
-            viewBox="0 0 100 100"
-          >
-            <circle
-              cx="50"
-              cy="50"
-              fill="none"
-              r="47"
-              stroke="black"
-              stroke-width="4"
-            />
-             
-            <circle
-              cx="50"
-              cy="50"
-              fill="dodgerblue"
-              r="25"
-              style="display: none;"
-            />
-          </svg>
+          <div
+            class="col-auto p-0"
+          >
+            <svg
+              class="radio-svg"
+              viewBox="0 0 100 100"
+            >
+              <circle
+                cx="50"
+                cy="50"
+                fill="none"
+                r="47"
+                stroke="black"
+                stroke-width="4"
+              />
+               
+              <circle
+                cx="50"
+                cy="50"
+                fill="dodgerblue"
+                r="25"
+                style="display: none;"
+              />
+            </svg>
+          </div>
            
           <div
             class="col content"
@@ -1255,27 +1287,31 @@ exports[`Mcq Questions and QOptions of checked wrongly with shown hint without h
         <div
           class="row"
         >
-          <svg
-            class="radio-svg"
-            viewBox="0 0 100 100"
-          >
-            <circle
-              cx="50"
-              cy="50"
-              fill="none"
-              r="47"
-              stroke="black"
-              stroke-width="4"
-            />
-             
-            <circle
-              cx="50"
-              cy="50"
-              fill="dodgerblue"
-              r="25"
-              style="display: none;"
-            />
-          </svg>
+          <div
+            class="col-auto p-0"
+          >
+            <svg
+              class="radio-svg"
+              viewBox="0 0 100 100"
+            >
+              <circle
+                cx="50"
+                cy="50"
+                fill="none"
+                r="47"
+                stroke="black"
+                stroke-width="4"
+              />
+               
+              <circle
+                cx="50"
+                cy="50"
+                fill="dodgerblue"
+                r="25"
+                style="display: none;"
+              />
+            </svg>
+          </div>
            
           <div
             class="col content"
@@ -1298,27 +1334,31 @@ exports[`Mcq Questions and QOptions of checked wrongly with shown hint without h
         <div
           class="row"
         >
-          <svg
-            class="radio-svg"
-            viewBox="0 0 100 100"
-          >
-            <circle
-              cx="50"
-              cy="50"
-              fill="none"
-              r="47"
-              stroke="black"
-              stroke-width="4"
-            />
-             
-            <circle
-              cx="50"
-              cy="50"
-              fill="dodgerblue"
-              r="25"
-              style=""
-            />
-          </svg>
+          <div
+            class="col-auto p-0"
+          >
+            <svg
+              class="radio-svg"
+              viewBox="0 0 100 100"
+            >
+              <circle
+                cx="50"
+                cy="50"
+                fill="none"
+                r="47"
+                stroke="black"
+                stroke-width="4"
+              />
+               
+              <circle
+                cx="50"
+                cy="50"
+                fill="dodgerblue"
+                r="25"
+                style=""
+              />
+            </svg>
+          </div>
            
           <div
             class="col content"
@@ -1341,27 +1381,31 @@ exports[`Mcq Questions and QOptions of checked wrongly with shown hint without h
         <div
           class="row"
         >
-          <svg
-            class="radio-svg"
-            viewBox="0 0 100 100"
-          >
-            <circle
-              cx="50"
-              cy="50"
-              fill="none"
-              r="47"
-              stroke="black"
-              stroke-width="4"
-            />
-             
-            <circle
-              cx="50"
-              cy="50"
-              fill="dodgerblue"
-              r="25"
-              style="display: none;"
-            />
-          </svg>
+          <div
+            class="col-auto p-0"
+          >
+            <svg
+              class="radio-svg"
+              viewBox="0 0 100 100"
+            >
+              <circle
+                cx="50"
+                cy="50"
+                fill="none"
+                r="47"
+                stroke="black"
+                stroke-width="4"
+              />
+               
+              <circle
+                cx="50"
+                cy="50"
+                fill="dodgerblue"
+                r="25"
+                style="display: none;"
+              />
+            </svg>
+          </div>
            
           <div
             class="col content"
@@ -1384,27 +1428,31 @@ exports[`Mcq Questions and QOptions of checked wrongly with shown hint without h
         <div
           class="row"
         >
-          <svg
-            class="radio-svg"
-            viewBox="0 0 100 100"
-          >
-            <circle
-              cx="50"
-              cy="50"
-              fill="none"
-              r="47"
-              stroke="black"
-              stroke-width="4"
-            />
-             
-            <circle
-              cx="50"
-              cy="50"
-              fill="dodgerblue"
-              r="25"
-              style="display: none;"
-            />
-          </svg>
+          <div
+            class="col-auto p-0"
+          >
+            <svg
+              class="radio-svg"
+              viewBox="0 0 100 100"
+            >
+              <circle
+                cx="50"
+                cy="50"
+                fill="none"
+                r="47"
+                stroke="black"
+                stroke-width="4"
+              />
+               
+              <circle
+                cx="50"
+                cy="50"
+                fill="dodgerblue"
+                r="25"
+                style="display: none;"
+              />
+            </svg>
+          </div>
            
           <div
             class="col content"
@@ -1496,27 +1544,31 @@ exports[`Mcq Questions and QOptions of unanswered with shown hint and header ren
         <div
           class="row"
         >
-          <svg
-            class="radio-svg"
-            viewBox="0 0 100 100"
-          >
-            <circle
-              cx="50"
-              cy="50"
-              fill="none"
-              r="47"
-              stroke="black"
-              stroke-width="4"
-            />
-             
-            <circle
-              cx="50"
-              cy="50"
-              fill="dodgerblue"
-              r="25"
-              style="display: none;"
-            />
-          </svg>
+          <div
+            class="col-auto p-0"
+          >
+            <svg
+              class="radio-svg"
+              viewBox="0 0 100 100"
+            >
+              <circle
+                cx="50"
+                cy="50"
+                fill="none"
+                r="47"
+                stroke="black"
+                stroke-width="4"
+              />
+               
+              <circle
+                cx="50"
+                cy="50"
+                fill="dodgerblue"
+                r="25"
+                style="display: none;"
+              />
+            </svg>
+          </div>
            
           <div
             class="col content"
@@ -1539,27 +1591,31 @@ exports[`Mcq Questions and QOptions of unanswered with shown hint and header ren
         <div
           class="row"
         >
-          <svg
-            class="radio-svg"
-            viewBox="0 0 100 100"
-          >
-            <circle
-              cx="50"
-              cy="50"
-              fill="none"
-              r="47"
-              stroke="black"
-              stroke-width="4"
-            />
-             
-            <circle
-              cx="50"
-              cy="50"
-              fill="dodgerblue"
-              r="25"
-              style="display: none;"
-            />
-          </svg>
+          <div
+            class="col-auto p-0"
+          >
+            <svg
+              class="radio-svg"
+              viewBox="0 0 100 100"
+            >
+              <circle
+                cx="50"
+                cy="50"
+                fill="none"
+                r="47"
+                stroke="black"
+                stroke-width="4"
+              />
+               
+              <circle
+                cx="50"
+                cy="50"
+                fill="dodgerblue"
+                r="25"
+                style="display: none;"
+              />
+            </svg>
+          </div>
            
           <div
             class="col content"
@@ -1582,27 +1638,31 @@ exports[`Mcq Questions and QOptions of unanswered with shown hint and header ren
         <div
           class="row"
         >
-          <svg
-            class="radio-svg"
-            viewBox="0 0 100 100"
-          >
-            <circle
-              cx="50"
-              cy="50"
-              fill="none"
-              r="47"
-              stroke="black"
-              stroke-width="4"
-            />
-             
-            <circle
-              cx="50"
-              cy="50"
-              fill="dodgerblue"
-              r="25"
-              style="display: none;"
-            />
-          </svg>
+          <div
+            class="col-auto p-0"
+          >
+            <svg
+              class="radio-svg"
+              viewBox="0 0 100 100"
+            >
+              <circle
+                cx="50"
+                cy="50"
+                fill="none"
+                r="47"
+                stroke="black"
+                stroke-width="4"
+              />
+               
+              <circle
+                cx="50"
+                cy="50"
+                fill="dodgerblue"
+                r="25"
+                style="display: none;"
+              />
+            </svg>
+          </div>
            
           <div
             class="col content"
@@ -1625,27 +1685,31 @@ exports[`Mcq Questions and QOptions of unanswered with shown hint and header ren
         <div
           class="row"
         >
-          <svg
-            class="radio-svg"
-            viewBox="0 0 100 100"
-          >
-            <circle
-              cx="50"
-              cy="50"
-              fill="none"
-              r="47"
-              stroke="black"
-              stroke-width="4"
-            />
-             
-            <circle
-              cx="50"
-              cy="50"
-              fill="dodgerblue"
-              r="25"
-              style="display: none;"
-            />
-          </svg>
+          <div
+            class="col-auto p-0"
+          >
+            <svg
+              class="radio-svg"
+              viewBox="0 0 100 100"
+            >
+              <circle
+                cx="50"
+                cy="50"
+                fill="none"
+                r="47"
+                stroke="black"
+                stroke-width="4"
+              />
+               
+              <circle
+                cx="50"
+                cy="50"
+                fill="dodgerblue"
+                r="25"
+                style="display: none;"
+              />
+            </svg>
+          </div>
            
           <div
             class="col content"
diff --git a/packages/vue-components/src/__tests__/__snapshots__/Quiz.spec.js.snap b/packages/vue-components/src/__tests__/__snapshots__/Quiz.spec.js.snap
index dfa03e04b9..ab6bb825b8 100644
--- a/packages/vue-components/src/__tests__/__snapshots__/Quiz.spec.js.snap
+++ b/packages/vue-components/src/__tests__/__snapshots__/Quiz.spec.js.snap
@@ -92,27 +92,31 @@ exports[`Quizzes with 2 questions retry goes back to first 1`] = `
           <div
             class="row"
           >
-            <svg
-              class="radio-svg"
-              viewBox="0 0 100 100"
+            <div
+              class="col-auto p-0"
             >
-              <circle
-                cx="50"
-                cy="50"
-                fill="none"
-                r="47"
-                stroke="black"
-                stroke-width="4"
-              />
-               
-              <circle
-                cx="50"
-                cy="50"
-                fill="dodgerblue"
-                r="25"
-                style="display: none;"
-              />
-            </svg>
+              <svg
+                class="radio-svg"
+                viewBox="0 0 100 100"
+              >
+                <circle
+                  cx="50"
+                  cy="50"
+                  fill="none"
+                  r="47"
+                  stroke="black"
+                  stroke-width="4"
+                />
+                 
+                <circle
+                  cx="50"
+                  cy="50"
+                  fill="dodgerblue"
+                  r="25"
+                  style="display: none;"
+                />
+              </svg>
+            </div>
              
             <div
               class="col content"
@@ -136,27 +140,31 @@ exports[`Quizzes with 2 questions retry goes back to first 1`] = `
           <div
             class="row"
           >
-            <svg
-              class="radio-svg"
-              viewBox="0 0 100 100"
+            <div
+              class="col-auto p-0"
             >
-              <circle
-                cx="50"
-                cy="50"
-                fill="none"
-                r="47"
-                stroke="black"
-                stroke-width="4"
-              />
-               
-              <circle
-                cx="50"
-                cy="50"
-                fill="dodgerblue"
-                r="25"
-                style="display: none;"
-              />
-            </svg>
+              <svg
+                class="radio-svg"
+                viewBox="0 0 100 100"
+              >
+                <circle
+                  cx="50"
+                  cy="50"
+                  fill="none"
+                  r="47"
+                  stroke="black"
+                  stroke-width="4"
+                />
+                 
+                <circle
+                  cx="50"
+                  cy="50"
+                  fill="dodgerblue"
+                  r="25"
+                  style="display: none;"
+                />
+              </svg>
+            </div>
              
             <div
               class="col content"
@@ -180,27 +188,31 @@ exports[`Quizzes with 2 questions retry goes back to first 1`] = `
           <div
             class="row"
           >
-            <svg
-              class="radio-svg"
-              viewBox="0 0 100 100"
+            <div
+              class="col-auto p-0"
             >
-              <circle
-                cx="50"
-                cy="50"
-                fill="none"
-                r="47"
-                stroke="black"
-                stroke-width="4"
-              />
-               
-              <circle
-                cx="50"
-                cy="50"
-                fill="dodgerblue"
-                r="25"
-                style="display: none;"
-              />
-            </svg>
+              <svg
+                class="radio-svg"
+                viewBox="0 0 100 100"
+              >
+                <circle
+                  cx="50"
+                  cy="50"
+                  fill="none"
+                  r="47"
+                  stroke="black"
+                  stroke-width="4"
+                />
+                 
+                <circle
+                  cx="50"
+                  cy="50"
+                  fill="dodgerblue"
+                  r="25"
+                  style="display: none;"
+                />
+              </svg>
+            </div>
              
             <div
               class="col content"
@@ -407,7 +419,7 @@ exports[`Quizzes with checkbox question marked incorrect shows next button after
           class="form-control success"
         >
           <label
-            class="checkbox-label disabled"
+            class="row checkbox-label m-0 disabled"
           >
             <input
               class="checkbox"
@@ -423,7 +435,7 @@ exports[`Quizzes with checkbox question marked incorrect shows next button after
             </div>
              
             <div
-              class="col-1"
+              class="col-auto"
             >
               <div>
                 <i
@@ -440,7 +452,7 @@ exports[`Quizzes with checkbox question marked incorrect shows next button after
           class="form-control danger"
         >
           <label
-            class="checkbox-label disabled"
+            class="row checkbox-label m-0 disabled"
           >
             <input
               class="checkbox"
@@ -456,7 +468,7 @@ exports[`Quizzes with checkbox question marked incorrect shows next button after
             </div>
              
             <div
-              class="col-1"
+              class="col-auto"
             >
               <div>
                 <i
@@ -473,7 +485,7 @@ exports[`Quizzes with checkbox question marked incorrect shows next button after
           class="form-control success"
         >
           <label
-            class="checkbox-label disabled"
+            class="row checkbox-label m-0 disabled"
           >
             <input
               class="checkbox"
@@ -489,7 +501,7 @@ exports[`Quizzes with checkbox question marked incorrect shows next button after
             </div>
              
             <div
-              class="col-1"
+              class="col-auto"
             >
               <div>
                 <i
@@ -590,27 +602,31 @@ exports[`Quizzes with mcq question marked correct shows next button after answer
           <div
             class="row disabled"
           >
-            <svg
-              class="radio-svg"
-              viewBox="0 0 100 100"
+            <div
+              class="col-auto p-0"
             >
-              <circle
-                cx="50"
-                cy="50"
-                fill="none"
-                r="47"
-                stroke="black"
-                stroke-width="4"
-              />
-               
-              <circle
-                cx="50"
-                cy="50"
-                fill="dodgerblue"
-                r="25"
-                style=""
-              />
-            </svg>
+              <svg
+                class="radio-svg"
+                viewBox="0 0 100 100"
+              >
+                <circle
+                  cx="50"
+                  cy="50"
+                  fill="none"
+                  r="47"
+                  stroke="black"
+                  stroke-width="4"
+                />
+                 
+                <circle
+                  cx="50"
+                  cy="50"
+                  fill="dodgerblue"
+                  r="25"
+                  style=""
+                />
+              </svg>
+            </div>
              
             <div
               class="col content"
@@ -638,27 +654,31 @@ exports[`Quizzes with mcq question marked correct shows next button after answer
           <div
             class="row disabled"
           >
-            <svg
-              class="radio-svg"
-              viewBox="0 0 100 100"
+            <div
+              class="col-auto p-0"
             >
-              <circle
-                cx="50"
-                cy="50"
-                fill="none"
-                r="47"
-                stroke="black"
-                stroke-width="4"
-              />
-               
-              <circle
-                cx="50"
-                cy="50"
-                fill="dodgerblue"
-                r="25"
-                style="display: none;"
-              />
-            </svg>
+              <svg
+                class="radio-svg"
+                viewBox="0 0 100 100"
+              >
+                <circle
+                  cx="50"
+                  cy="50"
+                  fill="none"
+                  r="47"
+                  stroke="black"
+                  stroke-width="4"
+                />
+                 
+                <circle
+                  cx="50"
+                  cy="50"
+                  fill="dodgerblue"
+                  r="25"
+                  style="display: none;"
+                />
+              </svg>
+            </div>
              
             <div
               class="col content"
@@ -686,27 +706,31 @@ exports[`Quizzes with mcq question marked correct shows next button after answer
           <div
             class="row disabled"
           >
-            <svg
-              class="radio-svg"
-              viewBox="0 0 100 100"
+            <div
+              class="col-auto p-0"
             >
-              <circle
-                cx="50"
-                cy="50"
-                fill="none"
-                r="47"
-                stroke="black"
-                stroke-width="4"
-              />
-               
-              <circle
-                cx="50"
-                cy="50"
-                fill="dodgerblue"
-                r="25"
-                style="display: none;"
-              />
-            </svg>
+              <svg
+                class="radio-svg"
+                viewBox="0 0 100 100"
+              >
+                <circle
+                  cx="50"
+                  cy="50"
+                  fill="none"
+                  r="47"
+                  stroke="black"
+                  stroke-width="4"
+                />
+                 
+                <circle
+                  cx="50"
+                  cy="50"
+                  fill="dodgerblue"
+                  r="25"
+                  style="display: none;"
+                />
+              </svg>
+            </div>
              
             <div
               class="col content"
diff --git a/packages/vue-components/src/questions/QOption.vue b/packages/vue-components/src/questions/QOption.vue
index 8182c61b08..7f3246e800 100644
--- a/packages/vue-components/src/questions/QOption.vue
+++ b/packages/vue-components/src/questions/QOption.vue
@@ -8,23 +8,25 @@
     @mouseleave="hover = false"
   >
     <div :class="['row', { 'disabled': qState.answered }]">
-      <svg viewBox="0 0 100 100" class="radio-svg">
-        <circle
-          cx="50"
-          cy="50"
-          r="47"
-          fill="none"
-          stroke="black"
-          stroke-width="4"
-        />
-        <circle
-          v-show="selected"
-          cx="50"
-          cy="50"
-          r="25"
-          fill="dodgerblue"
-        />
-      </svg>
+      <div class="col-auto p-0">
+        <svg viewBox="0 0 100 100" class="radio-svg">
+          <circle
+            cx="50"
+            cy="50"
+            r="47"
+            fill="none"
+            stroke="black"
+            stroke-width="4"
+          />
+          <circle
+            v-show="selected"
+            cx="50"
+            cy="50"
+            r="25"
+            fill="dodgerblue"
+          />
+        </svg>
+      </div>
       <div class="col content">
         <slot></slot>
       </div>
@@ -60,7 +62,7 @@
     @mouseover="hover = true"
     @mouseleave="hover = false"
   >
-    <label :class="['checkbox-label', { 'disabled': qState.answered }]" @click.stop>
+    <label :class="['row', 'checkbox-label', 'm-0', { 'disabled': qState.answered }]" @click.stop>
       <input
         v-model="selected"
         class="checkbox"
@@ -71,7 +73,7 @@
       <div class="col content">
         <slot></slot>
       </div>
-      <div class="col-1">
+      <div class="col-auto">
         <div v-if="qState.answered">
           <i
             v-if="correct"
@@ -175,11 +177,7 @@ export default {
     }
 
     .checkbox-label {
-        display: flex;
-        align-items: center;
         cursor: pointer;
-        margin-bottom: 0;
-        vertical-align: text-bottom;
     }
 
     .form-control {
@@ -202,6 +200,7 @@ export default {
     .radio-svg {
         width: 1em;
         height: 1em;
+        vertical-align: text-top;
     }
 
     .checkbox {