diff --git a/src/html/pages/components/general.astro b/src/html/pages/components/general.astro
index 96151594a..24732fec1 100644
--- a/src/html/pages/components/general.astro
+++ b/src/html/pages/components/general.astro
@@ -73,7 +73,7 @@ const pageTitle = "General Components";
           <!--begin::Col-->
           <div class="col-md-6">
             <!--begin::Accordion-->
-            <div class="card card-primary card-outline mb-2">
+            <div class="card card-primary card-outline mb-4">
               <!--begin::Header-->
               <div class="card-header">
                 <div class="card-title">Accordion</div>
@@ -124,7 +124,7 @@ const pageTitle = "General Components";
             </div>
             <!--end::Accordion-->
             <!--begin::Alert-->
-            <div class="card card-success card-outline mb-2">
+            <div class="card card-success card-outline mb-4">
               <!--begin::Header-->
               <div class="card-header">
                 <div class="card-title">Alert</div>
@@ -161,7 +161,7 @@ const pageTitle = "General Components";
             </div>
             <!--end::Alert-->
             <!--begin::Badge-->
-            <div class="card card-warning card-outline mb-2">
+            <div class="card card-warning card-outline mb-4">
               <!--begin::Header-->
               <div class="card-header">
                 <div class="card-title">Badge</div>
@@ -217,7 +217,7 @@ const pageTitle = "General Components";
             </div>
             <!--end::Badge-->
             <!--begin::Button-->
-            <div class="card card-danger card-outline mb-2">
+            <div class="card card-danger card-outline mb-4">
               <!--begin::Header-->
               <div class="card-header">
                 <div class="card-title">Button</div>
@@ -263,7 +263,7 @@ const pageTitle = "General Components";
           <!--begin::Col-->
           <div class="col-md-6">
             <!--begin::Button Group-->
-            <div class="card card-info card-outline mb-2">
+            <div class="card card-info card-outline mb-4">
               <!--begin::Header-->
               <div class="card-header">
                 <div class="card-title">Button Group</div>
@@ -326,7 +326,7 @@ const pageTitle = "General Components";
             </div>
             <!--end::Button Group-->
             <!--begin::Collapse-->
-            <div class="card card-primary card-outline mb-2">
+            <div class="card card-primary card-outline mb-4">
               <!--begin::Header-->
               <div class="card-header">
                 <div class="card-title">Collapse</div>
@@ -352,7 +352,7 @@ const pageTitle = "General Components";
             </div>
             <!--end::Collapse-->
             <!--begin::Dropdowns-->
-            <div class="card card-success card-outline mb-2">
+            <div class="card card-success card-outline mb-4">
               <!--begin::Header-->
               <div class="card-header">
                 <div class="card-title">Dropdowns</div>
@@ -424,7 +424,7 @@ const pageTitle = "General Components";
             </div>
             <!--end::Dropdowns-->
             <!--begin::List Group-->
-            <div class="card card-warning card-outline mb-2">
+            <div class="card card-warning card-outline mb-4">
               <!--begin::Header-->
               <div class="card-header">
                 <div class="card-title">List Group</div>
@@ -446,7 +446,7 @@ const pageTitle = "General Components";
             </div>
             <!--end::List Group-->
             <!--begin::Navbar-->
-            <div class="card card-danger card-outline mb-2">
+            <div class="card card-danger card-outline mb-4">
               <!--begin::Header-->
               <div class="card-header">
                 <div class="card-title">Navbar</div>
@@ -497,7 +497,7 @@ const pageTitle = "General Components";
             </div>
             <!--end::Navbar-->
             <!--begin::Pagination-->
-            <div class="card card-info card-outline mb-2">
+            <div class="card card-info card-outline mb-4">
               <!--begin::Header-->
               <div class="card-header">
                 <div class="card-title">Pagination</div>
@@ -549,7 +549,7 @@ const pageTitle = "General Components";
             </div>
             <!--end::Pagination-->
             <!--begin::Placeholder-->
-            <div class="card card-secondary card-outline mb-2">
+            <div class="card card-secondary card-outline mb-4">
               <!--begin::Header-->
               <div class="card-header">
                 <div class="card-title">Placeholder</div>
@@ -576,7 +576,7 @@ const pageTitle = "General Components";
             </div>
             <!--end::Placeholder-->
             <!--begin::Progress-->
-            <div class="card card-primary card-outline mb-2">
+            <div class="card card-primary card-outline mb-4">
               <!--begin::Header-->
               <div class="card-header">
                 <div class="card-title">Progress</div>
@@ -604,7 +604,7 @@ const pageTitle = "General Components";
             </div>
             <!--end::Progress-->
             <!--begin::Toast-->
-            <div class="card card-primary card-outline mb-2">
+            <div class="card card-primary card-outline mb-4">
               <!--begin::Header-->
               <div class="card-header">
                 <div class="card-title">Toast</div>
@@ -728,7 +728,7 @@ const pageTitle = "General Components";
             </div>
             <!--end::Toast-->
             <!--begin::Tooltip-->
-            <div class="card card-primary card-outline mb-2">
+            <div class="card card-primary card-outline mb-4">
               <!--begin::Header-->
               <div class="card-header">
                 <div class="card-title">Tooltip</div>
@@ -742,7 +742,7 @@ const pageTitle = "General Components";
             </div>
             <!--end::Toast-->
             <!--begin::Spinner-->
-            <div class="card card-success card-outline mb-2">
+            <div class="card card-success card-outline mb-4">
               <!--begin::Header-->
               <div class="card-header">
                 <div class="card-title">Spinner</div>
diff --git a/src/html/pages/forms/general.astro b/src/html/pages/forms/general.astro
index b878b3be2..6cd919158 100644
--- a/src/html/pages/forms/general.astro
+++ b/src/html/pages/forms/general.astro
@@ -72,7 +72,7 @@ const page = "general";
               <!--begin::Col-->
               <div class="col-md-6">
                 <!--begin::Quick Example-->
-                <div class="card card-primary card-outline mb-2">
+                <div class="card card-primary card-outline mb-4">
                   <!--begin::Header-->
                   <div class="card-header">
                     <div class="card-title">Quick Example</div>
@@ -140,7 +140,7 @@ const page = "general";
                 </div>
                 <!--end::Quick Example-->
                 <!--begin::Input Group-->
-                <div class="card card-success card-outline mb-2">
+                <div class="card card-success card-outline mb-4">
                   <!--begin::Header-->
                   <div class="card-header">
                     <div class="card-title">Input Group</div>
@@ -234,7 +234,7 @@ const page = "general";
                 </div>
                 <!--end::Input Group-->
                 <!--begin::Horizontal Form-->
-                <div class="card card-warning card-outline mb-2">
+                <div class="card card-warning card-outline mb-4">
                   <!--begin::Header-->
                   <div class="card-header">
                     <div class="card-title">Horizontal Form</div>
@@ -348,7 +348,7 @@ const page = "general";
               <!--begin::Col-->
               <div class="col-md-6">
                 <!--begin::Different Height-->
-                <div class="card card-secondary card-outline mb-2">
+                <div class="card card-secondary card-outline mb-4">
                   <!--begin::Header-->
                   <div class="card-header">
                     <div class="card-title">Different Height</div>
@@ -381,7 +381,7 @@ const page = "general";
                 </div>
                 <!--end::Different Height-->
                 <!--begin::Different Width-->
-                <div class="card card-danger card-outline mb-2">
+                <div class="card card-danger card-outline mb-4">
                   <!--begin::Header-->
                   <div class="card-header">
                     <div class="card-title">Different Width</div>
@@ -425,7 +425,7 @@ const page = "general";
                 </div>
                 <!--end::Different Width-->
                 <!--begin::Form Validation-->
-                <div class="card card-info card-outline mb-2">
+                <div class="card card-info card-outline mb-4">
                   <!--begin::Header-->
                   <div class="card-header">
                     <div class="card-title">Form Validation</div>