diff --git a/doc/stepper/BasicDoc.vue b/doc/stepper/BasicDoc.vue
index ae54150a5..182a4ba12 100644
--- a/doc/stepper/BasicDoc.vue
+++ b/doc/stepper/BasicDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Stepper consists of one or more StepperPanel elements.</p>
     </DocSectionText>
-    <div class="card">
+    <div class="card" style="padding-left: 20rem; padding-right: 20rem">
         <Stepper>
             <StepperPanel header="Header I">
                 <template #content="{ prevCallback, nextCallback }">
diff --git a/doc/stepper/LinearDoc.vue b/doc/stepper/LinearDoc.vue
index 7e3607560..4ce828370 100644
--- a/doc/stepper/LinearDoc.vue
+++ b/doc/stepper/LinearDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Stepper consists of one or more StepperPanel elements.</p>
     </DocSectionText>
-    <div class="card">
+    <div class="card" style="padding-left: 20rem; padding-right: 20rem">
         <Stepper v-model:activeStep="active" linear>
             <StepperPanel header="Header I">
                 <template #content="{ prevCallback, nextCallback }">
diff --git a/doc/stepper/TemplateDoc.vue b/doc/stepper/TemplateDoc.vue
index b602111d6..b2ef874f1 100644
--- a/doc/stepper/TemplateDoc.vue
+++ b/doc/stepper/TemplateDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Each StepperPanel content can easily be customized with the default slot instead of using the built-in modes. Additionally, header, content, and separator sections of the StepperPanel are customizable via templating.</p>
     </DocSectionText>
-    <div class="card flex flex-column justify-content-center">
+    <div class="card flex flex-column justify-content-center" style="padding-left: 20rem; padding-right: 20rem">
         <Stepper v-model:activeStep="active">
             <StepperPanel>
                 <template #header="{ index, clickCallback, headerClass, numberClass }">