diff --git a/components/doc/DocApiTable.vue b/components/doc/DocApiTable.vue
index 83d289af1..607089e1e 100644
--- a/components/doc/DocApiTable.vue
+++ b/components/doc/DocApiTable.vue
@@ -1,6 +1,6 @@
 <template>
     <DocSectionText :id="id" :label="label" :level="componentLevel">
-        {{ description || null }}
+        <p>{{ description || null }}</p>
         <p v-if="relatedProp" class="inline-block">
             See <NuxtLink :to="setRelatedPropPath(relatedProp)" class="doc-option-link"> {{ relatedPropValue(relatedProp) }} </NuxtLink>
         </p>
diff --git a/doc/galleria/AdvancedDoc.vue b/doc/galleria/AdvancedDoc.vue
index 6e39e9342..a8608cb1d 100644
--- a/doc/galleria/AdvancedDoc.vue
+++ b/doc/galleria/AdvancedDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Advanced Galleria implementation with a custom UI.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center galleria demo">
+    <div class="card">
         <Galleria
             ref="galleria"
             v-model:activeIndex="activeIndex"
@@ -81,7 +81,7 @@ export default {
 </Galleria>`,
                 options: `
 <template>
-    <div class="card flex justify-content-center galleria demo">
+    <div class="card">
         <Galleria ref="galleria" v-model:activeIndex="activeIndex" :value="images" :numVisible="5" containerStyle="max-width: 640px" :containerClass="galleriaClass"
             :showThumbnails="showThumbnails" :showItemNavigators="true" :showItemNavigatorsOnHover="true" :circular="true" :autoPlay="isAutoPlay" :transitionInterval="3000">
             <template #item="slotProps">
@@ -260,7 +260,7 @@ export default {
 </style>`,
                 composition: `
 <template>
-    <div class="card flex justify-content-center galleria demo">
+    <div class="card">
         <Galleria ref="galleria" v-model:activeIndex="activeIndex" :value="images" :numVisible="5" containerStyle="max-width: 640px" :containerClass="galleriaClass"
             :showThumbnails="showThumbnails" :showItemNavigators="true" :showItemNavigatorsOnHover="true" :circular="true" :autoPlay="isAutoPlay" :transitionInterval="3000">
             <template #item="slotProps">
diff --git a/doc/galleria/AutoPlayDoc.vue b/doc/galleria/AutoPlayDoc.vue
index e9a9b76e6..e4d50f2d1 100644
--- a/doc/galleria/AutoPlayDoc.vue
+++ b/doc/galleria/AutoPlayDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>A slideshow implementation is defined by adding <i>circular</i> and <i>autoPlay</i> properties.</p>
     </DocSectionText>
-    <div class="card md:flex md:justify-content-center">
+    <div class="card">
         <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px" :circular="true" :autoPlay="true" :transitionInterval="2000">
             <template #item="slotProps">
                 <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
@@ -49,7 +49,7 @@ export default {
 </Galleria>`,
                 options: `
 <template>
-    <div class="card md:flex md:justify-content-center">
+    <div class="card">
         <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px"
             :circular="true" :autoPlay="true" :transitionInterval="2000">
             <template #item="slotProps">
@@ -92,7 +92,7 @@ export default {
 <\/script>`,
                 composition: `
 <template>
-    <div class="card md:flex md:justify-content-center">
+    <div class="card">
         <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px"
             :circular="true" :autoPlay="true" :transitionInterval="2000">
             <template #item="slotProps">
diff --git a/doc/galleria/BasicDoc.vue b/doc/galleria/BasicDoc.vue
index 57399a7b8..90d013e3e 100644
--- a/doc/galleria/BasicDoc.vue
+++ b/doc/galleria/BasicDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Galleria requires a <i>value</i> as a collection of images, <i>item</i> template for the higher resolution image and <i>thumbnail</i> template to display as a thumbnail.</p>
     </DocSectionText>
-    <div class="card md:flex md:justify-content-center">
+    <div class="card">
         <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px">
             <template #item="slotProps">
                 <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" />
@@ -48,7 +48,7 @@ export default {
 </Galleria>`,
                 options: `
 <template>
-    <div class="card md:flex md:justify-content-center">
+    <div class="card">
         <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px">
             <template #item="slotProps">
                 <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" />
@@ -90,7 +90,7 @@ export default {
 <\/script>`,
                 composition: `
 <template>
-    <div class="card md:flex md:justify-content-center">
+    <div class="card">
         <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px">
             <template #item="slotProps">
                 <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%" />
diff --git a/doc/galleria/CaptionDoc.vue b/doc/galleria/CaptionDoc.vue
index bf85d7506..8aca39f4f 100644
--- a/doc/galleria/CaptionDoc.vue
+++ b/doc/galleria/CaptionDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Description of an image is specified with the <i>caption</i> property that takes the displayed object and returns content.</p>
     </DocSectionText>
-    <div class="card md:flex md:justify-content-center">
+    <div class="card">
         <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px">
             <template #item="slotProps">
                 <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
@@ -56,7 +56,7 @@ export default {
 </Galleria>`,
                 options: `
 <template>
-    <div class="card md:flex md:justify-content-center">
+    <div class="card">
         <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px">
             <template #item="slotProps">
                 <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
@@ -102,7 +102,7 @@ export default {
 <\/script>`,
                 composition: `
 <template>
-    <div class="card md:flex md:justify-content-center">
+    <div class="card">
         <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px">
             <template #item="slotProps">
                 <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
diff --git a/doc/galleria/ControlledDoc.vue b/doc/galleria/ControlledDoc.vue
index d7fd39fd2..bb48721ac 100644
--- a/doc/galleria/ControlledDoc.vue
+++ b/doc/galleria/ControlledDoc.vue
@@ -2,8 +2,8 @@
     <DocSectionText v-bind="$attrs">
         <p>Galleria can be controlled programmatically using a binding to <i>activeIndex</i>.</p>
     </DocSectionText>
-    <div class="card flex flex-column md:align-items-center">
-        <div class="mb-3 align-self-center">
+    <div class="card">
+        <div class="mb-3">
             <Button icon="pi pi-minus" @click="prev" />
             <Button icon="pi pi-plus" @click="next" severity="secondary" class="ml-2" />
         </div>
@@ -59,8 +59,8 @@ export default {
 </Galleria>`,
                 options: `
 <template>
-    <div class="card flex flex-column md:align-items-center">
-        <div class="mb-3 align-self-center">
+    <div class="card">
+        <div class="mb-3">
             <Button icon="pi pi-minus" @click="prev" />
             <Button icon="pi pi-plus" @click="next" severity="secondary" class="ml-2" />
         </div>
@@ -115,8 +115,8 @@ export default {
 <\/script>`,
                 composition: `
 <template>
-    <div class="card flex flex-column md:align-items-center">
-        <div class="mb-3 align-self-center">
+    <div class="card">
+        <div class="mb-3">
             <Button icon="pi pi-minus" @click="prev" />
             <Button icon="pi pi-plus" @click="next" severity="secondary" class="ml-2" />
         </div>
diff --git a/doc/galleria/ThumbnailDoc.vue b/doc/galleria/ThumbnailDoc.vue
index 94d4693f2..9fbf42528 100644
--- a/doc/galleria/ThumbnailDoc.vue
+++ b/doc/galleria/ThumbnailDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Thumbnails represent a smaller version of the actual content.</p>
     </DocSectionText>
-    <div class="card flex flex-column md:align-items-center">
+    <div class="card">
         <div class="flex flex-wrap gap-3 mb-5 align-self-center">
             <div class="flex flex-wrap gap-3 mb-5">
                 <div v-for="option in positionOptions" :key="option.label" class="flex align-items-center">
@@ -79,7 +79,7 @@ export default {
 </Galleria>`,
                 options: `
 <template>
-    <div class="card card flex flex-column md:align-items-center">
+    <div class="card">
         <div class="flex flex-wrap gap-3 mb-5 align-self-center">
             <div class="flex flex-wrap gap-3 mb-5">
                 <div v-for="option in positionOptions" :key="option.label" class="flex align-items-center">
@@ -150,7 +150,7 @@ export default {
 <\/script>`,
                 composition: `
 <template>
-    <div class="card flex flex-column md:align-items-center">
+    <div class="card">
         <div class="flex flex-wrap gap-3 mb-5 align-self-center">
             <div class="flex flex-wrap gap-3 mb-5">
                 <div v-for="option in positionOptions" :key="option.label" class="flex align-items-center">
diff --git a/doc/galleria/indicator/ClickEventDoc.vue b/doc/galleria/indicator/ClickEventDoc.vue
index 85601ee6d..c4d4b2301 100644
--- a/doc/galleria/indicator/ClickEventDoc.vue
+++ b/doc/galleria/indicator/ClickEventDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Indicators are displayed at the bottom by enabling <i>showIndicators</i> property and interacted with the click event by default.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card">
         <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px" :showThumbnails="false" :showIndicators="true">
             <template #item="slotProps">
                 <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
@@ -43,7 +43,7 @@ export default {
 </Galleria>`,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card">
         <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px"
             :showThumbnails="false" :showIndicators="true">
             <template #item="slotProps">
@@ -83,7 +83,7 @@ export default {
 <\/script>`,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card">
         <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px"
             :showThumbnails="false" :showIndicators="true">
             <template #item="slotProps">
diff --git a/doc/galleria/indicator/HoverEventDoc.vue b/doc/galleria/indicator/HoverEventDoc.vue
index 0e19040e5..6af932cc4 100644
--- a/doc/galleria/indicator/HoverEventDoc.vue
+++ b/doc/galleria/indicator/HoverEventDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Indicators can be activated on hover instead of click if <i>changeItemOnIndicatorHover</i> is added.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card">
         <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px" :showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true">
             <template #item="slotProps">
                 <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
@@ -43,7 +43,7 @@ export default {
 </Galleria>`,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card">
         <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px"
             :showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true">
             <template #item="slotProps">
@@ -83,7 +83,7 @@ export default {
 <\/script>`,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card">
         <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" containerStyle="max-width: 640px"
             :showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true">
             <template #item="slotProps">
diff --git a/doc/galleria/indicator/PositionDoc.vue b/doc/galleria/indicator/PositionDoc.vue
index 96c36ab71..e29a3de9d 100644
--- a/doc/galleria/indicator/PositionDoc.vue
+++ b/doc/galleria/indicator/PositionDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Indicators can be placed at four different sides using the <i>indicatorsPosition</i> property. In addition, enabling <i>showIndicatorsOnItem</i> moves the indicators inside the image section.</p>
     </DocSectionText>
-    <div class="card flex flex-column align-items-center">
+    <div class="card">
         <div class="flex flex-wrap gap-3 mb-5">
             <div v-for="option in positionOptions" :key="option.label" class="flex align-items-center">
                 <RadioButton v-model="position" :inputId="option.label" name="option" :value="option.value" />
@@ -59,7 +59,7 @@ export default {
 </Galleria>`,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card">
         <div class="flex flex-wrap gap-3 mb-5">
             <div v-for="option in positionOptions" :key="option.label" class="flex align-items-center">
                 <RadioButton :value="option.value" />
@@ -114,7 +114,7 @@ export default {
 <\/script>`,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card">
         <div class="flex flex-wrap gap-3 mb-5">
             <div v-for="option in positionOptions" :key="option.label" class="flex align-items-center">
                 <RadioButton :value="option.value" />
diff --git a/doc/galleria/indicator/TemplateDoc.vue b/doc/galleria/indicator/TemplateDoc.vue
index 3ce277aad..5c1636b60 100644
--- a/doc/galleria/indicator/TemplateDoc.vue
+++ b/doc/galleria/indicator/TemplateDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Indicator content can be customized with the <i>indicator</i> property that takes an index as a parameter and expects content.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card">
         <Galleria :value="images" :numVisible="5" containerStyle="max-width: 640px" :showThumbnails="false" :showIndicators="true" :changeItemOnIndicatorHover="true" :showIndicatorsOnItem="true" indicatorsPosition="left">
             <template #item="slotProps">
                 <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
@@ -49,7 +49,7 @@ export default {
 </Galleria>`,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card">
         <Galleria :value="images" :numVisible="5" containerStyle="max-width: 640px" :showThumbnails="false"
             :showIndicators="true" :changeItemOnIndicatorHover="true" :showIndicatorsOnItem="true" indicatorsPosition="left">
             <template #item="slotProps">
@@ -78,7 +78,7 @@ export default {
 <\/script>`,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card">
         <Galleria :value="images" :numVisible="5" containerStyle="max-width: 640px" :showThumbnails="false"
             :showIndicators="true" :changeItemOnIndicatorHover="true" :showIndicatorsOnItem="true" indicatorsPosition="left">
             <template #item="slotProps">
diff --git a/doc/galleria/navigator/HoverDoc.vue b/doc/galleria/navigator/HoverDoc.vue
index b1354df64..3d655a6a3 100644
--- a/doc/galleria/navigator/HoverDoc.vue
+++ b/doc/galleria/navigator/HoverDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Navigators are displayed on hover only if <i>showItemNavigatorsOnHover</i> is enabled.</p>
     </DocSectionText>
-    <div class="card md:flex md:justify-content-center">
+    <div class="card">
         <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px" :showItemNavigators="true" :showItemNavigatorsOnHover="true">
             <template #item="slotProps">
                 <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
@@ -48,7 +48,7 @@ export default {
 </Galleria>`,
                 options: `
 <template>
-    <div class="card md:flex md:justify-content-center">
+    <div class="card">
         <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px" :showItemNavigators="true" :showItemNavigatorsOnHover="true">
             <template #item="slotProps">
                 <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
@@ -90,7 +90,7 @@ export default {
 <\/script>`,
                 composition: `
 <template>
-    <div class="card md:flex md:justify-content-center">
+    <div class="card">
         <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px" :showItemNavigators="true" :showItemNavigatorsOnHover="true">
             <template #item="slotProps">
                 <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
diff --git a/doc/galleria/navigator/IndicatorsDoc.vue b/doc/galleria/navigator/IndicatorsDoc.vue
index c4d352404..1ecd02a59 100644
--- a/doc/galleria/navigator/IndicatorsDoc.vue
+++ b/doc/galleria/navigator/IndicatorsDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Navigators and Indicators can be combined as well.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card">
         <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px" :showItemNavigators="true" :showThumbnails="false" :showItemNavigatorsOnHover="true" :showIndicators="true">
             <template #item="slotProps">
                 <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
@@ -49,7 +49,7 @@ export default {
 </Galleria>`,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card">
         <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px"
             :showItemNavigators="true" :showThumbnails="false" :showItemNavigatorsOnHover="true" :showIndicators="true">
             <template #item="slotProps">
@@ -92,7 +92,7 @@ export default {
 <\/script>`,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card">
         <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px"
             :showItemNavigators="true" :showThumbnails="false" :showItemNavigatorsOnHover="true" :showIndicators="true">
             <template #item="slotProps">
diff --git a/doc/galleria/navigator/ItemThumbnailsDoc.vue b/doc/galleria/navigator/ItemThumbnailsDoc.vue
index 28018a270..de53c3dc8 100644
--- a/doc/galleria/navigator/ItemThumbnailsDoc.vue
+++ b/doc/galleria/navigator/ItemThumbnailsDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Add <i>showItemNavigators</i> to display navigator elements and the left and right side.</p>
     </DocSectionText>
-    <div class="card md:flex md:justify-content-center">
+    <div class="card">
         <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px" :showItemNavigators="true">
             <template #item="slotProps">
                 <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
@@ -49,7 +49,7 @@ export default {
 </Galleria>`,
                 options: `
 <template>
-    <div class="card md:flex md:justify-content-center">
+    <div class="card">
         <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px"
             :showItemNavigators="true">
             <template #item="slotProps">
@@ -92,7 +92,7 @@ export default {
 <\/script>`,
                 composition: `
 <template>
-    <div class="card md:flex md:justify-content-center">
+    <div class="card">
         <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px"
             :showItemNavigators="true">
             <template #item="slotProps">
diff --git a/doc/galleria/navigator/ItemWithoutThumbnailsDoc.vue b/doc/galleria/navigator/ItemWithoutThumbnailsDoc.vue
index 9e0d84334..fac8a88f0 100644
--- a/doc/galleria/navigator/ItemWithoutThumbnailsDoc.vue
+++ b/doc/galleria/navigator/ItemWithoutThumbnailsDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>Simple example with indicators only.</p>
     </DocSectionText>
-    <div class="card flex justify-content-center">
+    <div class="card">
         <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px" :showItemNavigators="true" :showThumbnails="false">
             <template #item="slotProps">
                 <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block" />
@@ -49,7 +49,7 @@ export default {
 </Galleria>`,
                 options: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card">
         <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px"
             :showItemNavigators="true" :showThumbnails="false">
             <template #item="slotProps">
@@ -92,7 +92,7 @@ export default {
 <\/script>`,
                 composition: `
 <template>
-    <div class="card flex justify-content-center">
+    <div class="card">
         <Galleria :value="images" :responsiveOptions="responsiveOptions" :numVisible="5" :circular="true" containerStyle="max-width: 640px"
             :showItemNavigators="true" :showThumbnails="false">
             <template #item="slotProps">