From 8b872e37c2b6c00a7b49feae3ee6a63b50292bbb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?=
 <tugcekucukoglu.860@gmail.com>
Date: Thu, 13 Jan 2022 14:03:59 +0300
Subject: [PATCH] Fixed #1977

---
 package.json                                  |   2 +-
 src/App.vue                                   |   2 +-
 src/AppConfigurator.vue                       | 124 +--
 src/AppDemoActions.vue                        |   6 +-
 src/AppDocumentation.vue                      |   2 +-
 src/AppFooter.vue                             |   4 +-
 src/AppInputStyleSwitch.vue                   |   6 +-
 src/AppTopBar.vue                             |   2 +-
 src/assets/styles/app/_config.scss            |   2 +-
 src/assets/styles/app/_core.scss              |   1 -
 src/assets/styles/app/_home.scss              |   6 +-
 src/components/treetable/TreeTable.vue        |   2 +-
 src/views/Home.vue                            |  98 +-
 src/views/accordion/AccordionDemo.vue         |   6 +-
 src/views/accordion/AccordionDoc.vue          |  18 +-
 src/views/autocomplete/AutoCompleteDemo.vue   |   2 +-
 src/views/autocomplete/AutoCompleteDoc.vue    |  18 +-
 src/views/avatar/AvatarDemo.vue               |  58 +-
 src/views/avatar/AvatarDoc.vue                | 168 +--
 src/views/badge/BadgeDemo.vue                 |  20 +-
 src/views/badge/BadgeDoc.vue                  |  60 +-
 src/views/button/ButtonDemo.vue               |   4 +-
 src/views/button/ButtonDoc.vue                |  16 +-
 src/views/calendar/CalendarDemo.vue           |  32 +-
 src/views/calendar/CalendarDoc.vue            |  96 +-
 src/views/carousel/CarouselDemo.vue           |  36 +-
 src/views/carousel/CarouselDoc.vue            | 108 +-
 src/views/cascadeselect/CascadeSelectDemo.vue |   4 +-
 src/views/cascadeselect/CascadeSelectDoc.vue  |  16 +-
 src/views/chart/DoughnutChartDemo.vue         |   2 +-
 src/views/chart/PieChartDemo.vue              |   2 +-
 src/views/chart/PolarAreaChartDemo.vue        |   2 +-
 src/views/chart/RadarChartDemo.vue            |   2 +-
 src/views/checkbox/CheckboxDemo.vue           |  12 +-
 src/views/checkbox/CheckboxDoc.vue            |  36 +-
 src/views/chip/ChipDemo.vue                   |  32 +-
 src/views/chip/ChipDoc.vue                    | 120 +--
 src/views/colors/ColorsDemo.vue               |   6 +-
 src/views/confirmdialog/ConfirmDialogDemo.vue |  20 +-
 src/views/confirmdialog/ConfirmDialogDoc.vue  |  42 +-
 src/views/confirmpopup/ConfirmPopupDemo.vue   |   8 +-
 src/views/confirmpopup/ConfirmPopupDoc.vue    |  28 +-
 src/views/contextmenu/ContextMenuDemo.vue     | 228 ++--
 src/views/datatable/DataTableCrudDemo.vue     | 212 ++--
 src/views/datatable/DataTableDemo.vue         |  14 +-
 src/views/datatable/DataTableDoc.vue          |  48 +-
 src/views/datatable/DataTableFilterDemo.vue   |  56 +-
 .../datatable/DataTablePaginatorDemo.vue      |   2 +-
 .../datatable/DataTableRowExpandDemo.vue      |   8 +-
 src/views/datatable/DataTableScrollDemo.vue   |  24 +-
 src/views/datatable/DataTableStateDemo.vue    |  12 +-
 .../datatable/DataTableTemplatingDemo.vue     |  12 +-
 .../datatable/DataTableVirtualScrollDemo.vue  |  40 +-
 src/views/dataview/DataViewDemo.vue           |  10 +-
 src/views/dataview/DataViewDoc.vue            |  52 +-
 src/views/dialog/DialogDemo.vue               |  16 +-
 src/views/dialog/DialogDoc.vue                |  48 +-
 src/views/display/DisplayDemo.vue             |  18 +-
 src/views/display/DisplayDoc.vue              |  76 +-
 src/views/divider/DividerDemo.vue             |  20 +-
 src/views/divider/DividerDoc.vue              |  60 +-
 src/views/dropdown/DropdownDemo.vue           |   4 +-
 src/views/dropdown/DropdownDoc.vue            |  12 +-
 src/views/elevation/ElevationDemo.vue         |   6 +-
 src/views/elevation/ElevationDoc.vue          |  36 +-
 src/views/fieldset/FieldsetDemo.vue           |   2 +-
 src/views/fieldset/FieldsetDoc.vue            |  24 +-
 src/views/flexbox/FlexBoxDemo.vue             | 614 +++++------
 src/views/floatlabel/FloatLabelDemo.vue       | 134 +--
 src/views/formlayout/FormLayoutDemo.vue       |  80 +-
 src/views/formlayout/FormLayoutDoc.vue        | 294 +++---
 src/views/galleria/GalleriaAdvancedDemo.vue   |   4 +-
 src/views/galleria/GalleriaCaptionDemo.vue    |   4 +-
 src/views/galleria/GalleriaFullScreenDemo.vue |   8 +-
 src/views/galleria/GalleriaThumbnailDemo.vue  |   8 +-
 src/views/grid/GridDemo.vue                   | 228 ++--
 src/views/grid/GridDoc.vue                    | 900 ++++++++--------
 src/views/icons/Icons.vue                     |   6 +-
 src/views/inputgroup/InputGroupDemo.vue       |  28 +-
 src/views/inputgroup/InputGroupDoc.vue        |  84 +-
 src/views/inputmask/InputMaskDemo.vue         |  14 +-
 src/views/inputmask/InputMaskDoc.vue          |  42 +-
 src/views/inputnumber/InputNumberDemo.vue     |  48 +-
 src/views/inputnumber/InputNumberDoc.vue      | 144 +--
 src/views/inputtext/InputTextDemo.vue         |   6 +-
 src/views/inputtext/InputTextDoc.vue          |  18 +-
 src/views/invalid/InvalidDemo.vue             | 104 +-
 src/views/knob/KnobDemo.vue                   |  34 +-
 src/views/knob/KnobDoc.vue                    | 100 +-
 src/views/listbox/ListboxDemo.vue             |   2 +-
 src/views/listbox/ListboxDoc.vue              |  18 +-
 src/views/liveeditor/LiveEditor.vue           |   5 +-
 src/views/menubar/MenubarDemo.vue             | 229 ++--
 src/views/menubar/MenubarDoc.vue              |   6 +-
 src/views/message/MessageDemo.vue             |  14 +-
 src/views/message/MessageDoc.vue              |  42 +-
 src/views/multiselect/MultiSelectDemo.vue     |   2 +-
 src/views/multiselect/MultiSelectDoc.vue      |  24 +-
 src/views/orderlist/OrderListDemo.vue         |   4 +-
 src/views/orderlist/OrderListDoc.vue          |  12 +-
 src/views/panel/PanelDemo.vue                 |   2 +-
 src/views/panel/PanelDoc.vue                  |   8 +-
 src/views/panelmenu/PanelMenuDemo.vue         |  12 +-
 src/views/panelmenu/PanelMenuDoc.vue          | 539 +++++-----
 src/views/password/PasswordDemo.vue           |   4 +-
 src/views/password/PasswordDoc.vue            |  16 +-
 src/views/picklist/PickListDemo.vue           |   4 +-
 src/views/picklist/PickListDoc.vue            |  12 +-
 src/views/radiobutton/RadioButtonDemo.vue     |  10 +-
 src/views/radiobutton/RadioButtonDoc.vue      |  30 +-
 src/views/responsive/ResponsiveDemo.vue       | 998 +++++++++---------
 src/views/ripple/RippleDemo.vue               |   2 +-
 src/views/ripple/RippleDoc.vue                |   8 +-
 src/views/scrollpanel/ScrollPanelDemo.vue     |   8 +-
 src/views/scrollpanel/ScrollPanelDoc.vue      |  24 +-
 src/views/setup/Setup.vue                     |  20 +-
 src/views/sidebar/SidebarDemo.vue             |   8 +-
 src/views/sidebar/SidebarDoc.vue              |  24 +-
 src/views/skeleton/SkeletonDemo.vue           | 100 +-
 src/views/skeleton/SkeletonDoc.vue            | 294 +++---
 src/views/slider/SliderDemo.vue               |   2 +-
 src/views/spacing/SpacingDemo.vue             |  28 +-
 src/views/spacing/SpacingDoc.vue              | 104 +-
 src/views/speeddial/SpeedDialDoc.vue          |   1 +
 src/views/splitbutton/SplitButtonDemo.vue     |  56 +-
 src/views/splitbutton/SplitButtonDoc.vue      |  42 +-
 src/views/splitter/SplitterDemo.vue           |  18 +-
 src/views/splitter/SplitterDoc.vue            |  62 +-
 src/views/steps/ConfirmationDemo.vue          |  20 +-
 src/views/steps/PaymentDemo.vue               |  14 +-
 src/views/steps/PersonalDemo.vue              |   8 +-
 src/views/steps/SeatDemo.vue                  |  12 +-
 src/views/steps/StepsDoc.vue                  | 104 +-
 src/views/styleclass/StyleClassDemo.vue       |   8 +-
 src/views/styleclass/StyleClassDoc.vue        |  32 +-
 src/views/support/Support.vue                 | 118 +--
 src/views/tabmenu/TabMenuDemo.vue             |   6 +-
 src/views/tabmenu/TabMenuDoc.vue              |  18 +-
 src/views/tabview/TabViewDemo.vue             |  14 +-
 src/views/tabview/TabViewDoc.vue              |  42 +-
 src/views/tag/TagDemo.vue                     |  24 +-
 src/views/tag/TagDoc.vue                      |  72 +-
 src/views/text/TextDemo.vue                   |  26 +-
 src/views/text/TextDoc.vue                    | 108 +-
 src/views/theming/Theming.vue                 |   4 +-
 src/views/tieredmenu/TieredMenuDemo.vue       | 229 ++--
 src/views/tieredmenu/TieredMenuDoc.vue        | 944 ++++++++---------
 src/views/timeline/TimelineDemo.vue           |   6 +-
 src/views/timeline/TimelineDoc.vue            |  20 +-
 src/views/toast/ToastDemo.vue                 |  12 +-
 src/views/toast/ToastDoc.vue                  |  46 +-
 src/views/toolbar/ToolbarDemo.vue             |   8 +-
 src/views/toolbar/ToolbarDoc.vue              |  32 +-
 src/views/tooltip/TooltipDemo.vue             |  10 +-
 src/views/tooltip/TooltipDoc.vue              |  30 +-
 src/views/tree/TreeDoc.vue                    |   4 +-
 src/views/treetable/TreeTableFilterDemo.vue   |  16 +-
 .../treetable/TreeTablePaginatorDemo.vue      |   2 +-
 src/views/treetable/TreeTableScrollDemo.vue   |  28 +-
 src/views/treetable/TreeTableSortDemo.vue     |   2 +-
 .../treetable/TreeTableTemplatingDemo.vue     |   8 +-
 .../tristatecheckbox/TriStateCheckboxDemo.vue |   2 +-
 .../tristatecheckbox/TriStateCheckboxDoc.vue  |   6 +-
 src/views/validation/VuelidateFormDemo.vue    |  84 +-
 .../virtualscroller/VirtualScrollerDemo.vue   |  88 +-
 .../virtualscroller/VirtualScrollerDoc.vue    | 272 ++---
 166 files changed, 5201 insertions(+), 5245 deletions(-)

diff --git a/package.json b/package.json
index c9a5627a9..b16c795e1 100644
--- a/package.json
+++ b/package.json
@@ -55,7 +55,7 @@
     "gulp-uglify": "^3.0.2",
     "gulp-uglifycss": "^1.0.6",
     "sass": "^1.45.0",
-    "primeflex": "2.0.0",
+    "primeflex": "3.1.2",
     "primeicons": "5.0.0",
     "prismjs": "^1.15.0",
     "quill": "^1.3.7",
diff --git a/src/App.vue b/src/App.vue
index d7ea9cc2d..a33ec045e 100755
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,7 +2,7 @@
     <div class="layout-wrapper" :class="containerClass">
         <div class="layout-news" v-if="newsActive">
             <div class="layout-news-container" @click="redirect">
-                <img class="layout-news-logo p-ml-2" src="./assets/images/topbar-primeblocks-device.png">
+                <img class="layout-news-logo ml-2" src="./assets/images/topbar-primeblocks-device.png">
                 <a href="https://www.primefaces.org/primeblocks-vue" target="_blank" tabindex="-1" class="layout-news-button">
                     Read More
                 </a>
diff --git a/src/AppConfigurator.vue b/src/AppConfigurator.vue
index d55a9dd49..d6c69937e 100755
--- a/src/AppConfigurator.vue
+++ b/src/AppConfigurator.vue
@@ -26,26 +26,26 @@
                     <p>Built-in component themes created by the <a href="https://www.primefaces.org/designer/primevue">PrimeVue Theme Designer</a>.</p>
 
                     <h5>Bootstrap</h5>
-                    <div class="p-grid free-themes">
-                        <div class="p-col-3">
+                    <div class="grid free-themes">
+                        <div class="col-3">
                             <button class="p-link" type="button" @click="changeTheme($event, 'bootstrap4-light-blue')">
                                 <img src="demo/images/themes/bootstrap4-light-blue.svg" alt="Bootstrap Light Blue" />
                             </button>
                             <span>Blue</span>
                         </div>
-                        <div class="p-col-3">
+                        <div class="col-3">
                             <button class="p-link" type="button" @click="changeTheme($event, 'bootstrap4-light-purple')">
                                 <img src="demo/images/themes/bootstrap4-light-purple.svg" alt="Bootstrap Light Blue" />
                             </button>
                             <span>Purple</span>
                         </div>
-                        <div class="p-col-3">
+                        <div class="col-3">
                             <button class="p-link" type="button" @click="changeTheme($event, 'bootstrap4-dark-blue', true)">
                                 <img src="demo/images/themes/bootstrap4-dark-blue.svg" alt="Bootstrap Dark Blue" />
                             </button>
                             <span>Blue</span>
                         </div>
-                        <div class="p-col-3">
+                        <div class="col-3">
                             <button class="p-link" type="button" @click="changeTheme($event, 'bootstrap4-dark-purple', true)">
                                 <img src="demo/images/themes/bootstrap4-dark-purple.svg" alt="Bootstrap Dark Blue" />
                             </button>
@@ -54,26 +54,26 @@
                     </div>
 
                     <h5>Material Design</h5>
-                    <div class="p-grid free-themes">
-                         <div class="p-col-3">
+                    <div class="grid free-themes">
+                        <div class="col-3">
                             <button class="p-link" type="button" @click="changeTheme($event, 'md-light-indigo')">
                                 <img src="demo/images/themes/md-light-indigo.svg" alt="Material Light Indigo" />
                             </button>
                             <span>Indigo</span>
                         </div>
-                        <div class="p-col-3">
+                        <div class="col-3">
                             <button class="p-link" type="button" @click="changeTheme($event, 'md-light-deeppurple')">
                                 <img src="demo/images/themes/md-light-deeppurple.svg" alt="Material Light Deep Purple" />
                             </button>
                             <span>Deep Purple</span>
                         </div>
-                        <div class="p-col-3">
+                        <div class="col-3">
                             <button class="p-link" type="button" @click="changeTheme($event, 'md-dark-indigo', true)">
                                 <img src="demo/images/themes/md-dark-indigo.svg" alt="Material Dark Indigo" />
                             </button>
                             <span>Indigo</span>
                         </div>
-                        <div class="p-col-3">
+                        <div class="col-3">
                             <button class="p-link" type="button" @click="changeTheme($event, 'md-dark-deeppurple', true)">
                                 <img src="demo/images/themes/md-dark-deeppurple.svg" alt="Material Dark Deep Purple" />
                             </button>
@@ -82,26 +82,26 @@
                     </div>
 
                     <h5>Material Design Compact</h5>
-                    <div class="p-grid free-themes">
-                         <div class="p-col-3">
+                    <div class="grid free-themes">
+                        <div class="col-3">
                             <button class="p-link" type="button" @click="changeTheme($event, 'mdc-light-indigo')">
                                 <img src="demo/images/themes/md-light-indigo.svg" alt="Material Compact Light Indigo"/>
                             </button>
                             <span>Indigo</span>
                         </div>
-                        <div class="p-col-3">
+                        <div class="col-3">
                             <button class="p-link" type="button" @click="changeTheme($event, 'mdc-light-deeppurple')">
                                 <img src="demo/images/themes/md-light-deeppurple.svg" alt="Material Compact Deep Purple" />
                             </button>
                             <span>Deep Purple</span>
                         </div>
-                        <div class="p-col-3">
+                        <div class="col-3">
                             <button class="p-link" type="button" @click="changeTheme($event, 'mdc-dark-indigo', true)">
                                 <img src="demo/images/themes/md-dark-indigo.svg" alt="Material Compact Dark Indigo" />
                             </button>
                             <span>Indigo</span>
                         </div>
-                        <div class="p-col-3">
+                        <div class="col-3">
                             <button class="p-link" type="button" @click="changeTheme($event, 'mdc-dark-deeppurple', true)">
                                 <img src="demo/images/themes/md-dark-deeppurple.svg" alt="Material Compact Dark Deep Purple" />
                             </button>
@@ -110,8 +110,8 @@
                     </div>
 
                     <h5>Tailwind</h5>
-                    <div class="p-grid free-themes">
-                        <div class="p-col-3">
+                    <div class="grid free-themes">
+                        <div class="col-3">
                             <button class="p-link" type="button" @click="changeTheme($event, 'tailwind-light')">
                                 <img src="demo/images/themes/tailwind-light.png" alt="Tailwind Light"/>
                             </button>
@@ -120,8 +120,8 @@
                     </div>
 
                     <h5>Fluent UI</h5>
-                    <div class="p-grid free-themes">
-                        <div class="p-col-3">
+                    <div class="grid free-themes">
+                        <div class="col-3">
                             <button class="p-link" type="button" @click="changeTheme($event, 'fluent-light')">
                                 <img src="demo/images/themes/fluent-light.png" alt="Fluent Light"/>
                             </button>
@@ -129,51 +129,51 @@
                         </div>
                     </div>
 
-                    <h5 class="p-d-flex p-ai-center">PrimeOne Design - 2022 <Tag class="p-ml-3" value="NEW" rounded severity="success"></Tag></h5>
-                    <div class="p-grid free-themes">
-                        <div class="p-col-3">
+                    <h5 class="flex align-items-center">PrimeOne Design - 2022 <Tag class="ml-3" value="NEW" rounded severity="success"></Tag></h5>
+                    <div class="grid free-themes">
+                        <div class="col-3">
                             <button class="p-link" type="button" @click="changeTheme($event, 'lara-light-indigo')">
                                 <img src="demo/images/themes/lara-light-indigo.png" alt="Lara Light Indigo" />
                             </button>
                             <span>Lara Light Indigo</span>
                         </div>
-                        <div class="p-col-3">
+                        <div class="col-3">
                             <button class="p-link" type="button" @click="changeTheme($event, 'lara-light-blue')">
                                 <img src="demo/images/themes/lara-light-blue.png" alt="Lara Light Blue" />
                             </button>
                             <span>Lara Light Blue</span>
                         </div>
-                        <div class="p-col-3">
+                        <div class="col-3">
                             <button class="p-link" type="button" @click="changeTheme($event, 'lara-light-purple')">
                                 <img src="demo/images/themes/lara-light-purple.png" alt="Lara Light Purple" />
                             </button>
                             <span>Lara Light Purple</span>
                         </div>
-                        <div class="p-col-3">
+                        <div class="col-3">
                             <button class="p-link" type="button" @click="changeTheme($event, 'lara-light-teal')">
                                 <img src="demo/images/themes/lara-light-teal.png" alt="Lara Light Teal" />
                             </button>
                             <span>Lara Light Teal</span>
                         </div>
-                        <div class="p-col-3">
+                        <div class="col-3">
                             <button class="p-link" type="button" @click="changeTheme($event, 'lara-dark-indigo', true)">
                                 <img src="demo/images/themes/lara-dark-indigo.png" alt="Lara Dark Indigo" />
                             </button>
                             <span>Lara Dark Indigo</span>
                         </div>
-                        <div class="p-col-3">
+                        <div class="col-3">
                             <button class="p-link" type="button" @click="changeTheme($event, 'lara-dark-blue', true)">
                                 <img src="demo/images/themes/lara-dark-blue.png" alt="Lara Dark Blue" />
                             </button>
                             <span>Lara Dark Blue</span>
                         </div>
-                        <div class="p-col-3">
+                        <div class="col-3">
                             <button class="p-link" type="button" @click="changeTheme($event, 'lara-dark-purple', true)">
                                 <img src="demo/images/themes/lara-dark-purple.png" alt="Lara Dark Purple" />
                             </button>
                             <span>Lara Dark Purple</span>
                         </div>
-                        <div class="p-col-3">
+                        <div class="col-3">
                             <button class="p-link" type="button" @click="changeTheme($event, 'lara-dark-teal', true)">
                                 <img src="demo/images/themes/lara-dark-teal.png" alt="Lara Dark Teal" />
                             </button>
@@ -182,74 +182,74 @@
                     </div>
 
                     <h5>PrimeOne Design - 2021</h5>
-                    <div class="p-grid free-themes">
-                        <div class="p-col-3">
+                    <div class="grid free-themes">
+                        <div class="col-3">
                             <button class="p-link" type="button" @click="changeTheme($event, 'saga-blue')">
                                 <img src="demo/images/themes/saga-blue.png" alt="Saga Blue" />
                             </button>
                             <span>Saga Blue</span>
                         </div>
-                        <div class="p-col-3">
+                        <div class="col-3">
                             <button class="p-link" type="button" @click="changeTheme($event, 'saga-green')">
                                 <img src="demo/images/themes/saga-green.png" alt="Saga Green" />
                             </button>
                             <span>Saga Green</span>
                         </div>
-                        <div class="p-col-3">
+                        <div class="col-3">
                             <button class="p-link" type="button" @click="changeTheme($event, 'saga-orange')">
                                 <img src="demo/images/themes/saga-orange.png" alt="Saga Orange" />
                             </button>
                             <span>Saga Orange</span>
                         </div>
-                        <div class="p-col-3">
+                        <div class="col-3">
                             <button class="p-link" type="button" @click="changeTheme($event, 'saga-purple')">
                                 <img src="demo/images/themes/saga-purple.png" alt="Saga Purple" />
                             </button>
                             <span>Saga Purple</span>
                         </div>
-                        <div class="p-col-3">
+                        <div class="col-3">
                             <button class="p-link" type="button" @click="changeTheme($event, 'vela-blue', true)">
                                 <img src="demo/images/themes/vela-blue.png" alt="Vela Blue" />
                             </button>
                             <span>Vela Blue</span>
                         </div>
-                        <div class="p-col-3">
+                        <div class="col-3">
                             <button class="p-link" type="button" @click="changeTheme($event, 'vela-green', true)">
                                 <img src="demo/images/themes/vela-green.png" alt="Vela Green" />
                             </button>
                             <span>Vela Green</span>
                         </div>
-                        <div class="p-col-3">
+                        <div class="col-3">
                             <button class="p-link" type="button" @click="changeTheme($event, 'vela-orange', true)">
                                 <img src="demo/images/themes/vela-orange.png" alt="Vela Orange" />
                             </button>
                             <span>Vela Orange</span>
                         </div>
-                        <div class="p-col-3">
+                        <div class="col-3">
                             <button class="p-link" type="button" @click="changeTheme($event, 'vela-purple', true)">
                                 <img src="demo/images/themes/vela-purple.png" alt="Vela Purple" />
                             </button>
                             <span>Vela Purple</span>
                         </div>
-                        <div class="p-col-3">
+                        <div class="col-3">
                             <button class="p-link" type="button" @click="changeTheme($event, 'arya-blue', true)">
                                 <img src="demo/images/themes/arya-blue.png" alt="Arya Blue" />
                             </button>
                             <span>Arya Blue</span>
                         </div>
-                        <div class="p-col-3">
+                        <div class="col-3">
                             <button class="p-link" type="button" @click="changeTheme($event, 'arya-green', true)">
                                 <img src="demo/images/themes/arya-green.png" alt="Arya Green" />
                             </button>
                             <span>Arya Green</span>
                         </div>
-                        <div class="p-col-3">
+                        <div class="col-3">
                             <button class="p-link" type="button" @click="changeTheme($event, 'arya-orange', true)">
                                 <img src="demo/images/themes/arya-orange.png" alt="Arya Orange" />
                             </button>
                             <span>Arya Orange</span>
                         </div>
-                        <div class="p-col-3">
+                        <div class="col-3">
                             <button class="p-link" type="button" @click="changeTheme($event, 'arya-purple', true)">
                                 <img src="demo/images/themes/arya-purple.png" alt="Arya Purple" />
                             </button>
@@ -259,38 +259,38 @@
 
                     <h4>Premium Themes</h4>
                     <p>Premium themes are only available exclusively for <a href="https://www.primefaces.org/designer/primevue">PrimeVue Theme Designer</a> subscribers and therefore not included in PrimeVue core.</p>
-                    <div class="p-grid free-themes">
-                        <div class="p-col-3">
+                    <div class="grid free-themes">
+                        <div class="col-3">
                             <button class="p-link" type="button" @click="changeTheme($event, 'soho-light')">
                                 <img src="demo/images/themes/soho-light.png" alt="Soho Light" />
                             </button>
                             <span>Soho Light</span>
                         </div>
-                        <div class="p-col-3">
+                        <div class="col-3">
                             <button class="p-link" type="button" @click="changeTheme($event, 'soho-dark', true)">
                                 <img src="demo/images/themes/soho-dark.png" alt="Soho Dark" />
                             </button>
                             <span>Soho Dark</span>
                         </div>
-                        <div class="p-col-3">
+                        <div class="col-3">
                             <button class="p-link" type="button" @click="changeTheme($event, 'viva-light')">
                                 <img src="demo/images/themes/viva-light.svg" alt="Viva Light" />
                             </button>
                             <span>Viva Light</span>
                         </div>
-                        <div class="p-col-3">
+                        <div class="col-3">
                             <button class="p-link" type="button" @click="changeTheme($event, 'viva-dark', true)">
                                 <img src="demo/images/themes/viva-dark.svg" alt="Viva Dark" />
                             </button>
                             <span>Viva Dark</span>
                         </div>
-                        <div class="p-col-3">
+                        <div class="col-3">
                             <button class="p-link" type="button" @click="changeTheme($event, 'mira')">
                                 <img src="demo/images/themes/mira.jpg" alt="Mira" />
                             </button>
                             <span>Mira</span>
                         </div>
-                        <div class="p-col-3">
+                        <div class="col-3">
                             <button class="p-link" type="button" @click="changeTheme($event, 'nano')">
                                 <img src="demo/images/themes/nano.jpg" alt="Mira" />
                             </button>
@@ -300,63 +300,63 @@
 
                     <h4>Admin Templates</h4>
                     <p>Beautifully crafted <a href="https://cli.vuejs.org">Vue CLI</a> application templates by the PrimeTek design team.</p>
-                    <div class="p-grid premium-themes">
-                        <div class="p-col-12 p-md-6">
+                    <div class="grid premium-themes">
+                        <div class="col-12 md:col-6">
                             <a href="https://www.primefaces.org/sakai-vue">
                                 <img alt="Ultima" src="./assets/images/layouts/sakai-vue.jpg">
                             </a>
                         </div>
-                        <div class="p-col-12 p-md-6">
+                        <div class="col-12 md:col-6">
                             <a href="https://www.primefaces.org/layouts/atlantis-vue">
                                 <img alt="Atlantis" src="./assets/images/layouts/atlantis-vue.jpg">
                             </a>
                         </div>
-                        <div class="p-col-12 p-md-6">
+                        <div class="col-12 md:col-6">
                             <a href="https://www.primefaces.org/layouts/freya-vue">
                                 <img alt="Freya" src="./assets/images/layouts/freya-vue.png">
                             </a>
                         </div>
-                        <div class="p-col-12 p-md-6">
+                        <div class="col-12 md:col-6">
                             <a href="https://www.primefaces.org/layouts/ultima-vue">
                                 <img alt="Ultima" src="./assets/images/layouts/ultima-vue.jpg">
                             </a>
                         </div>
-                        <div class="p-col-12 p-md-6">
+                        <div class="col-12 md:col-6">
                             <a href="https://www.primefaces.org/layouts/diamond-vue">
                                 <img alt="Diamond" src="./assets/images/layouts/diamond-vue.jpg">
                             </a>
                         </div>
-                        <div class="p-col-12 p-md-6">
+                        <div class="col-12 md:col-6">
                             <a href="https://www.primefaces.org/layouts/sapphire-vue">
                                 <img alt="Sapphire" src="./assets/images/layouts/sapphire-vue.jpg">
                             </a>
                         </div>
-                        <div class="p-col-12 p-md-6">
+                        <div class="col-12 md:col-6">
                             <a href="https://www.primefaces.org/layouts/serenity-vue">
                                 <img alt="Serenity" src="./assets/images/layouts/serenity-vue.jpg">
                             </a>
                         </div>
-                        <div class="p-col-12 p-md-6">
+                        <div class="col-12 md:col-6">
                             <a href="https://www.primefaces.org/layouts/babylon-vue">
                                 <img alt="Babylon" src="./assets/images/layouts/babylon-vue.jpg">
                             </a>
                         </div>
-                        <div class="p-col-12 p-md-6">
+                        <div class="col-12 md:col-6">
                             <a href="https://www.primefaces.org/layouts/avalon-vue">
                                 <img alt="Avalon" src="./assets/images/layouts/avalon-vue.jpg">
                             </a>
                         </div>
-                        <div class="p-col-12 p-md-6">
+                        <div class="col-12 md:col-6">
                             <a href="https://www.primefaces.org/layouts/apollo-vue">
                                 <img alt="Apollo" src="./assets/images/layouts/apollo-vue.jpg">
                             </a>
                         </div>
-                        <div class="p-col-12 p-md-6">
+                        <div class="col-12 md:col-6">
                             <a href="https://www.primefaces.org/layouts/roma-vue">
                                 <img alt="Roma" src="./assets/images/layouts/roma-vue.jpg">
                             </a>
                         </div>
-                        <div class="p-col-12 p-md-6">
+                        <div class="col-12 md:col-6">
                             <a href="https://www.primefaces.org/layouts/prestige-vue">
                                 <img alt="Prestige" src="./assets/images/layouts/prestige-vue.jpg">
                             </a>
diff --git a/src/AppDemoActions.vue b/src/AppDemoActions.vue
index 5d44b2e22..f7250bf23 100644
--- a/src/AppDemoActions.vue
+++ b/src/AppDemoActions.vue
@@ -1,12 +1,12 @@
 <template>
-    <div class="app-demoactions p-d-flex p-ai-end p-jc-end p-mt-3">
+    <div class="app-demoactions flex align-items-end justify-content-end mt-3">
         <Button class="p-button-text p-button-rounded p-button-plain p-button-lg p-button-icon-only" @click="toggleMenu">
             <svg role="img" viewBox="0 0 24 24" width="17" height="17" fill="var(--text-color-secondary)" style="display:block">
                 <path d="M2 6l10.455-6L22.91 6 23 17.95 12.455 24 2 18V6zm2.088 2.481v4.757l3.345 1.86v3.516l3.972 2.296v-8.272L4.088 8.481zm16.739 0l-7.317 4.157v8.272l3.972-2.296V15.1l3.345-1.861V8.48zM5.134 6.601l7.303 4.144 7.32-4.18-3.871-2.197-3.41 1.945-3.43-1.968L5.133 6.6z"/>
             </svg>
         </Button>
-        <Button icon="pi pi-github" class="p-button-text p-button-rounded p-button-plain p-button-lg p-ml-2" @click="viewOnGitHub"></Button>
-        <Button icon="pi pi-info-circle" class="p-button-text p-button-rounded p-button-plain p-button-lg p-ml-2" @click="scrollToDocs"></Button>
+        <Button icon="pi pi-github" class="p-button-text p-button-rounded p-button-plain p-button-lg ml-2" @click="viewOnGitHub"></Button>
+        <Button icon="pi pi-info-circle" class="p-button-text p-button-rounded p-button-plain p-button-lg ml-2" @click="scrollToDocs"></Button>
         <Menu ref="menu" :model="items" :popup="true" style="width:14rem"/>
     </div>
 </template>
diff --git a/src/AppDocumentation.vue b/src/AppDocumentation.vue
index e94bf56ea..e52592ac8 100644
--- a/src/AppDocumentation.vue
+++ b/src/AppDocumentation.vue
@@ -90,7 +90,7 @@ export default {
         <!-- PrimeVue -->
         <link href="https://unpkg.com/primevue@^3/resources/themes/saga-blue/theme.css" rel="stylesheet" />
         <link href="https://unpkg.com/primevue@^3/resources/primevue.min.css" rel="stylesheet" />
-        <link href="https://unpkg.com/primeflex@2.0.0/primeflex.min.css" rel="stylesheet" />
+        <link href="https://unpkg.com/primeflex@^3/primeflex.min.css" rel="stylesheet" />
         <link href="https://unpkg.com/primeicons/primeicons.css" rel="stylesheet" />
 
         <!-- Dependencies -->
diff --git a/src/AppFooter.vue b/src/AppFooter.vue
index 9eb1f1ae5..e25708f27 100755
--- a/src/AppFooter.vue
+++ b/src/AppFooter.vue
@@ -6,10 +6,10 @@
         </div>
 
         <div class="layout-footer-right">
-            <a href="https://github.com/primefaces/primevue" class="p-mr-3">
+            <a href="https://github.com/primefaces/primevue" class="mr-3">
                 <i class="pi pi-github"></i>
             </a>
-            <a href="https://twitter.com/primevue" class="p-mr-3">
+            <a href="https://twitter.com/primevue" class="mr-3">
                 <i class="pi pi-twitter"></i>
             </a>
             <a href="https://discord.com/invite/gzKFYnpmCY">
diff --git a/src/AppInputStyleSwitch.vue b/src/AppInputStyleSwitch.vue
index a632a9c4d..52ebdb6e3 100644
--- a/src/AppInputStyleSwitch.vue
+++ b/src/AppInputStyleSwitch.vue
@@ -1,12 +1,12 @@
 <template>
     <div class="app-inputstyleswitch">
         <h4>Input Style</h4>
-        <div class="p-formgroup-inline">
-            <div class="p-field-radiobutton">
+        <div class="formgroup-inline">
+            <div class="field-radiobutton">
                 <RadioButton id="input_outlined" name="inputstyle" value="outlined" :modelValue="value" @update:modelValue="onChange" />
                 <label for="input_outlined">Outlined</label>
             </div>
-            <div class="p-field-radiobutton">
+            <div class="field-radiobutton">
                 <RadioButton id="input_filled" name="inputstyle" value="filled" :modelValue="value" @update:modelValue="onChange" />
                 <label for="input_filled">Filled</label>
             </div>
diff --git a/src/AppTopBar.vue b/src/AppTopBar.vue
index 7b5447246..f6de3d939 100755
--- a/src/AppTopBar.vue
+++ b/src/AppTopBar.vue
@@ -48,7 +48,7 @@
                         <li class="topbar-submenu-header">FLUENT UI</li>
                         <li><a @click="changeTheme($event, 'fluent-light')"><img src="demo/images/themes/fluent-light.png" alt="Fluent Light" /><span>Fluent Light</span></a></li>
 
-                        <li class="topbar-submenu-header p-d-flex p-ai-center">PRIMEONE 2022 <Tag class="p-ml-3" value="NEW" rounded severity="success"></Tag></li>
+                        <li class="topbar-submenu-header flex align-items-center">PRIMEONE 2022 <Tag class="ml-3" value="NEW" rounded severity="success"></Tag></li>
                         <li><a @click="changeTheme($event, 'lara-light-indigo')"><img src="demo/images/themes/lara-light-indigo.png" alt="Lara Light Indigo" /><span>Lara Light Indigo</span></a></li>
                         <li><a @click="changeTheme($event, 'lara-light-blue')"><img src="demo/images/themes/lara-light-blue.png" alt="Lara Light Blue" /><span>Lara Light Blue</span></a></li>
                         <li><a @click="changeTheme($event, 'lara-light-purple')"><img src="demo/images/themes/lara-light-purple.png" alt="Lara Light Purple" /><span>Lara Light Purple</span></a></li>
diff --git a/src/assets/styles/app/_config.scss b/src/assets/styles/app/_config.scss
index ce569b1f7..788401e52 100644
--- a/src/assets/styles/app/_config.scss
+++ b/src/assets/styles/app/_config.scss
@@ -129,7 +129,7 @@
         }
     }
 
-    .p-grid > div {
+    .grid > div {
         padding: 1rem;
         text-align: center;
 
diff --git a/src/assets/styles/app/_core.scss b/src/assets/styles/app/_core.scss
index 2ceaffce7..b7f7bcb3b 100644
--- a/src/assets/styles/app/_core.scss
+++ b/src/assets/styles/app/_core.scss
@@ -95,7 +95,6 @@ pre[class*="language-"] {
         border-left: 10px solid var(--surface-d) !important;
         box-shadow: none !important;
         background: var(--surface-e) !important;
-        margin: 1em 0;
         color: var(--text-color);
         font-size: 14px;
     
diff --git a/src/assets/styles/app/_home.scss b/src/assets/styles/app/_home.scss
index 86c21727f..e2cc807fc 100644
--- a/src/assets/styles/app/_home.scss
+++ b/src/assets/styles/app/_home.scss
@@ -71,7 +71,7 @@
         text-align: center;
         padding: 2rem;
 
-        .p-col-12 {
+        .col-12 {
             padding: 1rem;
         }
 
@@ -118,7 +118,7 @@
             width: 100%;
         }
 
-        .p-grid > div {
+        .grid > div {
             padding: 2rem .5rem;
         }
     }
@@ -171,7 +171,7 @@
             margin-top: 10px;
         }
 
-        .p-md-6:last-child {
+        .md:col-6:last-child {
             text-align: center;
         }
 
diff --git a/src/components/treetable/TreeTable.vue b/src/components/treetable/TreeTable.vue
index 7a44b8d20..580b1f2e2 100755
--- a/src/components/treetable/TreeTable.vue
+++ b/src/components/treetable/TreeTable.vue
@@ -8,7 +8,7 @@
         <div class="p-treetable-header" v-if="$slots.header">
             <slot name="header"></slot>
         </div>
-         <TTPaginator v-if="paginatorTop" :rows="d_rows" :first="d_first" :totalRecords="totalRecordsLength" :pageLinkSize="pageLinkSize" :template="paginatorTemplate" :rowsPerPageOptions="rowsPerPageOptions"
+        <TTPaginator v-if="paginatorTop" :rows="d_rows" :first="d_first" :totalRecords="totalRecordsLength" :pageLinkSize="pageLinkSize" :template="paginatorTemplate" :rowsPerPageOptions="rowsPerPageOptions"
                 :currentPageReportTemplate="currentPageReportTemplate" class="p-paginator-top" @page="onPage($event)" :alwaysShow="alwaysShowPaginator">
             <template #start v-if="$slots.paginatorstart">
                 <slot name="paginatorstart"></slot>
diff --git a/src/views/Home.vue b/src/views/Home.vue
index d24a01f5f..08a64c960 100755
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -11,10 +11,10 @@
 
         <div class="features">
             <h4>Features</h4>
-            <p>Congratulations! <span role="img" aria-label="celebrate" class="p-mx-2">🎉</span> Your quest to find the UI library for Vue.js is now complete.</p>
+            <p>Congratulations! <span role="img" aria-label="celebrate" class="mx-2">🎉</span> Your quest to find the UI library for Vue.js is now complete.</p>
 
-            <div class="p-grid">
-                <div class="p-col-12 p-md-4">
+            <div class="grid">
+                <div class="col-12 md:col-4">
                     <div class="feature-card">
                         <img alt="components" src="../assets/images/home/vue-components.png" />
                         <div class="feature-card-detail">
@@ -23,7 +23,7 @@
                         </div>
                     </div>
                 </div>
-                <div class="p-col-12 p-md-4">
+                <div class="col-12 md:col-4">
                     <div class="feature-card">
                         <img alt="opensource" src="../assets/images/home/vue-opensource.png" />
                         <div class="feature-card-detail">
@@ -32,7 +32,7 @@
                         </div>
                     </div>
                 </div>
-                <div class="p-col-12 p-md-4">
+                <div class="col-12 md:col-4">
                     <div class="feature-card">
                         <img alt="themes" src="../assets/images/home/vue-themes.png" />
                         <div class="feature-card-detail">
@@ -41,7 +41,7 @@
                         </div>
                     </div>
                 </div>
-                <div class="p-col-12 p-md-4">
+                <div class="col-12 md:col-4">
                     <div class="feature-card">
                         <img alt="templates" src="../assets/images/home/vue-templates.png" />
                         <div class="feature-card-detail">
@@ -50,7 +50,7 @@
                         </div>
                     </div>
                 </div>
-                <div class="p-col-12 p-md-4">
+                <div class="col-12 md:col-4">
                     <div class="feature-card">
                         <img alt="accesibility" src="../assets/images/home/vue-accesibility.png" />
                         <div class="feature-card-detail">
@@ -59,7 +59,7 @@
                         </div>
                     </div>
                 </div>
-                <div class="p-col-12 p-md-4">
+                <div class="col-12 md:col-4">
                     <div class="feature-card">
                         <img alt="pro" src="../assets/images/home/vue-pro.png" />
                         <div class="feature-card-detail">
@@ -68,7 +68,7 @@
                         </div>
                     </div>
                 </div>
-                <div class="p-col-12 p-md-4">
+                <div class="col-12 md:col-4">
                     <div class="feature-card">
                         <img alt="productivity" src="../assets/images/home/vue-productivity.png" />
                         <div class="feature-card-detail">
@@ -77,7 +77,7 @@
                         </div>
                     </div>
                 </div>
-                <div class="p-col-12 p-md-4">
+                <div class="col-12 md:col-4">
                     <div class="feature-card">
                         <img alt="community" src="../assets/images/home/vue-community.png" />
                         <div class="feature-card-detail">
@@ -86,7 +86,7 @@
                         </div>
                     </div>
                 </div>
-                <div class="p-col-12 p-md-4">
+                <div class="col-12 md:col-4">
                     <div class="feature-card">
                         <img alt="mobile" src="../assets/images/home/vue-mobile.png" />
                         <div class="feature-card-detail">
@@ -109,19 +109,19 @@
         <div class="whouses">
             <h4>Key Users</h4>
             <p>The creator of PrimeVue is PrimeTek Informatics, the distinguished component library vendor who built popular open source projects such as PrimeFaces, PrimeNG and PrimeReact over the past years.</p>
-            <div class="p-grid">
-                <div class="p-col-6 p-md-2"><img alt="airbus" src="../assets/images/home/airbus.svg"/></div>
-                <div class="p-col-6 p-md-2"><img alt="amex" src="../assets/images/home/amex.svg"/></div>
-                <div class="p-col-6 p-md-2"><img alt="bmw" src="../assets/images/home/nvidia.svg"/></div>
-                <div class="p-col-6 p-md-2"><img alt="ebay" src="../assets/images/home/ebay.svg"/></div>
-                <div class="p-col-6 p-md-2"><img alt="ford" src="../assets/images/home/ford.svg"/></div>
-                <div class="p-col-6 p-md-2"><img alt="fox" src="../assets/images/home/fox.svg"/></div>
-                <div class="p-col-6 p-md-2"><img alt="lufthansa" src="../assets/images/home/lufthansa.svg"/></div>
-                <div class="p-col-6 p-md-2"><img alt="mercedes" src="../assets/images/home/mercedes.svg"/></div>
-                <div class="p-col-6 p-md-2"><img alt="sap" src="../assets/images/home/sap.svg"/></div>
-                <div class="p-col-6 p-md-2"><img alt="unicredit" src="../assets/images/home/unicredit.svg"/></div>
-                <div class="p-col-6 p-md-2"><img alt="verizon" src="../assets/images/home/verizon.svg"/></div>
-                <div class="p-col-6 p-md-2"><img alt="viacom" src="../assets/images/home/viacom.svg"/></div>
+            <div class="grid">
+                <div class="col-6 md:col-2"><img alt="airbus" src="../assets/images/home/airbus.svg"/></div>
+                <div class="col-6 md:col-2"><img alt="amex" src="../assets/images/home/amex.svg"/></div>
+                <div class="col-6 md:col-2"><img alt="bmw" src="../assets/images/home/nvidia.svg"/></div>
+                <div class="col-6 md:col-2"><img alt="ebay" src="../assets/images/home/ebay.svg"/></div>
+                <div class="col-6 md:col-2"><img alt="ford" src="../assets/images/home/ford.svg"/></div>
+                <div class="col-6 md:col-2"><img alt="fox" src="../assets/images/home/fox.svg"/></div>
+                <div class="col-6 md:col-2"><img alt="lufthansa" src="../assets/images/home/lufthansa.svg"/></div>
+                <div class="col-6 md:col-2"><img alt="mercedes" src="../assets/images/home/mercedes.svg"/></div>
+                <div class="col-6 md:col-2"><img alt="sap" src="../assets/images/home/sap.svg"/></div>
+                <div class="col-6 md:col-2"><img alt="unicredit" src="../assets/images/home/unicredit.svg"/></div>
+                <div class="col-6 md:col-2"><img alt="verizon" src="../assets/images/home/verizon.svg"/></div>
+                <div class="col-6 md:col-2"><img alt="viacom" src="../assets/images/home/viacom.svg"/></div>
             </div>
         </div>
 
@@ -129,68 +129,68 @@
             <h4>Premium Application Templates</h4>
             <p>Gorgeous Vue-CLI application templates designed by professional designers and implemented by Vue Experts to help you reach your goals in no time.</p>
 
-            <div class="p-grid">
-                <div class="p-col-12 p-md-3">
+            <div class="grid">
+                <div class="col-12 md:col-3">
                     <a href="https://www.primefaces.org/sakai-vue">
                         <img alt="Sakai" src="../assets/images/layouts/sakai-vue.jpg">
                     </a>
                 </div>
-                <div class="p-col-12 p-md-3">
+                <div class="col-12 md:col-3">
                     <a href="https://www.primefaces.org/layouts/atlantis-vue">
                         <img alt="Atlantis" src="../assets/images/layouts/atlantis-vue.jpg">
                     </a>
                 </div>
-                <div class="p-col-12 p-md-3">
+                <div class="col-12 md:col-3">
                     <a href="https://www.primefaces.org/layouts/freya-vue">
                         <img alt="Freya" src="../assets/images/layouts/freya-vue.png">
                     </a>
                 </div>
-                <div class="p-col-12 p-md-3">
+                <div class="col-12 md:col-3">
                     <a href="https://www.primefaces.org/layouts/ultima-vue">
                         <img alt="Ultima" src="../assets/images/layouts/ultima-vue.jpg">
                     </a>
                 </div>
-                <div class="p-col-12 p-md-3">
+                <div class="col-12 md:col-3">
                     <a href="https://www.primefaces.org/layouts/diamond-vue">
                         <img alt="Diamond" src="../assets/images/layouts/diamond-vue.jpg">
                     </a>
                 </div>
-                <div class="p-col-12 p-md-3">
+                <div class="col-12 md:col-3">
                     <a href="https://www.primefaces.org/layouts/sapphire-vue">
                         <img alt="Sapphire" src="../assets/images/layouts/sapphire-vue.jpg">
                     </a>
                 </div>
-                <div class="p-col-12 p-md-3">
+                <div class="col-12 md:col-3">
                     <a href="https://www.primefaces.org/layouts/serenity-vue">
                         <img alt="Serenity" src="../assets/images/layouts/serenity-vue.jpg">
                     </a>
                 </div>
-                <div class="p-col-12 p-md-3">
+                <div class="col-12 md:col-3">
                     <a href="https://www.primefaces.org/layouts/avalon-vue">
                         <img alt="Avalon" src="../assets/images/layouts/avalon-vue.jpg">
                     </a>
                 </div>
-                <div class="p-col-12 p-md-3">
+                <div class="col-12 md:col-3">
                     <a href="https://www.primefaces.org/layouts/babylon-vue">
                         <img alt="Babylon" src="../assets/images/layouts/babylon-vue.jpg">
                     </a>
                 </div>
-                <div class="p-col-12 p-md-3">
+                <div class="col-12 md:col-3">
                     <a href="https://www.primefaces.org/layouts/apollo-vue">
                         <img alt="Apollo" src="../assets/images/layouts/apollo-vue.jpg">
                     </a>
                 </div>
-                <div class="p-col-12 p-md-3">
+                <div class="col-12 md:col-3">
                     <a href="https://www.primefaces.org/layouts/roma-vue">
                         <img alt="Roma" src="../assets/images/layouts/roma-vue.jpg">
                     </a>
                 </div>
-                <div class="p-col-12 p-md-3">
+                <div class="col-12 md:col-3">
                     <a href="https://www.primefaces.org/layouts/prestige-vue">
                         <img alt="Prestige" src="../assets/images/layouts/prestige-vue.jpg">
                     </a>
                 </div>
-                <div class="p-col-12 p-md-3"></div>
+                <div class="col-12 md:col-3"></div>
             </div>
         </div>
         <div class="primevue-designer">
@@ -199,8 +199,8 @@
                 and a Vue-CLI application to test your themes with ease along with built-in theme samples that are embedded in PrimeVue Core.</p>
 
             <p>Visit <a href="https://www.primefaces.org/designer/primevue">Designer API HomePage</a> to learn more about the features and interact with the <a href="https://www.primefaces.org/designer-vue">live editor</a>.</p>
-            <div class="p-grid">
-                <div class="p-col-12">
+            <div class="grid">
+                <div class="col-12">
                     <img alt="PrimeVue Designer" src="../assets/images/primevue-designer.jpg" />
 
                 </div>
@@ -208,40 +208,40 @@
         </div>
 
         <div class="primeblocks">
-            <div class="p-grid">
-                <div class="p-col-12 p-md-6">
+            <div class="grid">
+                <div class="col-12 md:col-6">
                     <h4 class="pro-title">Vue UI Blocks Powered by PrimeVue</h4>
                     <p>150+ ready to use UI blocks to build spectacular applications in no time.</p>
                     <a class="action-button" href="https://www.primefaces.org/primeblocks-vue">LEARN MORE</a>
                 </div>
-                <div class="p-col-12 p-md-6 p-text-center">
+                <div class="col-12 md:col-6 text-center">
                     <img alt="primeblocks-vue" src="../assets/images/primeblocks.png" class="section-image">
                 </div>
             </div>
         </div>
 
         <div class="primeflex">
-            <div class="p-grid">
-                <div class="p-col-12 p-md-6">
+            <div class="grid">
+                <div class="col-12 md:col-6">
                     <h3 class="pro-title">PrimeFlex: Perfect CSS Utility Companion</h3>
                     <p>PrimeFlex is a lightweight responsive CSS utility library to accompany Prime UI libraries and static webpages as well.</p>
                     <a class="action-button" href="https://www.primefaces.org/primeflex">LEARN MORE</a>
                 </div>
-                <div class="p-col-12 p-md-6 p-text-center">
+                <div class="col-12 md:col-6 text-center">
                     <img alt="primeflex" src="../assets/images/primeflex.png" class="section-image">
                 </div>
             </div>
         </div>
 
         <div class="prosupport">
-            <div class="p-grid">
-                <div class="p-col-12 p-md-6">
+            <div class="grid">
+                <div class="col-12 md:col-6">
                     <h4>PrimeVue PRO Support</h4>
                     <p>No time to wait for a response at forum or issue tracker? Then PrimeVue PRO Support is definitely for you.</p>
                     <p>PrimeVUE PRO is an exceptional support service where you'll contact the PrimeTek via a private channel and receive assistance just in a couple of hours. Optionally PrimeVue PRO offers the ability to request changes and new features for the component library.</p>
                     <router-link to="/support" class="action-button">LEARN MORE</router-link>
                 </div>
-                <div class="p-col-12 p-md-6">
+                <div class="col-12 md:col-6">
                     <img alt="PRO" src="../assets/images/home/asset-pro.png" />
                 </div>
             </div>
diff --git a/src/views/accordion/AccordionDemo.vue b/src/views/accordion/AccordionDemo.vue
index 32d5c4210..80be74e2e 100755
--- a/src/views/accordion/AccordionDemo.vue
+++ b/src/views/accordion/AccordionDemo.vue
@@ -51,10 +51,10 @@
                 </Accordion>
 
                 <h5>Programmatic</h5>
-                <div class="p-pb-3">
+                <div class="pb-3">
                     <Button @click="active = 0" class="p-button-text" label="Activate 1st" />
-                    <Button @click="active = 1" class="p-button-text  p-mr-2" label="Activate 2nd" />
-                    <Button @click="active = 2" class="p-button-text  p-mr-2" label="Activate 3rd" />
+                    <Button @click="active = 1" class="p-button-text  mr-2" label="Activate 2nd" />
+                    <Button @click="active = 2" class="p-button-text  mr-2" label="Activate 3rd" />
                 </div>
 
                 <Accordion v-model:activeIndex="active">
diff --git a/src/views/accordion/AccordionDoc.vue b/src/views/accordion/AccordionDoc.vue
index 27c0b68f8..c42ad1a4e 100755
--- a/src/views/accordion/AccordionDoc.vue
+++ b/src/views/accordion/AccordionDoc.vue
@@ -370,10 +370,10 @@ export default {
         </Accordion>
 
         <h5>Programmatic</h5>
-        <div class="p-pb-3">
+        <div class="pb-3">
             <Button @click="active = 0" class="p-button-text" label="Activate 1st" />
-            <Button @click="active = 1" class="p-button-text  p-mr-2" label="Activate 2nd" />
-            <Button @click="active = 2" class="p-button-text  p-mr-2" label="Activate 3rd" />
+            <Button @click="active = 1" class="p-button-text  mr-2" label="Activate 2nd" />
+            <Button @click="active = 2" class="p-button-text  mr-2" label="Activate 3rd" />
         </div>
 
         <Accordion v-model:activeIndex="active">
@@ -499,10 +499,10 @@ export default {
         </Accordion>
 
         <h5>Programmatic</h5>
-        <div class="p-pb-3">
+        <div class="pb-3">
             <Button @click="active = 0" class="p-button-text" label="Activate 1st" />
-            <Button @click="active = 1" class="p-button-text  p-mr-2" label="Activate 2nd" />
-            <Button @click="active = 2" class="p-button-text  p-mr-2" label="Activate 3rd" />
+            <Button @click="active = 1" class="p-button-text  mr-2" label="Activate 2nd" />
+            <Button @click="active = 2" class="p-button-text  mr-2" label="Activate 3rd" />
         </div>
 
         <Accordion v-model:activeIndex="active">
@@ -630,10 +630,10 @@ export default {
             </p-accordion>
 
             <h5>Programmatic</h5>
-            <div class="p-pb-3">
+            <div class="pb-3">
                 <p-button @click="active = 0" class="p-button-text" label="Activate 1st"></p-button>
-                <p-button @click="active = 1" class="p-button-text  p-mr-2" label="Activate 2nd"></p-button>
-                <p-button @click="active = 2" class="p-button-text  p-mr-2" label="Activate 3rd"></p-button>
+                <p-button @click="active = 1" class="p-button-text  mr-2" label="Activate 2nd"></p-button>
+                <p-button @click="active = 2" class="p-button-text  mr-2" label="Activate 3rd"></p-button>
             </div>
 
             <p-accordion v-model:active-index="active">
diff --git a/src/views/autocomplete/AutoCompleteDemo.vue b/src/views/autocomplete/AutoCompleteDemo.vue
index 91f970e41..72f5dae85 100755
--- a/src/views/autocomplete/AutoCompleteDemo.vue
+++ b/src/views/autocomplete/AutoCompleteDemo.vue
@@ -16,7 +16,7 @@
                 <h5>Grouped</h5>
                 <AutoComplete v-model="selectedCity" :suggestions="filteredCities" @complete="searchCity($event)" field="label" optionGroupLabel="label" optionGroupChildren="items">
                     <template #optiongroup="slotProps">
-                        <div class="p-d-flex p-ai-center country-item">
+                        <div class="flex align-items-center country-item">
                             <img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.item.code.toLowerCase()" width="18" />
                             <div>{{slotProps.item.label}}</div>
                         </div>
diff --git a/src/views/autocomplete/AutoCompleteDoc.vue b/src/views/autocomplete/AutoCompleteDoc.vue
index 71b0af070..f790ee7bd 100755
--- a/src/views/autocomplete/AutoCompleteDoc.vue
+++ b/src/views/autocomplete/AutoCompleteDoc.vue
@@ -441,9 +441,9 @@ export default {
             <h5>Grouped</h5>
             <AutoComplete v-model="selectedCity" :suggestions="filteredCities" @complete="searchCity($event)" field="label" optionGroupLabel="label" optionGroupChildren="items">
                 <template #optiongroup="slotProps">
-                    <div class="p-d-flex p-ai-center country-item">
+                    <div class="flex align-items-center country-item">
                         <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="18" />
-                        <div class="p-ml-2">{{slotProps.item.label}}</div>
+                        <div class="ml-2">{{slotProps.item.label}}</div>
                     </div>
                 </template>
             </AutoComplete>
@@ -453,7 +453,7 @@ export default {
                 <template #item="slotProps">
                     <div class="country-item">
                         <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="18" />
-                        <div class="p-ml-2">{{slotProps.item.name}}</div>
+                        <div class="ml-2">{{slotProps.item.name}}</div>
                     </div>
                 </template>
             </AutoComplete>
@@ -578,9 +578,9 @@ export default {
             <h5>Grouped</h5>
             <AutoComplete v-model="selectedCity" :suggestions="filteredCities" @complete="searchCity($event)" field="label" optionGroupLabel="label" optionGroupChildren="items">
                 <template #optiongroup="slotProps">
-                    <div class="p-d-flex p-ai-center country-item">
+                    <div class="flex align-items-center country-item">
                         <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="18" />
-                        <div class="p-ml-2">{{slotProps.item.label}}</div>
+                        <div class="ml-2">{{slotProps.item.label}}</div>
                     </div>
                 </template>
             </AutoComplete>
@@ -590,7 +590,7 @@ export default {
                 <template #item="slotProps">
                     <div class="country-item">
                         <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="18" />
-                        <div class="p-ml-2">{{slotProps.item.name}}</div>
+                        <div class="ml-2">{{slotProps.item.name}}</div>
                     </div>
                 </template>
             </AutoComplete>
@@ -712,9 +712,9 @@ export default {
             <h5>Grouped</h5>
             <p-autocomplete v-model="selectedCity" :suggestions="filteredCities" @complete="searchCity($event)" field="label" option-group-label="label" option-group-children="items">
                 <template #optiongroup="slotProps">
-                    <div class="p-d-flex p-ai-center country-item">
+                    <div class="flex align-items-center country-item">
                         <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="18" />
-                        <div class="p-ml-2">{{slotProps.item.label}}</div>
+                        <div class="ml-2">{{slotProps.item.label}}</div>
                     </div>
                 </template>
             </p-autocomplete>
@@ -724,7 +724,7 @@ export default {
                 <template #item="slotProps">
                     <div class="country-item">
                         <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="18" />
-                        <div class="p-ml-2">{{slotProps.item.name}}</div>
+                        <div class="ml-2">{{slotProps.item.name}}</div>
                     </div>
                 </template>
             </p-autocomplete>
diff --git a/src/views/avatar/AvatarDemo.vue b/src/views/avatar/AvatarDemo.vue
index ac041cdd7..202555a3c 100644
--- a/src/views/avatar/AvatarDemo.vue
+++ b/src/views/avatar/AvatarDemo.vue
@@ -9,53 +9,53 @@
         </div>
 
         <div class="content-section implementation">
-            <div class="p-grid">
-                <div class="p-col-12 p-md-4">
+            <div class="grid">
+                <div class="col-12 md:col-4">
                     <div class="card">
                         <h5>Label</h5>
-                        <Avatar label="P" class="p-mr-2" size="xlarge" />
-                        <Avatar label="V" class="p-mr-2" size="large" style="background-color:#2196F3; color: #ffffff"/>
-                        <Avatar label="U" class="p-mr-2" style="background-color:#9c27b0; color: #ffffff" />
+                        <Avatar label="P" class="mr-2" size="xlarge" />
+                        <Avatar label="V" class="mr-2" size="large" style="background-color:#2196F3; color: #ffffff"/>
+                        <Avatar label="U" class="mr-2" style="background-color:#9c27b0; color: #ffffff" />
                     </div>
                 </div>
 
-                <div class="p-col-12 p-md-4">
+                <div class="col-12 md:col-4">
                     <div class="card">
                         <h5>Label - Circle</h5>
-                        <Avatar label="P" class="p-mr-2" size="xlarge" shape="circle" />
-                        <Avatar label="V" class="p-mr-2" size="large" style="background-color:#2196F3; color: #ffffff" shape="circle"  />
-                        <Avatar label="U" class="p-mr-2" style="background-color:#9c27b0; color: #ffffff" shape="circle"  />
+                        <Avatar label="P" class="mr-2" size="xlarge" shape="circle" />
+                        <Avatar label="V" class="mr-2" size="large" style="background-color:#2196F3; color: #ffffff" shape="circle"  />
+                        <Avatar label="U" class="mr-2" style="background-color:#9c27b0; color: #ffffff" shape="circle"  />
                     </div>
                 </div>
 
-                <div class="p-col-12 p-md-4">
+                <div class="col-12 md:col-4">
                     <div class="card">
                         <h5>Label - Badge</h5>
                         <Avatar label="U" size="xlarge" style="background-color:#4caf4f; color: #ffffff" v-badge="4" />
                     </div>
                 </div>
             </div>
-           
-            <div class="p-grid">
-                <div class="p-col-12 p-md-4">
+
+            <div class="grid">
+                <div class="col-12 md:col-4">
                     <div class="card">
                         <h5>Icon</h5>
-                        <Avatar icon="pi pi-user" class="p-mr-2" size="xlarge" />
-                        <Avatar icon="pi pi-user" class="p-mr-2" size="large" style="background-color:#2196F3; color: #ffffff"/>
-                        <Avatar icon="pi pi-user" class="p-mr-2" style="background-color:#9c27b0; color: #ffffff" />
+                        <Avatar icon="pi pi-user" class="mr-2" size="xlarge" />
+                        <Avatar icon="pi pi-user" class="mr-2" size="large" style="background-color:#2196F3; color: #ffffff"/>
+                        <Avatar icon="pi pi-user" class="mr-2" style="background-color:#9c27b0; color: #ffffff" />
                     </div>
                 </div>
 
-                <div class="p-col-12 p-md-4">
+                <div class="col-12 md:col-4">
                     <div class="card">
                         <h5>Icon - Circle</h5>
-                        <Avatar icon="pi pi-user" class="p-mr-2" size="xlarge" shape="circle" />
-                        <Avatar icon="pi pi-user" class="p-mr-2" size="large" style="background-color:#2196F3; color: #ffffff" shape="circle" />
-                        <Avatar icon="pi pi-user" class="p-mr-2" style="background-color:#9c27b0; color: #ffffff" shape="circle" />
+                        <Avatar icon="pi pi-user" class="mr-2" size="xlarge" shape="circle" />
+                        <Avatar icon="pi pi-user" class="mr-2" size="large" style="background-color:#2196F3; color: #ffffff" shape="circle" />
+                        <Avatar icon="pi pi-user" class="mr-2" style="background-color:#9c27b0; color: #ffffff" shape="circle" />
                     </div>
                 </div>
 
-                 <div class="p-col-12 p-md-4">
+                 <div class="col-12 md:col-4">
                     <div class="card">
                         <h5>Icon - Badge</h5>
                         <Avatar icon="pi pi-user" size="xlarge" v-badge="4"/>
@@ -63,20 +63,20 @@
                 </div>
             </div>
 
-            <div class="p-grid">
-                <div class="p-col-12 p-md-4">
+            <div class="grid">
+                <div class="col-12 md:col-4">
                     <div class="card">
                         <h5>Image</h5>
-                        <Avatar image="demo/images/avatar/amyelsner.png" class="p-mr-2" size="xlarge" shape="circle" />
-                        <Avatar image="demo/images/avatar/asiyajavayant.png" class="p-mr-2" size="large" shape="circle" />
-                        <Avatar image="demo/images/avatar/onyamalimba.png" class="p-mr-2" shape="circle" />
+                        <Avatar image="demo/images/avatar/amyelsner.png" class="mr-2" size="xlarge" shape="circle" />
+                        <Avatar image="demo/images/avatar/asiyajavayant.png" class="mr-2" size="large" shape="circle" />
+                        <Avatar image="demo/images/avatar/onyamalimba.png" class="mr-2" shape="circle" />
                     </div>
                 </div>
 
-                <div class="p-col-12 p-md-4">
+                <div class="col-12 md:col-4">
                     <div class="card">
                         <h5>Avatar Group</h5>
-                        <AvatarGroup class="p-mb-3">
+                        <AvatarGroup class="mb-3">
                             <Avatar image="demo/images/avatar/amyelsner.png" size="large" shape="circle"/>
                             <Avatar image="demo/images/avatar/asiyajavayant.png" size="large" shape="circle"/>
                             <Avatar image="demo/images/avatar/onyamalimba.png" size="large" shape="circle"/>
@@ -87,7 +87,7 @@
                     </div>
                 </div>
 
-                 <div class="p-col-12 p-md-4">
+                 <div class="col-12 md:col-4">
                     <div class="card">
                         <h5>Image - Badge</h5>
                         <Avatar image="demo/images/organization/walter.jpg" size="xlarge" v-badge.danger="4" />
diff --git a/src/views/avatar/AvatarDoc.vue b/src/views/avatar/AvatarDoc.vue
index 2f95ee386..0c2127be2 100644
--- a/src/views/avatar/AvatarDoc.vue
+++ b/src/views/avatar/AvatarDoc.vue
@@ -190,26 +190,26 @@ export default {
 					tabName: 'Options API Source',
 					content: `
 <template>
-    <div class="p-grid">
-        <div class="p-col-12 p-md-4">
+    <div class="grid">
+        <div class="col-12 md:col-4">
             <div class="card">
                 <h5>Label</h5>
-                <Avatar label="P" class="p-mr-2" size="xlarge" />
-                <Avatar label="V" class="p-mr-2" size="large" style="background-color:#2196F3; color: #ffffff"/>
-                <Avatar label="U" class="p-mr-2" style="background-color:#9c27b0; color: #ffffff" />
+                <Avatar label="P" class="mr-2" size="xlarge" />
+                <Avatar label="V" class="mr-2" size="large" style="background-color:#2196F3; color: #ffffff"/>
+                <Avatar label="U" class="mr-2" style="background-color:#9c27b0; color: #ffffff" />
             </div>
         </div>
 
-        <div class="p-col-12 p-md-4">
+        <div class="col-12 md:col-4">
             <div class="card">
                 <h5>Label - Circle</h5>
-                <Avatar label="P" class="p-mr-2" size="xlarge" shape="circle" />
-                <Avatar label="V" class="p-mr-2" size="large" style="background-color:#2196F3; color: #ffffff" shape="circle"  />
-                <Avatar label="U" class="p-mr-2" style="background-color:#9c27b0; color: #ffffff" shape="circle"  />
+                <Avatar label="P" class="mr-2" size="xlarge" shape="circle" />
+                <Avatar label="V" class="mr-2" size="large" style="background-color:#2196F3; color: #ffffff" shape="circle"  />
+                <Avatar label="U" class="mr-2" style="background-color:#9c27b0; color: #ffffff" shape="circle"  />
             </div>
         </div>
 
-        <div class="p-col-12 p-md-4">
+        <div class="col-12 md:col-4">
             <div class="card">
                 <h5>Label - Badge</h5>
                 <Avatar label="U" size="xlarge" style="background-color:#4caf4f; color: #ffffff" v-badge="4" />
@@ -217,26 +217,26 @@ export default {
         </div>
     </div>
            
-    <div class="p-grid">
-        <div class="p-col-12 p-md-4">
+    <div class="grid">
+        <div class="col-12 md:col-4">
             <div class="card">
                 <h5>Icon</h5>
-                <Avatar icon="pi pi-user" class="p-mr-2" size="xlarge" />
-                <Avatar icon="pi pi-user" class="p-mr-2" size="large" style="background-color:#2196F3; color: #ffffff"/>
-                <Avatar icon="pi pi-user" class="p-mr-2" style="background-color:#9c27b0; color: #ffffff" />
+                <Avatar icon="pi pi-user" class="mr-2" size="xlarge" />
+                <Avatar icon="pi pi-user" class="mr-2" size="large" style="background-color:#2196F3; color: #ffffff"/>
+                <Avatar icon="pi pi-user" class="mr-2" style="background-color:#9c27b0; color: #ffffff" />
             </div>
         </div>
 
-        <div class="p-col-12 p-md-4">
+        <div class="col-12 md:col-4">
             <div class="card">
                 <h5>Icon - Circle</h5>
-                <Avatar icon="pi pi-user" class="p-mr-2" size="xlarge" shape="circle" />
-                <Avatar icon="pi pi-user" class="p-mr-2" size="large" style="background-color:#2196F3; color: #ffffff" shape="circle" />
-                <Avatar icon="pi pi-user" class="p-mr-2" style="background-color:#9c27b0; color: #ffffff" shape="circle" />
+                <Avatar icon="pi pi-user" class="mr-2" size="xlarge" shape="circle" />
+                <Avatar icon="pi pi-user" class="mr-2" size="large" style="background-color:#2196F3; color: #ffffff" shape="circle" />
+                <Avatar icon="pi pi-user" class="mr-2" style="background-color:#9c27b0; color: #ffffff" shape="circle" />
             </div>
         </div>
 
-         <div class="p-col-12 p-md-4">
+         <div class="col-12 md:col-4">
             <div class="card">
                 <h5>Icon - Badge</h5>
                 <Avatar icon="pi pi-user" size="xlarge" v-badge="4"/>
@@ -244,20 +244,20 @@ export default {
         </div>
     </div>
 
-    <div class="p-grid">
-        <div class="p-col-12 p-md-4">
+    <div class="grid">
+        <div class="col-12 md:col-4">
             <div class="card">
                 <h5>Image</h5>
-                <Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png"  class="p-mr-2" size="xlarge" shape="circle" />
-                <Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2" size="large" shape="circle" />
-                <Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2" shape="circle" />
+                <Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png"  class="mr-2" size="xlarge" shape="circle" />
+                <Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="mr-2" size="large" shape="circle" />
+                <Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="mr-2" shape="circle" />
             </div>
         </div>
 
-        <div class="p-col-12 p-md-4">
+        <div class="col-12 md:col-4">
             <div class="card">
                 <h5>Avatar Group</h5>
-                <AvatarGroup class="p-mb-3">
+                <AvatarGroup class="mb-3">
                     <Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" size="large" shape="circle"/>
                     <Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" size="large" shape="circle"/>
                     <Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" size="large" shape="circle"/>
@@ -268,7 +268,7 @@ export default {
             </div>
         </div>
 
-    	 <div class="p-col-12 p-md-4">
+    	 <div class="col-12 md:col-4">
     	    <div class="card">
     	        <h5>Image - Badge</h5>
     	        <Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" size="xlarge" v-badge.danger="4" />
@@ -287,26 +287,26 @@ export default {
 					tabName: 'Composition API Source',
 					content: `
 <template>
-    <div class="p-grid">
-        <div class="p-col-12 p-md-4">
+    <div class="grid">
+        <div class="col-12 md:col-4">
             <div class="card">
                 <h5>Label</h5>
-                <Avatar label="P" class="p-mr-2" size="xlarge" />
-                <Avatar label="V" class="p-mr-2" size="large" style="background-color:#2196F3; color: #ffffff"/>
-                <Avatar label="U" class="p-mr-2" style="background-color:#9c27b0; color: #ffffff" />
+                <Avatar label="P" class="mr-2" size="xlarge" />
+                <Avatar label="V" class="mr-2" size="large" style="background-color:#2196F3; color: #ffffff"/>
+                <Avatar label="U" class="mr-2" style="background-color:#9c27b0; color: #ffffff" />
             </div>
         </div>
 
-        <div class="p-col-12 p-md-4">
+        <div class="col-12 md:col-4">
             <div class="card">
                 <h5>Label - Circle</h5>
-                <Avatar label="P" class="p-mr-2" size="xlarge" shape="circle" />
-                <Avatar label="V" class="p-mr-2" size="large" style="background-color:#2196F3; color: #ffffff" shape="circle"  />
-                <Avatar label="U" class="p-mr-2" style="background-color:#9c27b0; color: #ffffff" shape="circle"  />
+                <Avatar label="P" class="mr-2" size="xlarge" shape="circle" />
+                <Avatar label="V" class="mr-2" size="large" style="background-color:#2196F3; color: #ffffff" shape="circle"  />
+                <Avatar label="U" class="mr-2" style="background-color:#9c27b0; color: #ffffff" shape="circle"  />
             </div>
         </div>
 
-        <div class="p-col-12 p-md-4">
+        <div class="col-12 md:col-4">
             <div class="card">
                 <h5>Label - Badge</h5>
                 <Avatar label="U" size="xlarge" style="background-color:#4caf4f; color: #ffffff" v-badge="4" />
@@ -314,26 +314,26 @@ export default {
         </div>
     </div>
            
-    <div class="p-grid">
-        <div class="p-col-12 p-md-4">
+    <div class="grid">
+        <div class="col-12 md:col-4">
             <div class="card">
                 <h5>Icon</h5>
-                <Avatar icon="pi pi-user" class="p-mr-2" size="xlarge" />
-                <Avatar icon="pi pi-user" class="p-mr-2" size="large" style="background-color:#2196F3; color: #ffffff"/>
-                <Avatar icon="pi pi-user" class="p-mr-2" style="background-color:#9c27b0; color: #ffffff" />
+                <Avatar icon="pi pi-user" class="mr-2" size="xlarge" />
+                <Avatar icon="pi pi-user" class="mr-2" size="large" style="background-color:#2196F3; color: #ffffff"/>
+                <Avatar icon="pi pi-user" class="mr-2" style="background-color:#9c27b0; color: #ffffff" />
             </div>
         </div>
 
-        <div class="p-col-12 p-md-4">
+        <div class="col-12 md:col-4">
             <div class="card">
                 <h5>Icon - Circle</h5>
-                <Avatar icon="pi pi-user" class="p-mr-2" size="xlarge" shape="circle" />
-                <Avatar icon="pi pi-user" class="p-mr-2" size="large" style="background-color:#2196F3; color: #ffffff" shape="circle" />
-                <Avatar icon="pi pi-user" class="p-mr-2" style="background-color:#9c27b0; color: #ffffff" shape="circle" />
+                <Avatar icon="pi pi-user" class="mr-2" size="xlarge" shape="circle" />
+                <Avatar icon="pi pi-user" class="mr-2" size="large" style="background-color:#2196F3; color: #ffffff" shape="circle" />
+                <Avatar icon="pi pi-user" class="mr-2" style="background-color:#9c27b0; color: #ffffff" shape="circle" />
             </div>
         </div>
 
-         <div class="p-col-12 p-md-4">
+         <div class="col-12 md:col-4">
             <div class="card">
                 <h5>Icon - Badge</h5>
                 <Avatar icon="pi pi-user" size="xlarge" v-badge="4"/>
@@ -341,20 +341,20 @@ export default {
         </div>
     </div>
 
-    <div class="p-grid">
-        <div class="p-col-12 p-md-4">
+    <div class="grid">
+        <div class="col-12 md:col-4">
             <div class="card">
                 <h5>Image</h5>
-                <Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png"  class="p-mr-2" size="xlarge" shape="circle" />
-                <Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2" size="large" shape="circle" />
-                <Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2" shape="circle" />
+                <Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png"  class="mr-2" size="xlarge" shape="circle" />
+                <Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="mr-2" size="large" shape="circle" />
+                <Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="mr-2" shape="circle" />
             </div>
         </div>
 
-        <div class="p-col-12 p-md-4">
+        <div class="col-12 md:col-4">
             <div class="card">
                 <h5>Avatar Group</h5>
-                <AvatarGroup class="p-mb-3">
+                <AvatarGroup class="mb-3">
                     <Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" size="large" shape="circle"/>
                     <Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" size="large" shape="circle"/>
                     <Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" size="large" shape="circle"/>
@@ -365,7 +365,7 @@ export default {
             </div>
         </div>
 
-        <div class="p-col-12 p-md-4">
+        <div class="col-12 md:col-4">
             <div class="card">
                 <h5>Image - Badge</h5>
                 <Avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" size="xlarge" v-badge.danger="4" />
@@ -385,26 +385,26 @@ export default {
         <script src="https://unpkg.com/primevue@^3/avatargroup/avatargroup.min.js"><\\/script>
         <script src="https://unpkg.com/primevue@^3/badgedirective/badgedirective.min.js"><\\/script>`,
 					content: `<div id="app">
-            <div class="p-grid">
-                <div class="p-col-12 p-md-4">
+            <div class="grid">
+                <div class="col-12 md:col-4">
                     <div class="card">
                         <h5>Label</h5>
-                        <p-avatar label="P" class="p-mr-2" size="xlarge"></p-avatar>
-                        <p-avatar label="V" class="p-mr-2" size="large" style="background-color:#2196F3; color: #ffffff"></p-avatar>
-                        <p-avatar label="U" class="p-mr-2" style="background-color:#9c27b0; color: #ffffff"></p-avatar>
+                        <p-avatar label="P" class="mr-2" size="xlarge"></p-avatar>
+                        <p-avatar label="V" class="mr-2" size="large" style="background-color:#2196F3; color: #ffffff"></p-avatar>
+                        <p-avatar label="U" class="mr-2" style="background-color:#9c27b0; color: #ffffff"></p-avatar>
                     </div>
                 </div>
 
-                <div class="p-col-12 p-md-4">
+                <div class="col-12 md:col-4">
                     <div class="card">
                         <h5>Label - Circle</h5>
-                        <p-avatar label="P" class="p-mr-2" size="xlarge" shape="circle"></p-avatar>
-                        <p-avatar label="V" class="p-mr-2" size="large" style="background-color:#2196F3; color: #ffffff" shape="circle"></p-avatar>
-                        <p-avatar label="U" class="p-mr-2" style="background-color:#9c27b0; color: #ffffff" shape="circle"></p-avatar>
+                        <p-avatar label="P" class="mr-2" size="xlarge" shape="circle"></p-avatar>
+                        <p-avatar label="V" class="mr-2" size="large" style="background-color:#2196F3; color: #ffffff" shape="circle"></p-avatar>
+                        <p-avatar label="U" class="mr-2" style="background-color:#9c27b0; color: #ffffff" shape="circle"></p-avatar>
                     </div>
                 </div>
 
-                <div class="p-col-12 p-md-4">
+                <div class="col-12 md:col-4">
                     <div class="card">
                         <h5>Label - Badge</h5>
                         <p-avatar label="U" size="xlarge" style="background-color:#4caf4f; color: #ffffff" v-badge="4"></p-avatar>
@@ -412,26 +412,26 @@ export default {
                 </div>
             </div>
            
-            <div class="p-grid">
-                <div class="p-col-12 p-md-4">
+            <div class="grid">
+                <div class="col-12 md:col-4">
                     <div class="card">
                         <h5>Icon</h5>
-                        <p-avatar icon="pi pi-user" class="p-mr-2" size="xlarge"></p-avatar>
-                        <p-avatar icon="pi pi-user" class="p-mr-2" size="large" style="background-color:#2196F3; color: #ffffff"></p-avatar>
-                        <p-avatar icon="pi pi-user" class="p-mr-2" style="background-color:#9c27b0; color: #ffffff"></p-avatar>
+                        <p-avatar icon="pi pi-user" class="mr-2" size="xlarge"></p-avatar>
+                        <p-avatar icon="pi pi-user" class="mr-2" size="large" style="background-color:#2196F3; color: #ffffff"></p-avatar>
+                        <p-avatar icon="pi pi-user" class="mr-2" style="background-color:#9c27b0; color: #ffffff"></p-avatar>
                     </div>
                 </div>
 
-                <div class="p-col-12 p-md-4">
+                <div class="col-12 md:col-4">
                     <div class="card">
                         <h5>Icon - Circle</h5>
-                        <p-avatar icon="pi pi-user" class="p-mr-2" size="xlarge" shape="circle"></p-avatar>
-                        <p-avatar icon="pi pi-user" class="p-mr-2" size="large" style="background-color:#2196F3; color: #ffffff" shape="circle"></p-avatar>
-                        <p-avatar icon="pi pi-user" class="p-mr-2" style="background-color:#9c27b0; color: #ffffff" shape="circle"></p-avatar>
+                        <p-avatar icon="pi pi-user" class="mr-2" size="xlarge" shape="circle"></p-avatar>
+                        <p-avatar icon="pi pi-user" class="mr-2" size="large" style="background-color:#2196F3; color: #ffffff" shape="circle"></p-avatar>
+                        <p-avatar icon="pi pi-user" class="mr-2" style="background-color:#9c27b0; color: #ffffff" shape="circle"></p-avatar>
                     </div>
                 </div>
 
-                <div class="p-col-12 p-md-4">
+                <div class="col-12 md:col-4">
                     <div class="card">
                         <h5>Icon - Badge</h5>
                         <p-avatar icon="pi pi-user" size="xlarge" v-badge="4"></p-avatar>
@@ -439,20 +439,20 @@ export default {
                 </div>
             </div>
 
-            <div class="p-grid">
-                <div class="p-col-12 p-md-4">
+            <div class="grid">
+                <div class="col-12 md:col-4">
                     <div class="card">
                         <h5>Image</h5>
-                        <p-avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2" size="xlarge" shape="circle"></p-avatar>
-                        <p-avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2" size="large" shape="circle"></p-avatar>
-                        <p-avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2" shape="circle"></p-avatar>
+                        <p-avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="mr-2" size="xlarge" shape="circle"></p-avatar>
+                        <p-avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="mr-2" size="large" shape="circle"></p-avatar>
+                        <p-avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="mr-2" shape="circle"></p-avatar>
                     </div>
                 </div>
 
-                <div class="p-col-12 p-md-4">
+                <div class="col-12 md:col-4">
                     <div class="card">
                         <h5>p-avatar Group</h5>
-                        <p-avatargroup class="p-mb-3">
+                        <p-avatargroup class="mb-3">
                             <p-avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" size="large" shape="circle"></p-avatar>
                             <p-avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" size="large" shape="circle"></p-avatar>
                             <p-avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" size="large" shape="circle"></p-avatar>
@@ -463,7 +463,7 @@ export default {
                     </div>
                 </div>
 
-                <div class="p-col-12 p-md-4">
+                <div class="col-12 md:col-4">
                     <div class="card">
                         <h5>Image - Badge</h5>
                         <p-avatar image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" size="xlarge" v-badge.danger="4"></p-avatar>
diff --git a/src/views/badge/BadgeDemo.vue b/src/views/badge/BadgeDemo.vue
index 6ddddee58..56fd8da02 100644
--- a/src/views/badge/BadgeDemo.vue
+++ b/src/views/badge/BadgeDemo.vue
@@ -11,24 +11,24 @@
         <div class="content-section implementation">
             <div class="card">
                 <h5>Numbers</h5>
-                <Badge value="2" class="p-mr-2"></Badge>
-                <Badge value="8" severity="success" class="p-mr-2"></Badge>
-                <Badge value="4" severity="info" class="p-mr-2"></Badge>
-                <Badge value="12" severity="warning" class="p-mr-2"></Badge>
+                <Badge value="2" class="mr-2"></Badge>
+                <Badge value="8" severity="success" class="mr-2"></Badge>
+                <Badge value="4" severity="info" class="mr-2"></Badge>
+                <Badge value="12" severity="warning" class="mr-2"></Badge>
                 <Badge value="3" severity="danger"></Badge>
 
-                <h5 class="p-mb-4">Positioned Badge</h5>
-                <i class="pi pi-bell p-mr-4 p-text-secondary" style="font-size: 2rem" v-badge="2"></i>
-                <i class="pi pi-calendar p-mr-4 p-text-secondary" style="font-size: 2rem" v-badge.danger="'10+'"></i>
+                <h5 class="mb-4">Positioned Badge</h5>
+                <i class="pi pi-bell mr-4 p-text-secondary" style="font-size: 2rem" v-badge="2"></i>
+                <i class="pi pi-calendar mr-4 p-text-secondary" style="font-size: 2rem" v-badge.danger="'10+'"></i>
                 <i class="pi pi-envelope p-text-secondary" style="font-size: 2rem" v-badge.danger></i>
 
                 <h5>Button Badge</h5>
-                <Button type="button" label="Emails" badge="8" class="p-mr-2" />
+                <Button type="button" label="Emails" badge="8" class="mr-2" />
                 <Button type="button" label="Messages" icon="pi pi-users" class="p-button-warning" badge="8" badgeClass="p-badge-danger" />
 
                 <h5>Sizes</h5>
-                <Badge value="2" class="p-mr-2"></Badge>
-                <Badge value="4" class="p-mr-2" size="large" severity="warning"></Badge>
+                <Badge value="2" class="mr-2"></Badge>
+                <Badge value="4" class="mr-2" size="large" severity="warning"></Badge>
                 <Badge value="6" size="xlarge" severity="success"></Badge>
             </div>
         </div>
diff --git a/src/views/badge/BadgeDoc.vue b/src/views/badge/BadgeDoc.vue
index d16986660..088258efd 100644
--- a/src/views/badge/BadgeDoc.vue
+++ b/src/views/badge/BadgeDoc.vue
@@ -206,24 +206,24 @@ export default {
 <template>
     <div>
         <h5>Numbers</h5>
-        <Badge value="2" class="p-mr-2"></Badge>
-        <Badge value="8" severity="success" class="p-mr-2"></Badge>
-        <Badge value="4" severity="info" class="p-mr-2"></Badge>
-        <Badge value="12" severity="warning" class="p-mr-2"></Badge>
+        <Badge value="2" class="mr-2"></Badge>
+        <Badge value="8" severity="success" class="mr-2"></Badge>
+        <Badge value="4" severity="info" class="mr-2"></Badge>
+        <Badge value="12" severity="warning" class="mr-2"></Badge>
         <Badge value="3" severity="danger"></Badge>
 
-        <h5 class="p-mb-4">Positioned Badge</h5>
-        <i class="pi pi-bell p-mr-4 p-text-secondary" style="font-size: 2rem" v-badge="2"></i>
-        <i class="pi pi-calendar p-mr-4 p-text-secondary" style="font-size: 2rem" v-badge.danger="'10+'"></i>
+        <h5 class="mb-4">Positioned Badge</h5>
+        <i class="pi pi-bell mr-4 p-text-secondary" style="font-size: 2rem" v-badge="2"></i>
+        <i class="pi pi-calendar mr-4 p-text-secondary" style="font-size: 2rem" v-badge.danger="'10+'"></i>
         <i class="pi pi-envelope p-text-secondary" style="font-size: 2rem" v-badge.danger></i>
 
         <h5>Button Badge</h5>
-        <Button type="button" label="Emails" badge="8" class="p-mr-2" />
+        <Button type="button" label="Emails" badge="8" class="mr-2" />
         <Button type="button" label="Messages" icon="pi pi-users" class="p-button-warning" badge="8" badgeClass="p-badge-danger" />
 
         <h5>Sizes</h5>
-        <Badge value="2" class="p-mr-2"></Badge>
-        <Badge value="4" class="p-mr-2" size="large" severity="warning"></Badge>
+        <Badge value="2" class="mr-2"></Badge>
+        <Badge value="4" class="mr-2" size="large" severity="warning"></Badge>
         <Badge value="6" size="xlarge" severity="success"></Badge>
     </div>
 </template>
@@ -240,24 +240,24 @@ export default {
 <template>
     <div>
         <h5>Numbers</h5>
-        <Badge value="2" class="p-mr-2"></Badge>
-        <Badge value="8" severity="success" class="p-mr-2"></Badge>
-        <Badge value="4" severity="info" class="p-mr-2"></Badge>
-        <Badge value="12" severity="warning" class="p-mr-2"></Badge>
+        <Badge value="2" class="mr-2"></Badge>
+        <Badge value="8" severity="success" class="mr-2"></Badge>
+        <Badge value="4" severity="info" class="mr-2"></Badge>
+        <Badge value="12" severity="warning" class="mr-2"></Badge>
         <Badge value="3" severity="danger"></Badge>
 
-        <h5 class="p-mb-4">Positioned Badge</h5>
-        <i class="pi pi-bell p-mr-4 p-text-secondary" style="font-size: 2rem" v-badge="2"></i>
-        <i class="pi pi-calendar p-mr-4 p-text-secondary" style="font-size: 2rem" v-badge.danger="'10+'"></i>
+        <h5 class="mb-4">Positioned Badge</h5>
+        <i class="pi pi-bell mr-4 p-text-secondary" style="font-size: 2rem" v-badge="2"></i>
+        <i class="pi pi-calendar mr-4 p-text-secondary" style="font-size: 2rem" v-badge.danger="'10+'"></i>
         <i class="pi pi-envelope p-text-secondary" style="font-size: 2rem" v-badge.danger></i>
 
         <h5>Button Badge</h5>
-        <Button type="button" label="Emails" badge="8" class="p-mr-2" />
+        <Button type="button" label="Emails" badge="8" class="mr-2" />
         <Button type="button" label="Messages" icon="pi pi-users" class="p-button-warning" badge="8" badgeClass="p-badge-danger" />
 
         <h5>Sizes</h5>
-        <Badge value="2" class="p-mr-2"></Badge>
-        <Badge value="4" class="p-mr-2" size="large" severity="warning"></Badge>
+        <Badge value="2" class="mr-2"></Badge>
+        <Badge value="4" class="mr-2" size="large" severity="warning"></Badge>
         <Badge value="6" size="xlarge" severity="success"></Badge>
     </div>
 </template>
@@ -273,24 +273,24 @@ export default {
         <script src="https://unpkg.com/primevue@^3/badgedirective/badgedirective.min.js"><\\/script>`,
                     content: `<div id="app">
             <h5>Numbers</h5>
-            <p-badge value="2" class="p-mr-2"></p-badge>
-            <p-badge value="8" severity="success" class="p-mr-2"></p-badge>
-            <p-badge value="4" severity="info" class="p-mr-2"></p-badge>
-            <p-badge value="12" severity="warning" class="p-mr-2"></p-badge>
+            <p-badge value="2" class="mr-2"></p-badge>
+            <p-badge value="8" severity="success" class="mr-2"></p-badge>
+            <p-badge value="4" severity="info" class="mr-2"></p-badge>
+            <p-badge value="12" severity="warning" class="mr-2"></p-badge>
             <p-badge value="3" severity="danger"></p-badge>
 
-            <h5 class="p-mb-4">Positioned Badge</h5>
-            <i class="pi pi-bell p-mr-4 p-text-secondary" style="font-size: 2rem" v-badge="2"></i>
-            <i class="pi pi-calendar p-mr-4 p-text-secondary" style="font-size: 2rem" v-badge.danger="'10+'"></i>
+            <h5 class="mb-4">Positioned Badge</h5>
+            <i class="pi pi-bell mr-4 p-text-secondary" style="font-size: 2rem" v-badge="2"></i>
+            <i class="pi pi-calendar mr-4 p-text-secondary" style="font-size: 2rem" v-badge.danger="'10+'"></i>
             <i class="pi pi-envelope p-text-secondary" style="font-size: 2rem" v-badge.danger></i>
 
             <h5>Button Badge</h5>
-            <p-button type="button" label="Emails" badge="8" class="p-mr-2"></p-button>
+            <p-button type="button" label="Emails" badge="8" class="mr-2"></p-button>
             <p-button type="button" label="Messages" icon="pi pi-users" class="p-button-warning" badge="8" badgeClass="p-badge-danger"></p-button>
 
             <h5>Sizes</h5>
-            <p-badge value="2" class="p-mr-2"></p-badge>
-            <p-badge value="4" class="p-mr-2" size="large" severity="warning"></p-badge>
+            <p-badge value="2" class="mr-2"></p-badge>
+            <p-badge value="4" class="mr-2" size="large" severity="warning"></p-badge>
             <p-badge value="6" size="xlarge" severity="success"></p-badge>
         </div>
 
diff --git a/src/views/button/ButtonDemo.vue b/src/views/button/ButtonDemo.vue
index 8da306131..06169b5c0 100755
--- a/src/views/button/ButtonDemo.vue
+++ b/src/views/button/ButtonDemo.vue
@@ -115,12 +115,12 @@
                 <Button type="button" label="Search" :loading="loading[3]" @click="load(3)" />
 
                 <h5>Templating</h5>
-                <Button type="button" class="p-px-3">
+                <Button type="button" class="px-3">
                     <img alt="logo" src="../../assets/images/logo-white.svg" style="width: 1.5rem"/>
                 </Button>
                 <Button type="button" class="p-button-outlined p-button-success">
                     <img alt="logo" src="../../assets/images/logo.svg" style="width: 1.5rem" />
-                    <span class="p-ml-2 p-text-bold">PrimeVue</span>
+                    <span class="ml-2 font-bold">PrimeVue</span>
                 </Button>
 
                 <h5>Button Set</h5>
diff --git a/src/views/button/ButtonDoc.vue b/src/views/button/ButtonDoc.vue
index e17f4ffd9..8dd3f6d84 100755
--- a/src/views/button/ButtonDoc.vue
+++ b/src/views/button/ButtonDoc.vue
@@ -135,13 +135,13 @@ import Button from 'primevue/button';
         <h5>Templating</h5>
         <p>Custom content such as icons, images and text can be placed inside the button via the default slot. Note that when slot is used, label, icon and badge properties are not included.</p>
 <pre v-code><code>
-&lt;Button type="button" class="p-px-3"&gt;
+&lt;Button type="button" class="px-3"&gt;
     &lt;img alt="logo" src="../../assets/images/logo.svg" style="width: 1.5rem"/&gt;
 &lt;/Button&gt;
 
 &lt;Button type="button" class="p-button-outlined p-button-success"&gt;
     &lt;img alt="logo" src="../../assets/images/logo.svg" style="width: 1.5rem" /&gt;
-    &lt;span class="p-ml-2 p-text-bold"&gt;PrimeVue&lt;/span&gt;
+    &lt;span class="ml-2 font-bold"&gt;PrimeVue&lt;/span&gt;
 &lt;/Button&gt;
 
 </code></pre>
@@ -360,12 +360,12 @@ export default {
         <Button type="button" label="Search" :loading="loading[3]" @click="load(3)" />
 
         <h5>Templating</h5>
-        <Button type="button" class="p-px-3">
+        <Button type="button" class="px-3">
             <img alt="logo" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" style="width: 1.5rem"/>
         </Button>
         <Button type="button" class="p-button-outlined p-button-success">
             <img alt="logo" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" style="width: 1.5rem" />
-            <span class="p-ml-2 p-text-bold">PrimeVue</span>
+            <span class="ml-2 font-bold">PrimeVue</span>
         </Button>
 
         <h5>Button Set</h5>
@@ -550,12 +550,12 @@ export default {
         <Button type="button" label="Search" :loading="loading[3]" @click="load(3)" />
 
         <h5>Templating</h5>
-        <Button type="button" class="p-px-3">
+        <Button type="button" class="px-3">
             <img alt="logo" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" style="width: 1.5rem"/>
         </Button>
         <Button type="button" class="p-button-outlined p-button-success">
             <img alt="logo" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" style="width: 1.5rem" />
-            <span class="p-ml-2 p-text-bold">PrimeVue</span>
+            <span class="ml-2 font-bold">PrimeVue</span>
         </Button>
 
         <h5>Button Set</h5>
@@ -739,12 +739,12 @@ export default({
             <p-button type="button" label="Search" :loading="loading[3]" @click="load(3)"></p-button>
 
             <h5>Templating</h5>
-            <p-button type="button" class="p-px-3">
+            <p-button type="button" class="px-3">
                 <img alt="logo" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" style="width: 1.5rem" />
             </p-button>
             <p-button type="button" class="p-button-outlined p-button-success">
                 <img alt="logo" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" style="width: 1.5rem" />
-                <span class="p-ml-2 p-text-bold">PrimeVue</span>
+                <span class="ml-2 font-bold">PrimeVue</span>
             </p-button>
 
             <h5>Button Set</h5>
diff --git a/src/views/calendar/CalendarDemo.vue b/src/views/calendar/CalendarDemo.vue
index 15ac05b99..e8b344815 100755
--- a/src/views/calendar/CalendarDemo.vue
+++ b/src/views/calendar/CalendarDemo.vue
@@ -11,60 +11,60 @@
         <div class="content-section implementation">
             <div class="card">
                 <h5>Popup</h5>
-                <div class="p-fluid p-grid p-formgrid">
-                    <div class="p-field p-col-12 p-md-4">
+                <div class="p-fluid grid formgrid">
+                    <div class="field col-12 md:col-4">
                         <label for="basic">Basic</label>
                         <Calendar id="basic" v-model="date1" autocomplete="off" />
                     </div>
-                    <div class="p-field p-col-12 p-md-4">
+                    <div class="field col-12 md:col-4">
                         <label for="dateformat">DateFormat</label>
                         <Calendar id="dateformat" v-model="date2"  dateFormat="mm-dd-yy" />
                     </div>
-                    <div class="p-field p-col-12 p-md-4">
+                    <div class="field col-12 md:col-4">
                         <label for="icon">Icon</label>
                         <Calendar id="icon" v-model="date3" :showIcon="true" />
                     </div>
-                    <div class="p-field p-col-12 p-md-4">
+                    <div class="field col-12 md:col-4">
                         <label for="minmax">MinMax</label>
                         <Calendar id="minmax" v-model="date4" :minDate="minDate" :maxDate="maxDate" :manualInput="false" />
                     </div>
-                    <div class="p-field p-col-12 p-md-4">
+                    <div class="field col-12 md:col-4">
                         <label for="disableddays">Disabled Days</label>
                         <Calendar id="disableddays" v-model="date5" :disabledDates="invalidDates" :disabledDays="[0,6]" :manualInput="false" />
                     </div>
-                    <div class="p-field p-col-12 p-md-4">
+                    <div class="field col-12 md:col-4">
                         <label for="multiple">Multiple</label>
                         <Calendar id="multiple" v-model="dates1" selectionMode="multiple" :manualInput="false" />
                     </div>
-                    <div class="p-field p-col-12 p-md-4">
+                    <div class="field col-12 md:col-4">
                         <label for="range">Range</label>
                         <Calendar id="range" v-model="dates2" selectionMode="range" :manualInput="false" />
                     </div>
-                    <div class="p-field p-col-12 p-md-4">
+                    <div class="field col-12 md:col-4">
                         <label for="buttonbar">Button Bar</label>
                         <Calendar id="buttonbar" v-model="date6" :showButtonBar="true" />
                     </div>
-                    <div class="p-field p-col-12 p-md-4">
+                    <div class="field col-12 md:col-4">
                         <label for="time24">Time / 24h</label>
                         <Calendar id="time24" v-model="date7" :showTime="true" :showSeconds="true" />
                     </div>
-                    <div class="p-field p-col-12 p-md-4">
+                    <div class="field col-12 md:col-4">
                         <label for="time12">Time / 12h</label>
                         <Calendar id="time12" v-model="date8" :timeOnly="true" hourFormat="12" />
                     </div>
-                    <div class="p-field p-col-12 p-md-4">
+                    <div class="field col-12 md:col-4">
                         <label for="monthpicker">Month Picker</label>
                         <Calendar id="monthpicker" v-model="date9" view="month" dateFormat="mm/yy" />
                     </div>
-                    <div class="p-field p-col-12 p-md-4">
+                    <div class="field col-12 md:col-4">
                         <label for="yearpicker">Year Picker</label>
                         <Calendar id="yearpicker" v-model="date10" view="year" dateFormat="yy"/>
                     </div>
-                    <div class="p-field p-col-12 p-md-4">
+                    <div class="field col-12 md:col-4">
                         <label for="multiplemonths">Multiple Months</label>
                         <Calendar id="multiplemonths" v-model="date11" :numberOfMonths="3" :responsiveOptions="responsiveOptions" />
                     </div>
-                    <div class="p-field p-col-12 p-md-4">
+                    <div class="field col-12 md:col-4">
                         <label for="datetemplate">Date Template</label>
                         <Calendar id="datetemplate" v-model="date12">
                             <template #date="slotProps">
@@ -73,7 +73,7 @@
                             </template>
                         </Calendar>
                     </div>
-                    <div class="p-field p-col-12 p-md-4">
+                    <div class="field col-12 md:col-4">
                         <label for="touchUI">TouchUI</label>
                         <Calendar id="touchUI" v-model="date13" :touchUI="true" />
                     </div>
diff --git a/src/views/calendar/CalendarDoc.vue b/src/views/calendar/CalendarDoc.vue
index 471c85ad8..f1cc03d15 100755
--- a/src/views/calendar/CalendarDoc.vue
+++ b/src/views/calendar/CalendarDoc.vue
@@ -616,60 +616,60 @@ export default {
 <template>
     <div>
         <h5>Popup</h5>
-        <div class="p-fluid p-grid p-formgrid">
-            <div class="p-field p-col-12 p-md-4">
+        <div class="p-fluid grid formgrid">
+            <div class="field col-12 md:col-4">
                 <label for="basic">Basic</label>
                 <Calendar id="basic" v-model="date1" autocomplete="off" />
             </div>
-            <div class="p-field p-col-12 p-md-4">
+            <div class="field col-12 md:col-4">
                 <label for="dateformat">DateFormat</label>
                 <Calendar id="dateformat" v-model="date2"  dateFormat="mm-dd-yy" />
             </div>
-            <div class="p-field p-col-12 p-md-4">
+            <div class="field col-12 md:col-4">
                 <label for="icon">Icon</label>
                 <Calendar id="icon" v-model="date3" :showIcon="true" />
             </div>
-            <div class="p-field p-col-12 p-md-4">
+            <div class="field col-12 md:col-4">
                 <label for="minmax">MinMax</label>
                 <Calendar id="minmax" v-model="date4" :minDate="minDate" :maxDate="maxDate" :manualInput="false" />
             </div>
-            <div class="p-field p-col-12 p-md-4">
+            <div class="field col-12 md:col-4">
                 <label for="disableddays">Disabled Days</label>
                 <Calendar id="disableddays" v-model="date5" :disabledDates="invalidDates" :disabledDays="[0,6]" :manualInput="false" />
             </div>
-            <div class="p-field p-col-12 p-md-4">
+            <div class="field col-12 md:col-4">
                 <label for="multiple">Multiple</label>
                 <Calendar id="multiple" v-model="dates1" selectionMode="multiple" :manualInput="false" />
             </div>
-            <div class="p-field p-col-12 p-md-4">
+            <div class="field col-12 md:col-4">
                 <label for="range">Range</label>
                 <Calendar id="range" v-model="dates2" selectionMode="range" :manualInput="false" />
             </div>
-            <div class="p-field p-col-12 p-md-4">
+            <div class="field col-12 md:col-4">
                 <label for="buttonbar">Button Bar</label>
                 <Calendar id="buttonbar" v-model="date6" :showButtonBar="true" />
             </div>
-            <div class="p-field p-col-12 p-md-4">
+            <div class="field col-12 md:col-4">
                 <label for="time24">Time / 24h</label>
                 <Calendar id="time24" v-model="date7" :showTime="true" :showSeconds="true" />
             </div>
-            <div class="p-field p-col-12 p-md-4">
+            <div class="field col-12 md:col-4">
                 <label for="time12">Time / 12h</label>
                 <Calendar id="time12" v-model="date8" :timeOnly="true" hourFormat="12" />
             </div>
-            <div class="p-field p-col-12 p-md-4">
+            <div class="field col-12 md:col-4">
                 <label for="monthpicker">Month Picker</label>
                 <Calendar id="monthpicker" v-model="date9" view="month" dateFormat="mm/yy" />
             </div>
-            <div class="p-field p-col-12 p-md-4">
+            <div class="field col-12 md:col-4">
                 <label for="yearpicker">Year Picker</label>
                 <Calendar id="yearpicker" v-model="date10" view="year" dateFormat="yy"/>
             </div>
-            <div class="p-field p-col-12 p-md-4">
+            <div class="field col-12 md:col-4">
                 <label for="multiplemonths">Multiple Months</label>
                 <Calendar id="multiplemonths" v-model="date11" :numberOfMonths="3" :responsiveOptions="responsiveOptions" />
             </div>
-            <div class="p-field p-col-12 p-md-4">
+            <div class="field col-12 md:col-4">
                 <label for="datetemplate">Date Template</label>
                 <Calendar id="datetemplate" v-model="date12">
                     <template #date="slotProps">
@@ -678,7 +678,7 @@ export default {
                     </template>
                 </Calendar>
             </div>
-            <div class="p-field p-col-12 p-md-4">
+            <div class="field col-12 md:col-4">
                 <label for="touchUI">TouchUI</label>
                 <Calendar id="touchUI" v-model="date13" :touchUI="true" />
             </div>
@@ -759,60 +759,60 @@ export default {
 <template>
     <div>
         <h5>Popup</h5>
-        <div class="p-fluid p-grid p-formgrid">
-            <div class="p-field p-col-12 p-md-4">
+        <div class="p-fluid grid formgrid">
+            <div class="field col-12 md:col-4">
                 <label for="basic">Basic</label>
                 <Calendar id="basic" v-model="date1" autocomplete="off" />
             </div>
-            <div class="p-field p-col-12 p-md-4">
+            <div class="field col-12 md:col-4">
                 <label for="dateformat">DateFormat</label>
                 <Calendar id="dateformat" v-model="date2"  dateFormat="mm-dd-yy" />
             </div>
-            <div class="p-field p-col-12 p-md-4">
+            <div class="field col-12 md:col-4">
                 <label for="icon">Icon</label>
                 <Calendar id="icon" v-model="date3" :showIcon="true" />
             </div>
-            <div class="p-field p-col-12 p-md-4">
+            <div class="field col-12 md:col-4">
                 <label for="minmax">MinMax</label>
                 <Calendar id="minmax" v-model="date4" :minDate="minDate" :maxDate="maxDate" :manualInput="false" />
             </div>
-            <div class="p-field p-col-12 p-md-4">
+            <div class="field col-12 md:col-4">
                 <label for="disableddays">Disabled Days</label>
                 <Calendar id="disableddays" v-model="date5" :disabledDates="invalidDates" :disabledDays="[0,6]" :manualInput="false" />
             </div>
-            <div class="p-field p-col-12 p-md-4">
+            <div class="field col-12 md:col-4">
                 <label for="multiple">Multiple</label>
                 <Calendar id="multiple" v-model="dates1" selectionMode="multiple" :manualInput="false" />
             </div>
-            <div class="p-field p-col-12 p-md-4">
+            <div class="field col-12 md:col-4">
                 <label for="range">Range</label>
                 <Calendar id="range" v-model="dates2" selectionMode="range" :manualInput="false" />
             </div>
-            <div class="p-field p-col-12 p-md-4">
+            <div class="field col-12 md:col-4">
                 <label for="buttonbar">Button Bar</label>
                 <Calendar id="buttonbar" v-model="date6" :showButtonBar="true" />
             </div>
-            <div class="p-field p-col-12 p-md-4">
+            <div class="field col-12 md:col-4">
                 <label for="time24">Time / 24h</label>
                 <Calendar id="time24" v-model="date7" :showTime="true" :showSeconds="true" />
             </div>
-            <div class="p-field p-col-12 p-md-4">
+            <div class="field col-12 md:col-4">
                 <label for="time12">Time / 12h</label>
                 <Calendar id="time12" v-model="date8" :timeOnly="true" hourFormat="12" />
             </div>
-            <div class="p-field p-col-12 p-md-4">
+            <div class="field col-12 md:col-4">
                 <label for="monthpicker">Month Picker</label>
                 <Calendar id="monthpicker" v-model="date9" view="month" dateFormat="mm/yy"  />
             </div>
-            <div class="p-field p-col-12 p-md-4">
+            <div class="field col-12 md:col-4">
                 <label for="yearpicker">Year Picker</label>
                 <Calendar id="yearpicker" v-model="date10" view="year" dateFormat="yy"/>
             </div>
-            <div class="p-field p-col-12 p-md-4">
+            <div class="field col-12 md:col-4">
                 <label for="multiplemonths">Multiple Months</label>
                 <Calendar id="multiplemonths" v-model="date11" :numberOfMonths="3" :responsiveOptions="responsiveOptions" />
             </div>
-            <div class="p-field p-col-12 p-md-4">
+            <div class="field col-12 md:col-4">
                 <label for="datetemplate">Date Template</label>
                 <Calendar id="datetemplate" v-model="date12">
                     <template #date="slotProps">
@@ -821,7 +821,7 @@ export default {
                     </template>
                 </Calendar>
             </div>
-            <div class="p-field p-col-12 p-md-4">
+            <div class="field col-12 md:col-4">
                 <label for="touchUI">TouchUI</label>
                 <Calendar id="touchUI" v-model="date13" :touchUI="true" />
             </div>
@@ -902,60 +902,60 @@ export default {
                     imports: `<script src="https://unpkg.com/primevue@^3/calendar/calendar.min.js"><\\/script>`,
                     content: `<div id="app">
             <h5>Popup</h5>
-            <div class="p-fluid p-grid p-formgrid">
-                <div class="p-field p-col-12 p-md-4">
+            <div class="p-fluid grid formgrid">
+                <div class="field col-12 md:col-4">
                     <label for="basic">Basic</label>
                     <p-calendar id="basic" v-model="date1" autocomplete="off"></p-calendar>
                 </div>
-                <div class="p-field p-col-12 p-md-4">
+                <div class="field col-12 md:col-4">
                     <label for="dateformat">DateFormat</label>
                     <p-calendar id="dateformat" v-model="date2" date-format="mm-dd-yy"></p-calendar>
                 </div>
-                <div class="p-field p-col-12 p-md-4">
+                <div class="field col-12 md:col-4">
                     <label for="icon">Icon</label>
                     <p-calendar id="icon" v-model="date3" :show-icon="true"></p-calendar>
                 </div>
-                <div class="p-field p-col-12 p-md-4">
+                <div class="field col-12 md:col-4">
                     <label for="minmax">MinMax</label>
                     <p-calendar id="minmax" v-model="date4" :min-date="minDate" :max-date="maxDate" :manual-input="false"></p-calendar>
                 </div>
-                <div class="p-field p-col-12 p-md-4">
+                <div class="field col-12 md:col-4">
                     <label for="disableddays">Disabled Days</label>
                     <p-calendar id="disableddays" v-model="date5" :disabled-dates="invalidDates" :disabled-days="[0,6]" :manual-input="false"></p-calendar>
                 </div>
-                <div class="p-field p-col-12 p-md-4">
+                <div class="field col-12 md:col-4">
                     <label for="multiple">Multiple</label>
                     <p-calendar id="multiple" v-model="dates1" selection-mode="multiple" :manual-input="false"></p-calendar>
                 </div>
-                <div class="p-field p-col-12 p-md-4">
+                <div class="field col-12 md:col-4">
                     <label for="range">Range</label>
                     <p-calendar id="range" v-model="dates2" selection-mode="range" :manual-input="false"></p-calendar>
                 </div>
-                <div class="p-field p-col-12 p-md-4">
+                <div class="field col-12 md:col-4">
                     <label for="buttonbar">Button Bar</label>
                     <p-calendar id="buttonbar" v-model="date6" :show-button-bar="true"></p-calendar>
                 </div>
-                <div class="p-field p-col-12 p-md-4">
+                <div class="field col-12 md:col-4">
                     <label for="time24">Time / 24h</label>
                     <p-calendar id="time24" v-model="date7" :show-time="true" :show-seconds="true"></p-calendar>
                 </div>
-                <div class="p-field p-col-12 p-md-4">
+                <div class="field col-12 md:col-4">
                     <label for="time12">Time / 12h</label>
                     <p-calendar id="time12" v-model="date8" :time-only="true" hour-format="12"></p-calendar>
                 </div>
-                <div class="p-field p-col-12 p-md-4">
+                <div class="field col-12 md:col-4">
                     <label for="monthpicker">Month Picker</label>
                     <p-calendar id="monthpicker" v-model="date9" view="month" date-format="mm/yy"></p-calendar>
                 </div>
-                <div class="p-field p-col-12 p-md-4">
+                <div class="field col-12 md:col-4">
                     <label for="yearpicker">Year Picker</label>
                     <p-calendar id="yearpicker" v-model="date10" view="year" date-format="yy"></p-calendar>
                 </div>
-                <div class="p-field p-col-12 p-md-4">
+                <div class="field col-12 md:col-4">
                     <label for="multiplemonths">Multiple Months</label>
                     <p-calendar id="multiplemonths" v-model="date11" :number-of-months="3" :responsive-options="responsiveOptions"></p-calendar>
                 </div>
-                <div class="p-field p-col-12 p-md-4">
+                <div class="field col-12 md:col-4">
                     <label for="datetemplate">Date Template</label>
                     <p-calendar id="datetemplate" v-model="date12">
                         <template #date="slotProps">
@@ -964,7 +964,7 @@ export default {
                         </template>
                     </p-calendar>
                 </div>
-                <div class="p-field p-col-12 p-md-4">
+                <div class="field col-12 md:col-4">
                     <label for="touchUI">TouchUI</label>
                     <p-calendar id="touchUI" v-model="date13" :touch-u-i="true"></p-calendar>
                 </div>
diff --git a/src/views/carousel/CarouselDemo.vue b/src/views/carousel/CarouselDemo.vue
index 20cccaa7c..4485cb671 100755
--- a/src/views/carousel/CarouselDemo.vue
+++ b/src/views/carousel/CarouselDemo.vue
@@ -17,16 +17,16 @@
                     <template #item="slotProps">
                         <div class="product-item">
                             <div class="product-item-content">
-                                <div class="p-mb-3">
+                                <div class="mb-3">
                                     <img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="product-image" />
                                 </div>
                                 <div>
-                                    <h4 class="p-mb-1">{{slotProps.data.name}}</h4>
-                                    <h6 class="p-mt-0 p-mb-3">${{slotProps.data.price}}</h6>
+                                    <h4 class="mb-1">{{slotProps.data.name}}</h4>
+                                    <h6 class="mt-0 mb-3">${{slotProps.data.price}}</h6>
                                     <span :class="'product-badge status-'+slotProps.data.inventoryStatus.toLowerCase()">{{slotProps.data.inventoryStatus}}</span>
-                                    <div class="car-buttons p-mt-5">
-                                        <Button icon="pi pi-search" class="p-button p-button-rounded p-mr-2" />
-                                        <Button icon="pi pi-star-fill" class="p-button-success p-button-rounded p-mr-2" />
+                                    <div class="car-buttons mt-5">
+                                        <Button icon="pi pi-search" class="p-button p-button-rounded mr-2" />
+                                        <Button icon="pi pi-star-fill" class="p-button-success p-button-rounded mr-2" />
                                         <Button icon="pi pi-cog" class="p-button-help p-button-rounded" />
                                     </div>
                                 </div>
@@ -44,16 +44,16 @@
                     <template #item="slotProps">
                         <div class="product-item">
                             <div class="product-item-content">
-                                <div class="p-mb-3">
+                                <div class="mb-3">
                                     <img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="product-image" />
                                 </div>
                                 <div>
-                                    <h4 class="p-mb-1">{{slotProps.data.name}}</h4>
-                                    <h6 class="p-mt-0 p-mb-3">${{slotProps.data.price}}</h6>
+                                    <h4 class="mb-1">{{slotProps.data.name}}</h4>
+                                    <h6 class="mt-0 mb-3">${{slotProps.data.price}}</h6>
                                     <span :class="'product-badge status-'+slotProps.data.inventoryStatus.toLowerCase()">{{slotProps.data.inventoryStatus}}</span>
-                                    <div class="car-buttons p-mt-5">
-                                        <Button icon="pi pi-search" class="p-button p-button-rounded p-mr-2" />
-                                        <Button icon="pi pi-star-fill" class="p-button-success p-button-rounded p-mr-2" />
+                                    <div class="car-buttons mt-5">
+                                        <Button icon="pi pi-search" class="p-button p-button-rounded mr-2" />
+                                        <Button icon="pi pi-star-fill" class="p-button-success p-button-rounded mr-2" />
                                         <Button icon="pi pi-cog" class="p-button-help p-button-rounded" />
                                     </div>
                                 </div>
@@ -72,16 +72,16 @@
                     <template #item="slotProps">
                         <div class="product-item">
                             <div class="product-item-content">
-                                <div class="p-mb-3">
+                                <div class="mb-3">
                                     <img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="product-image" />
                                 </div>
                                 <div>
-                                    <h4 class="p-mb-1">{{slotProps.data.name}}</h4>
-                                    <h6 class="p-mt-0 p-mb-3">${{slotProps.data.price}}</h6>
+                                    <h4 class="mb-1">{{slotProps.data.name}}</h4>
+                                    <h6 class="mt-0 mb-3">${{slotProps.data.price}}</h6>
                                     <span :class="'product-badge status-'+slotProps.data.inventoryStatus.toLowerCase()">{{slotProps.data.inventoryStatus}}</span>
-                                    <div class="car-buttons p-mt-5">
-                                        <Button icon="pi pi-search" class="p-button p-button-rounded p-mr-2" />
-                                        <Button icon="pi pi-star-fill" class="p-button-success p-button-rounded p-mr-2" />
+                                    <div class="car-buttons mt-5">
+                                        <Button icon="pi pi-search" class="p-button p-button-rounded mr-2" />
+                                        <Button icon="pi pi-star-fill" class="p-button-success p-button-rounded mr-2" />
                                         <Button icon="pi pi-cog" class="p-button-help p-button-rounded" />
                                     </div>
                                 </div>
diff --git a/src/views/carousel/CarouselDoc.vue b/src/views/carousel/CarouselDoc.vue
index 3531a00f4..58a785616 100755
--- a/src/views/carousel/CarouselDoc.vue
+++ b/src/views/carousel/CarouselDoc.vue
@@ -316,16 +316,16 @@ export default {
                 <template #item="slotProps">
                     <div class="product-item">
                         <div class="product-item-content">
-                            <div class="p-mb-3">
+                            <div class="mb-3">
                                 <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="slotProps.data.name" class="product-image" />
                             </div>
                             <div>
-                                <h4 class="p-mb-1">{{slotProps.data.name}}</h4>
-                                <h6 class="p-mt-0 p-mb-3">\${{slotProps.data.price}}</h6>
+                                <h4 class="mb-1">{{slotProps.data.name}}</h4>
+                                <h6 class="mt-0 mb-3">\${{slotProps.data.price}}</h6>
                                 <span :class="'product-badge status-'+slotProps.data.inventoryStatus.toLowerCase()">{{slotProps.data.inventoryStatus}}</span>
-                                <div class="car-buttons p-mt-5">
-                                    <Button icon="pi pi-search" class="p-button p-button-rounded p-mr-2" />
-                                    <Button icon="pi pi-star-fill" class="p-button-success p-button-rounded p-mr-2" />
+                                <div class="car-buttons mt-5">
+                                    <Button icon="pi pi-search" class="p-button p-button-rounded mr-2" />
+                                    <Button icon="pi pi-star-fill" class="p-button-success p-button-rounded mr-2" />
                                     <Button icon="pi pi-cog" class="p-button-help p-button-rounded" />
                                 </div>
                             </div>
@@ -343,16 +343,16 @@ export default {
                 <template #item="slotProps">
                     <div class="product-item">
                         <div class="product-item-content">
-                            <div class="p-mb-3">
+                            <div class="mb-3">
                                 <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="slotProps.data.name" class="product-image" />
                             </div>
                             <div>
-                                <h4 class="p-mb-1">{{slotProps.data.name}}</h4>
-                                <h6 class="p-mt-0 p-mb-3">\${{slotProps.data.price}}</h6>
+                                <h4 class="mb-1">{{slotProps.data.name}}</h4>
+                                <h6 class="mt-0 mb-3">\${{slotProps.data.price}}</h6>
                                 <span :class="'product-badge status-'+slotProps.data.inventoryStatus.toLowerCase()">{{slotProps.data.inventoryStatus}}</span>
-                                <div class="car-buttons p-mt-5">
-                                    <Button icon="pi pi-search" class="p-button p-button-rounded p-mr-2" />
-                                    <Button icon="pi pi-star-fill" class="p-button-success p-button-rounded p-mr-2" />
+                                <div class="car-buttons mt-5">
+                                    <Button icon="pi pi-search" class="p-button p-button-rounded mr-2" />
+                                    <Button icon="pi pi-star-fill" class="p-button-success p-button-rounded mr-2" />
                                     <Button icon="pi pi-cog" class="p-button-help p-button-rounded" />
                                 </div>
                             </div>
@@ -371,16 +371,16 @@ export default {
                 <template #item="slotProps">
                     <div class="product-item">
                         <div class="product-item-content">
-                            <div class="p-mb-3">
+                            <div class="mb-3">
                                 <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="slotProps.data.name" class="product-image" />
                             </div>
                             <div>
-                                <h4 class="p-mb-1">{{slotProps.data.name}}</h4>
-                                <h6 class="p-mt-0 p-mb-3">\${{slotProps.data.price}}</h6>
+                                <h4 class="mb-1">{{slotProps.data.name}}</h4>
+                                <h6 class="mt-0 mb-3">\${{slotProps.data.price}}</h6>
                                 <span :class="'product-badge status-'+slotProps.data.inventoryStatus.toLowerCase()">{{slotProps.data.inventoryStatus}}</span>
-                                <div class="car-buttons p-mt-5">
-                                    <Button icon="pi pi-search" class="p-button p-button-rounded p-mr-2" />
-                                    <Button icon="pi pi-star-fill" class="p-button-success p-button-rounded p-mr-2" />
+                                <div class="car-buttons mt-5">
+                                    <Button icon="pi pi-search" class="p-button p-button-rounded mr-2" />
+                                    <Button icon="pi pi-star-fill" class="p-button-success p-button-rounded mr-2" />
                                     <Button icon="pi pi-cog" class="p-button-help p-button-rounded" />
                                 </div>
                             </div>
@@ -458,16 +458,16 @@ export default {
                 <template #item="slotProps">
                     <div class="product-item">
                         <div class="product-item-content">
-                            <div class="p-mb-3">
+                            <div class="mb-3">
                                 <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="slotProps.data.name" class="product-image" />
                             </div>
                             <div>
-                                <h4 class="p-mb-1">{{slotProps.data.name}}</h4>
-                                <h6 class="p-mt-0 p-mb-3">\${{slotProps.data.price}}</h6>
+                                <h4 class="mb-1">{{slotProps.data.name}}</h4>
+                                <h6 class="mt-0 mb-3">\${{slotProps.data.price}}</h6>
                                 <span :class="'product-badge status-'+slotProps.data.inventoryStatus.toLowerCase()">{{slotProps.data.inventoryStatus}}</span>
-                                <div class="car-buttons p-mt-5">
-                                    <Button icon="pi pi-search" class="p-button p-button-rounded p-mr-2" />
-                                    <Button icon="pi pi-star-fill" class="p-button-success p-button-rounded p-mr-2" />
+                                <div class="car-buttons mt-5">
+                                    <Button icon="pi pi-search" class="p-button p-button-rounded mr-2" />
+                                    <Button icon="pi pi-star-fill" class="p-button-success p-button-rounded mr-2" />
                                     <Button icon="pi pi-cog" class="p-button-help p-button-rounded" />
                                 </div>
                             </div>
@@ -485,16 +485,16 @@ export default {
                 <template #item="slotProps">
                     <div class="product-item">
                         <div class="product-item-content">
-                            <div class="p-mb-3">
+                            <div class="mb-3">
                                 <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="slotProps.data.name" class="product-image" />
                             </div>
                             <div>
-                                <h4 class="p-mb-1">{{slotProps.data.name}}</h4>
-                                <h6 class="p-mt-0 p-mb-3">\${{slotProps.data.price}}</h6>
+                                <h4 class="mb-1">{{slotProps.data.name}}</h4>
+                                <h6 class="mt-0 mb-3">\${{slotProps.data.price}}</h6>
                                 <span :class="'product-badge status-'+slotProps.data.inventoryStatus.toLowerCase()">{{slotProps.data.inventoryStatus}}</span>
-                                <div class="car-buttons p-mt-5">
-                                    <Button icon="pi pi-search" class="p-button p-button-rounded p-mr-2" />
-                                    <Button icon="pi pi-star-fill" class="p-button-success p-button-rounded p-mr-2" />
+                                <div class="car-buttons mt-5">
+                                    <Button icon="pi pi-search" class="p-button p-button-rounded mr-2" />
+                                    <Button icon="pi pi-star-fill" class="p-button-success p-button-rounded mr-2" />
                                     <Button icon="pi pi-cog" class="p-button-help p-button-rounded" />
                                 </div>
                             </div>
@@ -513,16 +513,16 @@ export default {
                 <template #item="slotProps">
                     <div class="product-item">
                         <div class="product-item-content">
-                            <div class="p-mb-3">
+                            <div class="mb-3">
                                 <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="slotProps.data.name" class="product-image" />
                             </div>
                             <div>
-                                <h4 class="p-mb-1">{{slotProps.data.name}}</h4>
-                                <h6 class="p-mt-0 p-mb-3">\${{slotProps.data.price}}</h6>
+                                <h4 class="mb-1">{{slotProps.data.name}}</h4>
+                                <h6 class="mt-0 mb-3">\${{slotProps.data.price}}</h6>
                                 <span :class="'product-badge status-'+slotProps.data.inventoryStatus.toLowerCase()">{{slotProps.data.inventoryStatus}}</span>
-                                <div class="car-buttons p-mt-5">
-                                    <Button icon="pi pi-search" class="p-button p-button-rounded p-mr-2" />
-                                    <Button icon="pi pi-star-fill" class="p-button-success p-button-rounded p-mr-2" />
+                                <div class="car-buttons mt-5">
+                                    <Button icon="pi pi-search" class="p-button p-button-rounded mr-2" />
+                                    <Button icon="pi pi-star-fill" class="p-button-success p-button-rounded mr-2" />
                                     <Button icon="pi pi-cog" class="p-button-help p-button-rounded" />
                                 </div>
                             </div>
@@ -598,16 +598,16 @@ export default {
                     <template #item="slotProps">
                         <div class="product-item">
                             <div class="product-item-content">
-                                <div class="p-mb-3">
+                                <div class="mb-3">
                                     <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="slotProps.data.name" class="product-image" />
                                 </div>
                                 <div>
-                                    <h4 class="p-mb-1">{{slotProps.data.name}}</h4>
-                                    <h6 class="p-mt-0 p-mb-3">\${{slotProps.data.price}}</h6>
+                                    <h4 class="mb-1">{{slotProps.data.name}}</h4>
+                                    <h6 class="mt-0 mb-3">\${{slotProps.data.price}}</h6>
                                     <span :class="'product-badge status-'+slotProps.data.inventoryStatus.toLowerCase()">{{slotProps.data.inventoryStatus}}</span>
-                                    <div class="car-buttons p-mt-5">
-                                        <p-button icon="pi pi-search" class="p-button p-button-rounded p-mr-2"></p-button>
-                                        <p-button icon="pi pi-star-fill" class="p-button-success p-button-rounded p-mr-2"></p-button>
+                                    <div class="car-buttons mt-5">
+                                        <p-button icon="pi pi-search" class="p-button p-button-rounded mr-2"></p-button>
+                                        <p-button icon="pi pi-star-fill" class="p-button-success p-button-rounded mr-2"></p-button>
                                         <p-button icon="pi pi-cog" class="p-button-help p-button-rounded"></p-button>
                                     </div>
                                 </div>
@@ -625,16 +625,16 @@ export default {
                     <template #item="slotProps">
                         <div class="product-item">
                             <div class="product-item-content">
-                                <div class="p-mb-3">
+                                <div class="mb-3">
                                     <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="slotProps.data.name" class="product-image" />
                                 </div>
                                 <div>
-                                    <h4 class="p-mb-1">{{slotProps.data.name}}</h4>
-                                    <h6 class="p-mt-0 p-mb-3">\${{slotProps.data.price}}</h6>
+                                    <h4 class="mb-1">{{slotProps.data.name}}</h4>
+                                    <h6 class="mt-0 mb-3">\${{slotProps.data.price}}</h6>
                                     <span :class="'product-badge status-'+slotProps.data.inventoryStatus.toLowerCase()">{{slotProps.data.inventoryStatus}}</span>
-                                    <div class="car-buttons p-mt-5">
-                                        <p-button icon="pi pi-search" class="p-button p-button-rounded p-mr-2"></p-button>
-                                        <p-button icon="pi pi-star-fill" class="p-button-success p-button-rounded p-mr-2"></p-button>
+                                    <div class="car-buttons mt-5">
+                                        <p-button icon="pi pi-search" class="p-button p-button-rounded mr-2"></p-button>
+                                        <p-button icon="pi pi-star-fill" class="p-button-success p-button-rounded mr-2"></p-button>
                                         <p-button icon="pi pi-cog" class="p-button-help p-button-rounded"></p-button>
                                     </div>
                                 </div>
@@ -653,16 +653,16 @@ export default {
                     <template #item="slotProps">
                         <div class="product-item">
                             <div class="product-item-content">
-                                <div class="p-mb-3">
+                                <div class="mb-3">
                                     <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="slotProps.data.name" class="product-image" />
                                 </div>
                                 <div>
-                                    <h4 class="p-mb-1">{{slotProps.data.name}}</h4>
-                                    <h6 class="p-mt-0 p-mb-3">\${{slotProps.data.price}}</h6>
+                                    <h4 class="mb-1">{{slotProps.data.name}}</h4>
+                                    <h6 class="mt-0 mb-3">\${{slotProps.data.price}}</h6>
                                     <span :class="'product-badge status-'+slotProps.data.inventoryStatus.toLowerCase()">{{slotProps.data.inventoryStatus}}</span>
-                                    <div class="car-buttons p-mt-5">
-                                        <p-button icon="pi pi-search" class="p-button p-button-rounded p-mr-2"></p-button>
-                                        <p-button icon="pi pi-star-fill" class="p-button-success p-button-rounded p-mr-2"></p-button>
+                                    <div class="car-buttons mt-5">
+                                        <p-button icon="pi pi-search" class="p-button p-button-rounded mr-2"></p-button>
+                                        <p-button icon="pi pi-star-fill" class="p-button-success p-button-rounded mr-2"></p-button>
                                         <p-button icon="pi pi-cog" class="p-button-help p-button-rounded"></p-button>
                                     </div>
                                 </div>
diff --git a/src/views/cascadeselect/CascadeSelectDemo.vue b/src/views/cascadeselect/CascadeSelectDemo.vue
index 337f6a41d..aa848630e 100644
--- a/src/views/cascadeselect/CascadeSelectDemo.vue
+++ b/src/views/cascadeselect/CascadeSelectDemo.vue
@@ -20,8 +20,8 @@
                     <template #option="slotProps">
                         <div class="country-item">
                             <img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" v-if="slotProps.option.states" />
-                            <i class="pi pi-compass p-mr-2" v-if="slotProps.option.cities"></i>
-                            <i class="pi pi-map-marker p-mr-2" v-if="slotProps.option.cname"></i>
+                            <i class="pi pi-compass mr-2" v-if="slotProps.option.cities"></i>
+                            <i class="pi pi-map-marker mr-2" v-if="slotProps.option.cname"></i>
                             <span>{{slotProps.option.cname || slotProps.option.name}}</span>
                         </div>
                     </template>
diff --git a/src/views/cascadeselect/CascadeSelectDoc.vue b/src/views/cascadeselect/CascadeSelectDoc.vue
index 87f554508..778fee0a9 100644
--- a/src/views/cascadeselect/CascadeSelectDoc.vue
+++ b/src/views/cascadeselect/CascadeSelectDoc.vue
@@ -120,8 +120,8 @@ data() {
     &lt;template #option="slotProps"&gt;
         &lt;div class="country-item"&gt;
             &lt;img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" v-if="slotProps.option.states" /&gt;
-            &lt;i class="pi pi-compass p-mr-2" v-if="slotProps.option.cities"&gt;&lt;/i&gt;
-            &lt;i class="pi pi-map-marker p-mr-2" v-if="slotProps.option.cname"&gt;&lt;/i&gt;
+            &lt;i class="pi pi-compass mr-2" v-if="slotProps.option.cities"&gt;&lt;/i&gt;
+            &lt;i class="pi pi-map-marker mr-2" v-if="slotProps.option.cname"&gt;&lt;/i&gt;
             &lt;span&gt;{{slotProps.option.cname || slotProps.option.name}}&lt;/span&gt;
         &lt;/div&gt;
     &lt;/template&gt;
@@ -385,8 +385,8 @@ export default {
             <template #option="slotProps">
                 <div class="country-item">
                     <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" v-if="slotProps.option.states" />
-                    <i class="pi pi-compass p-mr-2" v-if="slotProps.option.cities"></i>
-                    <i class="pi pi-map-marker p-mr-2" v-if="slotProps.option.cname"></i>
+                    <i class="pi pi-compass mr-2" v-if="slotProps.option.cities"></i>
+                    <i class="pi pi-map-marker mr-2" v-if="slotProps.option.cname"></i>
                     <span>{{slotProps.option.cname || slotProps.option.name}}</span>
                 </div>
             </template>
@@ -507,8 +507,8 @@ img {
             <template #option="slotProps">
                 <div class="country-item">
                     <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" v-if="slotProps.option.states" />
-                    <i class="pi pi-compass p-mr-2" v-if="slotProps.option.cities"></i>
-                    <i class="pi pi-map-marker p-mr-2" v-if="slotProps.option.cname"></i>
+                    <i class="pi pi-compass mr-2" v-if="slotProps.option.cities"></i>
+                    <i class="pi pi-map-marker mr-2" v-if="slotProps.option.cname"></i>
                     <span>{{slotProps.option.cname || slotProps.option.name}}</span>
                 </div>
             </template>
@@ -631,8 +631,8 @@ img {
                 <template #option="slotProps">
                     <div class="country-item">
                         <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" v-if="slotProps.option.states" />
-                        <i class="pi pi-compass p-mr-2" v-if="slotProps.option.cities"></i>
-                        <i class="pi pi-map-marker p-mr-2" v-if="slotProps.option.cname"></i>
+                        <i class="pi pi-compass mr-2" v-if="slotProps.option.cities"></i>
+                        <i class="pi pi-map-marker mr-2" v-if="slotProps.option.cname"></i>
                         <span>{{slotProps.option.cname || slotProps.option.name}}</span>
                     </div>
                 </template>
diff --git a/src/views/chart/DoughnutChartDemo.vue b/src/views/chart/DoughnutChartDemo.vue
index 1ccb21cb6..5bab004d8 100755
--- a/src/views/chart/DoughnutChartDemo.vue
+++ b/src/views/chart/DoughnutChartDemo.vue
@@ -9,7 +9,7 @@
         </div>
 
         <div class="content-section implementation">
-            <div class="card p-d-flex p-jc-center">
+            <div class="card flex justify-content-center">
                 <Chart type="doughnut" :data="chartData" :options="chartOptions" style="width: 40%" />
             </div>
         </div>
diff --git a/src/views/chart/PieChartDemo.vue b/src/views/chart/PieChartDemo.vue
index 79d7dd4c7..5120e3585 100755
--- a/src/views/chart/PieChartDemo.vue
+++ b/src/views/chart/PieChartDemo.vue
@@ -9,7 +9,7 @@
         </div>
 
         <div class="content-section implementation">
-            <div class="card p-d-flex p-jc-center">
+            <div class="card flex justify-content-center">
                 <Chart type="pie" :data="chartData" :options="chartOptions" style="width: 40%" />
             </div>
         </div>
diff --git a/src/views/chart/PolarAreaChartDemo.vue b/src/views/chart/PolarAreaChartDemo.vue
index 4838e41f3..88d7474ae 100755
--- a/src/views/chart/PolarAreaChartDemo.vue
+++ b/src/views/chart/PolarAreaChartDemo.vue
@@ -9,7 +9,7 @@
         </div>
 
         <div class="content-section implementation">
-            <div class="card p-d-flex p-jc-center">
+            <div class="card flex justify-content-center">
                 <Chart type="polarArea" :data="chartData" :options="chartOptions" style="width: 40%" />
             </div>
         </div>
diff --git a/src/views/chart/RadarChartDemo.vue b/src/views/chart/RadarChartDemo.vue
index 7c3f5d768..4cfd06fc5 100755
--- a/src/views/chart/RadarChartDemo.vue
+++ b/src/views/chart/RadarChartDemo.vue
@@ -9,7 +9,7 @@
         </div>
 
         <div class="content-section implementation">
-            <div class="card p-d-flex p-jc-center">
+            <div class="card flex justify-content-center">
                 <Chart type="radar" :data="chartData" :options="chartOptions" style="width: 40%" />
             </div>
         </div>
diff --git a/src/views/checkbox/CheckboxDemo.vue b/src/views/checkbox/CheckboxDemo.vue
index 77e351ff4..edcfc8f19 100755
--- a/src/views/checkbox/CheckboxDemo.vue
+++ b/src/views/checkbox/CheckboxDemo.vue
@@ -11,31 +11,31 @@
         <div class="content-section implementation">
             <div class="card">
                 <h5>Basic</h5>
-                <div class="p-field-checkbox">
+                <div class="field-checkbox">
                     <Checkbox id="binary" v-model="checked" :binary="true" />
                     <label for="binary">{{checked}}</label>
                 </div>
 
                 <h5>Multiple</h5>
-                <div class="p-field-checkbox">
+                <div class="field-checkbox">
                     <Checkbox id="city1" name="city" value="Chicago" v-model="cities" />
                     <label for="city1">Chicago</label>
                 </div>
-                <div class="p-field-checkbox">
+                <div class="field-checkbox">
                     <Checkbox id="city2" name="city" value="Los Angeles" v-model="cities" />
                     <label for="city2">Los Angeles</label>
                 </div>
-                <div class="p-field-checkbox">
+                <div class="field-checkbox">
                     <Checkbox id="city3" name="city" value="New York" v-model="cities" />
                     <label for="city3">New York</label>
                 </div>
-                <div class="p-field-checkbox">
+                <div class="field-checkbox">
                     <Checkbox id="city4" name="city" value="San Francisco" v-model="cities" />
                     <label for="city4">San Francisco</label>
                 </div>
 
                 <h5>Dynamic Values, Preselection, Value Binding and Disabled Option</h5>
-                <div v-for="category of categories" :key="category.key" class="p-field-checkbox">
+                <div v-for="category of categories" :key="category.key" class="field-checkbox">
                     <Checkbox :id="category.key" name="category" :value="category" v-model="selectedCategories" :disabled="category.key === 'R'"/>
                     <label :for="category.key">{{category.name}}</label>
                 </div>
diff --git a/src/views/checkbox/CheckboxDoc.vue b/src/views/checkbox/CheckboxDoc.vue
index 9917ce028..0f2c15f46 100755
--- a/src/views/checkbox/CheckboxDoc.vue
+++ b/src/views/checkbox/CheckboxDoc.vue
@@ -177,31 +177,31 @@ export default {
 <template>
     <div>
         <h5>Basic</h5>
-        <div class="p-field-checkbox">
+        <div class="field-checkbox">
             <Checkbox id="binary" v-model="checked" :binary="true" />
             <label for="binary">{{checked}}</label>
         </div>
 
         <h5>Multiple</h5>
-        <div class="p-field-checkbox">
+        <div class="field-checkbox">
             <Checkbox id="city1" name="city" value="Chicago" v-model="cities" />
             <label for="city1">Chicago</label>
         </div>
-        <div class="p-field-checkbox">
+        <div class="field-checkbox">
             <Checkbox id="city2" name="city" value="Los Angeles" v-model="cities" />
             <label for="city2">Los Angeles</label>
         </div>
-        <div class="p-field-checkbox">
+        <div class="field-checkbox">
             <Checkbox id="city3" name="city" value="New York" v-model="cities" />
             <label for="city3">New York</label>
         </div>
-        <div class="p-field-checkbox">
+        <div class="field-checkbox">
             <Checkbox id="city4" name="city" value="San Francisco" v-model="cities" />
             <label for="city4">San Francisco</label>
         </div>
 
         <h5>Dynamic Values, Preselection, Value Binding and Disabled Option</h5>
-        <div v-for="category of categories" :key="category.key" class="p-field-checkbox">
+        <div v-for="category of categories" :key="category.key" class="field-checkbox">
             <Checkbox :id="category.key" name="category" :value="category" v-model="selectedCategories" :disabled="category.key === 'R'"/>
             <label :for="category.key">{{category.name}}</label>
         </div>
@@ -230,31 +230,31 @@ export default {
 <template>
     <div>
         <h5>Basic</h5>
-        <div class="p-field-checkbox">
+        <div class="field-checkbox">
             <Checkbox id="binary" v-model="checked" :binary="true" />
             <label for="binary">{{checked}}</label>
         </div>
 
         <h5>Multiple</h5>
-        <div class="p-field-checkbox">
+        <div class="field-checkbox">
             <Checkbox id="city1" name="city" value="Chicago" v-model="cities" />
             <label for="city1">Chicago</label>
         </div>
-        <div class="p-field-checkbox">
+        <div class="field-checkbox">
             <Checkbox id="city2" name="city" value="Los Angeles" v-model="cities" />
             <label for="city2">Los Angeles</label>
         </div>
-        <div class="p-field-checkbox">
+        <div class="field-checkbox">
             <Checkbox id="city3" name="city" value="New York" v-model="cities" />
             <label for="city3">New York</label>
         </div>
-        <div class="p-field-checkbox">
+        <div class="field-checkbox">
             <Checkbox id="city4" name="city" value="San Francisco" v-model="cities" />
             <label for="city4">San Francisco</label>
         </div>
 
         <h5>Dynamic Values, Preselection, Value Binding and Disabled Option</h5>
-        <div v-for="category of categories" :key="category.key" class="p-field-checkbox">
+        <div v-for="category of categories" :key="category.key" class="field-checkbox">
             <Checkbox :id="category.key" name="category" :value="category" v-model="selectedCategories" :disabled="category.key === 'R'"/>
             <label :for="category.key">{{category.name}}</label>
         </div>
@@ -285,31 +285,31 @@ export default {
                     imports: `<script src="https://unpkg.com/primevue@^3/checkbox/checkbox.min.js"><\\/script>`,
                     content: `<div id="app">
         <h5>Basic</h5>
-        <div class="p-field-checkbox">
+        <div class="field-checkbox">
             <p-checkbox id="binary" v-model="checked" :binary="true"></p-checkbox>
             <label for="binary">{{checked}}</label>
         </div>
 
         <h5>Multiple</h5>
-        <div class="p-field-checkbox">
+        <div class="field-checkbox">
             <p-checkbox id="city1" name="city" value="Chicago" v-model="cities"></p-checkbox>
             <label for="city1">Chicago</label>
         </div>
-        <div class="p-field-checkbox">
+        <div class="field-checkbox">
             <p-checkbox id="city2" name="city" value="Los Angeles" v-model="cities"></p-checkbox>
             <label for="city2">Los Angeles</label>
         </div>
-        <div class="p-field-checkbox">
+        <div class="field-checkbox">
             <p-checkbox id="city3" name="city" value="New York" v-model="cities"></p-checkbox>
             <label for="city3">New York</label>
         </div>
-        <div class="p-field-checkbox">
+        <div class="field-checkbox">
             <p-checkbox id="city4" name="city" value="San Francisco" v-model="cities"></p-checkbox>
             <label for="city4">San Francisco</label>
         </div>
 
         <h5>Dynamic Values, Preselection, Value Binding and Disabled Option</h5>
-        <div v-for="category of categories" :key="category.key" class="p-field-checkbox">
+        <div v-for="category of categories" :key="category.key" class="field-checkbox">
             <p-checkbox :id="category.key" name="category" :value="category" v-model="selectedCategories" :disabled="category.key === 'R'"></p-checkbox>
             <label :for="category.key">{{category.name}}</label>
         </div>
diff --git a/src/views/chip/ChipDemo.vue b/src/views/chip/ChipDemo.vue
index a103025de..7fd971c60 100644
--- a/src/views/chip/ChipDemo.vue
+++ b/src/views/chip/ChipDemo.vue
@@ -11,34 +11,34 @@
         <div class="content-section implementation">
             <div class="card">
                 <h5>Basic</h5>
-                <div class="p-d-flex p-ai-center">
-                    <Chip label="Action" class="p-mr-2" />
-                    <Chip label="Comedy" class="p-mr-2" />
-                    <Chip label="Mystery" class="p-mr-2" />
+                <div class="flex align-items-center">
+                    <Chip label="Action" class="mr-2" />
+                    <Chip label="Comedy" class="mr-2" />
+                    <Chip label="Mystery" class="mr-2" />
                     <Chip label="Thriller" removable />
                 </div>
 
                 <h5>Icon</h5>
-                <div class="p-d-flex p-ai-center">
-                    <Chip label="Apple" icon="pi pi-apple" class="p-mr-2" />
-                    <Chip label="Facebook" icon="pi pi-facebook" class="p-mr-2" />
-                    <Chip label="Google" icon="pi pi-google" class="p-mr-2" />
+                <div class="flex align-items-center">
+                    <Chip label="Apple" icon="pi pi-apple" class="mr-2" />
+                    <Chip label="Facebook" icon="pi pi-facebook" class="mr-2" />
+                    <Chip label="Google" icon="pi pi-google" class="mr-2" />
                     <Chip label="Microsoft" icon="pi pi-microsoft" removable />
                 </div>
 
                 <h5>Image</h5>
-                <div class="p-d-flex p-ai-center">
-                    <Chip label="Amy Elsner" image="demo/images/avatar/amyelsner.png" class="p-mr-2" />
-                    <Chip label="Asiya Javayant" image="demo/images/avatar/asiyajavayant.png" class="p-mr-2" />
-                    <Chip label="Onyama Limba" image="demo/images/avatar/onyamalimba.png" class="p-mr-2" />
+                <div class="flex align-items-center">
+                    <Chip label="Amy Elsner" image="demo/images/avatar/amyelsner.png" class="mr-2" />
+                    <Chip label="Asiya Javayant" image="demo/images/avatar/asiyajavayant.png" class="mr-2" />
+                    <Chip label="Onyama Limba" image="demo/images/avatar/onyamalimba.png" class="mr-2" />
                     <Chip label="Xuxue Feng" image="demo/images/avatar/xuxuefeng.png" removable />
                 </div>
 
                 <h5>Styling</h5>
-                <div class="p-d-flex p-ai-center">
-                    <Chip label="Action" class="p-mr-2 custom-chip" />
-                    <Chip label="Apple" icon="pi pi-apple" class="p-mr-2 custom-chip" />
-                    <Chip label="Onyama Limba" image="demo/images/avatar/onyamalimba.png" class="p-mr-2 custom-chip" />
+                <div class="flex align-items-center">
+                    <Chip label="Action" class="mr-2 custom-chip" />
+                    <Chip label="Apple" icon="pi pi-apple" class="mr-2 custom-chip" />
+                    <Chip label="Onyama Limba" image="demo/images/avatar/onyamalimba.png" class="mr-2 custom-chip" />
                     <Chip label="Xuxue Feng" image="demo/images/avatar/xuxuefeng.png" class="custom-chip" removable />
                 </div>
             </div>
diff --git a/src/views/chip/ChipDoc.vue b/src/views/chip/ChipDoc.vue
index 6db58cabd..7683a8282 100644
--- a/src/views/chip/ChipDoc.vue
+++ b/src/views/chip/ChipDoc.vue
@@ -153,35 +153,35 @@ export default {
 <template>
     <div>
         <h5>Basic</h5>
-        <div class="p-d-flex p-ai-center p-flex-column p-flex-sm-row">
-            <Chip label="Action" class="p-mr-2 p-mb-2" />
-            <Chip label="Comedy" class="p-mr-2 p-mb-2" />
-            <Chip label="Mystery" class="p-mr-2 p-mb-2" />
-            <Chip label="Thriller" class="p-mb-2" removable />
+        <div class="flex align-items-center flex-column sm:flex-row">
+            <Chip label="Action" class="mr-2 mb-2" />
+            <Chip label="Comedy" class="mr-2 mb-2" />
+            <Chip label="Mystery" class="mr-2 mb-2" />
+            <Chip label="Thriller" class="mb-2" removable />
         </div>
 
         <h5>Icon</h5>
-        <div class="p-d-flex p-ai-center p-flex-column p-flex-sm-row">
-            <Chip label="Apple" icon="pi pi-apple" class="p-mr-2 p-mb-2" />
-            <Chip label="Facebook" icon="pi pi-facebook" class="p-mr-2 p-mb-2" />
-            <Chip label="Google" icon="pi pi-google" class="p-mr-2 p-mb-2" />
-            <Chip label="Microsoft" icon="pi pi-microsoft" class="p-mb-2" removable />
+        <div class="flex align-items-center flex-column sm:flex-row">
+            <Chip label="Apple" icon="pi pi-apple" class="mr-2 mb-2" />
+            <Chip label="Facebook" icon="pi pi-facebook" class="mr-2 mb-2" />
+            <Chip label="Google" icon="pi pi-google" class="mr-2 mb-2" />
+            <Chip label="Microsoft" icon="pi pi-microsoft" class="mb-2" removable />
         </div>
 
         <h5>Image</h5>
-        <div class="p-d-flex p-ai-center p-flex-column p-flex-sm-row">
-            <Chip label="Amy Elsner" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2 p-mb-2" />
-            <Chip label="Asiya Javayant" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2 p-mb-2" />
-            <Chip label="Onyama Limba" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2 p-mb-2" />
-            <Chip label="Xuxue Feng" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mb-2" removable />
+        <div class="flex align-items-center flex-column sm:flex-row">
+            <Chip label="Amy Elsner" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="mr-2 mb-2" />
+            <Chip label="Asiya Javayant" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="mr-2 mb-2" />
+            <Chip label="Onyama Limba" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="mr-2 mb-2" />
+            <Chip label="Xuxue Feng" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="mb-2" removable />
         </div>
 
         <h5>Styling</h5>
-        <div class="p-d-flex p-ai-center p-flex-column p-flex-sm-row">
-            <Chip label="Action" class="p-mr-2 p-mb-2 custom-chip" />
-            <Chip label="Apple" icon="pi pi-apple" class="p-mr-2 p-mb-2 custom-chip" />
-            <Chip label="Onyama Limba" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2 p-mb-2 custom-chip" />
-            <Chip label="Xuxue Feng" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="custom-chip p-mb-2" removable />
+        <div class="flex align-items-center flex-column sm:flex-row">
+            <Chip label="Action" class="mr-2 mb-2 custom-chip" />
+            <Chip label="Apple" icon="pi pi-apple" class="mr-2 mb-2 custom-chip" />
+            <Chip label="Onyama Limba" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="mr-2 mb-2 custom-chip" />
+            <Chip label="Xuxue Feng" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="custom-chip mb-2" removable />
         </div>
     </div>
 </template>
@@ -204,35 +204,35 @@ export default {
 <template>
     <div>
         <h5>Basic</h5>
-        <div class="p-d-flex p-ai-center p-flex-column p-flex-sm-row">
-            <Chip label="Action" class="p-mr-2 p-mb-2" />
-            <Chip label="Comedy" class="p-mr-2 p-mb-2" />
-            <Chip label="Mystery" class="p-mr-2 p-mb-2" />
-            <Chip label="Thriller" class="p-mb-2" removable />
+        <div class="flex align-items-center flex-column sm:flex-row">
+            <Chip label="Action" class="mr-2 mb-2" />
+            <Chip label="Comedy" class="mr-2 mb-2" />
+            <Chip label="Mystery" class="mr-2 mb-2" />
+            <Chip label="Thriller" class="mb-2" removable />
         </div>
 
         <h5>Icon</h5>
-        <div class="p-d-flex p-ai-center p-flex-column p-flex-sm-row">
-            <Chip label="Apple" icon="pi pi-apple" class="p-mr-2 p-mb-2" />
-            <Chip label="Facebook" icon="pi pi-facebook" class="p-mr-2 p-mb-2" />
-            <Chip label="Google" icon="pi pi-google" class="p-mr-2 p-mb-2" />
-            <Chip label="Microsoft" icon="pi pi-microsoft" class="p-mb-2" removable />
+        <div class="flex align-items-center flex-column sm:flex-row">
+            <Chip label="Apple" icon="pi pi-apple" class="mr-2 mb-2" />
+            <Chip label="Facebook" icon="pi pi-facebook" class="mr-2 mb-2" />
+            <Chip label="Google" icon="pi pi-google" class="mr-2 mb-2" />
+            <Chip label="Microsoft" icon="pi pi-microsoft" class="mb-2" removable />
         </div>
 
         <h5>Image</h5>
-        <div class="p-d-flex p-ai-center p-flex-column p-flex-sm-row">
-            <Chip label="Amy Elsner" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2 p-mb-2" />
-            <Chip label="Asiya Javayant" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2 p-mb-2" />
-            <Chip label="Onyama Limba" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2 p-mb-2" />
-            <Chip label="Xuxue Feng" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mb-2" removable />
+        <div class="flex align-items-center flex-column sm:flex-row">
+            <Chip label="Amy Elsner" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="mr-2 mb-2" />
+            <Chip label="Asiya Javayant" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="mr-2 mb-2" />
+            <Chip label="Onyama Limba" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="mr-2 mb-2" />
+            <Chip label="Xuxue Feng" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="mb-2" removable />
         </div>
 
         <h5>Styling</h5>
-        <div class="p-d-flex p-ai-center p-flex-column p-flex-sm-row">
-            <Chip label="Action" class="p-mr-2 p-mb-2 custom-chip" />
-            <Chip label="Apple" icon="pi pi-apple" class="p-mr-2 p-mb-2 custom-chip" />
-            <Chip label="Onyama Limba" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2 p-mb-2 custom-chip" />
-            <Chip label="Xuxue Feng" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="custom-chip p-mb-2" removable />
+        <div class="flex align-items-center flex-column sm:flex-row">
+            <Chip label="Action" class="mr-2 mb-2 custom-chip" />
+            <Chip label="Apple" icon="pi pi-apple" class="mr-2 mb-2 custom-chip" />
+            <Chip label="Onyama Limba" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="mr-2 mb-2 custom-chip" />
+            <Chip label="Xuxue Feng" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="custom-chip mb-2" removable />
         </div>
     </div>
 </template>
@@ -254,35 +254,35 @@ export default {
 					imports: `<script src="https://unpkg.com/primevue@^3/chip/chip.min.js"><\\/script>`,
 					content: `<div id="app">
 		<h5>Basic</h5>
-        <div class="p-d-flex p-ai-center p-flex-column p-flex-sm-row">
-            <p-chip label="Action" class="p-mr-2 p-mb-2"></p-chip>
-            <p-chip label="Comedy" class="p-mr-2 p-mb-2"></p-chip>
-            <p-chip label="Mystery" class="p-mr-2 p-mb-2"></p-chip>
-            <p-chip label="Thriller" class="p-mb-2" removable></p-chip>
+        <div class="flex align-items-center flex-column sm:flex-row">
+            <p-chip label="Action" class="mr-2 mb-2"></p-chip>
+            <p-chip label="Comedy" class="mr-2 mb-2"></p-chip>
+            <p-chip label="Mystery" class="mr-2 mb-2"></p-chip>
+            <p-chip label="Thriller" class="mb-2" removable></p-chip>
         </div>
 
         <h5>Icon</h5>
-        <div class="p-d-flex p-ai-center p-flex-column p-flex-sm-row">
-            <p-chip label="Apple" icon="pi pi-apple" class="p-mr-2 p-mb-2"></p-chip>
-            <p-chip label="Facebook" icon="pi pi-facebook" class="p-mr-2 p-mb-2"></p-chip>
-            <p-chip label="Google" icon="pi pi-google" class="p-mr-2 p-mb-2"></p-chip>
-            <p-chip label="Microsoft" icon="pi pi-microsoft" class="p-mb-2" removable></p-chip>
+        <div class="flex align-items-center flex-column sm:flex-row">
+            <p-chip label="Apple" icon="pi pi-apple" class="mr-2 mb-2"></p-chip>
+            <p-chip label="Facebook" icon="pi pi-facebook" class="mr-2 mb-2"></p-chip>
+            <p-chip label="Google" icon="pi pi-google" class="mr-2 mb-2"></p-chip>
+            <p-chip label="Microsoft" icon="pi pi-microsoft" class="mb-2" removable></p-chip>
         </div>
 
         <h5>Image</h5>
-        <div class="p-d-flex p-ai-center p-flex-column p-flex-sm-row">
-            <p-chip label="Amy Elsner" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2 p-mb-2"></p-chip>
-            <p-chip label="Asiya Javayant" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2 p-mb-2"></p-chip>
-            <p-chip label="Onyama Limba" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2 p-mb-2"></p-chip>
-            <p-chip label="Xuxue Feng" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mb-2" removable></p-chip>
+        <div class="flex align-items-center flex-column sm:flex-row">
+            <p-chip label="Amy Elsner" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="mr-2 mb-2"></p-chip>
+            <p-chip label="Asiya Javayant" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="mr-2 mb-2"></p-chip>
+            <p-chip label="Onyama Limba" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="mr-2 mb-2"></p-chip>
+            <p-chip label="Xuxue Feng" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="mb-2" removable></p-chip>
         </div>
 
         <h5>Styling</h5>
-        <div class="p-d-flex p-ai-center p-flex-column p-flex-sm-row">
-            <p-chip label="Action" class="p-mr-2 p-mb-2 custom-chip"></p-chip>
-            <p-chip label="Apple" icon="pi pi-apple" class="p-mr-2 p-mb-2 custom-chip"></p-chip>
-            <p-chip label="Onyama Limba" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2 p-mb-2 custom-chip"></p-chip>
-            <p-chip label="Xuxue Feng" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="custom-chip p-mb-2" removable></p-chip>
+        <div class="flex align-items-center flex-column sm:flex-row">
+            <p-chip label="Action" class="mr-2 mb-2 custom-chip"></p-chip>
+            <p-chip label="Apple" icon="pi pi-apple" class="mr-2 mb-2 custom-chip"></p-chip>
+            <p-chip label="Onyama Limba" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="mr-2 mb-2 custom-chip"></p-chip>
+            <p-chip label="Xuxue Feng" image="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="custom-chip mb-2" removable></p-chip>
         </div>
 	</div>
 
diff --git a/src/views/colors/ColorsDemo.vue b/src/views/colors/ColorsDemo.vue
index 8bff12243..21e2ebb70 100644
--- a/src/views/colors/ColorsDemo.vue
+++ b/src/views/colors/ColorsDemo.vue
@@ -1,5 +1,5 @@
 <template>
-     <div>
+    <div>
         <div class="content-section documentation">
             <h1>Colors</h1>
             <p>Each PrimeVue theme exports its own color palette.</p>
@@ -57,8 +57,8 @@
 </code></pre>
 
             <div class="card"> 
-                <div class="p-d-flex p-flex-wrap">
-                    <div v-for="color of colors" :key="color" class="color-stack p-mr-6 p-mb-6">
+                <div class="flex flex-wrap">
+                    <div v-for="color of colors" :key="color" class="color-stack mr-6 mb-6">
                         <template v-for="shade of shades" :key="shade">
                             <div v-if="shade !== 0" class="color-box"
                                 :style="{backgroundColor:`var(--${color}-${shade})`, color: (shade > 500 ? '#fff': '#000')}">
diff --git a/src/views/confirmdialog/ConfirmDialogDemo.vue b/src/views/confirmdialog/ConfirmDialogDemo.vue
index d6464615e..c849f4f69 100644
--- a/src/views/confirmdialog/ConfirmDialogDemo.vue
+++ b/src/views/confirmdialog/ConfirmDialogDemo.vue
@@ -14,23 +14,23 @@
 
             <div class="card">
                 <h5>Basic</h5>
-                <Button @click="confirm1()" icon="pi pi-check" label="Confirm" class="p-mr-2"></Button>
+                <Button @click="confirm1()" icon="pi pi-check" label="Confirm" class="mr-2"></Button>
                 <Button @click="confirm2()" icon="pi pi-times" label="Delete"></Button>
 
                 <h5>Position</h5>
-                <div class="p-grid p-dir-col">
-                    <div class="p-col">
-                        <Button @click="confirmPosition('left')" icon="pi pi-arrow-right" label="Left" class="p-button-help p-mr-2"></Button>
+                <div class="grid flex-column">
+                    <div class="col">
+                        <Button @click="confirmPosition('left')" icon="pi pi-arrow-right" label="Left" class="p-button-help mr-2"></Button>
                         <Button @click="confirmPosition('right')" icon="pi pi-arrow-left" label="Right" class="p-button-help"></Button>
                     </div>
-                    <div class="p-col">
-                        <Button @click="confirmPosition('topleft')" icon="pi pi-arrow-down-right" label="TopLeft" class="p-button-warning p-mr-2"></Button>
-                        <Button @click="confirmPosition('top')" icon="pi pi-arrow-down" label="Top" class="p-button-warning p-mr-2"></Button>
+                    <div class="col">
+                        <Button @click="confirmPosition('topleft')" icon="pi pi-arrow-down-right" label="TopLeft" class="p-button-warning mr-2"></Button>
+                        <Button @click="confirmPosition('top')" icon="pi pi-arrow-down" label="Top" class="p-button-warning mr-2"></Button>
                         <Button @click="confirmPosition('topright')" icon="pi pi-arrow-down-left" label="TopRight" class="p-button-warning"></Button>
                     </div>
-                    <div class="p-col">
-                        <Button @click="confirmPosition('bottomleft')" icon="pi pi-arrow-up-right" label="BottomLeft" class="p-button-success p-mr-2"></Button>
-                        <Button @click="confirmPosition('bottom')" icon="pi pi-arrow-up" label="Bottom" class="p-button-success p-mr-2"></Button>
+                    <div class="col">
+                        <Button @click="confirmPosition('bottomleft')" icon="pi pi-arrow-up-right" label="BottomLeft" class="p-button-success mr-2"></Button>
+                        <Button @click="confirmPosition('bottom')" icon="pi pi-arrow-up" label="Bottom" class="p-button-success mr-2"></Button>
                         <Button @click="confirmPosition('bottomright')" icon="pi pi-arrow-up-left" label="BottomRight" class="p-button-success"></Button>
                     </div>
                 </div>
diff --git a/src/views/confirmdialog/ConfirmDialogDoc.vue b/src/views/confirmdialog/ConfirmDialogDoc.vue
index 64a2923fa..e3d9d4091 100644
--- a/src/views/confirmdialog/ConfirmDialogDoc.vue
+++ b/src/views/confirmdialog/ConfirmDialogDoc.vue
@@ -271,23 +271,23 @@ export default {
 
         <div class="card">
             <h5>Basic</h5>
-            <Button @click="confirm1()" icon="pi pi-check" label="Confirm" class="p-mr-2"></Button>
+            <Button @click="confirm1()" icon="pi pi-check" label="Confirm" class="mr-2"></Button>
             <Button @click="confirm2()" icon="pi pi-times" label="Delete"></Button>
 
             <h5>Position</h5>
-            <div class="p-grid p-dir-col">
+            <div class="grid flex-column">
                 <div class="p-col">
-                    <Button @click="confirmPosition('left')" icon="pi pi-arrow-right" label="Left" class="p-button-help p-mr-2"></Button>
+                    <Button @click="confirmPosition('left')" icon="pi pi-arrow-right" label="Left" class="p-button-help mr-2"></Button>
                     <Button @click="confirmPosition('right')" icon="pi pi-arrow-left" label="Right" class="p-button-help"></Button>
                 </div>
                 <div class="p-col">
-                    <Button @click="confirmPosition('topleft')" icon="pi pi-arrow-down-right" label="TopLeft" class="p-button-warning p-mr-2"></Button>
-                    <Button @click="confirmPosition('top')" icon="pi pi-arrow-down" label="Top" class="p-button-warning p-mr-2"></Button>
+                    <Button @click="confirmPosition('topleft')" icon="pi pi-arrow-down-right" label="TopLeft" class="p-button-warning mr-2"></Button>
+                    <Button @click="confirmPosition('top')" icon="pi pi-arrow-down" label="Top" class="p-button-warning mr-2"></Button>
                     <Button @click="confirmPosition('topright')" icon="pi pi-arrow-down-left" label="TopRight" class="p-button-warning"></Button>
                 </div>
                 <div class="p-col">
-                    <Button @click="confirmPosition('bottomleft')" icon="pi pi-arrow-up-right" label="BottomLeft" class="p-button-success p-mr-2"></Button>
-                    <Button @click="confirmPosition('bottom')" icon="pi pi-arrow-up" label="Bottom" class="p-button-success p-mr-2"></Button>
+                    <Button @click="confirmPosition('bottomleft')" icon="pi pi-arrow-up-right" label="BottomLeft" class="p-button-success mr-2"></Button>
+                    <Button @click="confirmPosition('bottom')" icon="pi pi-arrow-up" label="Bottom" class="p-button-success mr-2"></Button>
                     <Button @click="confirmPosition('bottomright')" icon="pi pi-arrow-up-left" label="BottomRight" class="p-button-success"></Button>
                 </div>
             </div>
@@ -356,23 +356,23 @@ export default {
 
         <div class="card">
             <h5>Basic</h5>
-            <Button @click="confirm1()" icon="pi pi-check" label="Confirm" class="p-mr-2"></Button>
+            <Button @click="confirm1()" icon="pi pi-check" label="Confirm" class="mr-2"></Button>
             <Button @click="confirm2()" icon="pi pi-times" label="Delete"></Button>
 
             <h5>Position</h5>
-            <div class="p-grid p-dir-col">
+            <div class="grid flex-column">
                 <div class="p-col">
-                    <Button @click="confirmPosition('left')" icon="pi pi-arrow-right" label="Left" class="p-button-help p-mr-2"></Button>
+                    <Button @click="confirmPosition('left')" icon="pi pi-arrow-right" label="Left" class="p-button-help mr-2"></Button>
                     <Button @click="confirmPosition('right')" icon="pi pi-arrow-left" label="Right" class="p-button-help"></Button>
                 </div>
                 <div class="p-col">
-                    <Button @click="confirmPosition('topleft')" icon="pi pi-arrow-down-right" label="TopLeft" class="p-button-warning p-mr-2"></Button>
-                    <Button @click="confirmPosition('top')" icon="pi pi-arrow-down" label="Top" class="p-button-warning p-mr-2"></Button>
+                    <Button @click="confirmPosition('topleft')" icon="pi pi-arrow-down-right" label="TopLeft" class="p-button-warning mr-2"></Button>
+                    <Button @click="confirmPosition('top')" icon="pi pi-arrow-down" label="Top" class="p-button-warning mr-2"></Button>
                     <Button @click="confirmPosition('topright')" icon="pi pi-arrow-down-left" label="TopRight" class="p-button-warning"></Button>
                 </div>
                 <div class="p-col">
-                    <Button @click="confirmPosition('bottomleft')" icon="pi pi-arrow-up-right" label="BottomLeft" class="p-button-success p-mr-2"></Button>
-                    <Button @click="confirmPosition('bottom')" icon="pi pi-arrow-up" label="Bottom" class="p-button-success p-mr-2"></Button>
+                    <Button @click="confirmPosition('bottomleft')" icon="pi pi-arrow-up-right" label="BottomLeft" class="p-button-success mr-2"></Button>
+                    <Button @click="confirmPosition('bottom')" icon="pi pi-arrow-up" label="Bottom" class="p-button-success mr-2"></Button>
                     <Button @click="confirmPosition('bottomright')" icon="pi pi-arrow-up-left" label="BottomRight" class="p-button-success"></Button>
                 </div>
             </div>
@@ -454,23 +454,23 @@ export default defineComponent({
 
             <div class="card">
                 <h5>Basic</h5>
-                <p-button @click="confirm1()" icon="pi pi-check" label="Confirm" class="p-mr-2"></p-button>
+                <p-button @click="confirm1()" icon="pi pi-check" label="Confirm" class="mr-2"></p-button>
                 <p-button @click="confirm2()" icon="pi pi-times" label="Delete"></p-button>
 
                 <h5>Position</h5>
-                <div class="p-grid p-dir-col">
+                <div class="grid flex-column">
                     <div class="p-col">
-                        <p-button @click="confirmPosition('left')" icon="pi pi-arrow-right" label="Left" class="p-button-help p-mr-2"></p-button>
+                        <p-button @click="confirmPosition('left')" icon="pi pi-arrow-right" label="Left" class="p-button-help mr-2"></p-button>
                         <p-button @click="confirmPosition('right')" icon="pi pi-arrow-left" label="Right" class="p-button-help"></p-button>
                     </div>
                     <div class="p-col">
-                        <p-button @click="confirmPosition('topleft')" icon="pi pi-arrow-down-right" label="TopLeft" class="p-button-warning p-mr-2"></p-button>
-                        <p-button @click="confirmPosition('top')" icon="pi pi-arrow-down" label="Top" class="p-button-warning p-mr-2"></p-button>
+                        <p-button @click="confirmPosition('topleft')" icon="pi pi-arrow-down-right" label="TopLeft" class="p-button-warning mr-2"></p-button>
+                        <p-button @click="confirmPosition('top')" icon="pi pi-arrow-down" label="Top" class="p-button-warning mr-2"></p-button>
                         <p-button @click="confirmPosition('topright')" icon="pi pi-arrow-down-left" label="TopRight" class="p-button-warning"></p-button>
                     </div>
                     <div class="p-col">
-                        <p-button @click="confirmPosition('bottomleft')" icon="pi pi-arrow-up-right" label="BottomLeft" class="p-button-success p-mr-2"></p-button>
-                        <p-button @click="confirmPosition('bottom')" icon="pi pi-arrow-up" label="Bottom" class="p-button-success p-mr-2"></p-button>
+                        <p-button @click="confirmPosition('bottomleft')" icon="pi pi-arrow-up-right" label="BottomLeft" class="p-button-success mr-2"></p-button>
+                        <p-button @click="confirmPosition('bottom')" icon="pi pi-arrow-up" label="Bottom" class="p-button-success mr-2"></p-button>
                         <p-button @click="confirmPosition('bottomright')" icon="pi pi-arrow-up-left" label="BottomRight" class="p-button-success"></p-button>
                     </div>
                 </div>
diff --git a/src/views/confirmpopup/ConfirmPopupDemo.vue b/src/views/confirmpopup/ConfirmPopupDemo.vue
index d1aa64c1a..3e8706d70 100644
--- a/src/views/confirmpopup/ConfirmPopupDemo.vue
+++ b/src/views/confirmpopup/ConfirmPopupDemo.vue
@@ -12,20 +12,20 @@
             <ConfirmPopup></ConfirmPopup>
             <ConfirmPopup group="demo">
                 <template #message="slotProps">
-                    <div class="p-d-flex p-p-4">
+                    <div class="flex p-4">
                         <i :class="slotProps.message.icon" style="font-size: 1.5rem"></i>
-                        <p class="p-pl-2">{{slotProps.message.message}}</p>
+                        <p class="pl-2">{{slotProps.message.message}}</p>
                     </div>
                 </template>
             </ConfirmPopup>
 
             <div class="card">
                 <h5>Overlay</h5>
-                <Button @click="confirm1($event)" icon="pi pi-check" label="Confirm" class="p-mr-2"></Button>
+                <Button @click="confirm1($event)" icon="pi pi-check" label="Confirm" class="mr-2"></Button>
                 <Button @click="confirm2($event)" icon="pi pi-times" label="Delete" class="p-button-danger p-button-outlined"></Button>
         
                 <h5>Templating</h5>
-                <Button @click="showTemplate($event)" icon="pi pi-check" label="Terms and Conditions" class="p-mr-2"></Button>
+                <Button @click="showTemplate($event)" icon="pi pi-check" label="Terms and Conditions" class="mr-2"></Button>
             </div>
         </div>
 
diff --git a/src/views/confirmpopup/ConfirmPopupDoc.vue b/src/views/confirmpopup/ConfirmPopupDoc.vue
index 6580e7b85..c06264a8b 100644
--- a/src/views/confirmpopup/ConfirmPopupDoc.vue
+++ b/src/views/confirmpopup/ConfirmPopupDoc.vue
@@ -102,9 +102,9 @@ export default {
 <pre v-code><code><template v-pre>
 &lt;ConfirmPopup group="demo">
     &lt;template #message="slotProps"&gt;
-        &lt;div class="p-d-flex p-p-4"&gt;
+        &lt;div class="flex p-4"&gt;
             &lt;i :class="slotProps.message.icon" style="font-size: 1.5rem"&gt;&lt;/i&gt;
-            &lt;p class="p-pl-2"&gt;{{slotProps.message.message}}&lt;/p&gt;
+            &lt;p class="pl-2"&gt;{{slotProps.message.message}}&lt;/p&gt;
         &lt;/div&gt;
     &lt;/template&gt;
 &lt;/ConfirmPopup&gt;
@@ -295,9 +295,9 @@ export default {
         <ConfirmPopup></ConfirmPopup>
         <ConfirmPopup group="demo">
             <template #message="slotProps">
-                <div class="p-d-flex p-p-4">
+                <div class="flex p-4">
                     <i :class="slotProps.message.icon" style="font-size: 1.5rem"></i>
-                    <p class="p-pl-2">{{slotProps.message.message}}</p>
+                    <p class="pl-2">{{slotProps.message.message}}</p>
                 </div>
             </template>
         </ConfirmPopup>
@@ -305,11 +305,11 @@ export default {
 
         <div class="card">
             <h5>Overlay</h5>
-            <Button @click="confirm1($event)" icon="pi pi-check" label="Confirm" class="p-mr-2"></Button>
+            <Button @click="confirm1($event)" icon="pi pi-check" label="Confirm" class="mr-2"></Button>
             <Button @click="confirm2($event)" icon="pi pi-times" label="Delete" class="p-button-danger p-button-outlined"></Button>
     
             <h5>Templating</h5>
-            <Button @click="showTemplate($event)" icon="pi pi-check" label="Terms and Conditions" class="p-mr-2"></Button>
+            <Button @click="showTemplate($event)" icon="pi pi-check" label="Terms and Conditions" class="mr-2"></Button>
         </div>
     </div>
 </template>
@@ -372,9 +372,9 @@ export default {
         <ConfirmPopup></ConfirmPopup>
         <ConfirmPopup group="demo">
             <template #message="slotProps">
-                <div class="p-d-flex p-p-4">
+                <div class="flex p-4">
                     <i :class="slotProps.message.icon" style="font-size: 1.5rem"></i>
-                    <p class="p-pl-2">{{slotProps.message.message}}</p>
+                    <p class="pl-2">{{slotProps.message.message}}</p>
                 </div>
             </template>
         </ConfirmPopup>
@@ -382,11 +382,11 @@ export default {
 
         <div class="card">
             <h5>Overlay</h5>
-            <Button @click="confirm1($event)" icon="pi pi-check" label="Confirm" class="p-mr-2"></Button>
+            <Button @click="confirm1($event)" icon="pi pi-check" label="Confirm" class="mr-2"></Button>
             <Button @click="confirm2($event)" icon="pi pi-times" label="Delete" class="p-button-danger p-button-outlined"></Button>
     
             <h5>Templating</h5>
-            <Button @click="showTemplate($event)" icon="pi pi-check" label="Terms and Conditions" class="p-mr-2"></Button>
+            <Button @click="showTemplate($event)" icon="pi pi-check" label="Terms and Conditions" class="mr-2"></Button>
         </div>
     </div>
 </template>
@@ -463,9 +463,9 @@ export default defineComponent({
             <p-confirmpopup></p-confirmpopup>
             <p-confirmpopup group="demo">
                 <template #message="slotProps">
-                    <div class="p-d-flex p-p-4">
+                    <div class="flex p-4">
                         <i :class="slotProps.message.icon" style="font-size: 1.5rem"></i>
-                        <p class="p-pl-2">{{slotProps.message.message}}</p>
+                        <p class="pl-2">{{slotProps.message.message}}</p>
                     </div>
                 </template>
             </p-confirmpopup>
@@ -473,11 +473,11 @@ export default defineComponent({
 
             <div class="card">
                 <h5>Overlay</h5>
-                <p-button @click="confirm1($event)" icon="pi pi-check" label="Confirm" class="p-mr-2"></p-button>
+                <p-button @click="confirm1($event)" icon="pi pi-check" label="Confirm" class="mr-2"></p-button>
                 <p-button @click="confirm2($event)" icon="pi pi-times" label="Delete" class="p-button-danger p-button-outlined"></p-button>
 
                 <h5>Templating</h5>
-                <p-button @click="showTemplate($event)" icon="pi pi-check" label="Terms and Conditions" class="p-mr-2"></p-button>
+                <p-button @click="showTemplate($event)" icon="pi pi-check" label="Terms and Conditions" class="mr-2"></p-button>
             </div>
         </div>
 
diff --git a/src/views/contextmenu/ContextMenuDemo.vue b/src/views/contextmenu/ContextMenuDemo.vue
index 56cef2285..7b426c780 100755
--- a/src/views/contextmenu/ContextMenuDemo.vue
+++ b/src/views/contextmenu/ContextMenuDemo.vue
@@ -27,135 +27,133 @@ export default {
         return {
             items: [
                 {
-                   label:'File',
-                   icon:'pi pi-fw pi-file',
-                   items:[
-                      {
-                         label:'New',
-                         icon:'pi pi-fw pi-plus',
-                         items:[
-                            {
-                               label:'Bookmark',
-                               icon:'pi pi-fw pi-bookmark'
-                            },
-                            {
-                               label:'Video',
-                               icon:'pi pi-fw pi-video'
-                            },
-
-                         ]
-                      },
-                      {
-                         label:'Delete',
-                         icon:'pi pi-fw pi-trash'
-                      },
-                      {
-                         separator:true
-                      },
-                      {
-                         label:'Export',
-                         icon:'pi pi-fw pi-external-link'
-                      }
-                   ]
+                    label:'File',
+                    icon:'pi pi-fw pi-file',
+                    items:[
+                        {
+                            label:'New',
+                            icon:'pi pi-fw pi-plus',
+                            items:[
+                                {
+                                    label:'Bookmark',
+                                    icon:'pi pi-fw pi-bookmark'
+                                },
+                                {
+                                    label:'Video',
+                                    icon:'pi pi-fw pi-video'
+                                },
+                                ]
+                        },
+                        {
+                            label:'Delete',
+                            icon:'pi pi-fw pi-trash'
+                        },
+                        {
+                            separator:true
+                        },
+                        {
+                            label:'Export',
+                            icon:'pi pi-fw pi-external-link'
+                        }
+                    ]
                 },
                 {
-                   label:'Edit',
-                   icon:'pi pi-fw pi-pencil',
-                   items:[
-                      {
-                         label:'Left',
-                         icon:'pi pi-fw pi-align-left'
-                      },
-                      {
-                         label:'Right',
-                         icon:'pi pi-fw pi-align-right'
-                      },
-                      {
-                         label:'Center',
-                         icon:'pi pi-fw pi-align-center'
-                      },
-                      {
-                         label:'Justify',
-                         icon:'pi pi-fw pi-align-justify'
-                      },
+                    label:'Edit',
+                    icon:'pi pi-fw pi-pencil',
+                    items:[
+                        {
+                            label:'Left',
+                            icon:'pi pi-fw pi-align-left'
+                        },
+                        {
+                            label:'Right',
+                            icon:'pi pi-fw pi-align-right'
+                        },
+                        {
+                            label:'Center',
+                            icon:'pi pi-fw pi-align-center'
+                        },
+                        {
+                            label:'Justify',
+                            icon:'pi pi-fw pi-align-justify'
+                        },
 
-                   ]
+                    ]
                 },
                 {
-                   label:'Users',
-                   icon:'pi pi-fw pi-user',
-                   items:[
-                      {
-                         label:'New',
-                         icon:'pi pi-fw pi-user-plus',
+                    label:'Users',
+                    icon:'pi pi-fw pi-user',
+                    items:[
+                        {
+                            label:'New',
+                            icon:'pi pi-fw pi-user-plus',
 
-                      },
-                      {
-                         label:'Delete',
-                         icon:'pi pi-fw pi-user-minus',
+                        },
+                        {
+                            label:'Delete',
+                            icon:'pi pi-fw pi-user-minus',
 
-                      },
-                      {
-                         label:'Search',
-                         icon:'pi pi-fw pi-users',
-                         items:[
-                            {
-                               label:'Filter',
-                               icon:'pi pi-fw pi-filter',
-                               items:[
-                                  {
-                                     label:'Print',
-                                     icon:'pi pi-fw pi-print'
-                                  }
-                               ]
-                            },
-                            {
-                               icon:'pi pi-fw pi-bars',
-                               label:'List'
-                            }
-                         ]
-                      }
-                   ]
+                        },
+                        {
+                            label:'Search',
+                            icon:'pi pi-fw pi-users',
+                            items:[
+                                {
+                                    label:'Filter',
+                                    icon:'pi pi-fw pi-filter',
+                                    items:[
+                                        {
+                                            label:'Print',
+                                            icon:'pi pi-fw pi-print'
+                                        }
+                                    ]
+                                },
+                                {
+                                    icon:'pi pi-fw pi-bars',
+                                    label:'List'
+                                }
+                            ]
+                        }
+                    ]
                 },
                 {
-                   label:'Events',
-                   icon:'pi pi-fw pi-calendar',
-                   items:[
-                      {
-                         label:'Edit',
-                         icon:'pi pi-fw pi-pencil',
-                         items:[
-                            {
-                               label:'Save',
-                               icon:'pi pi-fw pi-calendar-plus'
-                            },
-                            {
-                               label:'Delete',
-                               icon:'pi pi-fw pi-calendar-minus'
-                            },
-
-                         ]
-                      },
-                      {
-                         label:'Archieve',
-                         icon:'pi pi-fw pi-calendar-times',
-                         items:[
-                            {
-                               label:'Remove',
-                               icon:'pi pi-fw pi-calendar-minus'
-                            }
-                         ]
-                      }
-                   ]
+                    label:'Events',
+                    icon:'pi pi-fw pi-calendar',
+                    items:[
+                        {
+                            label:'Edit',
+                            icon:'pi pi-fw pi-pencil',
+                            items:[
+                                {
+                                    label:'Save',
+                                    icon:'pi pi-fw pi-calendar-plus'
+                                },
+                                {
+                                    label:'Delete',
+                                    icon:'pi pi-fw pi-calendar-minus'
+                                },
+                            ]
+                        },
+                        {
+                            label:'Archieve',
+                            icon:'pi pi-fw pi-calendar-times',
+                                items:[
+                                {
+                                    label:'Remove',
+                                    icon:'pi pi-fw pi-calendar-minus'
+                                }
+                            ]
+                        }
+                    ]
                 },
                 {
-                   separator:true
+                    separator:true
                 },
                 {
-                   label:'Quit',
-                   icon:'pi pi-fw pi-power-off'
+                    label:'Quit',
+                    icon:'pi pi-fw pi-power-off'
                 }
-             ]
+            ]
         }
     },
     methods: {
diff --git a/src/views/datatable/DataTableCrudDemo.vue b/src/views/datatable/DataTableCrudDemo.vue
index 169f48e76..776e7cf62 100755
--- a/src/views/datatable/DataTableCrudDemo.vue
+++ b/src/views/datatable/DataTableCrudDemo.vue
@@ -10,14 +10,14 @@
 
 		<div class="content-section implementation">
             <div class="card">
-                <Toolbar class="p-mb-4">
+                <Toolbar class="mb-4">
                     <template #start>
-                        <Button label="New" icon="pi pi-plus" class="p-button-success p-mr-2" @click="openNew" />
+                        <Button label="New" icon="pi pi-plus" class="p-button-success mr-2" @click="openNew" />
                         <Button label="Delete" icon="pi pi-trash" class="p-button-danger" @click="confirmDeleteSelected" :disabled="!selectedProducts || !selectedProducts.length" />
                     </template>
 
                     <template #end>
-                        <FileUpload mode="basic" accept="image/*" :maxFileSize="1000000" label="Import" chooseLabel="Import" class="p-mr-2 p-d-inline-block" />
+                        <FileUpload mode="basic" accept="image/*" :maxFileSize="1000000" label="Import" chooseLabel="Import" class="mr-2 inline-block" />
                         <Button label="Export" icon="pi pi-upload" class="p-button-help" @click="exportCSV($event)"  />
                     </template>
                 </Toolbar>
@@ -27,8 +27,8 @@
                     paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown" :rowsPerPageOptions="[5,10,25]"
                     currentPageReportTemplate="Showing {first} to {last} of {totalRecords} products" responsiveLayout="scroll">
                     <template #header>
-                        <div class="table-header p-d-flex p-flex-column p-flex-md-row p-jc-md-between">
-							<h5 class="p-mb-2 p-m-md-0 p-as-md-center">Manage Products</h5>
+                        <div class="table-header flex flex-column md:flex-row md:justiify-content-between">
+							<h5 class="mb-2 md:m-0 p-as-md-center">Manage Products</h5>
 							<span class="p-input-icon-left">
                                 <i class="pi pi-search" />
                                 <InputText v-model="filters['global'].value" placeholder="Search..." />
@@ -40,7 +40,7 @@
                     <Column field="code" header="Code" :sortable="true" style="min-width:12rem"></Column>
                     <Column field="name" header="Name" :sortable="true" style="min-width:16rem"></Column>
                     <Column header="Image">
-                         <template #body="slotProps">
+                        <template #body="slotProps">
                             <img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image" class="product-image" />
                         </template>
                     </Column>
@@ -52,7 +52,7 @@
                     <Column field="category" header="Category" :sortable="true" style="min-width:10rem"></Column>
                     <Column field="rating" header="Reviews" :sortable="true" style="min-width:12rem">
                         <template #body="slotProps">
-                           <Rating :modelValue="slotProps.data.rating" :readonly="true" :cancel="false" />
+                            <Rating :modelValue="slotProps.data.rating" :readonly="true" :cancel="false" />
                         </template>
                     </Column>
                     <Column field="inventoryStatus" header="Status" :sortable="true" style="min-width:12rem">
@@ -62,7 +62,7 @@
                     </Column>
                     <Column :exportable="false" style="min-width:8rem">
                         <template #body="slotProps">
-                            <Button icon="pi pi-pencil" class="p-button-rounded p-button-success p-mr-2" @click="editProduct(slotProps.data)" />
+                            <Button icon="pi pi-pencil" class="p-button-rounded p-button-success mr-2" @click="editProduct(slotProps.data)" />
                             <Button icon="pi pi-trash" class="p-button-rounded p-button-warning" @click="confirmDeleteProduct(slotProps.data)" />
                         </template>
                     </Column>
@@ -71,18 +71,18 @@
 
             <Dialog v-model:visible="productDialog" :style="{width: '450px'}" header="Product Details" :modal="true" class="p-fluid">
                 <img :src="'demo/images/product/' + product.image" :alt="product.image" class="product-image" v-if="product.image" />
-                <div class="p-field">
+                <div class="field">
                     <label for="name">Name</label>
                     <InputText id="name" v-model.trim="product.name" required="true" autofocus :class="{'p-invalid': submitted && !product.name}" />
                     <small class="p-error" v-if="submitted && !product.name">Name is required.</small>
                 </div>
-                <div class="p-field">
+                <div class="field">
                     <label for="description">Description</label>
                     <Textarea id="description" v-model="product.description" required="true" rows="3" cols="20" />
                 </div>
 
-                <div class="p-field">
-					<label for="inventoryStatus" class="p-mb-3">Inventory Status</label>
+                <div class="field">
+					<label for="inventoryStatus" class="mb-3">Inventory Status</label>
 					<Dropdown id="inventoryStatus" v-model="product.inventoryStatus" :options="statuses" optionLabel="label" placeholder="Select a Status">
 						<template #value="slotProps">
 							<div v-if="slotProps.value && slotProps.value.value">
@@ -98,34 +98,34 @@
 					</Dropdown>
 				</div>
 
-                <div class="p-field">
-                    <label class="p-mb-3">Category</label>
-                    <div class="p-formgrid p-grid">
-                        <div class="p-field-radiobutton p-col-6">
+                <div class="field">
+                    <label class="mb-3">Category</label>
+                    <div class="formgrid grid">
+                        <div class="field-radiobutton col-6">
                             <RadioButton id="category1" name="category" value="Accessories" v-model="product.category" />
                             <label for="category1">Accessories</label>
                         </div>
-                        <div class="p-field-radiobutton p-col-6">
+                        <div class="field-radiobutton col-6">
                             <RadioButton id="category2" name="category" value="Clothing" v-model="product.category" />
                             <label for="category2">Clothing</label>
                         </div>
-                        <div class="p-field-radiobutton p-col-6">
+                        <div class="field-radiobutton col-6">
                             <RadioButton id="category3" name="category" value="Electronics" v-model="product.category" />
                             <label for="category3">Electronics</label>
                         </div>
-                        <div class="p-field-radiobutton p-col-6">
+                        <div class="field-radiobutton col-6">
                             <RadioButton id="category4" name="category" value="Fitness" v-model="product.category" />
                             <label for="category4">Fitness</label>
                         </div>
                     </div>
                 </div>
 
-                <div class="p-formgrid p-grid">
-                    <div class="p-field p-col">
+                <div class="formgrid grid">
+                    <div class="field col">
                         <label for="price">Price</label>
                         <InputNumber id="price" v-model="product.price" mode="currency" currency="USD" locale="en-US" />
                     </div>
-                    <div class="p-field p-col">
+                    <div class="field col">
                         <label for="quantity">Quantity</label>
                         <InputNumber id="quantity" v-model="product.quantity" integeronly />
                     </div>
@@ -138,7 +138,7 @@
 
             <Dialog v-model:visible="deleteProductDialog" :style="{width: '450px'}" header="Confirm" :modal="true">
                 <div class="confirmation-content">
-                    <i class="pi pi-exclamation-triangle p-mr-3" style="font-size: 2rem" />
+                    <i class="pi pi-exclamation-triangle mr-3" style="font-size: 2rem" />
                     <span v-if="product">Are you sure you want to delete <b>{{product.name}}</b>?</span>
                 </div>
                 <template #footer>
@@ -149,7 +149,7 @@
 
             <Dialog v-model:visible="deleteProductsDialog" :style="{width: '450px'}" header="Confirm" :modal="true">
                 <div class="confirmation-content">
-                    <i class="pi pi-exclamation-triangle p-mr-3" style="font-size: 2rem" />
+                    <i class="pi pi-exclamation-triangle mr-3" style="font-size: 2rem" />
                     <span v-if="product">Are you sure you want to delete the selected products?</span>
                 </div>
                 <template #footer>
@@ -159,7 +159,7 @@
             </Dialog>
 		</div>
 
-       <AppDoc name="DataTableCrudDemo" :sources="sources" :service="['ProductService']" :data="['products']" github="datatable/DataTableCrudDemo.vue" />
+        <AppDoc name="DataTableCrudDemo" :sources="sources" :service="['ProductService']" :data="['products']" github="datatable/DataTableCrudDemo.vue" />
 	</div>
 </template>
 
@@ -190,14 +190,14 @@ export default {
 <template>
     <div>
         <div class="card">
-            <Toolbar class="p-mb-4">
+            <Toolbar class="mb-4">
                 <template #start>
-                    <Button label="New" icon="pi pi-plus" class="p-button-success p-mr-2" @click="openNew" />
+                    <Button label="New" icon="pi pi-plus" class="p-button-success mr-2" @click="openNew" />
                     <Button label="Delete" icon="pi pi-trash" class="p-button-danger" @click="confirmDeleteSelected" :disabled="!selectedProducts || !selectedProducts.length" />
                 </template>
 
                 <template #end>
-                    <FileUpload mode="basic" accept="image/*" :maxFileSize="1000000" label="Import" chooseLabel="Import" class="p-mr-2 p-d-inline-block" />
+                    <FileUpload mode="basic" accept="image/*" :maxFileSize="1000000" label="Import" chooseLabel="Import" class="mr-2 inline-block" />
                     <Button label="Export" icon="pi pi-upload" class="p-button-help" @click="exportCSV($event)"  />
                 </template>
             </Toolbar>
@@ -207,8 +207,8 @@ export default {
                 paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown" :rowsPerPageOptions="[5,10,25]"
                 currentPageReportTemplate="Showing {first} to {last} of {totalRecords} products" responsiveLayout="scroll">
                 <template #header>
-                    <div class="table-header p-d-flex p-flex-column p-flex-md-row p-jc-md-between">
-						<h5 class="p-mb-2 p-m-md-0 p-as-md-center">Manage Products</h5>
+                    <div class="table-header flex flex-column md:flex-row md:justiify-content-between">
+						<h5 class="mb-2 md:m-0 p-as-md-center">Manage Products</h5>
 						<span class="p-input-icon-left">
                             <i class="pi pi-search" />
                             <InputText v-model="filters['global'].value" placeholder="Search..." />
@@ -242,7 +242,7 @@ export default {
                 </Column>
                 <Column :exportable="false" style="min-width:8rem">
                     <template #body="slotProps">
-                        <Button icon="pi pi-pencil" class="p-button-rounded p-button-success p-mr-2" @click="editProduct(slotProps.data)" />
+                        <Button icon="pi pi-pencil" class="p-button-rounded p-button-success mr-2" @click="editProduct(slotProps.data)" />
                         <Button icon="pi pi-trash" class="p-button-rounded p-button-warning" @click="confirmDeleteProduct(slotProps.data)" />
                     </template>
                 </Column>
@@ -251,18 +251,18 @@ export default {
 
         <Dialog v-model:visible="productDialog" :style="{width: '450px'}" header="Product Details" :modal="true" class="p-fluid">
             <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="product.image" class="product-image" v-if="product.image" />
-            <div class="p-field">
+            <div class="field">
                 <label for="name">Name</label>
                 <InputText id="name" v-model.trim="product.name" required="true" autofocus :class="{'p-invalid': submitted && !product.name}" />
                 <small class="p-error" v-if="submitted && !product.name">Name is required.</small>
             </div>
-            <div class="p-field">
+            <div class="field">
                 <label for="description">Description</label>
                 <Textarea id="description" v-model="product.description" required="true" rows="3" cols="20" />
             </div>
 
-            <div class="p-field">
-				<label for="inventoryStatus" class="p-mb-3">Inventory Status</label>
+            <div class="field">
+				<label for="inventoryStatus" class="mb-3">Inventory Status</label>
 				<Dropdown id="inventoryStatus" v-model="product.inventoryStatus" :options="statuses" optionLabel="label" placeholder="Select a Status">
 					<template #value="slotProps">
 						<div v-if="slotProps.value && slotProps.value.value">
@@ -278,34 +278,34 @@ export default {
 				</Dropdown>
 			</div>
 
-            <div class="p-field">
-                <label class="p-mb-3">Category</label>
-                <div class="p-formgrid p-grid">
-                    <div class="p-field-radiobutton p-col-6">
+            <div class="field">
+                <label class="mb-3">Category</label>
+                <div class="formgrid grid">
+                    <div class="field-radiobutton col-6">
                         <RadioButton id="category1" name="category" value="Accessories" v-model="product.category" />
                         <label for="category1">Accessories</label>
                     </div>
-                    <div class="p-field-radiobutton p-col-6">
+                    <div class="field-radiobutton col-6">
                         <RadioButton id="category2" name="category" value="Clothing" v-model="product.category" />
                         <label for="category2">Clothing</label>
                     </div>
-                    <div class="p-field-radiobutton p-col-6">
+                    <div class="field-radiobutton col-6">
                         <RadioButton id="category3" name="category" value="Electronics" v-model="product.category" />
                         <label for="category3">Electronics</label>
                     </div>
-                    <div class="p-field-radiobutton p-col-6">
+                    <div class="field-radiobutton col-6">
                         <RadioButton id="category4" name="category" value="Fitness" v-model="product.category" />
                         <label for="category4">Fitness</label>
                     </div>
                 </div>
             </div>
 
-            <div class="p-formgrid p-grid">
-                <div class="p-field p-col">
+            <div class="formgrid grid">
+                <div class="field col">
                     <label for="price">Price</label>
                     <InputNumber id="price" v-model="product.price" mode="currency" currency="USD" locale="en-US" />
                 </div>
-                <div class="p-field p-col">
+                <div class="field col">
                     <label for="quantity">Quantity</label>
                     <InputNumber id="quantity" v-model="product.quantity" integeronly />
                 </div>
@@ -318,7 +318,7 @@ export default {
 
         <Dialog v-model:visible="deleteProductDialog" :style="{width: '450px'}" header="Confirm" :modal="true">
             <div class="confirmation-content">
-                <i class="pi pi-exclamation-triangle p-mr-3" style="font-size: 2rem" />
+                <i class="pi pi-exclamation-triangle mr-3" style="font-size: 2rem" />
                 <span v-if="product">Are you sure you want to delete <b>{{product.name}}</b>?</span>
             </div>
             <template #footer>
@@ -329,7 +329,7 @@ export default {
 
         <Dialog v-model:visible="deleteProductsDialog" :style="{width: '450px'}" header="Confirm" :modal="true">
             <div class="confirmation-content">
-                <i class="pi pi-exclamation-triangle p-mr-3" style="font-size: 2rem" />
+                <i class="pi pi-exclamation-triangle mr-3" style="font-size: 2rem" />
                 <span v-if="product">Are you sure you want to delete the selected products?</span>
             </div>
             <template #footer>
@@ -506,14 +506,14 @@ export default {
 <template>
     <div>
         <div class="card">
-            <Toolbar class="p-mb-4">
+            <Toolbar class="mb-4">
                 <template #start>
-                    <Button label="New" icon="pi pi-plus" class="p-button-success p-mr-2" @click="openNew" />
+                    <Button label="New" icon="pi pi-plus" class="p-button-success mr-2" @click="openNew" />
                     <Button label="Delete" icon="pi pi-trash" class="p-button-danger" @click="confirmDeleteSelected" :disabled="!selectedProducts || !selectedProducts.length" />
                 </template>
 
                 <template #end>
-                    <FileUpload mode="basic" accept="image/*" :maxFileSize="1000000" label="Import" chooseLabel="Import" class="p-mr-2 p-d-inline-block" />
+                    <FileUpload mode="basic" accept="image/*" :maxFileSize="1000000" label="Import" chooseLabel="Import" class="mr-2 inline-block" />
                     <Button label="Export" icon="pi pi-upload" class="p-button-help" @click="exportCSV($event)"  />
                 </template>
             </Toolbar>
@@ -523,8 +523,8 @@ export default {
                 paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown" :rowsPerPageOptions="[5,10,25]"
                 currentPageReportTemplate="Showing {first} to {last} of {totalRecords} products" responsiveLayout="scroll">
                 <template #header>
-                    <div class="table-header p-d-flex p-flex-column p-flex-md-row p-jc-md-between">
-						<h5 class="p-mb-2 p-m-md-0 p-as-md-center">Manage Products</h5>
+                    <div class="table-header flex flex-column md:flex-row md:justiify-content-between">
+						<h5 class="mb-2 md:m-0 p-as-md-center">Manage Products</h5>
 						<span class="p-input-icon-left">
                             <i class="pi pi-search" />
                             <InputText v-model="filters['global'].value" placeholder="Search..." />
@@ -558,7 +558,7 @@ export default {
                 </Column>
                 <Column :exportable="false" style="min-width:8rem">
                     <template #body="slotProps">
-                        <Button icon="pi pi-pencil" class="p-button-rounded p-button-success p-mr-2" @click="editProduct(slotProps.data)" />
+                        <Button icon="pi pi-pencil" class="p-button-rounded p-button-success mr-2" @click="editProduct(slotProps.data)" />
                         <Button icon="pi pi-trash" class="p-button-rounded p-button-warning" @click="confirmDeleteProduct(slotProps.data)" />
                     </template>
                 </Column>
@@ -567,18 +567,18 @@ export default {
 
         <Dialog v-model:visible="productDialog" :style="{width: '450px'}" header="Product Details" :modal="true" class="p-fluid">
             <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="product.image" class="product-image" v-if="product.image" />
-            <div class="p-field">
+            <div class="field">
                 <label for="name">Name</label>
                 <InputText id="name" v-model.trim="product.name" required="true" autofocus :class="{'p-invalid': submitted && !product.name}" />
                 <small class="p-error" v-if="submitted && !product.name">Name is required.</small>
             </div>
-            <div class="p-field">
+            <div class="field">
                 <label for="description">Description</label>
                 <Textarea id="description" v-model="product.description" required="true" rows="3" cols="20" />
             </div>
 
-            <div class="p-field">
-				<label for="inventoryStatus" class="p-mb-3">Inventory Status</label>
+            <div class="field">
+				<label for="inventoryStatus" class="mb-3">Inventory Status</label>
 				<Dropdown id="inventoryStatus" v-model="product.inventoryStatus" :options="statuses" optionLabel="label" placeholder="Select a Status">
 					<template #value="slotProps">
 						<div v-if="slotProps.value && slotProps.value.value">
@@ -594,34 +594,34 @@ export default {
 				</Dropdown>
 			</div>
 
-            <div class="p-field">
-                <label class="p-mb-3">Category</label>
-                <div class="p-formgrid p-grid">
-                    <div class="p-field-radiobutton p-col-6">
+            <div class="field">
+                <label class="mb-3">Category</label>
+                <div class="formgrid grid">
+                    <div class="field-radiobutton col-6">
                         <RadioButton id="category1" name="category" value="Accessories" v-model="product.category" />
                         <label for="category1">Accessories</label>
                     </div>
-                    <div class="p-field-radiobutton p-col-6">
+                    <div class="field-radiobutton col-6">
                         <RadioButton id="category2" name="category" value="Clothing" v-model="product.category" />
                         <label for="category2">Clothing</label>
                     </div>
-                    <div class="p-field-radiobutton p-col-6">
+                    <div class="field-radiobutton col-6">
                         <RadioButton id="category3" name="category" value="Electronics" v-model="product.category" />
                         <label for="category3">Electronics</label>
                     </div>
-                    <div class="p-field-radiobutton p-col-6">
+                    <div class="field-radiobutton col-6">
                         <RadioButton id="category4" name="category" value="Fitness" v-model="product.category" />
                         <label for="category4">Fitness</label>
                     </div>
                 </div>
             </div>
 
-            <div class="p-formgrid p-grid">
-                <div class="p-field p-col">
+            <div class="formgrid grid">
+                <div class="field col">
                     <label for="price">Price</label>
                     <InputNumber id="price" v-model="product.price" mode="currency" currency="USD" locale="en-US" />
                 </div>
-                <div class="p-field p-col">
+                <div class="field col">
                     <label for="quantity">Quantity</label>
                     <InputNumber id="quantity" v-model="product.quantity" integeronly />
                 </div>
@@ -634,7 +634,7 @@ export default {
 
         <Dialog v-model:visible="deleteProductDialog" :style="{width: '450px'}" header="Confirm" :modal="true">
             <div class="confirmation-content">
-                <i class="pi pi-exclamation-triangle p-mr-3" style="font-size: 2rem" />
+                <i class="pi pi-exclamation-triangle mr-3" style="font-size: 2rem" />
                 <span v-if="product">Are you sure you want to delete <b>{{product.name}}</b>?</span>
             </div>
             <template #footer>
@@ -645,7 +645,7 @@ export default {
 
         <Dialog v-model:visible="deleteProductsDialog" :style="{width: '450px'}" header="Confirm" :modal="true">
             <div class="confirmation-content">
-                <i class="pi pi-exclamation-triangle p-mr-3" style="font-size: 2rem" />
+                <i class="pi pi-exclamation-triangle mr-3" style="font-size: 2rem" />
                 <span v-if="product">Are you sure you want to delete the selected products?</span>
             </div>
             <template #footer>
@@ -831,14 +831,14 @@ export default {
             <div class="card">
                 <p-toast></p-toast>
 
-                <p-toolbar class="p-mb-4">
+                <p-toolbar class="mb-4">
                     <template #start>
-                        <p-button label="New" icon="pi pi-plus" class="p-button-success p-mr-2" @click="openNew"></p-button>
+                        <p-button label="New" icon="pi pi-plus" class="p-button-success mr-2" @click="openNew"></p-button>
                         <p-button label="Delete" icon="pi pi-trash" class="p-button-danger" @click="confirmDeleteSelected" :disabled="!selectedProducts || !selectedProducts.length"></p-button>
                     </template>
 
                     <template #end>
-                        <p-fileupload mode="basic" accept="image/*" :maxFileSize="1000000" label="Import" chooseLabel="Import" class="p-mr-2 p-d-inline-block"></p-fileupload>
+                        <p-fileupload mode="basic" accept="image/*" :maxFileSize="1000000" label="Import" chooseLabel="Import" class="mr-2 inline-block"></p-fileupload>
                         <p-button label="Export" icon="pi pi-upload" class="p-button-help" @click="exportCSV($event)"></p-button>
                     </template>
                 </p-toolbar>
@@ -848,8 +848,8 @@ export default {
                     paginator-template="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown" :rows-per-page-options="[5,10,25]"
                     current-page-report-template="Showing {first} to {last} of {totalRecords} products" responsive-layout="scroll">
                     <template #header>
-                        <div class="table-header p-d-flex p-flex-column p-flex-md-row p-jc-md-between">
-							<h5 class="p-mb-2 p-m-md-0 p-as-md-center">Manage Products</h5>
+                        <div class="table-header flex flex-column md:flex-row md:justiify-content-between">
+							<h5 class="mb-2 md:m-0 p-as-md-center">Manage Products</h5>
 							<span class="p-input-icon-left">
                                 <i class="pi pi-search"></i>
                                 <p-inputtext v-model="filters['global'].value" placeholder="Search..."></p-inputtext>
@@ -857,53 +857,53 @@ export default {
 						</div>
                     </template>
 
-                    <p-column selectionMode="multiple" style="width: 3rem" :exportable="false"></p-column>
-                    <p-column field="code" header="Code" :sortable="true" style="min-width:12rem"></p-column>
-                    <p-column field="name" header="Name" :sortable="true" style="min-width:16rem"></p-column>
-                    <p-column header="Image">
+                    <column selectionMode="multiple" style="width: 3rem" :exportable="false"></column>
+                    <column field="code" header="Code" :sortable="true" style="min-width:12rem"></column>
+                    <column field="name" header="Name" :sortable="true" style="min-width:16rem"></column>
+                    <column header="Image">
                          <template #body="slotProps">
                             <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="product-image" />
                         </template>
-                    </p-column>
-                    <p-column field="price" header="Price" :sortable="true" style="min-width:8rem">
+                    </column>
+                    <column field="price" header="Price" :sortable="true" style="min-width:8rem">
                         <template #body="slotProps">
                             {{formatCurrency(slotProps.data.price)}}
                         </template>
-                    </p-column>
-                    <p-column field="category" header="Category" :sortable="true" style="min-width:10rem"></p-column>
-                    <p-column field="rating" header="Reviews" :sortable="true" style="min-width:12rem">
+                    </column>
+                    <column field="category" header="Category" :sortable="true" style="min-width:10rem"></column>
+                    <column field="rating" header="Reviews" :sortable="true" style="min-width:12rem">
                         <template #body="slotProps">
                            <p-rating :modelValue="slotProps.data.rating" :readonly="true" :cancel="false"></p-rating>
                         </template>
-                    </p-column>
-                    <p-column field="inventoryStatus" header="Status" :sortable="true" style="min-width:12rem">
+                    </column>
+                    <column field="inventoryStatus" header="Status" :sortable="true" style="min-width:12rem">
                         <template #body="slotProps">
                             <span :class="'product-badge status-' + (slotProps.data.inventoryStatus ? slotProps.data.inventoryStatus.toLowerCase() : '')">{{slotProps.data.inventoryStatus}}</span>
                         </template>
-                    </p-column>
-                    <p-column :exportable="false" style="min-width:8rem">
+                    </column>
+                    <column :exportable="false" style="min-width:8rem">
                         <template #body="slotProps">
-                            <p-button icon="pi pi-pencil" class="p-button-rounded p-button-success p-mr-2" @click="editProduct(slotProps.data)"></p-button>
+                            <p-button icon="pi pi-pencil" class="p-button-rounded p-button-success mr-2" @click="editProduct(slotProps.data)"></p-button>
                             <p-button icon="pi pi-trash" class="p-button-rounded p-button-warning" @click="confirmDeleteProduct(slotProps.data)"></p-button>
                         </template>
-                    </p-column>
+                    </column>
                 </p-datatable>
             </div>
 
             <p-dialog v-model:visible="productDialog" :style="{width: '450px'}" header="Product Details" :modal="true" class="p-fluid">
                 <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="product-image" v-if="product.image" />
-                <div class="p-field">
+                <div class="field">
                     <label for="name">Name</label>
                     <p-inputtext id="name" v-model.trim="product.name" required="true" autofocus :class="{'p-invalid': submitted && !product.name}"></p-inputtext>
                     <small class="p-error" v-if="submitted && !product.name">Name is required.</small>
                 </div>
-                <div class="p-field">
+                <div class="field">
                     <label for="description">Description</label>
                     <p-textarea id="description" v-model="product.description" required="true" rows="3" cols="20"></p-textarea>
                 </div>
 
-                <div class="p-field">
-					<label for="inventoryStatus" class="p-mb-3">Inventory Status</label>
+                <div class="field">
+					<label for="inventoryStatus" class="mb-3">Inventory Status</label>
 					<p-dropdown id="inventoryStatus" v-model="product.inventoryStatus" :options="statuses" option-label="label" placeholder="Select a Status">
 						<template #value="slotProps">
 							<div v-if="slotProps.value && slotProps.value.value">
@@ -919,34 +919,34 @@ export default {
 					</p-dropdown>
 				</div>
 
-                <div class="p-field">
-                    <label class="p-mb-3">Category</label>
-                    <div class="p-formgrid p-grid">
-                        <div class="p-field-radiobutton p-col-6">
+                <div class="field">
+                    <label class="mb-3">Category</label>
+                    <div class="formgrid grid">
+                        <div class="field-radiobutton col-6">
                             <p-radiobutton id="category1" name="category" value="Accessories" v-model="product.category"></p-radiobutton>
                             <label for="category1">Accessories</label>
                         </div>
-                        <div class="p-field-radiobutton p-col-6">
+                        <div class="field-radiobutton col-6">
                             <p-radiobutton id="category2" name="category" value="Clothing" v-model="product.category"></p-radiobutton>
                             <label for="category2">Clothing</label>
                         </div>
-                        <div class="p-field-radiobutton p-col-6">
+                        <div class="field-radiobutton col-6">
                             <p-radiobutton id="category3" name="category" value="Electronics" v-model="product.category"></p-radiobutton>
                             <label for="category3">Electronics</label>
                         </div>
-                        <div class="p-field-radiobutton p-col-6">
+                        <div class="field-radiobutton col-6">
                             <p-radiobutton id="category4" name="category" value="Fitness" v-model="product.category"></p-radiobutton>
                             <label for="category4">Fitness</label>
                         </div>
                     </div>
                 </div>
 
-                <div class="p-formgrid p-grid">
-                    <div class="p-field p-col">
+                <div class="formgrid grid">
+                    <div class="field col">
                         <label for="price">Price</label>
                         <p-inputnumber id="price" v-model="product.price" mode="currency" currency="USD" locale="en-US"></p-inputnumber></p-inputnumber>
                     </div>
-                    <div class="p-field p-col">
+                    <div class="field col">
                         <label for="quantity">Quantity</label>
                         <p-inputnumber id="quantity" v-model="product.quantity" integeronly></p-inputnumber>
                     </div>
@@ -959,7 +959,7 @@ export default {
 
             <p-dialog v-model:visible="deleteProductDialog" :style="{width: '450px'}" header="Confirm" :modal="true">
                 <div class="confirmation-content">
-                    <i class="pi pi-exclamation-triangle p-mr-3" style="font-size: 2rem"></i>
+                    <i class="pi pi-exclamation-triangle mr-3" style="font-size: 2rem"></i>
                     <span v-if="product">Are you sure you want to delete <b>{{product.name}}</b>?</span>
                 </div>
                 <template #footer>
@@ -970,7 +970,7 @@ export default {
 
             <p-dialog v-model:visible="deleteProductsDialog" :style="{width: '450px'}" header="Confirm" :modal="true">
                 <div class="confirmation-content">
-                    <i class="pi pi-exclamation-triangle p-mr-3" style="font-size: 2rem"></i>
+                    <i class="pi pi-exclamation-triangle mr-3" style="font-size: 2rem"></i>
                     <span v-if="product">Are you sure you want to delete the selected products?</span>
                 </div>
                 <template #footer>
@@ -1098,7 +1098,7 @@ export default {
                 },
                 components: {
                     "p-datatable": primevue.datatable,
-                    "p-column": primevue.column,
+                    "column": primevue.column,
                     "p-toolbar": primevue.toolbar,
                     "p-fileupload": primevue.fileupload,
                     "p-rating": primevue.rating,
diff --git a/src/views/datatable/DataTableDemo.vue b/src/views/datatable/DataTableDemo.vue
index 40c0416ad..d08448152 100755
--- a/src/views/datatable/DataTableDemo.vue
+++ b/src/views/datatable/DataTableDemo.vue
@@ -16,13 +16,13 @@
                     currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
                     :globalFilterFields="['name','country.name','representative.name','status']" responsiveLayout="scroll">
                     <template #header>
-                         <div class="p-d-flex p-jc-between p-ai-center">
-                            <h5 class="p-m-0">Customers</h5>
+                        <div class="flex flex-column md:flex-row md:justify-content-between md:align-items-center">
+                            <h5 class="m-0">Customers</h5>
                             <span class="p-input-icon-left">
                                 <i class="pi pi-search" />
                                 <InputText v-model="filters['global'].value" placeholder="Keyword Search" />
                             </span>
-                         </div>
+                        </div>
                     </template>
                     <template #empty>
                         No customers found.
@@ -49,12 +49,12 @@
                         </template>
                     </Column>
                     <Column header="Agent" sortable filterField="representative" sortField="representative.name" :showFilterMatchModes="false" :filterMenuStyle="{'width':'14rem'}" style="min-width: 14rem">
-                         <template #body="{data}">
+                        <template #body="{data}">
                             <img :alt="data.representative.name" :src="'demo/images/avatar/' + data.representative.image" width="32" style="vertical-align: middle" />
                             <span class="image-text">{{data.representative.name}}</span>
                         </template>
                         <template #filter="{filterModel}">
-                            <div class="p-mb-3 p-text-bold">Agent Picker</div>
+                            <div class="mb-3 font-bold">Agent Picker</div>
                             <MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name" placeholder="Any" class="p-column-filter">
                                 <template #option="slotProps">
                                     <div class="p-multiselect-representative-option">
@@ -101,8 +101,8 @@
                             <ProgressBar :value="data.activity" :showValue="false" />
                         </template>
                         <template #filter="{filterModel}">
-                            <Slider v-model="filterModel.value" range class="p-m-3"></Slider>
-                            <div class="p-d-flex p-ai-center p-jc-between p-px-2">
+                            <Slider v-model="filterModel.value" range class="m-3"></Slider>
+                            <div class="flex align-items-center justify-content-center px-2">
                                 <span>{{filterModel.value ? filterModel.value[0] : 0}}</span>
                                 <span>{{filterModel.value ? filterModel.value[1] : 100}}</span>
                             </div>
diff --git a/src/views/datatable/DataTableDoc.vue b/src/views/datatable/DataTableDoc.vue
index 09e395af1..1b3340078 100755
--- a/src/views/datatable/DataTableDoc.vue
+++ b/src/views/datatable/DataTableDoc.vue
@@ -731,7 +731,6 @@ export default {
         &lt;/template&gt;
     &lt;/Column&gt;
 &lt;/DataTable&gt;
-
 </template>
 </code></pre>
 
@@ -747,7 +746,6 @@ export default {
         &lt;/template&gt;
     &lt;/Column&gt;
 &lt;/DataTable&gt;
-
 </template>
 </code></pre>
 
@@ -826,7 +824,6 @@ app.use(PrimeVue, {
         &lt;InputText type="text" v-model="filterModel.value" @keydown.enter="filterCallback()" class="p-column-filter" :placeholder="`Search by name - ${filterModel.matchMode}`"/&gt;
     &lt;/template&gt;
 &lt;/Column&gt;
-
 </template>
 </code></pre>
 
@@ -868,10 +865,9 @@ matchModes: [
         &lt;Button type="button" icon="pi pi-check" @click="filterCallback()" class="p-button-success"&gt;&lt;/Button&gt;
     &lt;/template&gt;
     &lt;template #filterfooter&gt;
-        &lt;div class="p-px-3 p-pt-0 p-pb-3 p-text-center p-text-bold"&gt;Customized Buttons&lt;/div&gt;
+        &lt;div class="px-3 pt-0 pb-3 text-center font-bold"&gt;Customized Buttons&lt;/div&gt;
     &lt;/template&gt;
 &lt;/Column&gt;
-
 </template>
 </code></pre>
 
@@ -879,7 +875,7 @@ matchModes: [
             <h5>Selection</h5>
             <p>DataTable provides single and multiple selection modes on click of a row. Selected rows are bound to the <i>selection</i> property and updated using the v-model directive.
                 Alternatively column based selection can be done using radio buttons or checkboxes using <i>selectionMode</i> of a particular column. In addition row-select and row-unselect
-                 events are provided as optional callbacks.</p>
+                events are provided as optional callbacks.</p>
 
             <p>The <i>dataKey</i> property identifies a unique value of a row in the dataset, it is not mandatory however being able to define it increases the performance of the table signifantly.</p>
 
@@ -1078,11 +1074,11 @@ matchModes: [
         &lt;div class="car-details"&gt;
             &lt;div&gt;
                 &lt;img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/&gt;
-                &lt;div class="p-grid"&gt;
-                    &lt;div class="p-col-12"&gt;Vin: &lt;b&gt;&#123;&#123;slotProps.data.vin&#125;&#125;&lt;/b&gt;&lt;/div&gt;
-                    &lt;div class="p-col-12"&gt;Year: &lt;b&gt;&#123;&#123;slotProps.data.year&#125;&#125;&lt;/b&gt;&lt;/div&gt;
-                    &lt;div class="p-col-12"&gt;Brand: &lt;b&gt;&#123;&#123;slotProps.data.brand&#125;&#125;&lt;/b&gt;&lt;/div&gt;
-                    &lt;div class="p-col-12"&gt;Color: &lt;b&gt;&#123;&#123;slotProps.data.color&#125;&#125;&lt;/b&gt;&lt;/div&gt;
+                &lt;div class="grid"&gt;
+                    &lt;div class="col-12"&gt;Vin: &lt;b&gt;&#123;&#123;slotProps.data.vin&#125;&#125;&lt;/b&gt;&lt;/div&gt;
+                    &lt;div class="col-12"&gt;Year: &lt;b&gt;&#123;&#123;slotProps.data.year&#125;&#125;&lt;/b&gt;&lt;/div&gt;
+                    &lt;div class="col-12"&gt;Brand: &lt;b&gt;&#123;&#123;slotProps.data.brand&#125;&#125;&lt;/b&gt;&lt;/div&gt;
+                    &lt;div class="col-12"&gt;Color: &lt;b&gt;&#123;&#123;slotProps.data.color&#125;&#125;&lt;/b&gt;&lt;/div&gt;
                 &lt;/div&gt;
             &lt;/div&gt;
             &lt;Button icon="pi pi-search"&gt;&lt;/Button&gt;
@@ -2630,8 +2626,8 @@ export default {
             currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
             :globalFilterFields="['name','country.name','representative.name','status']" responsiveLayout="scroll">
             <template #header>
-                 <div class="p-d-flex p-jc-between p-ai-center">
-                    <h5 class="p-m-0">Customers</h5>
+                 <div class="flex justify-content-center align-items-center">
+                    <h5 class="m-0">Customers</h5>
                     <span class="p-input-icon-left">
                         <i class="pi pi-search" />
                         <InputText v-model="filters['global'].value" placeholder="Keyword Search" />
@@ -2668,7 +2664,7 @@ export default {
                     <span class="image-text">{{data.representative.name}}</span>
                 </template>
                 <template #filter="{filterModel}">
-                    <div class="p-mb-3 p-text-bold">Agent Picker</div>
+                    <div class="mb-3 font-bold">Agent Picker</div>
                     <MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name" placeholder="Any" class="p-column-filter">
                         <template #option="slotProps">
                             <div class="p-multiselect-representative-option">
@@ -2715,8 +2711,8 @@ export default {
                     <ProgressBar :value="data.activity" :showValue="false" />
                 </template>
                 <template #filter="{filterModel}">
-                    <Slider v-model="filterModel.value" range class="p-m-3"></Slider>
-                    <div class="p-d-flex p-ai-center p-jc-between p-px-2">
+                    <Slider v-model="filterModel.value" range class="m-3"></Slider>
+                    <div class="flex align-items-center justify-content-center px-2">
                         <span>{{filterModel.value ? filterModel.value[0] : 0}}</span>
                         <span>{{filterModel.value ? filterModel.value[1] : 100}}</span>
                     </div>
@@ -2854,8 +2850,8 @@ export default {
             currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries"
             :globalFilterFields="['name','country.name','representative.name','status']" responsiveLayout="scroll">
             <template #header>
-                 <div class="p-d-flex p-jc-between p-ai-center">
-                    <h5 class="p-m-0">Customers</h5>
+                 <div class="flex justify-content-center align-items-center">
+                    <h5 class="m-0">Customers</h5>
                     <span class="p-input-icon-left">
                         <i class="pi pi-search" />
                         <InputText v-model="filters['global'].value" placeholder="Keyword Search" />
@@ -2892,7 +2888,7 @@ export default {
                     <span class="image-text">{{data.representative.name}}</span>
                 </template>
                 <template #filter="{filterModel}">
-                    <div class="p-mb-3 p-text-bold">Agent Picker</div>
+                    <div class="mb-3 font-bold">Agent Picker</div>
                     <MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name" placeholder="Any" class="p-column-filter">
                         <template #option="slotProps">
                             <div class="p-multiselect-representative-option">
@@ -2939,8 +2935,8 @@ export default {
                     <ProgressBar :value="data.activity" :showValue="false" />
                 </template>
                 <template #filter="{filterModel}">
-                    <Slider v-model="filterModel.value" range class="p-m-3"></Slider>
-                    <div class="p-d-flex p-ai-center p-jc-between p-px-2">
+                    <Slider v-model="filterModel.value" range class="m-3"></Slider>
+                    <div class="flex align-items-center justify-content-center px-2">
                         <span>{{filterModel.value ? filterModel.value[0] : 0}}</span>
                         <span>{{filterModel.value ? filterModel.value[1] : 100}}</span>
                     </div>
@@ -3117,8 +3113,8 @@ img {
                 current-page-report-template="Showing {first} to {last} of {totalRecords} entries"
                 :global-filter-fields="['name','country.name','representative.name','status']" responsive-layout="scroll">
                 <template #header>
-                    <div class="p-d-flex p-jc-between p-ai-center">
-                        <h5 class="p-m-0">Customers</h5>
+                    <div class="flex justify-content-center align-items-center">
+                        <h5 class="m-0">Customers</h5>
                         <span class="p-input-icon-left">
                             <i class="pi pi-search"></i>
                             <p-inputtext v-model="filters['global'].value" placeholder="Keyword Search"></p-inputtext>
@@ -3155,7 +3151,7 @@ img {
                         <span class="image-text">{{data.representative.name}}</span>
                     </template>
                     <template #filter="{filterModel}">
-                        <div class="p-mb-3 p-text-bold">Agent Picker</div>
+                        <div class="mb-3 font-bold">Agent Picker</div>
                         <p-multiselect v-model="filterModel.value" :options="representatives" option-label="name" placeholder="Any" class="p-column-filter">
                             <template #option="slotProps">
                                 <div class="p-multiselect-representative-option">
@@ -3202,8 +3198,8 @@ img {
                         <p-progressbar :value="data.activity" :show-value="false"></p-progressbar>
                     </template>
                     <template #filter="{filterModel}">
-                        <p-slider v-model="filterModel.value" range class="p-m-3"></p-slider>
-                        <div class="p-d-flex p-ai-center p-jc-between p-px-2">
+                        <p-slider v-model="filterModel.value" range class="m-3"></p-slider>
+                        <div class="flex align-items-center justify-content-center px-2">
                             <span>{{filterModel.value ? filterModel.value[0] : 0}}</span>
                             <span>{{filterModel.value ? filterModel.value[1] : 100}}</span>
                         </div>
diff --git a/src/views/datatable/DataTableFilterDemo.vue b/src/views/datatable/DataTableFilterDemo.vue
index a9798bdc1..a26d9749b 100755
--- a/src/views/datatable/DataTableFilterDemo.vue
+++ b/src/views/datatable/DataTableFilterDemo.vue
@@ -16,7 +16,7 @@
                     dataKey="id" v-model:filters="filters1" filterDisplay="menu" :loading="loading1" responsiveLayout="scroll"
                     :globalFilterFields="['name','country.name','representative.name','balance','status']">
                     <template #header>
-                        <div class="p-d-flex p-jc-between">
+                        <div class="flex justify-content-center">
                             <Button type="button" icon="pi pi-filter-slash" label="Clear" class="p-button-outlined" @click="clearFilter1()"/>
                             <span class="p-input-icon-left">
                                 <i class="pi pi-search" />
@@ -53,7 +53,7 @@
                             <Button type="button" icon="pi pi-check" @click="filterCallback()" class="p-button-success"></Button>
                         </template>
                         <template #filterfooter>
-                            <div class="p-px-3 p-pt-0 p-pb-3 p-text-center p-text-bold">Customized Buttons</div>
+                            <div class="px-3 pt-0 pb-3 text-center font-bold">Customized Buttons</div>
                         </template>
                     </Column>
                     <Column header="Agent" filterField="representative" :showFilterMatchModes="false" :filterMenuStyle="{'width':'14rem'}" style="min-width:14rem">
@@ -62,7 +62,7 @@
                             <span class="image-text">{{data.representative.name}}</span>
                         </template>
                         <template #filter="{filterModel}">
-                            <div class="p-mb-3 p-text-bold">Agent Picker</div>
+                            <div class="mb-3 font-bold">Agent Picker</div>
                             <MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name" placeholder="Any" class="p-column-filter">
                                 <template #option="slotProps">
                                     <div class="p-multiselect-representative-option">
@@ -110,14 +110,14 @@
                             <ProgressBar :value="data.activity" :showValue="false"></ProgressBar>
                         </template>
                         <template #filter={filterModel}>
-                            <Slider v-model="filterModel.value" range class="p-m-3"></Slider>
-                            <div class="p-d-flex p-ai-center p-jc-between p-px-2">
+                            <Slider v-model="filterModel.value" range class="m-3"></Slider>
+                            <div class="flex align-items-center justify-content-center px-2">
                                 <span>{{filterModel.value ? filterModel.value[0] : 0}}</span>
                                 <span>{{filterModel.value ? filterModel.value[1] : 100}}</span>
                             </div>
                         </template>
                     </Column>
-                    <Column field="verified" header="Verified" dataType="boolean" bodyClass="p-text-center" style="min-width:8rem">
+                    <Column field="verified" header="Verified" dataType="boolean" bodyClass="text-center" style="min-width:8rem">
                         <template #body="{data}">
                             <i class="pi" :class="{'true-icon pi-check-circle': data.verified, 'false-icon pi-times-circle': !data.verified}"></i>
                         </template>
@@ -135,7 +135,7 @@
                     dataKey="id" v-model:filters="filters2" filterDisplay="row" :loading="loading2" responsiveLayout="scroll"
                     :globalFilterFields="['name','country.name','representative.name','status']">
                     <template #header>
-                        <div class="p-d-flex p-jc-end">
+                        <div class="flex justify-content-end">
                             <span class="p-input-icon-left ">
                                 <i class="pi pi-search" />
                                 <InputText v-model="filters2['global'].value" placeholder="Keyword Search" />
@@ -261,7 +261,7 @@ export default {
                 dataKey="id" v-model:filters="filters1" filterDisplay="menu" :loading="loading1" responsiveLayout="scroll"
                 :globalFilterFields="['name','country.name','representative.name','balance','status']">
                 <template #header>
-                    <div class="p-d-flex p-jc-between">
+                    <div class="flex justify-content-center">
                         <Button type="button" icon="pi pi-filter-slash" label="Clear" class="p-button-outlined" @click="clearFilter1()"/>
                         <span class="p-input-icon-left">
                             <i class="pi pi-search" />
@@ -298,7 +298,7 @@ export default {
                         <Button type="button" icon="pi pi-check" @click="filterCallback()" class="p-button-success"></Button>
                     </template>
                     <template #filterfooter>
-                        <div class="p-px-3 p-pt-0 p-pb-3 p-text-center p-text-bold">Customized Buttons</div>
+                        <div class="px-3 pt-0 pb-3 text-center font-bold">Customized Buttons</div>
                     </template>
                 </Column>
                 <Column header="Agent" filterField="representative" :showFilterMatchModes="false" :filterMenuStyle="{'width':'14rem'}" style="min-width:14rem">
@@ -307,7 +307,7 @@ export default {
                         <span class="image-text">{{data.representative.name}}</span>
                     </template>
                     <template #filter="{filterModel}">
-                        <div class="p-mb-3 p-text-bold">Agent Picker</div>
+                        <div class="mb-3 font-bold">Agent Picker</div>
                         <MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name" placeholder="Any" class="p-column-filter">
                             <template #option="slotProps">
                                 <div class="p-multiselect-representative-option">
@@ -355,14 +355,14 @@ export default {
                         <ProgressBar :value="data.activity" :showValue="false"></ProgressBar>
                     </template>
                     <template #filter={filterModel}>
-                        <Slider v-model="filterModel.value" range class="p-m-3"></Slider>
-                        <div class="p-d-flex p-ai-center p-jc-between p-px-2">
+                        <Slider v-model="filterModel.value" range class="m-3"></Slider>
+                        <div class="flex align-items-center justify-content-center px-2">
                             <span>{{filterModel.value ? filterModel.value[0] : 0}}</span>
                             <span>{{filterModel.value ? filterModel.value[1] : 100}}</span>
                         </div>
                     </template>
                 </Column>
-                <Column field="verified" header="Verified" dataType="boolean" bodyClass="p-text-center" style="min-width:8rem">
+                <Column field="verified" header="Verified" dataType="boolean" bodyClass="text-center" style="min-width:8rem">
                     <template #body="{data}">
                         <i class="pi" :class="{'true-icon pi-check-circle': data.verified, 'false-icon pi-times-circle': !data.verified}"></i>
                     </template>
@@ -380,7 +380,7 @@ export default {
                 dataKey="id" v-model:filters="filters2" filterDisplay="row" :loading="loading2" responsiveLayout="scroll"
                 :globalFilterFields="['name','country.name','representative.name','status']">
                 <template #header>
-                    <div class="p-d-flex p-jc-end">
+                    <div class="flex justify-content-end">
                         <span class="p-input-icon-left ">
                             <i class="pi pi-search" />
                             <InputText v-model="filters2['global'].value" placeholder="Keyword Search" />
@@ -602,7 +602,7 @@ export default {
                 dataKey="id" v-model:filters="filters1" filterDisplay="menu" :loading="loading1" responsiveLayout="scroll"
                 :globalFilterFields="['name','country.name','representative.name','balance','status']">
                 <template #header>
-                    <div class="p-d-flex p-jc-between">
+                    <div class="flex justify-content-center">
                         <Button type="button" icon="pi pi-filter-slash" label="Clear" class="p-button-outlined" @click="clearFilter1()"/>
                         <span class="p-input-icon-left">
                             <i class="pi pi-search" />
@@ -639,7 +639,7 @@ export default {
                         <Button type="button" icon="pi pi-check" @click="filterCallback()" class="p-button-success"></Button>
                     </template>
                     <template #filterfooter>
-                        <div class="p-px-3 p-pt-0 p-pb-3 p-text-center p-text-bold">Customized Buttons</div>
+                        <div class="px-3 pt-0 pb-3 text-center font-bold">Customized Buttons</div>
                     </template>
                 </Column>
                 <Column header="Agent" filterField="representative" :showFilterMatchModes="false" :filterMenuStyle="{'width':'14rem'}" style="min-width:14rem">
@@ -648,7 +648,7 @@ export default {
                         <span class="image-text">{{data.representative.name}}</span>
                     </template>
                     <template #filter="{filterModel}">
-                        <div class="p-mb-3 p-text-bold">Agent Picker</div>
+                        <div class="mb-3 font-bold">Agent Picker</div>
                         <MultiSelect v-model="filterModel.value" :options="representatives" optionLabel="name" placeholder="Any" class="p-column-filter">
                             <template #option="slotProps">
                                 <div class="p-multiselect-representative-option">
@@ -696,14 +696,14 @@ export default {
                         <ProgressBar :value="data.activity" :showValue="false"></ProgressBar>
                     </template>
                     <template #filter={filterModel}>
-                        <Slider v-model="filterModel.value" range class="p-m-3"></Slider>
-                        <div class="p-d-flex p-ai-center p-jc-between p-px-2">
+                        <Slider v-model="filterModel.value" range class="m-3"></Slider>
+                        <div class="flex align-items-center justify-content-center px-2">
                             <span>{{filterModel.value ? filterModel.value[0] : 0}}</span>
                             <span>{{filterModel.value ? filterModel.value[1] : 100}}</span>
                         </div>
                     </template>
                 </Column>
-                <Column field="verified" header="Verified" dataType="boolean" bodyClass="p-text-center" style="min-width:8rem">
+                <Column field="verified" header="Verified" dataType="boolean" bodyClass="text-center" style="min-width:8rem">
                     <template #body="{data}">
                         <i class="pi" :class="{'true-icon pi-check-circle': data.verified, 'false-icon pi-times-circle': !data.verified}"></i>
                     </template>
@@ -721,7 +721,7 @@ export default {
                 dataKey="id" v-model:filters="filters2" filterDisplay="row" :loading="loading2" responsiveLayout="scroll"
                 :globalFilterFields="['name','country.name','representative.name','status']">
                 <template #header>
-                    <div class="p-d-flex p-jc-end">
+                    <div class="flex justify-content-end">
                         <span class="p-input-icon-left ">
                             <i class="pi pi-search" />
                             <InputText v-model="filters2['global'].value" placeholder="Keyword Search" />
@@ -958,7 +958,7 @@ export default {
                     data-key="id" v-model:filters="filters1" filter-display="menu" :loading="loading1" responsive-layout="scroll"
                     :global-filter-fields="['name','country.name','representative.name','balance','status']">
                     <template #header>
-                        <div class="p-d-flex p-jc-between">
+                        <div class="flex justify-content-center">
                             <p-button type="button" icon="pi pi-filter-slash" label="Clear" class="p-button-outlined" @click="clearFilter1()"></p-button>
                             <span class="p-input-icon-left">
                                 <i class="pi pi-search"></i>
@@ -995,7 +995,7 @@ export default {
                             <p-button type="button" icon="pi pi-check" @click="filterCallback()" class="p-button-success"></p-button>
                         </template>
                         <template #filterfooter>
-                            <div class="p-px-3 p-pt-0 p-pb-3 p-text-center p-text-bold">Customized Buttons</div>
+                            <div class="px-3 pt-0 pb-3 text-center font-bold">Customized Buttons</div>
                         </template>
                     </p-column>
                     <p-column header="Agent" filter-field="representative" :show-filter-match-modes="false" :filter-menu-style="{'width':'14rem'}" style="min-width:14rem">
@@ -1004,7 +1004,7 @@ export default {
                             <span class="image-text">{{data.representative.name}}</span>
                         </template>
                         <template #filter="{filterModel}">
-                            <div class="p-mb-3 p-text-bold">Agent Picker</div>
+                            <div class="mb-3 font-bold">Agent Picker</div>
                             <p-multiselect v-model="filterModel.value" :options="representatives" option-label="name" placeholder="Any" class="p-column-filter">
                                 <template #option="slotProps">
                                     <div class="p-multiselect-representative-option">
@@ -1052,14 +1052,14 @@ export default {
                             <p-progressbar :value="data.activity" :show-value="false"></p-progressbar>
                         </template>
                         <template #filter={filterModel}>
-                            <p-slider v-model="filterModel.value" range class="p-m-3"></p-slider>
-                            <div class="p-d-flex p-ai-center p-jc-between p-px-2">
+                            <p-slider v-model="filterModel.value" range class="m-3"></p-slider>
+                            <div class="flex align-items-center justify-content-center px-2">
                                 <span>{{filterModel.value ? filterModel.value[0] : 0}}</span>
                                 <span>{{filterModel.value ? filterModel.value[1] : 100}}</span>
                             </div>
                         </template>
                     </p-column>
-                    <p-column field="verified" header="Verified" data-type="boolean" body-class="p-text-center" style="min-width:8rem">
+                    <p-column field="verified" header="Verified" data-type="boolean" body-class="text-center" style="min-width:8rem">
                         <template #body="{data}">
                             <i class="pi" :class="{'true-icon pi-check-circle': data.verified, 'false-icon pi-times-circle': !data.verified}"></i>
                         </template>
@@ -1077,7 +1077,7 @@ export default {
                     data-key="id" v-model:filters="filters2" filter-display="row" :loading="loading2" responsive-layout="scroll"
                     :global-filter-fields="['name','country.name','representative.name','status']">
                     <template #header>
-                        <div class="p-d-flex p-jc-end">
+                        <div class="flex justify-content-end">
                             <span class="p-input-icon-left ">
                                 <i class="pi pi-search"></i>
                                 <p-inputtext v-model="filters2['global'].value" placeholder="Keyword Search"></p-inputtext>
diff --git a/src/views/datatable/DataTablePaginatorDemo.vue b/src/views/datatable/DataTablePaginatorDemo.vue
index 9ab9c2f50..cc5ff25e7 100755
--- a/src/views/datatable/DataTablePaginatorDemo.vue
+++ b/src/views/datatable/DataTablePaginatorDemo.vue
@@ -29,7 +29,7 @@
 		</div>
 
         <AppDoc name="DataTablePaginatorDemo" :sources="sources" :service="['CustomerService']" :data="['customers-large']" github="datatable/DataTablePaginatorDemo.vue" />
-                  
+
 	</div>
 </template>
 
diff --git a/src/views/datatable/DataTableRowExpandDemo.vue b/src/views/datatable/DataTableRowExpandDemo.vue
index 4bf8575fe..aeb66f82d 100755
--- a/src/views/datatable/DataTableRowExpandDemo.vue
+++ b/src/views/datatable/DataTableRowExpandDemo.vue
@@ -14,7 +14,7 @@
                     @row-expand="onRowExpand" @row-collapse="onRowCollapse" responsiveLayout="scroll">
                     <template #header>
                         <div class="table-header-container">
-                            <Button icon="pi pi-plus" label="Expand All" @click="expandAll" class="p-mr-2" />
+                            <Button icon="pi pi-plus" label="Expand All" @click="expandAll" class="mr-2" />
                             <Button icon="pi pi-minus" label="Collapse All" @click="collapseAll" />
                         </div>
                     </template>
@@ -95,7 +95,7 @@ export default {
             @rowExpand="onRowExpand" @rowCollapse="onRowCollapse" responsiveLayout="scroll">
             <template #header>
                 <div class="table-header-container">
-                    <Button icon="pi pi-plus" label="Expand All" @click="expandAll" class="p-mr-2" />
+                    <Button icon="pi pi-plus" label="Expand All" @click="expandAll" class="mr-2" />
                     <Button icon="pi pi-minus" label="Collapse All" @click="collapseAll" />
                 </div>
             </template>
@@ -213,7 +213,7 @@ export default {
             @rowExpand="onRowExpand" @rowCollapse="onRowCollapse" responsiveLayout="scroll">
             <template #header>
                 <div class="table-header-container">
-                    <Button icon="pi pi-plus" label="Expand All" @click="expandAll" class="p-mr-2" />
+                    <Button icon="pi pi-plus" label="Expand All" @click="expandAll" class="mr-2" />
                     <Button icon="pi pi-minus" label="Collapse All" @click="collapseAll" />
                 </div>
             </template>
@@ -335,7 +335,7 @@ export default {
                 @row-expand="onRowExpand" @row-collapse="onRowCollapse" responsive-layout="scroll">
                 <template #header>
                     <div class="table-header-container">
-                        <p-button icon="pi pi-plus" label="Expand All" @click="expandAll" class="p-mr-2"></p-button>
+                        <p-button icon="pi pi-plus" label="Expand All" @click="expandAll" class="mr-2"></p-button>
                         <p-button icon="pi pi-minus" label="Collapse All" @click="collapseAll"></p-button>
                     </div>
                 </template>
diff --git a/src/views/datatable/DataTableScrollDemo.vue b/src/views/datatable/DataTableScrollDemo.vue
index c049aecab..38b75914f 100755
--- a/src/views/datatable/DataTableScrollDemo.vue
+++ b/src/views/datatable/DataTableScrollDemo.vue
@@ -78,7 +78,7 @@
                 <h5>Frozen Columns</h5>
                 <ToggleButton v-model="balanceFrozen" onIcon="pi pi-lock" offIcon="pi pi-lock-open" onLabel="Unfreeze Balance" offLabel="Freeze Balance" style="flex-grow:1; flex-basis: 12rem" />
 
-                <DataTable :value="customers2" :scrollable="true" scrollHeight="400px" :loading="loading" scrollDirection="both" class="p-mt-3">
+                <DataTable :value="customers2" :scrollable="true" scrollHeight="400px" :loading="loading" scrollDirection="both" class="mt-3">
                     <Column field="name" header="Name" style="flex-grow:1; flex-basis:160px" frozen></Column>
                     <Column field="id" header="Id" style="flex-grow:1;flex-basis:100px"></Column>
                     <Column field="name" header="Name" style="flex-grow:1; flex-basis:200px"></Column>
@@ -90,7 +90,7 @@
                     <Column field="representative.name" header="Representative" style="flex-grow:1; flex-basis:200px"></Column>
                     <Column field="balance" header="Balance" style="flex-grow:1; flex-basis:120px" alignFrozen="right" :frozen="balanceFrozen">
                         <template #body="{data}">
-                             <span class="p-text-bold">{{formatCurrency(data.balance)}}</span>
+                             <span class="font-bold">{{formatCurrency(data.balance)}}</span>
                         </template>
                     </Column>
                 </DataTable>
@@ -120,7 +120,7 @@
                         <span class="image-text">{{slotProps.data.representative.name}}</span>
                     </template>
                     <template #groupfooter="slotProps">
-                        <td style="text-align: right" class="p-text-bold p-pr-6">Total Customers: {{calculateCustomerTotal(slotProps.data.representative.name)}}</td>
+                        <td style="text-align: right" class="font-bold p-pr-6">Total Customers: {{calculateCustomerTotal(slotProps.data.representative.name)}}</td>
                     </template>
                 </DataTable>
             </div>
@@ -216,7 +216,7 @@ export default {
             <h5>Frozen Columns</h5>
             <ToggleButton v-model="balanceFrozen" onIcon="pi pi-lock" offIcon="pi pi-lock-open" onLabel="Unfreeze Balance" offLabel="Freeze Balance" style="flex-grow:1; flex-basis: 12rem" />
 
-            <DataTable :value="customers2" :scrollable="true" scrollHeight="400px" :loading="loading" scrollDirection="both" class="p-mt-3">
+            <DataTable :value="customers2" :scrollable="true" scrollHeight="400px" :loading="loading" scrollDirection="both" class="mt-3">
                 <Column field="name" header="Name" style="flex-grow:1; flex-basis:160px" frozen></Column>
                 <Column field="id" header="Id" style="flex-grow:1; flex-basis:100px"></Column>
                 <Column field="name" header="Name" style="flex-grow:1; flex-basis:200px"></Column>
@@ -228,7 +228,7 @@ export default {
                 <Column field="representative.name" header="Representative" style="flex-grow:1; flex-basis:200px"></Column>
                 <Column field="balance" header="Balance" style="flex-grow:1; flex-basis:120px" alignFrozen="right" :frozen="balanceFrozen">
                     <template #body="{data}">
-                         <span class="p-text-bold">{{formatCurrency(data.balance)}}</span>
+                         <span class="font-bold">{{formatCurrency(data.balance)}}</span>
                     </template>
                 </Column>
             </DataTable>
@@ -258,7 +258,7 @@ export default {
                     <span class="image-text">{{slotProps.data.representative.name}}</span>
                 </template>
                 <template #groupfooter="slotProps">
-                    <td style="text-align: right" class="p-text-bold p-pr-6">Total Customers: {{calculateCustomerTotal(slotProps.data.representative.name)}}</td>
+                    <td style="text-align: right" class="font-bold p-pr-6">Total Customers: {{calculateCustomerTotal(slotProps.data.representative.name)}}</td>
                 </template>
             </DataTable>
         </div>
@@ -438,7 +438,7 @@ export default {
             <h5>Frozen Columns</h5>
             <ToggleButton v-model="balanceFrozen" onIcon="pi pi-lock" offIcon="pi pi-lock-open" onLabel="Unfreeze Balance" offLabel="Freeze Balance" style="flex-grow:1; flex-basis: 12rem" />
 
-            <DataTable :value="customers2" :scrollable="true" scrollHeight="400px" :loading="loading" scrollDirection="both" class="p-mt-3">
+            <DataTable :value="customers2" :scrollable="true" scrollHeight="400px" :loading="loading" scrollDirection="both" class="mt-3">
                 <Column field="name" header="Name" style="flex-grow:1; flex-basis:160px" frozen></Column>
                 <Column field="id" header="Id" style="flex-grow:1; flex-basis:100px"></Column>
                 <Column field="name" header="Name" style="flex-grow:1; flex-basis:200px"></Column>
@@ -450,7 +450,7 @@ export default {
                 <Column field="representative.name" header="Representative" style="flex-grow:1; flex-basis:200px"></Column>
                 <Column field="balance" header="Balance" style="flex-grow:1; flex-basis:120px" alignFrozen="right" :frozen="balanceFrozen">
                     <template #body="{data}">
-                         <span class="p-text-bold">{{formatCurrency(data.balance)}}</span>
+                         <span class="font-bold">{{formatCurrency(data.balance)}}</span>
                     </template>
                 </Column>
             </DataTable>
@@ -480,7 +480,7 @@ export default {
                     <span class="image-text">{{slotProps.data.representative.name}}</span>
                 </template>
                 <template #groupfooter="slotProps">
-                    <td style="text-align: right" class="p-text-bold p-pr-6">Total Customers: {{calculateCustomerTotal(slotProps.data.representative.name)}}</td>
+                    <td style="text-align: right" class="font-bold p-pr-6">Total Customers: {{calculateCustomerTotal(slotProps.data.representative.name)}}</td>
                 </template>
             </DataTable>
         </div>
@@ -664,7 +664,7 @@ export default {
                 <h5>Frozen Columns</h5>
                 <p-togglebutton v-model="balanceFrozen" on-icon="pi pi-lock" off-icon="pi pi-lock-open" on-label="Unfreeze Balance" off-label="Freeze Balance" style="flex-grow:1; flex-basis: 12rem"></p-togglebutton>
 
-                <p-datatable :value="customers2" :scrollable="true" scroll-height="400px" :loading="loading" scroll-direction="both" class="p-mt-3">
+                <p-datatable :value="customers2" :scrollable="true" scroll-height="400px" :loading="loading" scroll-direction="both" class="mt-3">
                     <p-column field="name" header="Name" style="flex-grow:1; flex-basis:160px" frozen></p-column>
                     <p-column field="id" header="Id" style="flex-grow:1; flex-basis:100px"></p-column>
                     <p-column field="name" header="Name" style="flex-grow:1; flex-basis:200px"></p-column>
@@ -676,7 +676,7 @@ export default {
                     <p-column field="representative.name" header="Representative" style="flex-grow:1; flex-basis:200px"></p-column>
                     <p-column field="balance" header="Balance" style="flex-grow:1; flex-basis:120px" alignFrozen="right" :frozen="balanceFrozen">
                         <template #body="{data}">
-                            <span class="p-text-bold">{{formatCurrency(data.balance)}}</span>
+                            <span class="font-bold">{{formatCurrency(data.balance)}}</span>
                         </template>
                     </p-column>
                 </p-datatable>
@@ -706,7 +706,7 @@ export default {
                         <span class="image-text">{{slotProps.data.representative.name}}</span>
                     </template>
                     <template #groupfooter="slotProps">
-                        <td style="text-align: right" class="p-text-bold p-pr-6">Total Customers: {{calculateCustomerTotal(slotProps.data.representative.name)}}</td>
+                        <td style="text-align: right" class="font-bold p-pr-6">Total Customers: {{calculateCustomerTotal(slotProps.data.representative.name)}}</td>
                     </template>
                 </p-datatable>
             </div>
diff --git a/src/views/datatable/DataTableStateDemo.vue b/src/views/datatable/DataTableStateDemo.vue
index 704cd8616..3c3a8074a 100755
--- a/src/views/datatable/DataTableStateDemo.vue
+++ b/src/views/datatable/DataTableStateDemo.vue
@@ -15,7 +15,7 @@
                     v-model:selection="selectedCustomer1" selectionMode="single" dataKey="id"
                     stateStorage="session" stateKey="dt-state-demo-session" responsiveLayout="scroll">
                     <template #header>
-                       <span class="p-input-icon-left">
+                        <span class="p-input-icon-left">
                             <i class="pi pi-search" />
                             <InputText v-model="filters1['global'].value" placeholder="Global Search" />
                         </span>
@@ -74,7 +74,7 @@
                     v-model:selection="selectedCustomer2" selectionMode="single" dataKey="id"
                     stateStorage="local" stateKey="dt-state-demo-local" responsiveLayout="scroll">
                     <template #header>
-                       <span class="p-input-icon-left">
+                        <span class="p-input-icon-left">
                             <i class="pi pi-search" />
                             <InputText v-model="filters2['global'].value" placeholder="Global Search" />
                         </span>
@@ -173,7 +173,7 @@ export default {
                 v-model:selection="selectedCustomer1" selectionMode="single" dataKey="id"
                 stateStorage="session" stateKey="dt-state-demo-session" responsiveLayout="scroll">
                 <template #header>
-                   <span class="p-input-icon-left">
+                    <span class="p-input-icon-left">
                         <i class="pi pi-search" />
                         <InputText v-model="filters1['global'].value" placeholder="Global Search" />
                     </span>
@@ -232,7 +232,7 @@ export default {
                 v-model:selection="selectedCustomer2" selectionMode="single" dataKey="id"
                 stateStorage="local" stateKey="dt-state-demo-local" responsiveLayout="scroll">
                 <template #header>
-                   <span class="p-input-icon-left">
+                    <span class="p-input-icon-left">
                         <i class="pi pi-search" />
                         <InputText v-model="filters2['global'].value" placeholder="Global Search" />
                     </span>
@@ -353,7 +353,7 @@ export default {
                 v-model:selection="selectedCustomer1" selectionMode="single" dataKey="id"
                 stateStorage="session" stateKey="dt-state-demo-session" responsiveLayout="scroll">
                 <template #header>
-                   <span class="p-input-icon-left">
+                    <span class="p-input-icon-left">
                         <i class="pi pi-search" />
                         <InputText v-model="filters1['global'].value" placeholder="Global Search" />
                     </span>
@@ -412,7 +412,7 @@ export default {
                 v-model:selection="selectedCustomer2" selectionMode="single" dataKey="id"
                 stateStorage="local" stateKey="dt-state-demo-local" responsiveLayout="scroll">
                 <template #header>
-                   <span class="p-input-icon-left">
+                    <span class="p-input-icon-left">
                         <i class="pi pi-search" />
                         <InputText v-model="filters2['global'].value" placeholder="Global Search" />
                     </span>
diff --git a/src/views/datatable/DataTableTemplatingDemo.vue b/src/views/datatable/DataTableTemplatingDemo.vue
index b3465f0e6..7dd72cb31 100755
--- a/src/views/datatable/DataTableTemplatingDemo.vue
+++ b/src/views/datatable/DataTableTemplatingDemo.vue
@@ -19,7 +19,7 @@
                     </template>
                     <Column field="name" header="Name"></Column>
                     <Column header="Image">
-                         <template #body="slotProps">
+                        <template #body="slotProps">
                             <img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.image" class="product-image" />
                         </template>
                     </Column>
@@ -30,7 +30,7 @@
                     </Column>
                     <Column field="rating" header="Reviews">
                         <template #body="slotProps">
-                           <Rating :modelValue="slotProps.data.rating" :readonly="true" :cancel="false" />
+                            <Rating :modelValue="slotProps.data.rating" :readonly="true" :cancel="false" />
                         </template>
                     </Column>
                     <Column header="Status">
@@ -72,7 +72,7 @@ export default {
             </template>
             <Column field="name" header="Name"></Column>
             <Column header="Image">
-                 <template #body="slotProps">
+                <template #body="slotProps">
                     <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="slotProps.data.image" class="product-image" />
                 </template>
             </Column>
@@ -83,7 +83,7 @@ export default {
             </Column>
             <Column field="rating" header="Reviews">
                 <template #body="slotProps">
-                   <Rating :modelValue="slotProps.data.rating" :readonly="true" :cancel="false" />
+                    <Rating :modelValue="slotProps.data.rating" :readonly="true" :cancel="false" />
                 </template>
             </Column>
             <Column header="Status">
@@ -150,7 +150,7 @@ export default {
             </template>
             <Column field="name" header="Name"></Column>
             <Column header="Image">
-                 <template #body="slotProps">
+                <template #body="slotProps">
                     <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="slotProps.data.image" class="product-image" />
                 </template>
             </Column>
@@ -161,7 +161,7 @@ export default {
             </Column>
             <Column field="rating" header="Reviews">
                 <template #body="slotProps">
-                   <Rating :modelValue="slotProps.data.rating" :readonly="true" :cancel="false" />
+                    <Rating :modelValue="slotProps.data.rating" :readonly="true" :cancel="false" />
                 </template>
             </Column>
             <Column header="Status">
diff --git a/src/views/datatable/DataTableVirtualScrollDemo.vue b/src/views/datatable/DataTableVirtualScrollDemo.vue
index 377c6d39e..687d54545 100644
--- a/src/views/datatable/DataTableVirtualScrollDemo.vue
+++ b/src/views/datatable/DataTableVirtualScrollDemo.vue
@@ -24,35 +24,35 @@
                 <DataTable :value="virtualCars" scrollable scrollHeight="400px" :virtualScrollerOptions="{ lazy: true, onLazyLoad: loadCarsLazy, itemSize: 46, delay: 200, showLoader: true, loading: lazyLoading, numToleratedItems: 10 }">
                     <Column field="id" header="Id" style="min-width: '200px'">
                         <template #loading>
-                            <div class="p-d-flex p-ai-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}">
+                            <div class="flex align-items-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}">
                                 <Skeleton width="60%" height="1rem" />
                             </div>
                         </template>
                     </Column>
                     <Column field="vin" header="Vin" style="min-width: '200px'">
                         <template #loading>
-                            <div class="p-d-flex p-ai-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}">
+                            <div class="flex align-items-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}">
                                 <Skeleton width="40%" height="1rem" />
                             </div>
                         </template>
                     </Column>
                     <Column field="year" header="Year" style="min-width: '200px'">
                         <template #loading>
-                            <div class="p-d-flex p-ai-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}">
+                            <div class="flex align-items-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}">
                                 <Skeleton width="30%" height="1rem" />
                             </div>
                         </template>
                     </Column>
                     <Column field="brand" header="Brand" style="min-width: '200px'">
                         <template #loading>
-                            <div class="p-d-flex p-ai-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}">
+                            <div class="flex align-items-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}">
                                 <Skeleton width="40%" height="1rem" />
                             </div>
                         </template>
                     </Column>
                     <Column field="color" header="Color" style="min-width: '200px'">
                         <template #loading>
-                            <div class="p-d-flex p-ai-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}">
+                            <div class="flex align-items-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}">
                                 <Skeleton width="60%" height="1rem" />
                             </div>
                         </template>
@@ -95,35 +95,35 @@ export default {
             <DataTable :value="virtualCars" scrollable scrollHeight="400px" :virtualScrollerOptions="{ lazy: true, onLazyLoad: loadCarsLazy, itemSize: 46, delay: 200, showLoader: true, loading: lazyLoading, numToleratedItems: 10 }">
                 <Column field="id" header="Id" style="min-width: '200px'">
                     <template #loading>
-                        <div class="p-d-flex p-ai-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}">
+                        <div class="flex align-items-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}">
                             <Skeleton width="60%" height="1rem" />
                         </div>
                     </template>
                 </Column>
                 <Column field="vin" header="Vin" style="min-width: '200px'">
                     <template #loading>
-                        <div class="p-d-flex p-ai-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}">
+                        <div class="flex align-items-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}">
                             <Skeleton width="40%" height="1rem" />
                         </div>
                     </template>
                 </Column>
                 <Column field="year" header="Year" style="min-width: '200px'">
                     <template #loading>
-                        <div class="p-d-flex p-ai-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}">
+                        <div class="flex align-items-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}">
                             <Skeleton width="30%" height="1rem" />
                         </div>
                     </template>
                 </Column>
                 <Column field="brand" header="Brand" style="min-width: '200px'">
                     <template #loading>
-                        <div class="p-d-flex p-ai-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}">
+                        <div class="flex align-items-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}">
                             <Skeleton width="40%" height="1rem" />
                         </div>
                     </template>
                 </Column>
                 <Column field="color" header="Color" style="min-width: '200px'">
                     <template #loading>
-                        <div class="p-d-flex p-ai-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}">
+                        <div class="flex align-items-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}">
                             <Skeleton width="60%" height="1rem" />
                         </div>
                     </template>
@@ -200,35 +200,35 @@ export default {
             <DataTable :value="virtualCars" scrollable scrollHeight="400px" :virtualScrollerOptions="{ lazy: true, onLazyLoad: loadCarsLazy, itemSize: 46, delay: 200, showLoader: true, loading: lazyLoading, numToleratedItems: 10 }">
                 <Column field="id" header="Id" style="min-width: '200px'">
                     <template #loading>
-                        <div class="p-d-flex p-ai-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}">
+                        <div class="flex align-items-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}">
                             <Skeleton width="60%" height="1rem" />
                         </div>
                     </template>
                 </Column>
                 <Column field="vin" header="Vin" style="min-width: '200px'">
                     <template #loading>
-                        <div class="p-d-flex p-ai-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}">
+                        <div class="flex align-items-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}">
                             <Skeleton width="40%" height="1rem" />
                         </div>
                     </template>
                 </Column>
                 <Column field="year" header="Year" style="min-width: '200px'">
                     <template #loading>
-                        <div class="p-d-flex p-ai-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}">
+                        <div class="flex align-items-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}">
                             <Skeleton width="30%" height="1rem" />
                         </div>
                     </template>
                 </Column>
                 <Column field="brand" header="Brand" style="min-width: '200px'">
                     <template #loading>
-                        <div class="p-d-flex p-ai-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}">
+                        <div class="flex align-items-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}">
                             <Skeleton width="40%" height="1rem" />
                         </div>
                     </template>
                 </Column>
                 <Column field="color" header="Color" style="min-width: '200px'">
                     <template #loading>
-                        <div class="p-d-flex p-ai-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}">
+                        <div class="flex align-items-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}">
                             <Skeleton width="60%" height="1rem" />
                         </div>
                     </template>
@@ -306,35 +306,35 @@ export default {
                 <p-datatable :value="virtualCars" scrollable scrollHeight="400px" :virtualScrollerOptions="{ lazy: true, onLazyLoad: loadCarsLazy, itemSize: 46, delay: 200, showLoader: true, loading: lazyLoading, numToleratedItems: 10 }">
                     <p-column field="id" header="Id" style="min-width: '200px'">
                         <template #loading>
-                            <div class="p-d-flex p-ai-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}">
+                            <div class="flex align-items-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}">
                                 <p-skeleton width="60%" height="1rem" />
                             </div>
                         </template>
                     </p-column>
                     <p-column field="vin" header="Vin" style="min-width: '200px'">
                         <template #loading>
-                            <div class="p-d-flex p-ai-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}">
+                            <div class="flex align-items-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}">
                                 <p-skeleton width="40%" height="1rem" />
                             </div>
                         </template>
                     </p-column>
                     <p-column field="year" header="Year" style="min-width: '200px'">
                         <template #loading>
-                            <div class="p-d-flex p-ai-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}">
+                            <div class="flex align-items-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}">
                                 <p-skeleton width="30%" height="1rem" />
                             </div>
                         </template>
                     </p-column>
                     <p-column field="brand" header="Brand" style="min-width: '200px'">
                         <template #loading>
-                            <div class="p-d-flex p-ai-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}">
+                            <div class="flex align-items-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}">
                                 <p-skeleton width="40%" height="1rem" />
                             </div>
                         </template>
                     </p-column>
                     <p-column field="color" header="Color" style="min-width: '200px'">
                         <template #loading>
-                            <div class="p-d-flex p-ai-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}">
+                            <div class="flex align-items-center" :style="{height: '17px', 'flex-grow': '1', overflow: 'hidden'}">
                                 <p-skeleton width="60%" height="1rem" />
                             </div>
                         </template>
diff --git a/src/views/dataview/DataViewDemo.vue b/src/views/dataview/DataViewDemo.vue
index 9f7792e12..1ebe4bc51 100755
--- a/src/views/dataview/DataViewDemo.vue
+++ b/src/views/dataview/DataViewDemo.vue
@@ -12,18 +12,18 @@
             <div class="card">
                 <DataView :value="products" :layout="layout" :paginator="true" :rows="9" :sortOrder="sortOrder" :sortField="sortField">
 					<template #header>
-                        <div class="p-grid p-nogutter">
-                            <div class="p-col-6" style="text-align: left">
+                        <div class="grid grid-nogutter">
+                            <div class="col-6" style="text-align: left">
                                 <Dropdown v-model="sortKey" :options="sortOptions" optionLabel="label" placeholder="Sort By Price" @change="onSortChange($event)"/>
                             </div>
-                            <div class="p-col-6" style="text-align: right">
+                            <div class="col-6" style="text-align: right">
                                 <DataViewLayoutOptions v-model="layout" />
                             </div>
                         </div>
 					</template>
 
 					<template #list="slotProps">
-						<div class="p-col-12">
+						<div class="col-12">
 							<div class="product-list-item">
 								<img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name"/>
 								<div class="product-list-detail">
@@ -42,7 +42,7 @@
 					</template>
 
 					<template #grid="slotProps">
-						<div class="p-col-12 p-md-4">
+						<div class="col-12 md:col-4">
 							<div class="product-grid-item card">
 								<div class="product-grid-item-top">
 									<div>
diff --git a/src/views/dataview/DataViewDoc.vue b/src/views/dataview/DataViewDoc.vue
index 24518dee0..b4138ecce 100755
--- a/src/views/dataview/DataViewDoc.vue
+++ b/src/views/dataview/DataViewDoc.vue
@@ -43,15 +43,15 @@ export default {
 		<p>Note that there is no restriction to use both layouts at the same time, you may configure only one layout using the layout property with the corresponding template.</p>
 <pre v-code><code><template v-pre>
 &lt;template #list="slotProps"&gt;
-	&lt;div class="p-col-12"&gt;
+	&lt;div class="col-12"&gt;
         &lt;div class="car-details"&gt;
             &lt;div&gt;
                 &lt;img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/&gt;
-                &lt;div class="p-grid"&gt;
-                    &lt;div class="p-col-12"&gt;Vin: &lt;b&gt;&#123;&#123;slotProps.data.vin&#125;&#125;&lt;/b&gt;&lt;/div&gt;
-                    &lt;div class="p-col-12"&gt;Year: &lt;b&gt;&#123;&#123;slotProps.data.year&#125;&#125;&lt;/b&gt;&lt;/div&gt;
-                    &lt;div class="p-col-12"&gt;Brand: &lt;b&gt;&#123;&#123;slotProps.data.brand&#125;&#125;&lt;/b&gt;&lt;/div&gt;
-                    &lt;div class="p-col-12"&gt;Color: &lt;b&gt;&#123;&#123;slotProps.data.color&#125;&#125;&lt;/b&gt;&lt;/div&gt;
+                &lt;div class="grid"&gt;
+                    &lt;div class="col-12"&gt;Vin: &lt;b&gt;&#123;&#123;slotProps.data.vin&#125;&#125;&lt;/b&gt;&lt;/div&gt;
+                    &lt;div class="col-12"&gt;Year: &lt;b&gt;&#123;&#123;slotProps.data.year&#125;&#125;&lt;/b&gt;&lt;/div&gt;
+                    &lt;div class="col-12"&gt;Brand: &lt;b&gt;&#123;&#123;slotProps.data.brand&#125;&#125;&lt;/b&gt;&lt;/div&gt;
+                    &lt;div class="col-12"&gt;Color: &lt;b&gt;&#123;&#123;slotProps.data.color&#125;&#125;&lt;/b&gt;&lt;/div&gt;
                 &lt;/div&gt;
             &lt;/div&gt;
             &lt;Button icon="pi pi-search"&gt;&lt;/Button&gt;
@@ -59,7 +59,7 @@ export default {
     &lt;/div&gt;
 &lt;/template&gt;
 &lt;template #grid="slotProps"&gt;
-	&lt;div style="padding: .5em" class="p-col-12 p-md-3"&gt;
+	&lt;div style="padding: .5em" class="col-12 md:col-3"&gt;
 		&lt;Panel :header="slotProps.data.vin" style="text-align: center"&gt;
 			&lt;img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand"/&gt;
 			&lt;div class="car-detail"&gt;{{slotProps.data.year}} - {{slotProps.data.color}}&lt;/div&gt;
@@ -133,11 +133,11 @@ export default {
 <pre v-code><code><template v-pre>
 &lt;DataView :value="cars" :layout="layout" :sortOrder="sortOrder" :sortField="sortField"&gt;
     &lt;template #header&gt;
-        &lt;div class="p-grid p-nogutter"&gt;
-            &lt;div class="p-col-6" style="text-align: left"&gt;
+        &lt;div class="grid grid-nogutter"&gt;
+            &lt;div class="col-6" style="text-align: left"&gt;
                 &lt;Dropdown v-model="sortKey" :options="sortOptions" optionLabel="label" placeholder="Sort By" @change="onSortChange($event)"/&gt;
             &lt;/div&gt;
-            &lt;div class="p-col-6" style="text-align: right"&gt;
+            &lt;div class="col-6" style="text-align: right"&gt;
                 &lt;DataViewLayoutOptions v-model="layout" /&gt;
             &lt;/div&gt;
         &lt;/div&gt;
@@ -451,7 +451,7 @@ export default {
         </div>
 
 		<h5>Dependencies</h5>
-        <p>PrimeFlex 2.0.0.</p>
+        <p>PrimeFlex</p>
     </AppDoc>
 </template>
 
@@ -467,18 +467,18 @@ export default {
     <div class="card">
         <DataView :value="products" :layout="layout" :paginator="true" :rows="9" :sortOrder="sortOrder" :sortField="sortField">
 			<template #header>
-                <div class="p-grid p-nogutter">
-                    <div class="p-col-6" style="text-align: left">
+                <div class="grid grid-nogutter">
+                    <div class="col-6" style="text-align: left">
                         <Dropdown v-model="sortKey" :options="sortOptions" optionLabel="label" placeholder="Sort By Price" @change="onSortChange($event)"/>
                     </div>
-                    <div class="p-col-6" style="text-align: right">
+                    <div class="col-6" style="text-align: right">
                         <DataViewLayoutOptions v-model="layout" />
                     </div>
                 </div>
 			</template>
 
 			<template #list="slotProps">
-				<div class="p-col-12">
+				<div class="col-12">
 					<div class="product-list-item">
 						<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="slotProps.data.name"/>
 						<div class="product-list-detail">
@@ -497,7 +497,7 @@ export default {
 			</template>
 
 			<template #grid="slotProps">
-				<div class="p-col-12 p-md-4">
+				<div class="col-12 md:col-4">
 					<div class="product-grid-item card">
 						<div class="product-grid-item-top">
 							<div>
@@ -702,18 +702,18 @@ export default {
     <div class="card">
         <DataView :value="products" :layout="layout" :paginator="true" :rows="9" :sortOrder="sortOrder" :sortField="sortField">
 			<template #header>
-                <div class="p-grid p-nogutter">
-                    <div class="p-col-6" style="text-align: left">
+                <div class="grid grid-nogutter">
+                    <div class="col-6" style="text-align: left">
                         <Dropdown v-model="sortKey" :options="sortOptions" optionLabel="label" placeholder="Sort By Price" @change="onSortChange($event)"/>
                     </div>
-                    <div class="p-col-6" style="text-align: right">
+                    <div class="col-6" style="text-align: right">
                         <DataViewLayoutOptions v-model="layout" />
                     </div>
                 </div>
 			</template>
 
 			<template #list="slotProps">
-				<div class="p-col-12">
+				<div class="col-12">
 					<div class="product-list-item">
 						<img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="slotProps.data.name"/>
 						<div class="product-list-detail">
@@ -732,7 +732,7 @@ export default {
 			</template>
 
 			<template #grid="slotProps">
-				<div class="p-col-12 p-md-4">
+				<div class="col-12 md:col-4">
 					<div class="product-grid-item card">
 						<div class="product-grid-item-top">
 							<div>
@@ -939,18 +939,18 @@ export default {
             <div class="card">
                 <p-dataview :value="products" :layout="layout" :paginator="true" :rows="9" :sort-order="sortOrder" :sort-field="sortField">
                     <template #header>
-                        <div class="p-grid p-nogutter">
-                            <div class="p-col-6" style="text-align: left">
+                        <div class="grid grid-nogutter">
+                            <div class="col-6" style="text-align: left">
                                 <p-dropdown v-model="sortKey" :options="sortOptions" option-label="label" placeholder="Sort By Price" @change="onSortChange($event)"></p-dropdown>
                             </div>
-                            <div class="p-col-6" style="text-align: right">
+                            <div class="col-6" style="text-align: right">
                                 <p-dataviewlayoutoptions v-model="layout"></p-dataviewlayoutoptions>
                             </div>
                         </div>
                     </template>
 
                     <template #list="slotProps">
-                        <div class="p-col-12">
+                        <div class="col-12">
                             <div class="product-list-item">
                                 <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="slotProps.data.name"/>
                                 <div class="product-list-detail">
@@ -969,7 +969,7 @@ export default {
                     </template>
 
                     <template #grid="slotProps">
-                        <div class="p-col-12 p-md-4">
+                        <div class="col-12 md:col-4">
                             <div class="product-grid-item card">
                                 <div class="product-grid-item-top">
                                     <div>
diff --git a/src/views/dialog/DialogDemo.vue b/src/views/dialog/DialogDemo.vue
index 536e25ef1..629a6b969 100755
--- a/src/views/dialog/DialogDemo.vue
+++ b/src/views/dialog/DialogDemo.vue
@@ -48,7 +48,7 @@
                 <h5>Modal</h5>
                 <Button label="Show" icon="pi pi-external-link" @click="openModal" />
                 <Dialog header="Header" v-model:visible="displayModal" :style="{width: '50vw'}" :modal="true">
-                    <p class="p-m-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+                    <p class="m-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
                         laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                         Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                     <template #footer>
@@ -74,7 +74,7 @@
                 <Button label="Confirm" icon="pi pi-external-link" @click="openConfirmation" />
                 <Dialog header="Confirmation" v-model:visible="displayConfirmation" :style="{width: '350px'}" :modal="true">
                     <div class="confirmation-content">
-                        <i class="pi pi-exclamation-triangle p-mr-3" style="font-size: 2rem" />
+                        <i class="pi pi-exclamation-triangle mr-3" style="font-size: 2rem" />
                         <span>Are you sure you want to proceed?</span>
                     </div>
                     <template #footer>
@@ -86,7 +86,7 @@
                 <h5>Maximizable</h5>
                 <Button label="Show" icon="pi pi-external-link" @click="openMaximizable" />
                 <Dialog header="Header" v-model:visible="displayMaximizable" :style="{width: '50vw'}" :maximizable="true" :modal="true">
-                    <p class="p-m-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+                    <p class="m-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
                         laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                         Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                     <template #footer>
@@ -96,17 +96,17 @@
                 </Dialog>
 
                 <h5>Position</h5>
-                <div class="p-grid p-dir-col">
-                    <div class="p-col">
+                <div class="grid flex-column">
+                    <div class="col">
                         <Button label="Left" icon="pi pi-arrow-right" @click="openPosition('left')" class="p-button-warning" />
                         <Button label="Right" icon="pi pi-arrow-left" @click="openPosition('right')" class="p-button-warning" />
                     </div>
-                    <div class="p-col">
+                    <div class="col">
                         <Button label="Top" icon="pi pi-arrow-down" @click="openPosition('top')" class="p-button-warning" />
                         <Button label="TopLeft" icon="pi pi-arrow-down-right" @click="openPosition('topleft')" class="p-button-warning" />
                         <Button label="TopRight" icon="pi pi-arrow-down-left" @click="openPosition('topright')" class="p-button-warning" />
                     </div>
-                    <div class="p-col">
+                    <div class="col">
                         <Button label="Bottom" icon="pi pi-arrow-up" @click="openPosition('bottom')" class="p-button-warning" />
                         <Button label="BottomLeft" icon="pi pi-arrow-up-right" @click="openPosition('bottomleft')" class="p-button-warning" />
                         <Button label="BottomRight" icon="pi pi-arrow-up-left" @click="openPosition('bottomright')" class="p-button-warning" />
@@ -114,7 +114,7 @@
                 </div>
 
                 <Dialog header="Header" v-model:visible="displayPosition" :style="{width: '50vw'}" :position="position" :modal="true">
-                   <p class="p-m-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+                    <p class="m-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
                         laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                         Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                     <template #footer>
diff --git a/src/views/dialog/DialogDoc.vue b/src/views/dialog/DialogDoc.vue
index 6541e4a37..5c3f4f710 100755
--- a/src/views/dialog/DialogDoc.vue
+++ b/src/views/dialog/DialogDoc.vue
@@ -392,7 +392,7 @@ export default {
         <h5>Modal</h5>
         <Button label="Show" icon="pi pi-external-link" @click="openModal" />
         <Dialog header="Header" v-model:visible="displayModal" :style="{width: '50vw'}" :modal="true">
-            <p class="p-m-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+            <p class="m-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
                 laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                 Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
             <template #footer>
@@ -418,7 +418,7 @@ export default {
         <Button label="Confirm" icon="pi pi-external-link" @click="openConfirmation" />
         <Dialog header="Confirmation" v-model:visible="displayConfirmation" :style="{width: '350px'}" :modal="true">
             <div class="confirmation-content">
-                <i class="pi pi-exclamation-triangle p-mr-3" style="font-size: 2rem" />
+                <i class="pi pi-exclamation-triangle mr-3" style="font-size: 2rem" />
                 <span>Are you sure you want to proceed?</span>
             </div>
             <template #footer>
@@ -430,7 +430,7 @@ export default {
         <h5>Maximizable</h5>
         <Button label="Show" icon="pi pi-external-link" @click="openMaximizable" />
         <Dialog header="Header" v-model:visible="displayMaximizable" :style="{width: '50vw'}" :maximizable="true" :modal="true">
-            <p class="p-m-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+            <p class="m-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
                 laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                 Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
             <template #footer>
@@ -440,17 +440,17 @@ export default {
         </Dialog>
 
         <h5>Position</h5>
-        <div class="p-grid p-dir-col">
-            <div class="p-col">
+        <div class="grid flex-column">
+            <div class="col">
                 <Button label="Left" icon="pi pi-arrow-right" @click="openPosition('left')" class="p-button-warning" />
                 <Button label="Right" icon="pi pi-arrow-left" @click="openPosition('right')" class="p-button-warning" />
             </div>
-            <div class="p-col">
+            <div class="col">
                 <Button label="Top" icon="pi pi-arrow-down" @click="openPosition('top')" class="p-button-warning" />
                 <Button label="TopLeft" icon="pi pi-arrow-down-right" @click="openPosition('topleft')" class="p-button-warning" />
                 <Button label="TopRight" icon="pi pi-arrow-down-left" @click="openPosition('topright')" class="p-button-warning" />
             </div>
-            <div class="p-col">
+            <div class="col">
                 <Button label="Bottom" icon="pi pi-arrow-up" @click="openPosition('bottom')" class="p-button-warning" />
                 <Button label="BottomLeft" icon="pi pi-arrow-up-right" @click="openPosition('bottomleft')" class="p-button-warning" />
                 <Button label="BottomRight" icon="pi pi-arrow-up-left" @click="openPosition('bottomright')" class="p-button-warning" />
@@ -458,7 +458,7 @@ export default {
         </div>
 
         <Dialog header="Header" v-model:visible="displayPosition" :style="{width: '50vw'}" :position="position" :modal="true">
-            <p class="p-m-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+            <p class="m-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
                 laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                 Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
             <template #footer>
@@ -595,7 +595,7 @@ p {
         <h5>Modal</h5>
         <Button label="Show" icon="pi pi-external-link" @click="openModal" />
         <Dialog header="Header" v-model:visible="displayModal" :style="{width: '50vw'}" :modal="true">
-            <p class="p-m-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+            <p class="m-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
                 laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                 Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
             <template #footer>
@@ -621,7 +621,7 @@ p {
         <Button label="Confirm" icon="pi pi-external-link" @click="openConfirmation" />
         <Dialog header="Confirmation" v-model:visible="displayConfirmation" :style="{width: '350px'}" :modal="true">
             <div class="confirmation-content">
-                <i class="pi pi-exclamation-triangle p-mr-3" style="font-size: 2rem" />
+                <i class="pi pi-exclamation-triangle mr-3" style="font-size: 2rem" />
                 <span>Are you sure you want to proceed?</span>
             </div>
             <template #footer>
@@ -633,7 +633,7 @@ p {
         <h5>Maximizable</h5>
         <Button label="Show" icon="pi pi-external-link" @click="openMaximizable" />
         <Dialog header="Header" v-model:visible="displayMaximizable" :style="{width: '50vw'}" :maximizable="true" :modal="true">
-            <p class="p-m-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+            <p class="m-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
                 laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                 Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
             <template #footer>
@@ -643,17 +643,17 @@ p {
         </Dialog>
 
         <h5>Position</h5>
-        <div class="p-grid p-dir-col">
-            <div class="p-col">
+        <div class="grid p-dir-col">
+            <div class="col">
                 <Button label="Left" icon="pi pi-arrow-right" @click="openPosition('left')" class="p-button-warning" />
                 <Button label="Right" icon="pi pi-arrow-left" @click="openPosition('right')" class="p-button-warning" />
             </div>
-            <div class="p-col">
+            <div class="col">
                 <Button label="Top" icon="pi pi-arrow-down" @click="openPosition('top')" class="p-button-warning" />
                 <Button label="TopLeft" icon="pi pi-arrow-down-right" @click="openPosition('topleft')" class="p-button-warning" />
                 <Button label="TopRight" icon="pi pi-arrow-down-left" @click="openPosition('topright')" class="p-button-warning" />
             </div>
-            <div class="p-col">
+            <div class="col">
                 <Button label="Bottom" icon="pi pi-arrow-up" @click="openPosition('bottom')" class="p-button-warning" />
                 <Button label="BottomLeft" icon="pi pi-arrow-up-right" @click="openPosition('bottomleft')" class="p-button-warning" />
                 <Button label="BottomRight" icon="pi pi-arrow-up-left" @click="openPosition('bottomright')" class="p-button-warning" />
@@ -661,7 +661,7 @@ p {
         </div>
 
         <Dialog header="Header" v-model:visible="displayPosition" :style="{width: '50vw'}" :position="position" :modal="true">
-            <p class="p-m-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+            <p class="m-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
                 laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                 Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
             <template #footer>
@@ -799,7 +799,7 @@ p {
             <h5>Modal</h5>
             <p-button label="Show" icon="pi pi-external-link" @click="openModal"></p-button>
             <p-dialog header="Header" v-model:visible="displayModal" :style="{width: '50vw'}" :modal="true">
-                <p class="p-m-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+                <p class="m-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
                     laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                     Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                 <template #footer>
@@ -825,7 +825,7 @@ p {
             <p-button label="Confirm" icon="pi pi-external-link" @click="openConfirmation"></p-button>
             <p-dialog header="Confirmation" v-model:visible="displayConfirmation" :style="{width: '350px'}" :modal="true">
                 <div class="confirmation-content">
-                    <i class="pi pi-exclamation-triangle p-mr-3" style="font-size: 2rem"></i>
+                    <i class="pi pi-exclamation-triangle mr-3" style="font-size: 2rem"></i>
                     <span>Are you sure you want to proceed?</span>
                 </div>
                 <template #footer>
@@ -837,7 +837,7 @@ p {
             <h5>Maximizable</h5>
             <p-button label="Show" icon="pi pi-external-link" @click="openMaximizable"></p-button>
             <p-dialog header="Header" v-model:visible="displayMaximizable" :style="{width: '50vw'}" :maximizable="true" :modal="true">
-                <p class="p-m-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+                <p class="m-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
                     laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                     Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                 <template #footer>
@@ -847,17 +847,17 @@ p {
             </p-dialog>
 
             <h5>Position</h5>
-            <div class="p-grid p-dir-col">
-                <div class="p-col">
+            <div class="grid p-dir-col">
+                <div class="col">
                     <p-button label="Left" icon="pi pi-arrow-right" @click="openPosition('left')" class="p-button-warning"></p-button>
                     <p-button label="Right" icon="pi pi-arrow-left" @click="openPosition('right')" class="p-button-warning"></p-button>
                 </div>
-                <div class="p-col">
+                <div class="col">
                     <p-button label="Top" icon="pi pi-arrow-down" @click="openPosition('top')" class="p-button-warning"></p-button>
                     <p-button label="TopLeft" icon="pi pi-arrow-down-right" @click="openPosition('topleft')" class="p-button-warning"></p-button>
                     <p-button label="TopRight" icon="pi pi-arrow-down-left" @click="openPosition('topright')" class="p-button-warning"></p-button>
                 </div>
-                <div class="p-col">
+                <div class="col">
                     <p-button label="Bottom" icon="pi pi-arrow-up" @click="openPosition('bottom')" class="p-button-warning"></p-button>
                     <p-button label="BottomLeft" icon="pi pi-arrow-up-right" @click="openPosition('bottomleft')" class="p-button-warning"></p-button>
                     <p-button label="BottomRight" icon="pi pi-arrow-up-left" @click="openPosition('bottomright')" class="p-button-warning"></p-button>
@@ -865,7 +865,7 @@ p {
             </div>
 
             <p-dialog header="Header" v-model:visible="displayPosition" :style="{width: '50vw'}" :position="position" :modal="true">
-            <p class="p-m-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
+            <p class="m-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
                     laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                     Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                 <template #footer>
diff --git a/src/views/display/DisplayDemo.vue b/src/views/display/DisplayDemo.vue
index 23c2e8532..0cedcb865 100644
--- a/src/views/display/DisplayDemo.vue
+++ b/src/views/display/DisplayDemo.vue
@@ -11,26 +11,20 @@
         <div class="content-section implementation">
             <div class="card">
                 <h5>Inline</h5>
-                <InputText class="p-mr-2 p-d-inline" />
-                <InputText class="p-d-inline" />
+                <InputText class="mr-2 inline" />
+                <InputText class="inline" />
 
                 <h5>Block</h5>
-                <InputText class="p-mb-2 p-d-block" />
-                <InputText class="p-d-block" />
+                <InputText class="mb-2 block" />
+                <InputText class="block" />
 
                 <h5>Visible on a Small Screen</h5>
                 <p>Resize to view.</p>
-                <Button type="button" icon="pi pi-bars" class="p-button-rounded p-d-md-none" />
+                <Button type="button" icon="pi pi-bars" class="p-button-rounded md:hidden" />
 
                 <h5>Hidden on a Small Screen</h5>
                 <p>Resize to hide.</p>
-                <Button type="button" icon="pi pi-search" class="p-button-rounded p-button-success p-d-none p-d-md-inline-flex" />
-
-                <h5>Visible to Print, Invisible for Screen</h5>
-                <p class="p-d-none p-d-print-block">Only visible when printed.</p>
-
-                <h5>Visible to Screen, Invisible for Print</h5>
-                <p class="p-d-block p-d-print-none">Not available for printing.</p>
+                <Button type="button" icon="pi pi-search" class="p-button-rounded p-button-success hidden md:inline-flex" />
             </div>
         </div>
 
diff --git a/src/views/display/DisplayDoc.vue b/src/views/display/DisplayDoc.vue
index c53926040..b5774c63a 100644
--- a/src/views/display/DisplayDoc.vue
+++ b/src/views/display/DisplayDoc.vue
@@ -1,12 +1,12 @@
 <template>
 	<AppDoc name="DisplayDemo" :sources="sources" github="display/DisplayDemo.vue">
         <h5>Getting Started</h5>
-        <p>The display classes use the <i>p-d-{value}</i> format and <i>p-d-{breakpoint}-{value}</i> format for responsive design.</p>
+        <p>The display classes use the <i>{value}</i> format and <i>{breakpoint}:{value}</i> format for responsive design.</p>
 
         <h5>Values</h5>
         <p>Value field can be one of the following options.</p>
         <ul>
-            <li>none</li>
+            <li>hidden</li>
             <li>inline</li>
             <li>inline-block</li>
             <li>block</li>
@@ -26,13 +26,11 @@
 
         <h5>Examples</h5>
 <pre v-code><code>
-&lt;div class="p-d-inline"&gt;Displayed as inline.&lt;/div&gt;
-&lt;div class="p-d-flex"&gt;Displayed as a flexbox container.&lt;/div&gt;
-&lt;div class="p-d-block p-d-lg-inline"&gt;Inline for larger screens and block for others.&lt;/div&gt;
-&lt;div class="p-d-md-none"&gt;Visible on a Small Screen&lt;/div&gt;
-&lt;div class="p-d-none p-d-md-inline-flex"&gt;Hidden on a Small Screen&lt;/div&gt;
-&lt;div class="p-d-none p-d-print-block"&gt;Only visible when printed.&lt;/div&gt;
-&lt;div class="p-d-block p-d-print-none"&gt;Not available for printing.&lt;/div&gt;
+&lt;div class="inline"&gt;Displayed as inline.&lt;/div&gt;
+&lt;div class="flex"&gt;Displayed as a flexbox container.&lt;/div&gt;
+&lt;div class="block lg:inline"&gt;Inline for larger screens and block for others.&lt;/div&gt;
+&lt;div class="md:hidden"&gt;Visible on a Small Screen&lt;/div&gt;
+&lt;div class="hidden md:inline-flex"&gt;Hidden on a Small Screen&lt;/div&gt;
 
 </code></pre>
 
@@ -40,7 +38,7 @@
         <p>A custom build with different values can be obtained from <a href="https://github.com/primefaces/primeflex">PrimeFlex</a> using the _variables.scss file.</p>
 
         <h5>Dependencies</h5>
-        <p>PrimeFlex 2.0.0.</p>
+        <p>PrimeFlex 3.1.2.</p>
     </AppDoc>
 </template>
 
@@ -53,28 +51,22 @@ export default {
                     tabName: 'Options API Source',
                     content: `
 <template>
-   <div>
+    <div>
         <h5>Inline</h5>
-        <InputText class="p-mr-2 p-d-inline" />
-        <InputText class="p-d-inline" />
+        <InputText class="mr-2 inline" />
+        <InputText class="inline" />
 
         <h5>Block</h5>
-        <InputText class="p-mb-2 p-d-block" />
-        <InputText class="p-d-block" />
+        <InputText class="mb-2 block" />
+        <InputText class="block" />
 
         <h5>Visible on a Small Screen</h5>
         <p>Resize to view.</p>
-        <Button type="button" icon="pi pi-bars" class="p-button-rounded p-d-md-none" />
+        <Button type="button" icon="pi pi-bars" class="p-button-rounded md:hidden" />
 
         <h5>Hidden on a Small Screen</h5>
         <p>Resize to hide.</p>
-        <Button type="button" icon="pi pi-search" class="p-button-rounded p-button-success p-d-none p-d-md-inline-flex" />
-
-        <h5>Visible to Print, Invisible for Screen</h5>
-        <p class="p-d-none p-d-print-block">Only visible when printed.</p>
-
-        <h5>Visible to Screen, Invisible for Print</h5>
-        <p class="p-d-block p-d-print-none">Not available for printing.</p>
+        <Button type="button" icon="pi pi-search" class="p-button-rounded p-button-success hidden md:inline-flex" />
     </div>
 </template>
 
@@ -89,28 +81,22 @@ export default {
                     tabName: 'Composition API Source',
                     content: `
 <template>
-   <div>
+    <div>
         <h5>Inline</h5>
-        <InputText class="p-mr-2 p-d-inline" />
-        <InputText class="p-d-inline" />
+        <InputText class="mr-2 inline" />
+        <InputText class="inline" />
 
         <h5>Block</h5>
-        <InputText class="p-mb-2 p-d-block" />
-        <InputText class="p-d-block" />
+        <InputText class="mb-2 block" />
+        <InputText class="block" />
 
         <h5>Visible on a Small Screen</h5>
         <p>Resize to view.</p>
-        <Button type="button" icon="pi pi-bars" class="p-button-rounded p-d-md-none" />
+        <Button type="button" icon="pi pi-bars" class="p-button-rounded md:hidden" />
 
         <h5>Hidden on a Small Screen</h5>
         <p>Resize to hide.</p>
-        <Button type="button" icon="pi pi-search" class="p-button-rounded p-button-success p-d-none p-d-md-inline-flex" />
-
-        <h5>Visible to Print, Invisible for Screen</h5>
-        <p class="p-d-none p-d-print-block">Only visible when printed.</p>
-
-        <h5>Visible to Screen, Invisible for Print</h5>
-        <p class="p-d-block p-d-print-none">Not available for printing.</p>
+        <Button type="button" icon="pi pi-search" class="p-button-rounded p-button-success hidden md:inline-flex" />
     </div>
 </template>
 
@@ -125,26 +111,20 @@ export default {
                     tabName: 'Browser Source',
                     content: `<div id="app">
             <h5>Inline</h5>
-            <p-inputtext class="p-mr-2 p-d-inline"></p-inputtext>
-            <p-inputtext class="p-d-inline"></p-inputtext>
+            <p-inputtext class="mr-2 inline"></p-inputtext>
+            <p-inputtext class="inline"></p-inputtext>
 
             <h5>Block</h5>
-            <p-inputtext class="p-mb-2 p-d-block"></p-inputtext>
-            <p-inputtext class="p-d-block"></p-inputtext>
+            <p-inputtext class="mb-2 block"></p-inputtext>
+            <p-inputtext class="block"></p-inputtext>
 
             <h5>Visible on a Small Screen</h5>
             <p>Resize to view.</p>
-            <p-button type="button" icon="pi pi-bars" class="p-button-rounded p-d-md-none"></p-button>
+            <p-button type="button" icon="pi pi-bars" class="p-button-rounded md:hidden"></p-button>
 
             <h5>Hidden on a Small Screen</h5>
             <p>Resize to hide.</p>
-            <p-button type="button" icon="pi pi-search" class="p-button-rounded p-button-success p-d-none p-d-md-inline-flex"></p-button>
-
-            <h5>Visible to Print, Invisible for Screen</h5>
-            <p class="p-d-none p-d-print-block">Only visible when printed.</p>
-
-            <h5>Visible to Screen, Invisible for Print</h5>
-            <p class="p-d-block p-d-print-none">Not available for printing.</p>
+            <p-button type="button" icon="pi pi-search" class="p-button-rounded p-button-success hidden md:inline-flex"></p-button>
         </div>
 
     <script type="module">
diff --git a/src/views/divider/DividerDemo.vue b/src/views/divider/DividerDemo.vue
index 5334f70e6..de0b997f4 100644
--- a/src/views/divider/DividerDemo.vue
+++ b/src/views/divider/DividerDemo.vue
@@ -72,8 +72,8 @@
                         Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 
                 <Divider align="left">
-                    <div class="p-d-inline-flex p-ai-center">
-                        <i class="pi pi-user p-mr-2"></i>
+                    <div class="inline-flex align-items-center">
+                        <i class="pi pi-user mr-2"></i>
                         <b>Icon</b>
                     </div>
                 </Divider>
@@ -101,7 +101,7 @@
 
             <div class="card">
                 <h5>Vertical</h5>
-                <div class="p-d-flex">
+                <div class="flex">
                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
                             ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                             Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
@@ -122,26 +122,26 @@
 
             <div class="card">
                 <h5>Vertical with Content</h5>
-                <div class="p-grid">
-                    <div class="p-col-5 p-d-flex p-ai-center p-jc-center">
+                <div class="grid">
+                    <div class="col-5 flex align-items-center justify-content-center">
                         <div class="p-fluid">
-                            <div class="p-field">
+                            <div class="field">
                                 <label for="username">Username</label>
                                 <InputText id="username" type="text" />
                             </div>
-                            <div class="p-field">
+                            <div class="field">
                                 <label for="password">Password</label>
                                 <InputText id="password" type="password" />
                             </div>
                             <Button label="Login"></Button>
-                         </div>
+                        </div>
                     </div>
-                    <div class="p-col-2">
+                    <div class="col-2">
                         <Divider layout="vertical">
                             <b>OR</b>
                         </Divider>
                     </div>
-                    <div class="p-col-5 p-d-flex p-ai-center p-jc-center">
+                    <div class="col-5 flex align-items-center justify-content-center">
                         <Button label="Sign Up" icon="pi pi-user-plus" class="p-button-success"></Button>
                     </div>
                 </div>
diff --git a/src/views/divider/DividerDoc.vue b/src/views/divider/DividerDoc.vue
index a4fa3dd6d..a561a571f 100644
--- a/src/views/divider/DividerDoc.vue
+++ b/src/views/divider/DividerDoc.vue
@@ -34,7 +34,7 @@ import Divider from 'primevue/divider';
         <h5>Vertical Divider</h5>
         <p>Vertical divider is enabled by setting the <i>layout</i> property as "vertical".</p>
 <pre v-code><code>
-&lt;div class="p-d-flex"&gt;
+&lt;div class="flex"&gt;
     &lt;div&gt;Content 1&lt;/div&gt;
     &lt;Divider layout="vertical" /&gt;
     &lt;div&gt;Content 2&lt;/div&gt;
@@ -53,8 +53,8 @@ import Divider from 'primevue/divider';
 &lt;div&gt;Content 1&lt;/div&gt;
 
 &lt;Divider align="left"&gt;
-    &lt;div class="p-d-inline-flex p-ai-center"&gt;
-        &lt;i class="pi pi-user p-mr-2"&gt;&lt;/i&gt;
+    &lt;div class="inline-flex align-items-center"&gt;
+        &lt;i class="pi pi-user mr-2"&gt;&lt;/i&gt;
         &lt;b&gt;Icon&lt;/b&gt;
     &lt;/div&gt;
 &lt;/Divider&gt;
@@ -248,8 +248,8 @@ export default {
                     Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 
             <Divider align="left">
-                <div class="p-d-inline-flex p-ai-center">
-                    <i class="pi pi-user p-mr-2"></i>
+                <div class="inline-flex align-items-center">
+                    <i class="pi pi-user mr-2"></i>
                     <b>Icon</b>
                 </div>
             </Divider>
@@ -277,7 +277,7 @@ export default {
 
         <div class="card">
             <h5>Vertical</h5>
-            <div class="p-d-flex">
+            <div class="flex">
                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
                         ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                         Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
@@ -298,26 +298,26 @@ export default {
 
         <div class="card">
             <h5>Vertical with Content</h5>
-            <div class="p-grid">
-                <div class="p-col-5 p-d-flex p-ai-center p-jc-center">
+            <div class="grid">
+                <div class="col-5 flex align-items-center justify-content-center">
                     <div class="p-fluid">
-                        <div class="p-field">
+                        <div class="field">
                             <label for="username">Username</label>
                             <InputText id="username" type="text" />
                         </div>
-                        <div class="p-field">
+                        <div class="field">
                             <label for="password">Password</label>
                             <InputText id="password" type="password" />
                         </div>
                         <Button label="Login"></Button>
                      </div>
                 </div>
-                <div class="p-col-2">
+                <div class="col-2">
                     <Divider layout="vertical">
                         <b>OR</b>
                     </Divider>
                 </div>
-                <div class="p-col-5 p-d-flex p-ai-center p-jc-center">
+                <div class="col-5 flex align-items-center justify-content-center">
                     <Button label="Sign Up" icon="pi pi-user-plus" class="p-button-success"></Button>
                 </div>
             </div>
@@ -399,8 +399,8 @@ export default {
                     Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 
             <Divider align="left">
-                <div class="p-d-inline-flex p-ai-center">
-                    <i class="pi pi-user p-mr-2"></i>
+                <div class="inline-flex align-items-center">
+                    <i class="pi pi-user mr-2"></i>
                     <b>Icon</b>
                 </div>
             </Divider>
@@ -428,7 +428,7 @@ export default {
 
         <div class="card">
             <h5>Vertical</h5>
-            <div class="p-d-flex">
+            <div class="flex">
                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
                         ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                         Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
@@ -449,26 +449,26 @@ export default {
 
         <div class="card">
             <h5>Vertical with Content</h5>
-            <div class="p-grid">
-                <div class="p-col-5 p-d-flex p-ai-center p-jc-center">
+            <div class="grid">
+                <div class="col-5 flex align-items-center justify-content-center">
                     <div class="p-fluid">
-                        <div class="p-field">
+                        <div class="field">
                             <label for="username">Username</label>
                             <InputText id="username" type="text" />
                         </div>
-                        <div class="p-field">
+                        <div class="field">
                             <label for="password">Password</label>
                             <InputText id="password" type="password" />
                         </div>
                         <Button label="Login"></Button>
                      </div>
                 </div>
-                <div class="p-col-2">
+                <div class="col-2">
                     <Divider layout="vertical">
                         <b>OR</b>
                     </Divider>
                 </div>
-                <div class="p-col-5 p-d-flex p-ai-center p-jc-center">
+                <div class="col-5 flex align-items-center justify-content-center">
                     <Button label="Sign Up" icon="pi pi-user-plus" class="p-button-success"></Button>
                 </div>
             </div>
@@ -549,8 +549,8 @@ export default {
                         Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
 
                 <p-divider align="left">
-                    <div class="p-d-inline-flex p-ai-center">
-                        <i class="pi pi-user p-mr-2"></i>
+                    <div class="inline-flex align-items-center">
+                        <i class="pi pi-user mr-2"></i>
                         <b>Icon</b>
                     </div>
                 </p-divider>
@@ -578,7 +578,7 @@ export default {
 
             <div class="card">
                 <h5>Vertical</h5>
-                <div class="p-d-flex">
+                <div class="flex">
                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
                             ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                             Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
@@ -599,26 +599,26 @@ export default {
 
             <div class="card">
                 <h5>Vertical with Content</h5>
-                <div class="p-grid">
-                    <div class="p-col-5 p-d-flex p-ai-center p-jc-center">
+                <div class="grid">
+                    <div class="col-5 flex align-items-center justify-content-center">
                         <div class="p-fluid">
-                            <div class="p-field">
+                            <div class="field">
                                 <label for="username">Username</label>
                                 <p-inputtext id="username" type="text"></p-inputtext>
                             </div>
-                            <div class="p-field">
+                            <div class="field">
                                 <label for="password">Password</label>
                                 <p-inputtext id="password" type="password"></p-inputtext>
                             </div>
                             <p-button label="Login"></p-button>
                         </div>
                     </div>
-                    <div class="p-col-2">
+                    <div class="col-2">
                         <p-divider layout="vertical">
                             <b>OR</b>
                         </p-divider>
                     </div>
-                    <div class="p-col-5 p-d-flex p-ai-center p-jc-center">
+                    <div class="col-5 flex align-items-center justify-content-center">
                         <p-button label="Sign Up" icon="pi pi-user-plus" class="p-button-success"></p-button>
                     </div>
                 </div>
diff --git a/src/views/dropdown/DropdownDemo.vue b/src/views/dropdown/DropdownDemo.vue
index 3556bb75b..eb6084387 100755
--- a/src/views/dropdown/DropdownDemo.vue
+++ b/src/views/dropdown/DropdownDemo.vue
@@ -19,7 +19,7 @@
                 <h5>Grouped</h5>
                 <Dropdown v-model="selectedGroupedCity" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items">
                     <template #optiongroup="slotProps">
-                        <div class="p-d-flex p-ai-center country-item">
+                        <div class="flex align-items-center country-item">
                             <img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" width="18" />
                             <div>{{slotProps.option.label}}</div>
                         </div>
@@ -54,7 +54,7 @@
                 <h5>Virtual Scroll (1000 Items) and Lazy</h5>
                 <Dropdown v-model="selectedItem2" :options="lazyItems" optionLabel="label" optionValue="value" :virtualScrollerOptions="{ lazy: true, onLazyLoad: onLazyLoad, itemSize: 31, showLoader: true, loading: loading, delay: 250 }" placeholder="Select Item">
                     <template v-slot:loader="{ options }">
-                        <div class="p-d-flex p-ai-center p-p-2" style="height: 31px" >
+                        <div class="flex align-items-center p-2" style="height: 31px" >
                             <Skeleton :width="options.even ? '60%' : '50%'" height="1rem" />
                         </div>
                     </template>
diff --git a/src/views/dropdown/DropdownDoc.vue b/src/views/dropdown/DropdownDoc.vue
index 83c3cbc95..58cd0c3ab 100755
--- a/src/views/dropdown/DropdownDoc.vue
+++ b/src/views/dropdown/DropdownDoc.vue
@@ -532,7 +532,7 @@ export default {
         <h5>Grouped</h5>
         <Dropdown v-model="selectedGroupedCity" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items">
             <template #optiongroup="slotProps">
-                <div class="p-d-flex p-ai-center country-item">
+                <div class="flex align-items-center country-item">
                     <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="18" />
                     <div>{{slotProps.option.label}}</div>
                 </div>
@@ -567,7 +567,7 @@ export default {
         <h5>Virtual Scroll (1000 Items) and Lazy</h5>
         <Dropdown v-model="selectedItem2" :options="lazyItems" optionLabel="label" optionValue="value" :virtualScrollerOptions="{ lazy: true, onLazyLoad: onLazyLoad, itemSize: 31, showLoader: true, loading: loading, delay: 250 }" placeholder="Select Item">
             <template v-slot:loader="{ options }">
-                <div class="p-d-flex p-ai-center p-p-2" style="height: 31px" >
+                <div class="flex align-items-center p-2" style="height: 31px" >
                     <Skeleton :width="options.even ? '60%' : '50%'" height="1rem" />
                 </div>
             </template>
@@ -689,7 +689,7 @@ export default {
         <h5>Grouped</h5>
         <Dropdown v-model="selectedGroupedCity" :options="groupedCities" optionLabel="label" optionGroupLabel="label" optionGroupChildren="items">
             <template #optiongroup="slotProps">
-                <div class="p-d-flex p-ai-center country-item">
+                <div class="flex align-items-center country-item">
                     <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="18" />
                     <div>{{slotProps.option.label}}</div>
                 </div>
@@ -724,7 +724,7 @@ export default {
         <h5>Virtual Scroll (1000 Items) and Lazy</h5>
         <Dropdown v-model="selectedItem2" :options="lazyItems" optionLabel="label" optionValue="value" :virtualScrollerOptions="{ lazy: true, onLazyLoad: onLazyLoad, itemSize: 31, showLoader: true, loading: loading, delay: 250 }" placeholder="Select Item">
             <template v-slot:loader="{ options }">
-                <div class="p-d-flex p-ai-center p-p-2" style="height: 31px" >
+                <div class="flex align-items-center p-2" style="height: 31px" >
                     <Skeleton :width="options.even ? '60%' : '50%'" height="1rem" />
                 </div>
             </template>
@@ -850,7 +850,7 @@ export default {
             <h5>Grouped</h5>
             <p-dropdown v-model="selectedGroupedCity" :options="groupedCities" option-label="label" option-group-label="label" option-group-children="items">
                 <template #optiongroup="slotProps">
-                    <div class="p-d-flex p-ai-center country-item">
+                    <div class="flex align-items-center country-item">
                         <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="18" />
                         <div>{{slotProps.option.label}}</div>
                     </div>
@@ -885,7 +885,7 @@ export default {
             <h5>Virtual Scroll (1000 Items) and Lazy</h5>
             <p-dropdown v-model="selectedItem2" :options="lazyItems" option-label="label" option-value="value" :virtual-scroller-options="{ lazy: true, onLazyLoad: onLazyLoad, itemSize: 31, showLoader: true, loading: loading, delay: 250 }" placeholder="Select Item">
                 <template v-slot:loader="{ options }">
-                    <div class="p-d-flex p-ai-center p-p-2" style="height: 31px" >
+                    <div class="flex align-items-center p-2" style="height: 31px" >
                         <p-skeleton :width="options.even ? '60%' : '50%'" height="1rem"></p-skeleton>
                     </div>
                 </template>
diff --git a/src/views/elevation/ElevationDemo.vue b/src/views/elevation/ElevationDemo.vue
index 21324a5f9..0c8dd05e0 100644
--- a/src/views/elevation/ElevationDemo.vue
+++ b/src/views/elevation/ElevationDemo.vue
@@ -9,9 +9,9 @@
         </div>
 
         <div class="content-section implementation">
-            <div class="p-grid">
-                <div class="p-col" v-for="index in 24" :key="index">
-                    <div :class="['shadow-box', 'p-shadow-' + index]">
+            <div class="grid">
+                <div class="p-col" v-for="index in 8" :key="index">
+                    <div :class="['shadow-box', 'shadow-' + index]">
                         p-shadow-{{index}}
                     </div>
                 </div>
diff --git a/src/views/elevation/ElevationDoc.vue b/src/views/elevation/ElevationDoc.vue
index 997852b21..5111146fe 100644
--- a/src/views/elevation/ElevationDoc.vue
+++ b/src/views/elevation/ElevationDoc.vue
@@ -1,22 +1,22 @@
 <template>
 	<AppDoc name="ElevationDemo" :sources="sources" github="elevation/ElevationDemo.vue">
 		<h5>Getting Started</h5>
-		<p>Elevation is added to an element using the <i>.p-shadow-{level}</i> class.</p>
+		<p>Elevation is added to an element using the <i>.shadow-{level}</i> class.</p>
 <pre v-code><code>
-&lt;div class="p-shadow-1" /&gt;
+&lt;div class="shadow-1" /&gt;
 
 </code></pre>
 
         <h5>Levels</h5>
-        <p>There are 24 depths available varying from 1 to 24.</p>
+        <p>There are 8 depths available varying from 1 to 8.</p>
 <pre v-code><code>
-&lt;div class="p-shadow-1" /&gt;
-&lt;div class="p-shadow-24" /&gt;
+&lt;div class="shadow-1" /&gt;
+&lt;div class="shadow-8" /&gt;
 
 </code></pre>
 
         <h5>Dependencies</h5>
-        <p>PrimeFlex 2.0.0.</p>
+        <p>PrimeFlex 3.1.2.</p>
 	</AppDoc>
 </template>
 
@@ -30,10 +30,10 @@ export default {
                     content: `
 <template>
     <div>
-        <div class="p-grid">
-            <div class="p-col" v-for="index in 24" :key="index">
-                <div :class="['shadow-box', 'p-shadow-' + index]">
-                    p-shadow-{{index}}
+        <div class="grid">
+            <div class="p-col" v-for="index in 8" :key="index">
+                <div :class="['shadow-box', 'shadow-' + index]">
+                    shadow-{{index}}
                 </div>
             </div>
         </div>
@@ -65,10 +65,10 @@ export default {
                     content: `
 <template>
     <div>
-        <div class="p-grid">
-            <div class="p-col" v-for="index in 24" :key="index">
-                <div :class="['shadow-box', 'p-shadow-' + index]">
-                    p-shadow-{{index}}
+        <div class="grid">
+            <div class="p-col" v-for="index in 8" :key="index">
+                <div :class="['shadow-box', 'shadow-' + index]">
+                    shadow-{{index}}
                 </div>
             </div>
         </div>
@@ -98,10 +98,10 @@ export default {
                 'browser-source': {
                     tabName: 'Browser Source',
                     content: `<div id="app">
-            <div class="p-grid">
-                <div class="p-col" v-for="index in 24" :key="index">
-                    <div :class="['shadow-box', 'p-shadow-' + index]">
-                        p-shadow-{{index}}
+            <div class="grid">
+                <div class="p-col" v-for="index in 8" :key="index">
+                    <div :class="['shadow-box', 'shadow-' + index]">
+                        shadow-{{index}}
                     </div>
                 </div>
             </div>
diff --git a/src/views/fieldset/FieldsetDemo.vue b/src/views/fieldset/FieldsetDemo.vue
index 0cdfc027a..3a95a3ba9 100755
--- a/src/views/fieldset/FieldsetDemo.vue
+++ b/src/views/fieldset/FieldsetDemo.vue
@@ -43,7 +43,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.p-fieldset p {
+.fieldset p {
     line-height: 1.5;
     margin: 0;
 }
diff --git a/src/views/fieldset/FieldsetDoc.vue b/src/views/fieldset/FieldsetDoc.vue
index 17082038f..4214f152a 100755
--- a/src/views/fieldset/FieldsetDoc.vue
+++ b/src/views/fieldset/FieldsetDoc.vue
@@ -154,19 +154,19 @@ import Fieldset from 'primevue/fieldset';
 				</thead>
 				<tbody>
                     <tr>
-                        <td>p-fieldset</td>
+                        <td>fieldset</td>
                         <td>Fieldset element.</td>
                     </tr>
                     <tr>
-                        <td>p-fieldset-toggleable</td>
+                        <td>fieldset-toggleable</td>
                         <td>Toggleable fieldset element.</td>
                     </tr>
                     <tr>
-                        <td>p-fieldset-legend</td>
+                        <td>fieldset-legend</td>
                         <td>Legend element.</td>
                     </tr>
                     <tr>
-                        <td>p-fieldset-content</td>
+                        <td>fieldset-content</td>
                         <td>Content element.</td>
                     </tr>
 				</tbody>
@@ -212,7 +212,7 @@ export default {
 <\\/script>
 
 <style lang="scss" scoped>
-.p-fieldset p {
+.fieldset p {
     line-height: 1.5;
     margin: 0;
 }
@@ -247,7 +247,7 @@ export default {
 <\\/script>
 
 <style lang="scss" scoped>
-.p-fieldset p {
+.fieldset p {
     line-height: 1.5;
     margin: 0;
 }
@@ -258,20 +258,20 @@ export default {
                     imports: `<script src="https://unpkg.com/primevue@^3/fieldset/fieldset.min.js"><\\/script>`,
                     content: `<div id="app">
             <h5>Regular</h5>
-            <p-fieldset legend="Header">
+            <fieldset legend="Header">
                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                     Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                     Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
                     cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-            </p-fieldset>
+            </fieldset>
 
             <h5>Toggleable</h5>
-            <p-fieldset legend="Header" :toggleable="true">
+            <fieldset legend="Header" :toggleable="true">
                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                     Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                     Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
                     cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-            </p-fieldset>
+            </fieldset>
         </div>
 
         <script type="module">
@@ -279,7 +279,7 @@ export default {
 
         const App = {
             components: {
-                "p-fieldset": primevue.fieldset
+                "fieldset": primevue.fieldset
             }
         };
 
@@ -289,7 +289,7 @@ export default {
         <\\/script>
 
         <style>
-        .p-fieldset p {
+        .fieldset p {
             line-height: 1.5;
             margin: 0;
         }
diff --git a/src/views/flexbox/FlexBoxDemo.vue b/src/views/flexbox/FlexBoxDemo.vue
index 6ff393df4..a0b00bd54 100644
--- a/src/views/flexbox/FlexBoxDemo.vue
+++ b/src/views/flexbox/FlexBoxDemo.vue
@@ -6,19 +6,19 @@
 </p>
 
             <h5>Flex Container</h5>
-            <p>An element can configured as a flexbox container using the <i>p-d-flex</i> or <i>p-d-inline-flex</i> classes.</p>
+            <p>An element can configured as a flexbox container using the <i>flex</i> or <i>inline-flex</i> classes.</p>
 
 <pre v-code><code>
-&lt;div class="p-d-flex"&gt;Flex Container&lt;/div&gt;
-&lt;div class="p-d-inline-flex"&gt;Inline Flex Container&lt;/div&gt;
+&lt;div class="flex"&gt;Flex Container&lt;/div&gt;
+&lt;div class="inline-flex"&gt;Inline Flex Container&lt;/div&gt;
 
 </code></pre>
 
-<div class="box p-d-flex p-mb-3">Flex Container</div>
-<div class="box p-d-inline-flex">Inline Flex Container</div>
+<div class="box flex mb-3">Flex Container</div>
+<div class="box inline-flex">Inline Flex Container</div>
 
             <h5>Direction</h5>
-            <p>Default is applied using the <i>p-flex-{direction}</i> class where direction can be either of the following.</p>
+            <p>Default is applied using the <i>flex-{direction}</i> class where direction can be either of the following.</p>
             <ul>
                 <li>row (default)</li>
                 <li>row-reverse</li>
@@ -28,31 +28,31 @@
 
             <h6>Row</h6>
 <pre v-code><code>
-&lt;div class="p-d-flex"&gt;
-    &lt;div class="p-mr-2"&gt;Item 1&lt;/div&gt;
-    &lt;div class="p-mr-2"&gt;Item 2&lt;/div&gt;
+&lt;div class="flex"&gt;
+    &lt;div class="mr-2"&gt;Item 1&lt;/div&gt;
+    &lt;div class="mr-2"&gt;Item 2&lt;/div&gt;
     &lt;div&gt;Item 3&lt;/div&gt;
 &lt;/div&gt;
 
 </code></pre>
-            <div class="p-d-flex">
-                <div class="p-mr-2">Item 1</div>
-                <div class="p-mr-2">Item 2</div>
+            <div class="flex">
+                <div class="mr-2">Item 1</div>
+                <div class="mr-2">Item 2</div>
                 <div>Item 3</div>
             </div>
 
             <h6>Column</h6>
 <pre v-code><code>
-&lt;div class="p-d-flex p-flex-column"&gt;
-    &lt;div class="p-mb-2"&gt;Item 1&lt;/div&gt;
-    &lt;div class="p-mb-2"&gt;Item 2&lt;/div&gt;
+&lt;div class="flex flex-column"&gt;
+    &lt;div class="mb-2"&gt;Item 1&lt;/div&gt;
+    &lt;div class="mb-2"&gt;Item 2&lt;/div&gt;
     &lt;div&gt;Item 3&lt;/div&gt;
 &lt;/div&gt;
 
 </code></pre>
-            <div class="p-d-flex p-flex-column">
-                <div class="p-mb-2">Item 1</div>
-                <div class="p-mb-2">Item 2</div>
+            <div class="flex flex-column">
+                <div class="mb-2">Item 1</div>
+                <div class="mb-2">Item 2</div>
                 <div>Item 3</div>
             </div>
 
@@ -60,120 +60,120 @@
             <p>Row direction for larger screens and column for smaller.</p>
 
 <pre v-code><code>
-&lt;div class="p-d-flex p-flex-column p-flex-md-row"&gt;
-    &lt;div class="p-mb-2 p-mr-2"&gt;Item 1&lt;/div&gt;
-    &lt;div class="p-mb-2 p-mr-2"&gt;Item 2&lt;/div&gt;
-    &lt;div class="p-mb-2 p-mr-2"&gt;Item 3&lt;/div&gt;
+&lt;div class="flex flex-column md:flex-row"&gt;
+    &lt;div class="mb-2 mr-2"&gt;Item 1&lt;/div&gt;
+    &lt;div class="mb-2 mr-2"&gt;Item 2&lt;/div&gt;
+    &lt;div class="mb-2 mr-2"&gt;Item 3&lt;/div&gt;
 &lt;/div&gt;
 
 </code></pre>
 
-            <div class="p-d-flex p-flex-column p-flex-md-row">
-                <div class="p-mb-2 p-mr-2">Item 1</div>
-                <div class="p-mb-2 p-mr-2">Item 2</div>
-                <div class="p-mb-2 p-mr-2">Item 3</div>
+            <div class="flex flex-column md:flex-row">
+                <div class="mb-2 mr-2">Item 1</div>
+                <div class="mb-2 mr-2">Item 2</div>
+                <div class="mb-2 mr-2">Item 3</div>
             </div>
 
             <h6>Direction Classes</h6>
             <ul>
-                <li>p-flex-row</li>
-                <li>p-flex-row-reverse</li>
-                <li>p-flex-column</li>
-                <li>p-flex-column-reverse</li>
-                <li>p-flex-sm-row</li>
-                <li>p-flex-sm-row-reverse</li>
-                <li>p-flex-sm-column</li>
-                <li>p-flex-sm-column-reverse</li>
-                <li>p-flex-md-row</li>
-                <li>p-flex-md-row-reverse</li>
-                <li>p-flex-md-column</li>
-                <li>p-flex-md-column-reverse</li>
-                <li>p-flex-lg-row</li>
-                <li>p-flex-lg-row-reverse</li>
-                <li>p-flex-lg-column</li>
-                <li>p-flex-lg-column-reverse</li>
-                <li>p-flex-xl-row</li>
-                <li>p-flex-xl-row-reverse</li>
-                <li>p-flex-xl-column</li>
-                <li>p-flex-xl-column-reverse</li>
+                <li>flex-row</li>
+                <li>flex-row-reverse</li>
+                <li>flex-column</li>
+                <li>flex-column-reverse</li>
+                <li>sm:flex-row</li>
+                <li>sm:flex-row-reverse</li>
+                <li>sm:flex-column</li>
+                <li>sm:flex-column-reverse</li>
+                <li>md:flex-row</li>
+                <li>md:flex-row-reverse</li>
+                <li>md:flex-column</li>
+                <li>md:flex-column-reverse</li>
+                <li>lg:flex-row</li>
+                <li>lg:flex-row-reverse</li>
+                <li>lg:flex-column</li>
+                <li>lg:flex-column-reverse</li>
+                <li>xl:flex-row</li>
+                <li>xl:flex-row-reverse</li>
+                <li>xl:flex-column</li>
+                <li>xl:flex-column-reverse</li>
             </ul>
 
             <h5>Order</h5>
-            <p>Order configures the way in which they appear in the flex container. <i>p-order-{value}</i> format is used where value can be a number from 0 to 6.</p>
+            <p>Order configures the way in which they appear in the flex container. <i>order-{value}</i> format is used where value can be a number from 0 to 6.</p>
 
             <h6>Customized</h6>
 <pre v-code><code>
-&lt;div class="p-d-flex"&gt;
-    &lt;div class="p-mr-2 p-order-3"&gt;Item 1&lt;/div&gt;
-    &lt;div class="p-mr-2 p-order-1"&gt;Item 2&lt;/div&gt;
-    &lt;div class="p-mr-2 p-order-2"&gt;Item 3&lt;/div&gt;
+&lt;div class="flex"&gt;
+    &lt;div class="mr-2 order-3"&gt;Item 1&lt;/div&gt;
+    &lt;div class="mr-2 order-1"&gt;Item 2&lt;/div&gt;
+    &lt;div class="mr-2 order-2"&gt;Item 3&lt;/div&gt;
 &lt;/div&gt;
 
 </code></pre>
-            <div class="p-d-flex">
-                <div class="p-mr-2 p-order-3">Item 1</div>
-                <div class="p-mr-2 p-order-1">Item 2</div>
-                <div class="p-mr-2 p-order-2">Item 3</div>
+            <div class="flex">
+                <div class="mr-2 order-3">Item 1</div>
+                <div class="mr-2 order-1">Item 2</div>
+                <div class="mr-2 order-2">Item 3</div>
             </div>
 
             <h6>Responsive</h6>
             <p>Orders change depending on the screen size.</p>
 <pre v-code><code>
-&lt;div class="p-d-flex"&gt;
-    &lt;div class="p-mr-2 p-order-3 p-order-md-2"&gt;Item 1&lt;/div&gt;
-    &lt;div class="p-mr-2 p-order-1 p-order-md-3"&gt;Item 2&lt;/div&gt;
-    &lt;div class="p-mr-2 p-order-2 p-order-md-1"&gt;Item 3&lt;/div&gt;
+&lt;div class="flex"&gt;
+    &lt;div class="mr-2 order-3 md:order-2"&gt;Item 1&lt;/div&gt;
+    &lt;div class="mr-2 order-1 md:order-3"&gt;Item 2&lt;/div&gt;
+    &lt;div class="mr-2 order-2 md:order-1"&gt;Item 3&lt;/div&gt;
 &lt;/div&gt;
 
 </code></pre>
 
-            <div class="p-d-flex">
-                <div class="p-mr-2 p-order-3 p-order-md-2">Item 1</div>
-                <div class="p-mr-2 p-order-1 p-order-md-3">Item 2</div>
-                <div class="p-mr-2 p-order-2 p-order-md-1">Item 3</div>
+            <div class="flex">
+                <div class="mr-2 order-3 md:order-2">Item 1</div>
+                <div class="mr-2 order-1 md:order-3">Item 2</div>
+                <div class="mr-2 order-2 md:order-1">Item 3</div>
             </div>
 
             <h6>Order Classes</h6>
             <ul>
-                <li>p-order-0</li>
-                <li>p-order-1</li>
-                <li>p-order-2</li>
-                <li>p-order-3</li>
-                <li>p-order-4</li>
-                <li>p-order-5</li>
-                <li>p-order-6</li>
-                <li>p-order-sm-0</li>
-                <li>p-order-sm-1</li>
-                <li>p-order-sm-2</li>
-                <li>p-order-sm-3</li>
-                <li>p-order-sm-4</li>
-                <li>p-order-sm-5</li>
-                <li>p-order-sm-6</li>
-                <li>p-order-md-0</li>
-                <li>p-order-md-1</li>
-                <li>p-order-md-2</li>
-                <li>p-order-md-3</li>
-                <li>p-order-md-4</li>
-                <li>p-order-md-5</li>
-                <li>p-order-md-6</li>
-                <li>p-order-lg-0</li>
-                <li>p-order-lg-1</li>
-                <li>p-order-lg-2</li>
-                <li>p-order-lg-3</li>
-                <li>p-order-lg-4</li>
-                <li>p-order-lg-5</li>
-                <li>p-order-lg-6</li>
-                <li>p-order-xl-0</li>
-                <li>p-order-xl-1</li>
-                <li>p-order-xl-2</li>
-                <li>p-order-xl-3</li>
-                <li>p-order-xl-4</li>
-                <li>p-order-xl-5</li>
-                <li>p-order-xl-6</li>
+                <li>order-0</li>
+                <li>order-1</li>
+                <li>order-2</li>
+                <li>order-3</li>
+                <li>order-4</li>
+                <li>order-5</li>
+                <li>order-6</li>
+                <li>sm:order-0</li>
+                <li>sm:order-1</li>
+                <li>sm:order-2</li>
+                <li>sm:order-3</li>
+                <li>sm:order-4</li>
+                <li>sm:order-5</li>
+                <li>sm:order-6</li>
+                <li>md:order-0</li>
+                <li>md:order-1</li>
+                <li>md:order-2</li>
+                <li>md:order-3</li>
+                <li>md:order-4</li>
+                <li>md:order-5</li>
+                <li>md:order-6</li>
+                <li>lg:order-0</li>
+                <li>lg:order-1</li>
+                <li>lg:order-2</li>
+                <li>lg:order-3</li>
+                <li>lg:order-4</li>
+                <li>lg:order-5</li>
+                <li>lg:order-6</li>
+                <li>xl:order-0</li>
+                <li>xl:order-1</li>
+                <li>xl:order-2</li>
+                <li>xl:order-3</li>
+                <li>xl:order-4</li>
+                <li>xl:order-5</li>
+                <li>xl:order-6</li>
             </ul>
 
             <h5>Wrap</h5>
-            <p>Flex wrap defines the wrap behavior when there is not enough space in the container. The format of the class is <i>p-flex-{value}</i> and the value field can be either of the
+            <p>Flex wrap defines the wrap behavior when there is not enough space in the container. The format of the class is <i>flex-{value}</i> and the value field can be either of the
             listed alternatives.</p>
 
             <ul>
@@ -184,88 +184,88 @@
 
             <h6>No Wrap</h6>
 <pre v-code><code>
-&lt;div class="p-d-flex"&gt;
-    &lt;div class="p-mr-2 p-mb-2"&gt;Item 1&lt;/div&gt;
-    &lt;div class="p-mr-2 p-mb-2"&gt;Item 2&lt;/div&gt;
-    &lt;div class="p-mr-2 p-mb-2"&gt;Item 3&lt;/div&gt;
-    &lt;div class="p-mr-2 p-mb-2"&gt;Item 4&lt;/div&gt;
-    &lt;div class="p-mr-2 p-mb-2"&gt;Item 5&lt;/div&gt;
-    &lt;div class="p-mr-2 p-mb-2"&gt;Item 6&lt;/div&gt;
+&lt;div class="flex"&gt;
+    &lt;div class="mr-2 mb-2"&gt;Item 1&lt;/div&gt;
+    &lt;div class="mr-2 mb-2"&gt;Item 2&lt;/div&gt;
+    &lt;div class="mr-2 mb-2"&gt;Item 3&lt;/div&gt;
+    &lt;div class="mr-2 mb-2"&gt;Item 4&lt;/div&gt;
+    &lt;div class="mr-2 mb-2"&gt;Item 5&lt;/div&gt;
+    &lt;div class="mr-2 mb-2"&gt;Item 6&lt;/div&gt;
 &lt;/div&gt;
 
 </code></pre>
-            <div class="p-d-flex">
-                <div class="p-mr-2 p-mb-2">Item 1</div>
-                <div class="p-mr-2 p-mb-2">Item 2</div>
-                <div class="p-mr-2 p-mb-2">Item 3</div>
-                <div class="p-mr-2 p-mb-2">Item 4</div>
-                <div class="p-mr-2 p-mb-2">Item 5</div>
-                <div class="p-mr-2 p-mb-2">Item 6</div>
+            <div class="flex">
+                <div class="mr-2 mb-2">Item 1</div>
+                <div class="mr-2 mb-2">Item 2</div>
+                <div class="mr-2 mb-2">Item 3</div>
+                <div class="mr-2 mb-2">Item 4</div>
+                <div class="mr-2 mb-2">Item 5</div>
+                <div class="mr-2 mb-2">Item 6</div>
             </div>
 
             <h6>Wrap</h6>
 <pre v-code><code>
-&lt;div class="p-d-flex p-flex-wrap"&gt;
-    &lt;div class="p-mr-2 p-mb-2"&gt;Item 1&lt;/div&gt;
-    &lt;div class="p-mr-2 p-mb-2"&gt;Item 2&lt;/div&gt;
-    &lt;div class="p-mr-2 p-mb-2"&gt;Item 3&lt;/div&gt;
-    &lt;div class="p-mr-2 p-mb-2"&gt;Item 4&lt;/div&gt;
-    &lt;div class="p-mr-2 p-mb-2"&gt;Item 5&lt;/div&gt;
-    &lt;div class="p-mr-2 p-mb-2"&gt;Item 6&lt;/div&gt;
+&lt;div class="flex flex-wrap"&gt;
+    &lt;div class="mr-2 mb-2"&gt;Item 1&lt;/div&gt;
+    &lt;div class="mr-2 mb-2"&gt;Item 2&lt;/div&gt;
+    &lt;div class="mr-2 mb-2"&gt;Item 3&lt;/div&gt;
+    &lt;div class="mr-2 mb-2"&gt;Item 4&lt;/div&gt;
+    &lt;div class="mr-2 mb-2"&gt;Item 5&lt;/div&gt;
+    &lt;div class="mr-2 mb-2"&gt;Item 6&lt;/div&gt;
 &lt;/div&gt;
 
 </code></pre>
-            <div class="p-d-flex p-flex-wrap">
-                <div class="p-mr-2 p-mb-2">Item 1</div>
-                <div class="p-mr-2 p-mb-2">Item 2</div>
-                <div class="p-mr-2 p-mb-2">Item 3</div>
-                <div class="p-mr-2 p-mb-2">Item 4</div>
-                <div class="p-mr-2 p-mb-2">Item 5</div>
-                <div class="p-mr-2 p-mb-2">Item 6</div>
+            <div class="flex flex-wrap">
+                <div class="mr-2 mb-2">Item 1</div>
+                <div class="mr-2 mb-2">Item 2</div>
+                <div class="mr-2 mb-2">Item 3</div>
+                <div class="mr-2 mb-2">Item 4</div>
+                <div class="mr-2 mb-2">Item 5</div>
+                <div class="mr-2 mb-2">Item 6</div>
             </div>
 
             <h6>Wrap Reverse</h6>
 <pre v-code><code>
-&lt;div class="p-d-flex p-flex-wrap-reverse"&gt;
-    &lt;div class="p-mr-2 p-mb-2"&gt;Item 1&lt;/div&gt;
-    &lt;div class="p-mr-2 p-mb-2"&gt;Item 2&lt;/div&gt;
-    &lt;div class="p-mr-2 p-mb-2"&gt;Item 3&lt;/div&gt;
-    &lt;div class="p-mr-2 p-mb-2"&gt;Item 4&lt;/div&gt;
-    &lt;div class="p-mr-2 p-mb-2"&gt;Item 5&lt;/div&gt;
-    &lt;div class="p-mr-2 p-mb-2"&gt;Item 6&lt;/div&gt;
+&lt;div class="flex flex-wrap-reverse"&gt;
+    &lt;div class="mr-2 mb-2"&gt;Item 1&lt;/div&gt;
+    &lt;div class="mr-2 mb-2"&gt;Item 2&lt;/div&gt;
+    &lt;div class="mr-2 mb-2"&gt;Item 3&lt;/div&gt;
+    &lt;div class="mr-2 mb-2"&gt;Item 4&lt;/div&gt;
+    &lt;div class="mr-2 mb-2"&gt;Item 5&lt;/div&gt;
+    &lt;div class="mr-2 mb-2"&gt;Item 6&lt;/div&gt;
 &lt;/div&gt;
 
 </code></pre>
-            <div class="p-d-flex p-flex-wrap-reverse">
-                <div class="p-mr-2 p-mb-2">Item 1</div>
-                <div class="p-mr-2 p-mb-2">Item 2</div>
-                <div class="p-mr-2 p-mb-2">Item 3</div>
-                <div class="p-mr-2 p-mb-2">Item 4</div>
-                <div class="p-mr-2 p-mb-2">Item 5</div>
-                <div class="p-mr-2 p-mb-2">Item 6</div>
+            <div class="flex flex-wrap-reverse">
+                <div class="mr-2 mb-2">Item 1</div>
+                <div class="mr-2 mb-2">Item 2</div>
+                <div class="mr-2 mb-2">Item 3</div>
+                <div class="mr-2 mb-2">Item 4</div>
+                <div class="mr-2 mb-2">Item 5</div>
+                <div class="mr-2 mb-2">Item 6</div>
             </div>
 
             <h6>Wrap Classes</h6>
             <ul>
-                <li>p-flex-nowrap</li>
-                <li>p-flex-wrap</li>
-                <li>p-flex-wrap-reverse</li>
-                <li>p-flex-sm-nowrap</li>
-                <li>p-flex-sm-wrap</li>
-                <li>p-flex-sm-wrap-reverse</li>
-                <li>p-flex-md-nowrap</li>
-                <li>p-flex-md-wrap</li>
-                <li>p-flex-md-wrap-reverse</li>
-                <li>p-flex-lg-nowrap</li>
-                <li>p-flex-lg-wrap</li>
-                <li>p-flex-lg-wrap-reverse</li>
-                <li>p-flex-xl-nowrap</li>
-                <li>p-flex-xl-wrap</li>
-                <li>p-flex-xl-wrap-reverse</li>
+                <li>flex-nowrap</li>
+                <li>flex-wrap</li>
+                <li>flex-wrap-reverse</li>
+                <li>sm:flex-nowrap</li>
+                <li>sm:flex-wrap</li>
+                <li>sm:flex-wrap-reverse</li>
+                <li>md:flex-nowrap</li>
+                <li>md:flex-wrap</li>
+                <li>md:flex-wrap-reverse</li>
+                <li>lg:flex-nowrap</li>
+                <li>lg:flex-wrap</li>
+                <li>lg:flex-wrap-reverse</li>
+                <li>xl:flex-nowrap</li>
+                <li>xl:flex-wrap</li>
+                <li>xl:flex-wrap-reverse</li>
             </ul>
 
             <h5>Justify Content</h5>
-            <p>Justify content is the alignment along the main axis and defined using the <i>p-jc-{value}</i> format with responsive alternatives. Value field accepts
+            <p>Justify content is the alignment along the main axis and defined using the <i>justify-content-{value}</i> format with responsive alternatives. Value field accepts
             the options below.</p>
             <ul>
                 <li>start</li>
@@ -278,66 +278,66 @@
 
             <h6>Between</h6>
 <pre v-code><code>
-&lt;div class="p-d-flex p-jc-between"&gt;
+&lt;div class="flex justify-content-center"&gt;
     &lt;div&gt;Item 1&lt;/div&gt;
     &lt;div&gt;Item 2&lt;/div&gt;
 &lt;/div&gt;
 
 </code></pre>
-            <div class="p-d-flex p-jc-between">
+            <div class="flex justify-content-center">
                 <div>Item 1</div>
                 <div>Item 2</div>
             </div>
 
             <h6>Center</h6>
 <pre v-code><code>
-&lt;div class="p-d-flex p-jc-center"&gt;
-    &lt;div class="p-mr-2"&gt;Item 1&lt;/div&gt;
+&lt;div class="flex justify-content-center"&gt;
+    &lt;div class="mr-2"&gt;Item 1&lt;/div&gt;
     &lt;div&gt;Item 2&lt;/div&gt;
 &lt;/div&gt;
 
 </code></pre>
-            <div class="p-d-flex p-jc-center">
-                <div class="p-mr-2">Item 1</div>
+            <div class="flex justify-content-center">
+                <div class="mr-2">Item 1</div>
                 <div>Item 2</div>
             </div>
 
             <h6>Justify Content Classes</h6>
             <ul>
-                <li>p-jc-start</li>
-                <li>p-jc-end</li>
-                <li>p-jc-center</li>
-                <li>p-jc-between</li>
-                <li>p-jc-around</li>
-                <li>p-jc-evenly</li>
-                <li>p-jc-sm-start</li>
-                <li>p-jc-sm-end</li>
-                <li>p-jc-sm-center</li>
-                <li>p-jc-sm-between</li>
-                <li>p-jc-sm-around</li>
-                <li>p-jc-sm-evenly</li>
-                <li>p-jc-md-start</li>
-                <li>p-jc-md-end</li>
-                <li>p-jc-md-center</li>
-                <li>p-jc-md-between</li>
-                <li>p-jc-md-around</li>
-                <li>p-jc-md-evenly</li>
-                <li>p-jc-lg-start</li>
-                <li>p-jc-lg-end</li>
-                <li>p-jc-lg-center</li>
-                <li>p-jc-lg-between</li>
-                <li>p-jc-lg-around</li>
-                <li>p-jc-lg-evenly</li>
-                <li>p-jc-xl-start</li>
-                <li>p-jc-xl-end</li>
-                <li>p-jc-xl-center</li>
-                <li>p-jc-xl-between</li>
-                <li>p-jc-xl-around</li>
-                <li>p-jc-xl-evenly</li>
+                <li>justify-content-start</li>
+                <li>justify-content-end</li>
+                <li>justify-content-center</li>
+                <li>justify-content-center</li>
+                <li>justify-content-around</li>
+                <li>justify-content-evenly</li>
+                <li>sm:justify-content-start</li>
+                <li>sm:justify-content-end</li>
+                <li>sm:justify-content-center</li>
+                <li>sm:justify-content-between</li>
+                <li>sm:justify-content-around</li>
+                <li>sm:justify-content-evenly</li>
+                <li>md:justify-content-start</li>
+                <li>md:justify-content-end</li>
+                <li>md:justify-content-center</li>
+                <li>md:justiify-content-between</li>
+                <li>md:justify-content-around</li>
+                <li>md:justify-content-evenly</li>
+                <li>lg:justify-content-start</li>
+                <li>lg:justify-content-end</li>
+                <li>lg:justify-content-center</li>
+                <li>lg:justify-content-between</li>
+                <li>lg:justify-content-around</li>
+                <li>lg:justify-content-evenly</li>
+                <li>xl:justify-content-start</li>
+                <li>xl:justify-content-end</li>
+                <li>xl:justify-content-center</li>
+                <li>xl:justify-content-between</li>
+                <li>xl:justify-content-around</li>
+                <li>xl:justify-content-evenly</li>
             </ul>
 
             <h5>Align Items</h5>
-            <p>Align Items configuration is the alignment along the cross axis and defined using the <i>p-ai-{value}</i> format with responsive alternatives. Value field accepts
+            <p>Align Items configuration is the alignment along the cross axis and defined using the <i>align-items-{value}</i> format with responsive alternatives. Value field accepts
             the options below.</p>
             <ul>
                 <li>start</li>
@@ -349,61 +349,61 @@
 
             <h6>Start</h6>
 <pre v-code><code>
-&lt;div class="p-d-flex p-ai-start"&gt;
-    &lt;div class="p-mr-2" style="height:100px"&gt;Item 1&lt;/div&gt;
+&lt;div class="flex align-items-start"&gt;
+    &lt;div class="mr-2" style="height:100px"&gt;Item 1&lt;/div&gt;
     &lt;div style="height:50px"&gt;Item 2&lt;/div&gt;
 &lt;/div&gt;
 
 </code></pre>
-            <div class="p-d-flex p-ai-start">
-                <div class="p-mr-2" style="height:100px">Item 1</div>
+            <div class="flex align-items-start">
+                <div class="mr-2" style="height:100px">Item 1</div>
                 <div style="height:50px">Item 2</div>
             </div>
 
             <h6>Center</h6>
 <pre v-code><code>
-&lt;div class="p-d-flex p-ai-center"&gt;
-    &lt;div class="p-mr-2" style="height:100px"&gt;Item 1&lt;/div&gt;
+&lt;div class="flex align-items-center"&gt;
+    &lt;div class="mr-2" style="height:100px"&gt;Item 1&lt;/div&gt;
     &lt;div style="height:50px"&gt;Item 2&lt;/div&gt;
 &lt;/div&gt;
 
 </code></pre>
-            <div class="p-d-flex p-ai-center">
-                <div class="p-mr-2" style="height:100px">Item 1</div>
+            <div class="flex align-items-center">
+                <div class="mr-2" style="height:100px">Item 1</div>
                 <div style="height:50px">Item 2</div>
             </div>
 
             <h6>Align Items Classes</h6>
             <ul>
-                <li>p-ai-start</li>
-                <li>p-ai-end</li>
-                <li>p-ai-center</li>
-                <li>p-ai-baseline</li>
-                <li>p-ai-strech</li>
-                <li>p-ai-sm-start</li>
-                <li>p-ai-sm-end</li>
-                <li>p-ai-sm-center</li>
-                <li>p-ai-sm-baseline</li>
-                <li>p-ai-sm-strech</li>
-                <li>p-ai-md-start</li>
-                <li>p-ai-md-end</li>
-                <li>p-ai-md-center</li>
-                <li>p-ai-md-baseline</li>
-                <li>p-ai-md-strech</li>
-                <li>p-ai-lg-start</li>
-                <li>p-ai-lg-end</li>
-                <li>p-ai-lg-center</li>
-                <li>p-ai-lg-baseline</li>
-                <li>p-ai-lg-strech</li>
-                <li>p-ai-xl-start</li>
-                <li>p-ai-xl-end</li>
-                <li>p-ai-xl-center</li>
-                <li>p-ai-xl-baseline</li>
-                <li>p-ai-xl-strech</li>
+                <li>align-items-start</li>
+                <li>align-items-end</li>
+                <li>align-items-center</li>
+                <li>align-items-baseline</li>
+                <li>align-items-stretch</li>
+                <li>sm:align-items-start</li>
+                <li>sm:align-items-end</li>
+                <li>sm:align-items-center</li>
+                <li>sm:align-items-baseline</li>
+                <li>sm:align-items-stretch</li>
+                <li>md:align-items-start</li>
+                <li>md:align-items-end</li>
+                <li>md:align-items-center</li>
+                <li>md:align-items-baseline</li>
+                <li>md:align-items-stretch</li>
+                <li>lg:align-items-start</li>
+                <li>lg:align-items-end</li>
+                <li>lg:align-items-center</li>
+                <li>lg:align-items-baseline</li>
+                <li>lg:align-items-stretch</li>
+                <li>xl:align-items-start</li>
+                <li>xl:align-items-end</li>
+                <li>xl:align-items-center</li>
+                <li>xl:align-items-baseline</li>
+                <li>xl:align-items-stretch</li>
             </ul>
 
             <h5>Align Self</h5>
-            <p>Align self configuration is the alignment along the cross axis for a particular element and defined using the <i>p-as-{value}</i> format with responsive alternatives. Value field accepts
+            <p>Align self configuration is the alignment along the cross axis for a particular element and defined using the <i>align-self-{value}</i> format with responsive alternatives. Value field accepts
             the options below.</p>
             <ul>
                 <li>start</li>
@@ -414,52 +414,52 @@
             </ul>
 
 <pre v-code><code>
-&lt;div class="p-d-flex" style="height: 150px;"&gt;
-    &lt;div class="p-mr-2 p-as-start"&gt;Start&lt;/div&gt;
-    &lt;div class="p-mr-2 p-as-center"&gt;Center&lt;/div&gt;
-    &lt;div class="p-mr-2 p-as-end"&gt;End&lt;/div&gt;
-    &lt;div class="p-mr-2 p-as-stretch"&gt;Stretch&lt;/div&gt;
+&lt;div class="flex" style="height: 150px;"&gt;
+    &lt;div class="mr-2 align-self-start"&gt;Start&lt;/div&gt;
+    &lt;div class="mr-2 align-self-center"&gt;Center&lt;/div&gt;
+    &lt;div class="mr-2 align-self-end"&gt;End&lt;/div&gt;
+    &lt;div class="mr-2 align-self-stretch"&gt;Stretch&lt;/div&gt;
 &lt;/div&gt;
 
 </code></pre>
-            <div class="p-d-flex" style="height: 150px;">
-                <div class="p-mr-2 p-as-start">Start</div>
-                <div class="p-mr-2 p-as-center">Center</div>
-                <div class="p-mr-2 p-as-end">End</div>
-                <div class="p-mr-2 p-as-stretch">Stretch</div>
+            <div class="flex" style="height: 150px;">
+                <div class="mr-2 align-self-start">Start</div>
+                <div class="mr-2 align-self-center">Center</div>
+                <div class="mr-2 align-self-end">End</div>
+                <div class="mr-2 align-self-stretch">Stretch</div>
             </div>
 
             <h6>Align Items Classes</h6>
             <ul>
-                <li>p-as-start</li>
-                <li>p-as-end</li>
-                <li>p-as-center</li>
-                <li>p-as-baseline</li>
-                <li>p-as-strech</li>
-                <li>p-as-sm-start</li>
-                <li>p-as-sm-end</li>
-                <li>p-as-sm-center</li>
-                <li>p-as-sm-baseline</li>
-                <li>p-as-sm-strech</li>
-                <li>p-as-md-start</li>
-                <li>p-as-md-end</li>
-                <li>p-as-md-center</li>
-                <li>p-as-md-baseline</li>
-                <li>p-as-md-strech</li>
-                <li>p-as-lg-start</li>
-                <li>p-as-lg-end</li>
-                <li>p-as-lg-center</li>
-                <li>p-as-lg-baseline</li>
-                <li>p-as-lg-strech</li>
-                <li>p-as-xl-start</li>
-                <li>p-as-xl-end</li>
-                <li>p-as-xl-center</li>
-                <li>p-as-xl-baseline</li>
-                <li>p-as-xl-strech</li>
+                <li>align-self-start</li>
+                <li>align-self-end</li>
+                <li>align-self-center</li>
+                <li>align-self-baseline</li>
+                <li>align-self-stretch</li>
+                <li>sm:align-self-start</li>
+                <li>sm:align-self-end</li>
+                <li>sm:align-self-center</li>
+                <li>sm:align-self-baseline</li>
+                <li>sm:align-self-stretch</li>
+                <li>md:align-self-start</li>
+                <li>md:align-self-end</li>
+                <li>md:align-self-center</li>
+                <li>md:align-self-baseline</li>
+                <li>md:align-self-stretch</li>
+                <li>lg:align-self-start</li>
+                <li>lg:align-self-end</li>
+                <li>lg:align-self-center</li>
+                <li>lg:align-self-baseline</li>
+                <li>lg:align-self-stretch</li>
+                <li>xl:align-self-start</li>
+                <li>xl:align-self-end</li>
+                <li>xl:align-self-center</li>
+                <li>xl:align-self-baseline</li>
+                <li>xl:align-self-stretch</li>
             </ul>
 
             <h5>Align Content</h5>
-            <p>Align content is the alignment along the cross axis and defined using the <i>p-ac-{value}</i> format with responsive alternatives. Value field accepts
+            <p>Align content is the alignment along the cross axis and defined using the <i>align-content-{value}</i> format with responsive alternatives. Value field accepts
             the options below.</p>
             <ul>
                 <li>start</li>
@@ -472,36 +472,36 @@
 
             <h6>Align Content Classes</h6>
             <ul>
-                <li>p-ac-start</li>
-                <li>p-ac-end</li>
-                <li>p-ac-center</li>
-                <li>p-ac-around</li>
-                <li>p-ac-stretch</li>
-                <li>p-ac-between</li>
-                <li>p-ac-sm-start</li>
-                <li>p-ac-sm-end</li>
-                <li>p-ac-sm-center</li>
-                <li>p-ac-sm-around</li>
-                <li>p-ac-sm-stretch</li>
-                <li>p-ac-sm-between</li>
-                <li>p-ac-md-start</li>
-                <li>p-ac-md-end</li>
-                <li>p-ac-md-center</li>
-                <li>p-ac-md-around</li>
-                <li>p-ac-md-stretch</li>
-                <li>p-ac-md-between</li>
-                <li>p-ac-lg-start</li>
-                <li>p-ac-lg-end</li>
-                <li>p-ac-lg-center</li>
-                <li>p-ac-lg-around</li>
-                <li>p-ac-lg-stretch</li>
-                <li>p-ac-lg-between</li>
-                <li>p-ac-xl-start</li>
-                <li>p-ac-xl-end</li>
-                <li>p-ac-xl-center</li>
-                <li>p-ac-xl-around</li>
-                <li>p-ac-xl-stretch</li>
-                <li>p-ac-xl-between</li>
+                <li>align-content-start</li>
+                <li>align-content-end</li>
+                <li>align-content-center</li>
+                <li>align-content-around</li>
+                <li>align-content-stretch</li>
+                <li>align-content-between</li>
+                <li>sm:align-content-start</li>
+                <li>sm:align-content-end</li>
+                <li>sm:align-content-center</li>
+                <li>sm:align-content-around</li>
+                <li>sm:align-content-stretch</li>
+                <li>sm:align-content-between</li>
+                <li>md:align-content-start</li>
+                <li>md:align-content-end</li>
+                <li>md:align-content-center</li>
+                <li>md:align-content-around</li>
+                <li>md:align-content-stretch</li>
+                <li>md:align-content-between</li>
+                <li>lg:align-content-start</li>
+                <li>lg:align-content-end</li>
+                <li>lg:align-content-center</li>
+                <li>lg:align-content-around</li>
+                <li>lg:align-content-stretch</li>
+                <li>lg:align-content-between</li>
+                <li>xl:align-content-start</li>
+                <li>xl:align-content-end</li>
+                <li>xl:align-content-center</li>
+                <li>xl:align-content-around</li>
+                <li>xl:align-content-stretch</li>
+                <li>xl:align-content-between</li>
             </ul>
 
             <h5>Margin with FlexBox</h5>
@@ -509,34 +509,34 @@
             <h6>Horizontal Spacing</h6>
 
 <pre v-code><code>
-&lt;div class="p-d-flex p-p-3 card"&gt;
-    &lt;Button type="Button" icon="pi pi-check" class="p-mr-2" /&gt;
+&lt;div class="flex p-3 card"&gt;
+    &lt;Button type="Button" icon="pi pi-check" class="mr-2" /&gt;
     &lt;Button type="Button" icon="pi pi-trash" class="p-button-danger"/&gt;
-    &lt;Button type="Button" icon="pi pi-search" class="p-ml-auto p-button-help"/&gt;
+    &lt;Button type="Button" icon="pi pi-search" class="ml-auto p-button-help"/&gt;
 &lt;/div&gt;
 
 </code></pre>
-            <div class="p-d-flex p-p-3 card">
-                <Button type="Button" icon="pi pi-check" class="p-mr-2" />
+            <div class="flex p-3 card">
+                <Button type="Button" icon="pi pi-check" class="mr-2" />
                 <Button type="Button" icon="pi pi-trash" class="p-button-danger"/>
-                <Button type="Button" icon="pi pi-search" class="p-ml-auto p-button-help"/>
+                <Button type="Button" icon="pi pi-search" class="ml-auto p-button-help"/>
             </div>
 
             <h6>Vertical Spacing</h6>
 <pre v-code><code>
-&lt;div class="p-d-flex p-flex-column" style="height:150px"&gt;
+&lt;div class="flex flex-column" style="height:150px"&gt;
     &lt;div&gt;Item 1&lt;/div&gt;
-    &lt;div class="p-mt-auto"&gt;Item 2&lt;/div&gt;
+    &lt;div class="mt-auto"&gt;Item 2&lt;/div&gt;
 &lt;/div&gt;
 
 </code></pre>
-            <div class="p-d-flex p-flex-column" style="height:150px">
+            <div class="flex flex-column" style="height:150px">
                 <div>Item 1</div>
-                <div class="p-mt-auto">Item 2</div>
+                <div class="mt-auto">Item 2</div>
             </div>
 
             <h5>Dependencies</h5>
-            <p>PrimeFlex 2.0.0.</p>
+            <p>PrimeFlex 3.1.2.</p>
         </div>
     </div>
 </template>
@@ -547,7 +547,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.p-d-flex > div,
+.flex > div,
 .box {
     background-color: var(--surface-e);
     text-align: center;
@@ -556,7 +556,7 @@ export default {
     box-shadow: 0 2px 1px -1px rgba(0,0,0,.2), 0 1px 1px 0 rgba(0,0,0,.14), 0 1px 3px 0 rgba(0,0,0,.12);
 }
 
-.p-d-flex > div {
+.flex > div {
     width: 8rem;
 }
 </style>
\ No newline at end of file
diff --git a/src/views/floatlabel/FloatLabelDemo.vue b/src/views/floatlabel/FloatLabelDemo.vue
index 7606b56dd..871bd9b5b 100644
--- a/src/views/floatlabel/FloatLabelDemo.vue
+++ b/src/views/floatlabel/FloatLabelDemo.vue
@@ -10,58 +10,58 @@
 
         <div class="content-section implementation">
             <div class="card">
-                <div class="p-fluid p-grid">
-                    <div class="p-field p-col-12 p-md-4">
+                <div class="p-fluid grid">
+                    <div class="field col-12 md:col-4">
                         <span class="p-float-label">
                             <InputText id="inputtext" type="text" v-model="value1" />
                             <label for="inputtext">InputText</label>
                         </span>
                     </div>
-                    <div class="p-field p-col-12 p-md-4">
+                    <div class="field col-12 md:col-4">
                         <span class="p-float-label p-input-icon-left">
                             <i class="pi pi-search" />
                             <InputText id="inputtext-left" type="text" v-model="valueIconLeft" />
                             <label for="inputtext-left">Left Icon</label>
                         </span>
                     </div>
-                    <div class="p-field p-col-12 p-md-4">
-                       <span class="p-float-label p-input-icon-right">
+                    <div class="field col-12 md:col-4">
+                        <span class="p-float-label p-input-icon-right">
                             <i class="pi pi-search" />
                             <InputText id="inputtext-right" type="text" v-model="valueIconRight" />
                             <label for="inputtext-right">Right Icon</label>
                         </span>
                     </div>
-                    <div class="p-field p-col-12 p-md-4">
+                    <div class="field col-12 md:col-4">
                         <span class="p-float-label">
                             <AutoComplete v-model="value2" :suggestions="filteredCountries" @complete="searchCountry($event)" field="name" />
                             <label for="autocomplete">AutoComplete</label>
                         </span>
                     </div>
-                    <div class="p-field p-col-12 p-md-4">
+                    <div class="field col-12 md:col-4">
                         <span class="p-float-label">
                             <Calendar id="calendar" v-model="value3" />
                             <label for="calendar">Calendar</label>
                         </span>
                     </div>
-                    <div class="p-field p-col-12 p-md-4">
+                    <div class="field col-12 md:col-4">
                         <span class="p-float-label">
                             <Chips id="chips" v-model="value4" />
                             <label for="chips">Chips</label>
                         </span>
                     </div>
-                    <div class="p-field p-col-12 p-md-4">
+                    <div class="field col-12 md:col-4">
                         <span class="p-float-label">
                             <InputMask id="inputmask" v-model="value5" mask="99/99/9999" slotChar="mm/dd/yyyy" />
                             <label for="inputmask">InputMask</label>
                         </span>
                     </div>
-                    <div class="p-field p-col-12 p-md-4">
+                    <div class="field col-12 md:col-4">
                         <span class="p-float-label">
                             <InputNumber id="inputnumber" v-model="value6" />
                             <label for="inputnumber">InputNumber</label>
                         </span>
                     </div>
-                    <div class="p-field p-col-12 p-md-4">
+                    <div class="field col-12 md:col-4">
                         <div class="p-inputgroup">
                             <span class="p-inputgroup-addon">
                                 <i class="pi pi-user"></i>
@@ -72,38 +72,38 @@
                             </span>
                         </div>
                     </div>
-                     <div class="p-field p-col-12 p-md-4">
+                    <div class="field col-12 md:col-4">
                         <span class="p-float-label">
                             <CascadeSelect id="cascadeSelect" v-model="selectedCity" :options="cascadeCountries" optionLabel="cname" optionGroupLabel="name"
                                 :optionGroupChildren="['states', 'cities']" />
                             <label for="multiselect">CascadeSelect</label>
                         </span>
                     </div>
-                    <div class="p-field p-col-12 p-md-4">
+                    <div class="field col-12 md:col-4">
                         <span class="p-float-label">
                             <Dropdown id="dropdown" v-model="value8" :options="cities" optionLabel="name" />
                             <label for="dropdown">Dropdown</label>
                         </span>
                     </div>
-                    <div class="p-field p-col-12 p-md-4">
+                    <div class="field col-12 md:col-4">
                         <span class="p-float-label">
                             <MultiSelect id="multiselect" v-model="value9" :options="cities" optionLabel="name" />
                             <label for="multiselect">MultiSelect</label>
                         </span>
                     </div>
-                    <div class="p-field p-col-12 p-md-4">
+                    <div class="field col-12 md:col-4">
                         <span class="p-float-label">
                             <TreeSelect v-model="selectedNode" :options="nodes"></TreeSelect>
                             <label for="treeselect">TreeSelect</label>
                         </span>
                     </div>
-                    <div class="p-field p-col-12 p-md-4">
+                    <div class="field col-12 md:col-4">
                         <span class="p-float-label">
                             <Password id="password" v-model="value11" />
                             <label for="password">Password</label>
                         </span>
                     </div>
-                    <div class="p-field p-col-12 p-md-4">
+                    <div class="field col-12 md:col-4">
                         <span class="p-float-label">
                             <Textarea id="textarea" v-model="value10" rows="3" />
                             <label for="textarea">Textarea</label>
@@ -232,58 +232,58 @@ export default {
 <template>
     <div>
         <div class="card">
-            <div class="p-fluid p-grid">
-                <div class="p-field p-col-12 p-md-4">
+            <div class="p-fluid grid">
+                <div class="field col-12 md:col-4">
                     <span class="p-float-label">
                         <InputText id="inputtext" type="text" v-model="value1" />
                         <label for="inputtext">InputText</label>
                     </span>
                 </div>
-                <div class="p-field p-col-12 p-md-4">
+                <div class="field col-12 md:col-4">
                     <span class="p-float-label p-input-icon-left">
                         <i class="pi pi-search" />
                         <InputText id="inputtext-left" type="text" v-model="valueIconLeft" />
                         <label for="inputtext-left">Left Icon</label>
                     </span>
                 </div>
-                <div class="p-field p-col-12 p-md-4">
-                   <span class="p-float-label p-input-icon-right">
+                <div class="field col-12 md:col-4">
+                    <span class="p-float-label p-input-icon-right">
                         <i class="pi pi-search" />
                         <InputText id="inputtext-right" type="text" v-model="valueIconRight" />
                         <label for="inputtext-right">Right Icon</label>
                     </span>
                 </div>
-                <div class="p-field p-col-12 p-md-4">
+                <div class="field col-12 md:col-4">
                     <span class="p-float-label">
                         <AutoComplete v-model="value2" :suggestions="filteredCountries" @complete="searchCountry($event)" field="name" />
                         <label for="autocomplete">AutoComplete</label>
                     </span>
                 </div>
-                <div class="p-field p-col-12 p-md-4">
+                <div class="field col-12 md:col-4">
                     <span class="p-float-label">
                         <Calendar id="calendar" v-model="value3" />
                         <label for="calendar">Calendar</label>
                     </span>
                 </div>
-                <div class="p-field p-col-12 p-md-4">
+                <div class="field col-12 md:col-4">
                     <span class="p-float-label">
                         <Chips id="chips" v-model="value4" />
                         <label for="chips">Chips</label>
                     </span>
                 </div>
-                <div class="p-field p-col-12 p-md-4">
+                <div class="field col-12 md:col-4">
                     <span class="p-float-label">
                         <InputMask id="inputmask" v-model="value5" mask="99/99/9999" slotChar="mm/dd/yyyy" />
                         <label for="inputmask">InputMask</label>
                     </span>
                 </div>
-                <div class="p-field p-col-12 p-md-4">
+                <div class="field col-12 md:col-4">
                     <span class="p-float-label">
                         <InputNumber id="inputnumber" v-model="value6" />
                         <label for="inputnumber">InputNumber</label>
                     </span>
                 </div>
-                <div class="p-field p-col-12 p-md-4">
+                <div class="field col-12 md:col-4">
                     <div class="p-inputgroup">
                         <span class="p-inputgroup-addon">
                             <i class="pi pi-user"></i>
@@ -294,38 +294,38 @@ export default {
                         </span>
                     </div>
                 </div>
-                 <div class="p-field p-col-12 p-md-4">
+                <div class="field col-12 md:col-4">
                     <span class="p-float-label">
                         <CascadeSelect id="cascadeSelect" v-model="selectedCity" :options="cascadeCountries" optionLabel="cname" optionGroupLabel="name"
                             :optionGroupChildren="['states', 'cities']" />
                         <label for="multiselect">CascadeSelect</label>
                     </span>
                 </div>
-                <div class="p-field p-col-12 p-md-4">
+                <div class="field col-12 md:col-4">
                     <span class="p-float-label">
                         <Dropdown id="dropdown" v-model="value8" :options="cities" optionLabel="name" />
                         <label for="dropdown">Dropdown</label>
                     </span>
                 </div>
-                <div class="p-field p-col-12 p-md-4">
+                <div class="field col-12 md:col-4">
                     <span class="p-float-label">
                         <MultiSelect id="multiselect" v-model="value9" :options="cities" optionLabel="name" />
                         <label for="multiselect">MultiSelect</label>
                     </span>
                 </div>
-                <div class="p-field p-col-12 p-md-4">
+                <div class="field col-12 md:col-4">
                     <span class="p-float-label">
                         <TreeSelect v-model="selectedNode" :options="nodes"></TreeSelect>
                         <label for="treeselect">TreeSelect</label>
                     </span>
                 </div>
-                <div class="p-field p-col-12 p-md-4">
+                <div class="field col-12 md:col-4">
                     <span class="p-float-label">
                         <Password id="password" v-model="value11" />
                         <label for="password">Password</label>
                     </span>
                 </div>
-                <div class="p-field p-col-12 p-md-4">
+                <div class="field col-12 md:col-4">
                     <span class="p-float-label">
                         <Textarea id="textarea" v-model="value10" rows="3" />
                         <label for="textarea">Textarea</label>
@@ -480,58 +480,58 @@ export default {
 <template>
     <div>
         <div class="card">
-            <div class="p-fluid p-grid">
-                <div class="p-field p-col-12 p-md-4">
+            <div class="p-fluid grid">
+                <div class="field col-12 md:col-4">
                     <span class="p-float-label">
                         <InputText id="inputtext" type="text" v-model="value1" />
                         <label for="inputtext">InputText</label>
                     </span>
                 </div>
-                <div class="p-field p-col-12 p-md-4">
+                <div class="field col-12 md:col-4">
                     <span class="p-float-label p-input-icon-left">
                         <i class="pi pi-search" />
                         <InputText id="inputtext-left" type="text" v-model="valueIconLeft" />
                         <label for="inputtext-left">Left Icon</label>
                     </span>
                 </div>
-                <div class="p-field p-col-12 p-md-4">
-                   <span class="p-float-label p-input-icon-right">
+                <div class="field col-12 md:col-4">
+                    <span class="p-float-label p-input-icon-right">
                         <i class="pi pi-search" />
                         <InputText id="inputtext-right" type="text" v-model="valueIconRight" />
                         <label for="inputtext-right">Right Icon</label>
                     </span>
                 </div>
-                <div class="p-field p-col-12 p-md-4">
+                <div class="field col-12 md:col-4">
                     <span class="p-float-label">
                         <AutoComplete v-model="value2" :suggestions="filteredCountries" @complete="searchCountry($event)" field="name" />
                         <label for="autocomplete">AutoComplete</label>
                     </span>
                 </div>
-                <div class="p-field p-col-12 p-md-4">
+                <div class="field col-12 md:col-4">
                     <span class="p-float-label">
                         <Calendar id="calendar" v-model="value3" />
                         <label for="calendar">Calendar</label>
                     </span>
                 </div>
-                <div class="p-field p-col-12 p-md-4">
+                <div class="field col-12 md:col-4">
                     <span class="p-float-label">
                         <Chips id="chips" v-model="value4" />
                         <label for="chips">Chips</label>
                     </span>
                 </div>
-                <div class="p-field p-col-12 p-md-4">
+                <div class="field col-12 md:col-4">
                     <span class="p-float-label">
                         <InputMask id="inputmask" v-model="value5" mask="99/99/9999" slotChar="mm/dd/yyyy" />
                         <label for="inputmask">InputMask</label>
                     </span>
                 </div>
-                <div class="p-field p-col-12 p-md-4">
+                <div class="field col-12 md:col-4">
                     <span class="p-float-label">
                         <InputNumber id="inputnumber" v-model="value6" />
                         <label for="inputnumber">InputNumber</label>
                     </span>
                 </div>
-                <div class="p-field p-col-12 p-md-4">
+                <div class="field col-12 md:col-4">
                     <div class="p-inputgroup">
                         <span class="p-inputgroup-addon">
                             <i class="pi pi-user"></i>
@@ -542,38 +542,38 @@ export default {
                         </span>
                     </div>
                 </div>
-                 <div class="p-field p-col-12 p-md-4">
+                <div class="field col-12 md:col-4">
                     <span class="p-float-label">
                         <CascadeSelect id="cascadeSelect" v-model="selectedCity" :options="cascadeCountries" optionLabel="cname" optionGroupLabel="name"
                             :optionGroupChildren="['states', 'cities']" />
                         <label for="multiselect">CascadeSelect</label>
                     </span>
                 </div>
-                <div class="p-field p-col-12 p-md-4">
+                <div class="field col-12 md:col-4">
                     <span class="p-float-label">
                         <Dropdown id="dropdown" v-model="value8" :options="cities" optionLabel="name" />
                         <label for="dropdown">Dropdown</label>
                     </span>
                 </div>
-                <div class="p-field p-col-12 p-md-4">
+                <div class="field col-12 md:col-4">
                     <span class="p-float-label">
                         <MultiSelect id="multiselect" v-model="value9" :options="cities" optionLabel="name" />
                         <label for="multiselect">MultiSelect</label>
                     </span>
                 </div>
-                <div class="p-field p-col-12 p-md-4">
+                <div class="field col-12 md:col-4">
                     <span class="p-float-label">
                         <TreeSelect v-model="selectedNode" :options="nodes"></TreeSelect>
                         <label for="treeselect">TreeSelect</label>
                     </span>
                 </div>
-                <div class="p-field p-col-12 p-md-4">
+                <div class="field col-12 md:col-4">
                     <span class="p-float-label">
                         <Password id="password" v-model="value11" />
                         <label for="password">Password</label>
                     </span>
                 </div>
-                <div class="p-field p-col-12 p-md-4">
+                <div class="field col-12 md:col-4">
                     <span class="p-float-label">
                         <Textarea id="textarea" v-model="value10" rows="3" />
                         <label for="textarea">Textarea</label>
@@ -735,58 +735,58 @@ export default {
         <script src="./NodeService.js"><\\/script>`,
                     content: `<div id="app">
             <div class="card">
-                <div class="p-fluid p-grid">
-                    <div class="p-field p-col-12 p-md-4">
+                <div class="p-fluid grid">
+                    <div class="field col-12 md:col-4">
                         <span class="p-float-label">
                             <p-inputtext id="inputtext" type="text" v-model="value1"></p-inputtext>
                             <label for="inputtext">InputText</label>
                         </span>
                     </div>
-                    <div class="p-field p-col-12 p-md-4">
+                    <div class="field col-12 md:col-4">
                         <span class="p-float-label p-input-icon-left">
                             <i class="pi pi-search"></i>
                             <p-inputtext id="inputtext-left" type="text" v-model="valueIconLeft"></p-inputtext>
                             <label for="inputtext-left">Left Icon</label>
                         </span>
                     </div>
-                    <div class="p-field p-col-12 p-md-4">
+                    <div class="field col-12 md:col-4">
                     <span class="p-float-label p-input-icon-right">
                             <i class="pi pi-search"></i>
                             <p-inputtext id="inputtext-right" type="text" v-model="valueIconRight"></p-inputtext>
                             <label for="inputtext-right">Right Icon</label>
                         </span>
                     </div>
-                    <div class="p-field p-col-12 p-md-4">
+                    <div class="field col-12 md:col-4">
                         <span class="p-float-label">
                             <p-autocomplete v-model="value2" :suggestions="filteredCountries" @complete="searchCountry($event)" field="name"></p-autocomplete>
                             <label for="autocomplete">AutoComplete</label>
                         </span>
                     </div>
-                    <div class="p-field p-col-12 p-md-4">
+                    <div class="field col-12 md:col-4">
                         <span class="p-float-label">
                             <p-calendar id="calendar" v-model="value3"></p-calendar>
                             <label for="calendar">Calendar</label>
                         </span>
                     </div>
-                    <div class="p-field p-col-12 p-md-4">
+                    <div class="field col-12 md:col-4">
                         <span class="p-float-label">
                             <p-chips id="chips" v-model="value4"></p-chips>
                             <label for="chips">Chips</label>
                         </span>
                     </div>
-                    <div class="p-field p-col-12 p-md-4">
+                    <div class="field col-12 md:col-4">
                         <span class="p-float-label">
                             <p-inputmask id="inputmask" v-model="value5" mask="99/99/9999" slot-char="mm/dd/yyyy"></p-inputmask>
                             <label for="inputmask">InputMask</label>
                         </span>
                     </div>
-                    <div class="p-field p-col-12 p-md-4">
+                    <div class="field col-12 md:col-4">
                         <span class="p-float-label">
                             <p-inputnumber id="inputnumber" v-model="value6"></p-inputnumber>
                             <label for="inputnumber">InputNumber</label>
                         </span>
                     </div>
-                    <div class="p-field p-col-12 p-md-4">
+                    <div class="field col-12 md:col-4">
                         <div class="p-inputgroup">
                             <span class="p-inputgroup-addon">
                                 <i class="pi pi-user"></i>
@@ -797,38 +797,38 @@ export default {
                             </span>
                         </div>
                     </div>
-                    <div class="p-field p-col-12 p-md-4">
+                    <div class="field col-12 md:col-4">
                         <span class="p-float-label">
                             <p-cascadeselect id="cascadeSelect" v-model="selectedCity" :options="cascadeCountries" option-label="cname" option-group-label="name"
                                 :option-group-children="['states', 'cities']"></p-cascadeselect>
                             <label for="multiselect">CascadeSelect</label>
                         </span>
                     </div>
-                    <div class="p-field p-col-12 p-md-4">
+                    <div class="field col-12 md:col-4">
                         <span class="p-float-label">
                             <p-dropdown id="dropdown" v-model="value8" :options="cities" option-label="name"></p-dropdown>
                             <label for="dropdown">Dropdown</label>
                         </span>
                     </div>
-                    <div class="p-field p-col-12 p-md-4">
+                    <div class="field col-12 md:col-4">
                         <span class="p-float-label">
                             <p-multiselect id="multiselect" v-model="value9" :options="cities" option-label="name">
                             <label for="multiselect">MultiSelect</label>
                         </span>
                     </div>
-                    <div class="p-field p-col-12 p-md-4">
+                    <div class="field col-12 md:col-4">
                         <span class="p-float-label">
                             <p-treeselect v-model="selectedNode" :options="nodes"></p-treeselect>
                             <label for="treeselect">TreeSelect</label>
                         </span>
                     </div>
-                    <div class="p-field p-col-12 p-md-4">
+                    <div class="field col-12 md:col-4">
                         <span class="p-float-label">
                             <p-password id="password" v-model="value11"></p-password>
                             <label for="password">Password</label>
                         </span>
                     </div>
-                    <div class="p-field p-col-12 p-md-4">
+                    <div class="field col-12 md:col-4">
                         <span class="p-float-label">
                             <p-textarea id="textarea" v-model="value10" rows="3"></p-textarea>
                             <label for="textarea">Textarea</label>
diff --git a/src/views/formlayout/FormLayoutDemo.vue b/src/views/formlayout/FormLayoutDemo.vue
index 56c7bccbf..f881a5303 100644
--- a/src/views/formlayout/FormLayoutDemo.vue
+++ b/src/views/formlayout/FormLayoutDemo.vue
@@ -13,11 +13,11 @@
             <div class="card">
                 <h5>Vertical</h5>
                 <div class="p-fluid">
-                    <div class="p-field">
+                    <div class="field">
                         <label for="firstname1">Firstname</label>
                         <InputText id="firstname1" type="text" />
                     </div>
-                    <div class="p-field">
+                    <div class="field">
                         <label for="lastname1">Lastname</label>
                         <InputText id="lastname1" type="text" />
                     </div>
@@ -26,12 +26,12 @@
 
             <div class="card">
                 <h5>Vertical and Grid</h5>
-                <div class="p-fluid p-formgrid p-grid">
-                    <div class="p-field p-col">
+                <div class="p-fluid formgrid grid">
+                    <div class="field col">
                         <label for="firstname2">Firstname</label>
                         <InputText id="firstname2" type="text" />
                     </div>
-                    <div class="p-field p-col">
+                    <div class="field col">
                         <label for="lastname2">Lastname</label>
                         <InputText id="lastname2" type="text" />
                     </div>
@@ -40,15 +40,15 @@
 
             <div class="card">
                 <h5>Horizontal and Fixed Width</h5>
-                <div class="p-field p-grid">
-                    <label for="firstname3" class="p-col-fixed" style="width:100px">Firstname</label>
-                    <div class="p-col">
+                <div class="field grid">
+                    <label for="firstname3" class="col-fixed" style="width:100px">Firstname</label>
+                    <div class="col">
                         <InputText id="firstname3" type="text" />
                     </div>
                 </div>
-                <div class="p-field p-grid">
-                    <label for="lastname3" class="p-col-fixed" style="width:100px">Lastname</label>
-                    <div class="p-col">
+                <div class="field grid">
+                    <label for="lastname3" class="col-fixed" style="width:100px">Lastname</label>
+                    <div class="col">
                         <InputText id="lastname3" type="text" />
                     </div>
                 </div>
@@ -57,15 +57,15 @@
             <div class="card">
                 <h5>Horizontal and Fluid</h5>
                 <div class="p-fluid">
-                    <div class="p-field p-grid">
-                        <label for="firstname4" class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">Firstname</label>
-                        <div class="p-col-12 p-md-10">
+                    <div class="field grid">
+                        <label for="firstname4" class="col-12 mb-2 md:col-2 md:mb-0">Firstname</label>
+                        <div class="col-12 md:col-10">
                             <InputText id="firstname4" type="text" />
                         </div>
                     </div>
-                    <div class="p-field p-grid">
-                        <label for="lastname4" class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">Lastname</label>
-                        <div class="p-col-12 p-md-10">
+                    <div class="field grid">
+                        <label for="lastname4" class="col-12 mb-2 md:col-2 md:mb-0">Lastname</label>
+                        <div class="col-12 md:col-10">
                             <InputText id="lastname4" type="text" />
                         </div>
                     </div>
@@ -74,12 +74,12 @@
 
             <div class="card">
                 <h5>Inline</h5>
-                <div class="p-formgroup-inline">
-                    <div class="p-field">
+                <div class="formgroup-inline">
+                    <div class="field">
                         <label for="firstname5" class="p-sr-only">Firstname</label>
                         <InputText id="firstname5" type="text" placeholder="Firstname" />
                     </div>
-                    <div class="p-field">
+                    <div class="field">
                         <label for="lastname5" class="p-sr-only">Lastname</label>
                         <InputText id="lastname5" type="text" placeholder="Lastname" />
                     </div>
@@ -89,22 +89,22 @@
 
             <div class="card">
                 <h5>Vertical Checkbox</h5>
-                <div class="p-field-checkbox">
+                <div class="field-checkbox">
                     <Checkbox id="city1" name="city1" value="Chicago" v-model="cities1" />
                     <label for="city1">Chicago</label>
                 </div>
-                <div class="p-field-checkbox">
+                <div class="field-checkbox">
                     <Checkbox id="city2" name="city1" value="Los Angeles" v-model="cities1" />
                     <label for="city2">Los Angeles</label>
                 </div>
 
                 <h5>Horizontal Checkbox</h5>
-                <div class="p-formgroup-inline">
-                    <div class="p-field-checkbox">
+                <div class="formgroup-inline">
+                    <div class="field-checkbox">
                         <Checkbox id="city3" name="city2" value="Chicago" v-model="cities2" />
                         <label for="city3">Chicago</label>
                     </div>
-                    <div class="p-field-checkbox">
+                    <div class="field-checkbox">
                         <Checkbox id="city4" name="city2" value="Los Angeles" v-model="cities2" />
                         <label for="city4">Los Angeles</label>
                     </div>
@@ -113,22 +113,22 @@
 
             <div class="card">
                 <h5>Vertical RadioButton</h5>
-                <div class="p-field-radiobutton">
+                <div class="field-radiobutton">
                     <RadioButton id="city5" name="city1" value="Chicago" v-model="city1" />
                     <label for="city5">Chicago</label>
                 </div>
-                <div class="p-field-radiobutton">
+                <div class="field-radiobutton">
                     <RadioButton id="city6" name="city1" value="Los Angeles" v-model="city1" />
                     <label for="city6">Los Angeles</label>
                 </div>
 
                 <h5>Horizontal RadioButton</h5>
-                <div class="p-formgroup-inline">
-                    <div class="p-field-radiobutton">
+                <div class="formgroup-inline">
+                    <div class="field-radiobutton">
                         <RadioButton id="city7" name="city2" value="Chicago" v-model="city2" />
                         <label for="city7">Chicago</label>
                     </div>
-                    <div class="p-field-radiobutton">
+                    <div class="field-radiobutton">
                         <RadioButton id="city8" name="city2" value="Los Angeles" v-model="city2" />
                         <label for="city8">Los Angeles</label>
                     </div>
@@ -137,7 +137,7 @@
 
             <div class="card">
                 <h5>Help Text</h5>
-                <div class="p-field p-fluid">
+                <div class="field p-fluid">
                     <label for="username">Username</label>
                     <InputText id="username" type="username" aria-describedby="username-help" />
                     <small id="username-help">Enter your username to reset your password.</small>
@@ -146,28 +146,28 @@
 
             <div class="card">
                 <h5>Advanced</h5>
-                <div class="p-fluid p-formgrid p-grid">
-                    <div class="p-field p-col-12 p-md-6">
+                <div class="p-fluid formgrid grid">
+                    <div class="field col-12 md:col-6">
                         <label for="firstname6">Firstname</label>
                         <InputText id="firstname6" type="text" />
                     </div>
-                    <div class="p-field p-col-12 p-md-6">
+                    <div class="field col-12 md:col-6">
                         <label for="lastname6">Lastname</label>
                         <InputText id="lastname6" type="text" />
                     </div>
-                    <div class="p-field p-col-12">
+                    <div class="field col-12">
                         <label for="address">Address</label>
                         <Textarea id="address" rows="4" />
                     </div>
-                    <div class="p-field p-col-12 p-md-6">
+                    <div class="field col-12 md:col-6">
                         <label for="city">City</label>
                         <InputText id="city" type="text" />
                     </div>
-                    <div class="p-field p-col-12 p-md-3">
+                    <div class="field col-12 md:col-3">
                         <label for="state">State</label>
                         <Dropdown inputId="state" v-model="selectedState" :options="states" optionLabel="name" placeholder="Select" />
                     </div>
-                    <div class="p-field p-col-12 p-md-3">
+                    <div class="field col-12 md:col-3">
                         <label for="zip">Zip</label>
                         <InputText id="zip" type="text" />
                     </div>
@@ -207,8 +207,8 @@ export default {
 
 <style lang="scss" scoped>
 @media screen and (max-width: 489px) {
-    .p-formgroup-inline {
-        .p-field {
+    .formgroup-inline {
+        .field {
             margin-bottom: 1em !important;
         }
     }
diff --git a/src/views/formlayout/FormLayoutDoc.vue b/src/views/formlayout/FormLayoutDoc.vue
index 927f74448..7f6c2c8da 100644
--- a/src/views/formlayout/FormLayoutDoc.vue
+++ b/src/views/formlayout/FormLayoutDoc.vue
@@ -1,9 +1,9 @@
 <template>	
     <AppDoc name="FormLayoutDemo" :sources="sources" github="formlayout/FormLayoutDemo.vue">
         <h5>Getting Started</h5>
-		<p>Core member of the FormLayout is the <i>.p-field</i> class that wraps the input field and the associated label.</p>
+		<p>Core member of the FormLayout is the <i>.field</i> class that wraps the input field and the associated label.</p>
 <pre v-code><code>
-&lt;div class="p-field"&gt;
+&lt;div class="field"&gt;
     &lt;label for="fieldId"&gt;Label&lt;/label&gt;
     &lt;InputText id="fieldId" type="text" /&gt;
 &lt;/div&gt;
@@ -14,11 +14,11 @@
         <p>In its simplest form, a vertical layout is created when used within <i>.p-fluid</i> that makes the components use all available width.</p>
 <pre v-code><code>
 &lt;div class="p-fluid"&gt;
-    &lt;div class="p-field"&gt;
+    &lt;div class="field"&gt;
         &lt;label for="firstname"&gt;Firstname&lt;/label&gt;
         &lt;InputText id="firstname" type="text" /&gt;
     &lt;/div&gt;
-    &lt;div class="p-field"&gt;
+    &lt;div class="field"&gt;
         &lt;label for="lastname"&gt;Lastname&lt;/label&gt;
         &lt;InputText id="lastname" type="text" /&gt;
     &lt;/div&gt;
@@ -27,15 +27,15 @@
 </code></pre>
 
         <h5>Vertical Layout with Grid</h5>
-        <p>This is where FormLayout actually hooks-in to PrimeFlex with the help of <i>.p-formgrid</i> class to optimize the content for form design. Example
+        <p>This is where FormLayout actually hooks-in to PrimeFlex with the help of <i>.formgrid</i> class to optimize the content for form design. Example
         below arranges two fields to be displayed next two each other.</p>
 <pre v-code><code>
-&lt;div class="p-fluid p-formgrid p-grid"&gt;
-        &lt;div class="p-field p-col"&gt;
+&lt;div class="p-fluid formgrid grid"&gt;
+        &lt;div class="field p-col"&gt;
         &lt;label for="firstname"&gt;Firstname&lt;/label&gt;
         &lt;InputText id="firstname" type="text" /&gt;
     &lt;/div&gt;
-    &lt;div class="p-field p-col"&gt;
+    &lt;div class="field p-col"&gt;
         &lt;label for="lastname"&gt;Lastname&lt;/label&gt;
         &lt;InputText id="lastname" type="text" /&gt;
     &lt;/div&gt;
@@ -48,13 +48,13 @@
             example, label has a fixed width where container of the inputs gets the remaining space.
         </p>
 <pre v-code><code>
-&lt;div class="p-field p-grid"&gt;
+&lt;div class="field grid"&gt;
     &lt;label for="firstname" class="p-col-fixed" style="width:100px"&gt;Firstname&lt;/label&gt;
     &lt;div class="p-col"&gt;
         &lt;InputText id="firstname" type="text" /&gt;
     &lt;/div&gt;
 &lt;/div&gt;
-&lt;div class="p-field p-grid"&gt;
+&lt;div class="field grid"&gt;
     &lt;label for="lastname" class="p-col-fixed" style="width:100px"&gt;Lastname&lt;/label&gt;
     &lt;div class="p-col"&gt;
         &lt;InputText id="lastname" type="text" /&gt;
@@ -67,15 +67,15 @@
         <p>Wrapping the form in the previous example with <i>.p-fluid</i> and removing the fixed width results in a fluid layout.</p>
 <pre v-code><code>
 &lt;div class="p-fluid"&gt;
-    &lt;div class="p-field p-grid"&gt;
-        &lt;label for="firstname" class="p-col-12 p-mb-2 p-md-2 p-mb-md-0"&gt;Firstname&lt;/label&gt;
-        &lt;div class="p-col-12 p-md-10"&gt;
+    &lt;div class="field grid"&gt;
+        &lt;label for="firstname" class="col-12 mb-2 md:col-2 md:mb-0"&gt;Firstname&lt;/label&gt;
+        &lt;div class="col-12 md:col-10"&gt;
             &lt;InputText id="firstname" type="text" /&gt;
         &lt;/div&gt;
     &lt;/div&gt;
-    &lt;div class="p-field p-grid"&gt;
-        &lt;label for="lastname" class="p-col-12 p-mb-2 p-md-2 p-mb-md-0"&gt;Lastname&lt;/label&gt;
-        &lt;div class="p-col-12 p-md-10"&gt;
+    &lt;div class="field grid"&gt;
+        &lt;label for="lastname" class="col-12 mb-2 md:col-2 md:mb-0"&gt;Lastname&lt;/label&gt;
+        &lt;div class="col-12 md:col-10"&gt;
             &lt;InputText id="lastname" type="text" /&gt;
         &lt;/div&gt;
     &lt;/div&gt;
@@ -84,15 +84,15 @@
 </code></pre>
 
         <h5>Inline</h5>
-        <p>Inline forms are used to display the content on the same row and can simply be implemented by adding <i>.p-formgroup-inline</i> to the form container. Note that per design requirements, if labels
+        <p>Inline forms are used to display the content on the same row and can simply be implemented by adding <i>.formgroup-inline</i> to the form container. Note that per design requirements, if labels
             are not visually hidden, it is suggested to use <i>.p-sr-only</i> to still support screen readers.</p>
 <pre v-code><code>
-&lt;div class="p-formgroup-inline"&gt;
-    &lt;div class="p-field"&gt;
+&lt;div class="formgroup-inline"&gt;
+    &lt;div class="field"&gt;
         &lt;label for="firstname" class="p-sr-only"&gt;Firstname&lt;/label&gt;
         &lt;InputText id="firstname" type="text" placeholder="Firstname" /&gt;
     &lt;/div&gt;
-    &lt;div class="p-field"&gt;
+    &lt;div class="field"&gt;
         &lt;label for="lastname" class="p-sr-only"&gt;Lastname&lt;/label&gt;
         &lt;InputText id="lastname" type="text" placeholder="Lastname" /&gt;
     &lt;/div&gt;
@@ -102,26 +102,26 @@
 </code></pre>
 
         <h5>Checkbox and RadioButton</h5>
-        <p>Checkbox and RadioButton have exclusive layout support via <i>.p-field-checkbox</i> and <i>.p-field-radiobutton</i> classes respectively.
+        <p>Checkbox and RadioButton have exclusive layout support via <i>.field-checkbox</i> and <i>.field-radiobutton</i> classes respectively.
         Examples here demonstrates vertical and horizontal layout alternatives.</p>
 <pre v-code><code>
 &lt;h3&gt;Vertical Checkbox&lt;/h3&gt;
-&lt;div class="p-field-checkbox"&gt;
+&lt;div class="field-checkbox"&gt;
     &lt;Checkbox id="city1" name="city1" value="Chicago" v-model="cities1" /&gt;
     &lt;label for="city1"&gt;Chicago&lt;/label&gt;
 &lt;/div&gt;
-&lt;div class="p-field-checkbox"&gt;
+&lt;div class="field-checkbox"&gt;
     &lt;Checkbox id="city2" name="city1" value="Los Angeles" v-model="cities1" /&gt;
     &lt;label for="city2"&gt;Los Angeles&lt;/label&gt;
 &lt;/div&gt;
 
 &lt;h3&gt;Horizontal Checkbox&lt;/h3&gt;
-&lt;div class="p-formgroup-inline"&gt;
-    &lt;div class="p-field-checkbox"&gt;
+&lt;div class="formgroup-inline"&gt;
+    &lt;div class="field-checkbox"&gt;
         &lt;Checkbox id="city3" name="city2" value="Chicago" v-model="cities2" /&gt;
         &lt;label for="city3"&gt;Chicago&lt;/label&gt;
     &lt;/div&gt;
-    &lt;div class="p-field-checkbox"&gt;
+    &lt;div class="field-checkbox"&gt;
         &lt;Checkbox id="city4" name="city2" value="Los Angeles" v-model="cities2" /&gt;
         &lt;label for="city4"&gt;Los Angeles&lt;/label&gt;
     &lt;/div&gt;
@@ -131,22 +131,22 @@
 
 <pre v-code><code>
 &lt;h3&gt;Vertical RadioButton&lt;/h3&gt;
-&lt;div class="p-field-radiobutton"&gt;
+&lt;div class="field-radiobutton"&gt;
     &lt;RadioButton id="city5" name="city1" value="Chicago" v-model="city1" /&gt;
     &lt;label for="city5"&gt;Chicago&lt;/label&gt;
 &lt;/div&gt;
-&lt;div class="p-field-radiobutton"&gt;
+&lt;div class="field-radiobutton"&gt;
     &lt;RadioButton id="city6" name="city1" value="Los Angeles" v-model="city1" /&gt;
     &lt;label for="city6"&gt;Los Angeles&lt;/label&gt;
 &lt;/div&gt;
 
 &lt;h3&gt;Horizontal RadioButton&lt;/h3&gt;
-&lt;div class="p-formgroup-inline"&gt;
-    &lt;div class="p-field-checkbox"&gt;
+&lt;div class="formgroup-inline"&gt;
+    &lt;div class="field-checkbox"&gt;
         &lt;RadioButton id="city7" name="city2" value="Chicago" v-model="city2" /&gt;
         &lt;label for="city7"&gt;Chicago&lt;/label&gt;
     &lt;/div&gt;
-    &lt;div class="p-field-checkbox"&gt;
+    &lt;div class="field-checkbox"&gt;
         &lt;RadioButton id="city8" name="city2" value="Los Angeles" v-model="city2" /&gt;
         &lt;label for="city8"&gt;Los Angeles&lt;/label&gt;
     &lt;/div&gt;
@@ -157,7 +157,7 @@
         <h5>Helper text</h5>
         <p>Helper text is an optional element defined with the <i>small</i> tag to display additional information about the input field.</p>
 <pre v-code><code>
-&lt;div class="p-field p-fluid"&gt;
+&lt;div class="field p-fluid"&gt;
     &lt;label for="username"&gt;Username&lt;/label&gt;
     &lt;InputText id="username" type="username" aria-describedby="username-help" /&gt;
     &lt;small id="username-help"&gt;Enter your username to reset your password.&lt;/small&gt;
@@ -166,30 +166,30 @@
 </code></pre>
 
         <h5>Advanced Forms</h5>
-        <p>A responsive form with various input fields can easily be implemented using a combination of <i>.p-field</i>, <i>.p-formgrid</i> and <i>.p-fluid</i>.</p>
+        <p>A responsive form with various input fields can easily be implemented using a combination of <i>.field</i>, <i>.formgrid</i> and <i>.p-fluid</i>.</p>
 <pre v-code><code>
-&lt;div class="p-fluid p-formgrid p-grid"&gt;
-    &lt;div class="p-field p-col-12 p-md-6"&gt;
+&lt;div class="p-fluid formgrid grid"&gt;
+    &lt;div class="field col-12 md:col-6"&gt;
         &lt;label for="firstname"&gt;Firstname&lt;/label&gt;
         &lt;InputText id="firstname" type="text" /&gt;
     &lt;/div&gt;
-    &lt;div class="p-field p-col-12 p-md-6"&gt;
+    &lt;div class="field col-12 md:col-6"&gt;
         &lt;label for="lastname"&gt;Lastname&lt;/label&gt;
         &lt;InputText id="lastname" type="text" /&gt;
     &lt;/div&gt;
-    &lt;div class="p-field p-col-12"&gt;
+    &lt;div class="field col-12"&gt;
         &lt;label for="address"&gt;Address&lt;/label&gt;
         &lt;Textarea id="address" rows="4" /&gt;
     &lt;/div&gt;
-    &lt;div class="p-field p-col-12 p-md-6"&gt;
+    &lt;div class="field col-12 md:col-6"&gt;
         &lt;label for="city"&gt;City&lt;/label&gt;
         &lt;InputText id="city" type="text" /&gt;
     &lt;/div&gt;
-    &lt;div class="p-field p-col-12 p-md-3"&gt;
+    &lt;div class="field col-12 md:col-3"&gt;
         &lt;label for="state"&gt;State&lt;/label&gt;
         &lt;Dropdown inputId="state" v-model="selectedState" :options="states" optionLabel="name" placeholder="Select" /&gt;
     &lt;/div&gt;
-    &lt;div class="p-field p-col-12 p-md-3"&gt;
+    &lt;div class="field col-12 md:col-3"&gt;
         &lt;label for="zip"&gt;Zip&lt;/label&gt;
         &lt;InputText id="zip" type="text" /&gt;
     &lt;/div&gt;
@@ -236,11 +236,11 @@ export default {
         <div class="card">
             <h5>Vertical</h5>
             <div class="p-fluid">
-                <div class="p-field">
+                <div class="field">
                     <label for="firstname1">Firstname</label>
                     <InputText id="firstname1" type="text" />
                 </div>
-                <div class="p-field">
+                <div class="field">
                     <label for="lastname1">Lastname</label>
                     <InputText id="lastname1" type="text" />
                 </div>
@@ -249,12 +249,12 @@ export default {
 
         <div class="card">
             <h5>Vertical and Grid</h5>
-            <div class="p-fluid p-formgrid p-grid">
-                <div class="p-field p-col">
+            <div class="p-fluid formgrid grid">
+                <div class="field p-col">
                     <label for="firstname2">Firstname</label>
                     <InputText id="firstname2" type="text" />
                 </div>
-                <div class="p-field p-col">
+                <div class="field p-col">
                     <label for="lastname2">Lastname</label>
                     <InputText id="lastname2" type="text" />
                 </div>
@@ -263,13 +263,13 @@ export default {
 
         <div class="card">
             <h5>Horizontal and Fixed Width</h5>
-            <div class="p-field p-grid">
+            <div class="field grid">
                 <label for="firstname3" class="p-col-fixed" style="width:100px">Firstname</label>
                 <div class="p-col">
                     <InputText id="firstname3" type="text" />
                 </div>
             </div>
-            <div class="p-field p-grid">
+            <div class="field grid">
                 <label for="lastname3" class="p-col-fixed" style="width:100px">Lastname</label>
                 <div class="p-col">
                     <InputText id="lastname3" type="text" />
@@ -280,15 +280,15 @@ export default {
         <div class="card">
             <h5>Horizontal and Fluid</h5>
             <div class="p-fluid">
-                <div class="p-field p-grid">
-                    <label for="firstname4" class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">Firstname</label>
-                    <div class="p-col-12 p-md-10">
+                <div class="field grid">
+                    <label for="firstname4" class="col-12 mb-2 md:col-2 md:mb-0">Firstname</label>
+                    <div class="col-12 md:col-10">
                         <InputText id="firstname4" type="text" />
                     </div>
                 </div>
-                <div class="p-field p-grid">
-                    <label for="lastname4" class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">Lastname</label>
-                    <div class="p-col-12 p-md-10">
+                <div class="field grid">
+                    <label for="lastname4" class="col-12 mb-2 md:col-2 md:mb-0">Lastname</label>
+                    <div class="col-12 md:col-10">
                         <InputText id="lastname4" type="text" />
                     </div>
                 </div>
@@ -297,12 +297,12 @@ export default {
 
         <div class="card">
             <h5>Inline</h5>
-            <div class="p-formgroup-inline">
-                <div class="p-field">
+            <div class="formgroup-inline">
+                <div class="field">
                     <label for="firstname5" class="p-sr-only">Firstname</label>
                     <InputText id="firstname5" type="text" placeholder="Firstname" />
                 </div>
-                <div class="p-field">
+                <div class="field">
                     <label for="lastname5" class="p-sr-only">Lastname</label>
                     <InputText id="lastname5" type="text" placeholder="Lastname" />
                 </div>
@@ -312,22 +312,22 @@ export default {
 
         <div class="card">
             <h5>Vertical Checkbox</h5>
-            <div class="p-field-checkbox">
+            <div class="field-checkbox">
                 <Checkbox id="city1" name="city1" value="Chicago" v-model="cities1" />
                 <label for="city1">Chicago</label>
             </div>
-            <div class="p-field-checkbox">
+            <div class="field-checkbox">
                 <Checkbox id="city2" name="city1" value="Los Angeles" v-model="cities1" />
                 <label for="city2">Los Angeles</label>
             </div>
 
             <h5>Horizontal Checkbox</h5>
-            <div class="p-formgroup-inline">
-                <div class="p-field-checkbox">
+            <div class="formgroup-inline">
+                <div class="field-checkbox">
                     <Checkbox id="city3" name="city2" value="Chicago" v-model="cities2" />
                     <label for="city3">Chicago</label>
                 </div>
-                <div class="p-field-checkbox">
+                <div class="field-checkbox">
                     <Checkbox id="city4" name="city2" value="Los Angeles" v-model="cities2" />
                     <label for="city4">Los Angeles</label>
                 </div>
@@ -336,22 +336,22 @@ export default {
 
         <div class="card">
             <h5>Vertical RadioButton</h5>
-            <div class="p-field-radiobutton">
+            <div class="field-radiobutton">
                 <RadioButton id="city5" name="city1" value="Chicago" v-model="city1" />
                 <label for="city5">Chicago</label>
             </div>
-            <div class="p-field-radiobutton">
+            <div class="field-radiobutton">
                 <RadioButton id="city6" name="city1" value="Los Angeles" v-model="city1" />
                 <label for="city6">Los Angeles</label>
             </div>
 
             <h5>Horizontal RadioButton</h5>
-            <div class="p-formgroup-inline">
-                <div class="p-field-radiobutton">
+            <div class="formgroup-inline">
+                <div class="field-radiobutton">
                     <RadioButton id="city7" name="city2" value="Chicago" v-model="city2" />
                     <label for="city7">Chicago</label>
                 </div>
-                <div class="p-field-radiobutton">
+                <div class="field-radiobutton">
                     <RadioButton id="city8" name="city2" value="Los Angeles" v-model="city2" />
                     <label for="city8">Los Angeles</label>
                 </div>
@@ -360,7 +360,7 @@ export default {
 
         <div class="card">
             <h5>Help Text</h5>
-            <div class="p-field p-fluid">
+            <div class="field p-fluid">
                 <label for="username">Username</label>
                 <InputText id="username" type="username" aria-describedby="username-help" />
                 <small id="username-help">Enter your username to reset your password.</small>
@@ -369,28 +369,28 @@ export default {
 
         <div class="card">
             <h5>Advanced</h5>
-            <div class="p-fluid p-formgrid p-grid">
-                <div class="p-field p-col-12 p-md-6">
+            <div class="p-fluid formgrid grid">
+                <div class="field col-12 md:col-6">
                     <label for="firstname6">Firstname</label>
                     <InputText id="firstname6" type="text" />
                 </div>
-                <div class="p-field p-col-12 p-md-6">
+                <div class="field col-12 md:col-6">
                     <label for="lastname6">Lastname</label>
                     <InputText id="lastname6" type="text" />
                 </div>
-                <div class="p-field p-col-12">
+                <div class="field col-12">
                     <label for="address">Address</label>
                     <Textarea id="address" rows="4" />
                 </div>
-                <div class="p-field p-col-12 p-md-6">
+                <div class="field col-12 md:col-6">
                     <label for="city">City</label>
                     <InputText id="city" type="text" />
                 </div>
-                <div class="p-field p-col-12 p-md-3">
+                <div class="field col-12 md:col-3">
                     <label for="state">State</label>
                     <Dropdown inputId="state" v-model="selectedState" :options="states" optionLabel="name" placeholder="Select" />
                 </div>
-                <div class="p-field p-col-12 p-md-3">
+                <div class="field col-12 md:col-3">
                     <label for="zip">Zip</label>
                     <InputText id="zip" type="text" />
                 </div>
@@ -422,8 +422,8 @@ export default {
 
 <style lang="scss" scoped>
 @media screen and (max-width: 489px) {
-    .p-formgroup-inline {
-        .p-field {
+    .formgroup-inline {
+        .field {
             margin-bottom: 1em !important;
         }
     }
@@ -447,11 +447,11 @@ textarea {
         <div class="card">
             <h5>Vertical</h5>
             <div class="p-fluid">
-                <div class="p-field">
+                <div class="field">
                     <label for="firstname1">Firstname</label>
                     <InputText id="firstname1" type="text" />
                 </div>
-                <div class="p-field">
+                <div class="field">
                     <label for="lastname1">Lastname</label>
                     <InputText id="lastname1" type="text" />
                 </div>
@@ -460,12 +460,12 @@ textarea {
 
         <div class="card">
             <h5>Vertical and Grid</h5>
-            <div class="p-fluid p-formgrid p-grid">
-                <div class="p-field p-col">
+            <div class="p-fluid formgrid grid">
+                <div class="field p-col">
                     <label for="firstname2">Firstname</label>
                     <InputText id="firstname2" type="text" />
                 </div>
-                <div class="p-field p-col">
+                <div class="field p-col">
                     <label for="lastname2">Lastname</label>
                     <InputText id="lastname2" type="text" />
                 </div>
@@ -474,13 +474,13 @@ textarea {
 
         <div class="card">
             <h5>Horizontal and Fixed Width</h5>
-            <div class="p-field p-grid">
+            <div class="field grid">
                 <label for="firstname3" class="p-col-fixed" style="width:100px">Firstname</label>
                 <div class="p-col">
                     <InputText id="firstname3" type="text" />
                 </div>
             </div>
-            <div class="p-field p-grid">
+            <div class="field grid">
                 <label for="lastname3" class="p-col-fixed" style="width:100px">Lastname</label>
                 <div class="p-col">
                     <InputText id="lastname3" type="text" />
@@ -491,15 +491,15 @@ textarea {
         <div class="card">
             <h5>Horizontal and Fluid</h5>
             <div class="p-fluid">
-                <div class="p-field p-grid">
-                    <label for="firstname4" class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">Firstname</label>
-                    <div class="p-col-12 p-md-10">
+                <div class="field grid">
+                    <label for="firstname4" class="col-12 mb-2 md:col-2 md:mb-0">Firstname</label>
+                    <div class="col-12 md:col-10">
                         <InputText id="firstname4" type="text" />
                     </div>
                 </div>
-                <div class="p-field p-grid">
-                    <label for="lastname4" class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">Lastname</label>
-                    <div class="p-col-12 p-md-10">
+                <div class="field grid">
+                    <label for="lastname4" class="col-12 mb-2 md:col-2 md:mb-0">Lastname</label>
+                    <div class="col-12 md:col-10">
                         <InputText id="lastname4" type="text" />
                     </div>
                 </div>
@@ -508,12 +508,12 @@ textarea {
 
         <div class="card">
             <h5>Inline</h5>
-            <div class="p-formgroup-inline">
-                <div class="p-field">
+            <div class="formgroup-inline">
+                <div class="field">
                     <label for="firstname5" class="p-sr-only">Firstname</label>
                     <InputText id="firstname5" type="text" placeholder="Firstname" />
                 </div>
-                <div class="p-field">
+                <div class="field">
                     <label for="lastname5" class="p-sr-only">Lastname</label>
                     <InputText id="lastname5" type="text" placeholder="Lastname" />
                 </div>
@@ -523,22 +523,22 @@ textarea {
 
         <div class="card">
             <h5>Vertical Checkbox</h5>
-            <div class="p-field-checkbox">
+            <div class="field-checkbox">
                 <Checkbox id="city1" name="city1" value="Chicago" v-model="cities1" />
                 <label for="city1">Chicago</label>
             </div>
-            <div class="p-field-checkbox">
+            <div class="field-checkbox">
                 <Checkbox id="city2" name="city1" value="Los Angeles" v-model="cities1" />
                 <label for="city2">Los Angeles</label>
             </div>
 
             <h5>Horizontal Checkbox</h5>
-            <div class="p-formgroup-inline">
-                <div class="p-field-checkbox">
+            <div class="formgroup-inline">
+                <div class="field-checkbox">
                     <Checkbox id="city3" name="city2" value="Chicago" v-model="cities2" />
                     <label for="city3">Chicago</label>
                 </div>
-                <div class="p-field-checkbox">
+                <div class="field-checkbox">
                     <Checkbox id="city4" name="city2" value="Los Angeles" v-model="cities2" />
                     <label for="city4">Los Angeles</label>
                 </div>
@@ -547,22 +547,22 @@ textarea {
 
         <div class="card">
             <h5>Vertical RadioButton</h5>
-            <div class="p-field-radiobutton">
+            <div class="field-radiobutton">
                 <RadioButton id="city5" name="city1" value="Chicago" v-model="city1" />
                 <label for="city5">Chicago</label>
             </div>
-            <div class="p-field-radiobutton">
+            <div class="field-radiobutton">
                 <RadioButton id="city6" name="city1" value="Los Angeles" v-model="city1" />
                 <label for="city6">Los Angeles</label>
             </div>
 
             <h5>Horizontal RadioButton</h5>
-            <div class="p-formgroup-inline">
-                <div class="p-field-radiobutton">
+            <div class="formgroup-inline">
+                <div class="field-radiobutton">
                     <RadioButton id="city7" name="city2" value="Chicago" v-model="city2" />
                     <label for="city7">Chicago</label>
                 </div>
-                <div class="p-field-radiobutton">
+                <div class="field-radiobutton">
                     <RadioButton id="city8" name="city2" value="Los Angeles" v-model="city2" />
                     <label for="city8">Los Angeles</label>
                 </div>
@@ -571,7 +571,7 @@ textarea {
 
         <div class="card">
             <h5>Help Text</h5>
-            <div class="p-field p-fluid">
+            <div class="field p-fluid">
                 <label for="username">Username</label>
                 <InputText id="username" type="username" aria-describedby="username-help" />
                 <small id="username-help">Enter your username to reset your password.</small>
@@ -580,28 +580,28 @@ textarea {
 
         <div class="card">
             <h5>Advanced</h5>
-            <div class="p-fluid p-formgrid p-grid">
-                <div class="p-field p-col-12 p-md-6">
+            <div class="p-fluid formgrid grid">
+                <div class="field col-12 md:col-6">
                     <label for="firstname6">Firstname</label>
                     <InputText id="firstname6" type="text" />
                 </div>
-                <div class="p-field p-col-12 p-md-6">
+                <div class="field col-12 md:col-6">
                     <label for="lastname6">Lastname</label>
                     <InputText id="lastname6" type="text" />
                 </div>
-                <div class="p-field p-col-12">
+                <div class="field col-12">
                     <label for="address">Address</label>
                     <Textarea id="address" rows="4" />
                 </div>
-                <div class="p-field p-col-12 p-md-6">
+                <div class="field col-12 md:col-6">
                     <label for="city">City</label>
                     <InputText id="city" type="text" />
                 </div>
-                <div class="p-field p-col-12 p-md-3">
+                <div class="field col-12 md:col-3">
                     <label for="state">State</label>
                     <Dropdown inputId="state" v-model="selectedState" :options="states" optionLabel="name" placeholder="Select" />
                 </div>
-                <div class="p-field p-col-12 p-md-3">
+                <div class="field col-12 md:col-3">
                     <label for="zip">Zip</label>
                     <InputText id="zip" type="text" />
                 </div>
@@ -635,8 +635,8 @@ export default {
 
 <style lang="scss" scoped>
 @media screen and (max-width: 489px) {
-    .p-formgroup-inline {
-        .p-field {
+    .formgroup-inline {
+        .field {
             margin-bottom: 1em !important;
         }
     }
@@ -662,11 +662,11 @@ textarea {
             <div class="card">
                 <h5>Vertical</h5>
                 <div class="p-fluid">
-                    <div class="p-field">
+                    <div class="field">
                         <label for="firstname1">Firstname</label>
                         <p-inputtext id="firstname1" type="text"></p-inputtext>
                     </div>
-                    <div class="p-field">
+                    <div class="field">
                         <label for="lastname1">Lastname</label>
                         <p-inputtext id="lastname1" type="text"></p-inputtext>
                     </div>
@@ -675,12 +675,12 @@ textarea {
 
             <div class="card">
                 <h5>Vertical and Grid</h5>
-                <div class="p-fluid p-formgrid p-grid">
-                    <div class="p-field p-col">
+                <div class="p-fluid formgrid grid">
+                    <div class="field p-col">
                         <label for="firstname2">Firstname</label>
                         <p-inputtext id="firstname2" type="text"></p-inputtext>
                     </div>
-                    <div class="p-field p-col">
+                    <div class="field p-col">
                         <label for="lastname2">Lastname</label>
                         <p-inputtext id="lastname2" type="text"></p-inputtext>
                     </div>
@@ -689,13 +689,13 @@ textarea {
 
             <div class="card">
                 <h5>Horizontal and Fixed Width</h5>
-                <div class="p-field p-grid">
+                <div class="field grid">
                     <label for="firstname3" class="p-col-fixed" style="width:100px">Firstname</label>
                     <div class="p-col">
                         <p-inputtext id="firstname3" type="text"></p-inputtext>
                     </div>
                 </div>
-                <div class="p-field p-grid">
+                <div class="field grid">
                     <label for="lastname3" class="p-col-fixed" style="width:100px">Lastname</label>
                     <div class="p-col">
                         <p-inputtext id="lastname3" type="text"></p-inputtext>
@@ -706,15 +706,15 @@ textarea {
             <div class="card">
                 <h5>Horizontal and Fluid</h5>
                 <div class="p-fluid">
-                    <div class="p-field p-grid">
-                        <label for="firstname4" class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">Firstname</label>
-                        <div class="p-col-12 p-md-10">
+                    <div class="field grid">
+                        <label for="firstname4" class="col-12 mb-2 md:col-2 md:mb-0">Firstname</label>
+                        <div class="col-12 md:col-10">
                             <p-inputtext id="firstname4" type="text"></p-inputtext>
                         </div>
                     </div>
-                    <div class="p-field p-grid">
-                        <label for="lastname4" class="p-col-12 p-mb-2 p-md-2 p-mb-md-0">Lastname</label>
-                        <div class="p-col-12 p-md-10">
+                    <div class="field grid">
+                        <label for="lastname4" class="col-12 mb-2 md:col-2 md:mb-0">Lastname</label>
+                        <div class="col-12 md:col-10">
                             <p-inputtext id="lastname4" type="text"></p-inputtext>
                         </div>
                     </div>
@@ -723,12 +723,12 @@ textarea {
 
             <div class="card">
                 <h5>Inline</h5>
-                <div class="p-formgroup-inline">
-                    <div class="p-field">
+                <div class="formgroup-inline">
+                    <div class="field">
                         <label for="firstname5" class="p-sr-only">Firstname</label>
                         <p-inputtext id="firstname5" type="text" placeholder="Firstname"></p-inputtext>
                     </div>
-                    <div class="p-field">
+                    <div class="field">
                         <label for="lastname5" class="p-sr-only">Lastname</label>
                         <p-inputtext id="lastname5" type="text" placeholder="Lastname"></p-inputtext>
                     </div>
@@ -738,22 +738,22 @@ textarea {
 
             <div class="card">
                 <h5>Vertical Checkbox</h5>
-                <div class="p-field-checkbox">
+                <div class="field-checkbox">
                     <p-checkbox id="city1" name="city1" value="Chicago" v-model="cities1"></p-checkbox>
                     <label for="city1">Chicago</label>
                 </div>
-                <div class="p-field-checkbox">
+                <div class="field-checkbox">
                     <p-checkbox id="city2" name="city1" value="Los Angeles" v-model="cities1"></p-checkbox>
                     <label for="city2">Los Angeles</label>
                 </div>
 
                 <h5>Horizontal Checkbox</h5>
-                <div class="p-formgroup-inline">
-                    <div class="p-field-checkbox">
+                <div class="formgroup-inline">
+                    <div class="field-checkbox">
                         <p-checkbox id="city3" name="city2" value="Chicago" v-model="cities2"></p-checkbox>
                         <label for="city3">Chicago</label>
                     </div>
-                    <div class="p-field-checkbox">
+                    <div class="field-checkbox">
                         <p-checkbox id="city4" name="city2" value="Los Angeles" v-model="cities2"></p-checkbox>
                         <label for="city4">Los Angeles</label>
                     </div>
@@ -762,22 +762,22 @@ textarea {
 
             <div class="card">
                 <h5>Vertical RadioButton</h5>
-                <div class="p-field-radiobutton">
+                <div class="field-radiobutton">
                     <p-radiobutton id="city5" name="city1" value="Chicago" v-model="city1"></p-radiobutton>
                     <label for="city5">Chicago</label>
                 </div>
-                <div class="p-field-radiobutton">
+                <div class="field-radiobutton">
                     <p-radiobutton id="city6" name="city1" value="Los Angeles" v-model="city1"></p-radiobutton>
                     <label for="city6">Los Angeles</label>
                 </div>
 
                 <h5>Horizontal RadioButton</h5>
-                <div class="p-formgroup-inline">
-                    <div class="p-field-radiobutton">
+                <div class="formgroup-inline">
+                    <div class="field-radiobutton">
                         <p-radiobutton id="city7" name="city2" value="Chicago" v-model="city2"></p-radiobutton>
                         <label for="city7">Chicago</label>
                     </div>
-                    <div class="p-field-radiobutton">
+                    <div class="field-radiobutton">
                         <p-radiobutton id="city8" name="city2" value="Los Angeles" v-model="city2"></p-radiobutton>
                         <label for="city8">Los Angeles</label>
                     </div>
@@ -786,7 +786,7 @@ textarea {
 
             <div class="card">
                 <h5>Help Text</h5>
-                <div class="p-field p-fluid">
+                <div class="field p-fluid">
                     <label for="username">Username</label>
                     <p-inputtext id="username" type="username" aria-describedby="username-help"></p-inputtext>
                     <small id="username-help">Enter your username to reset your password.</small>
@@ -795,28 +795,28 @@ textarea {
 
             <div class="card">
                 <h5>Advanced</h5>
-                <div class="p-fluid p-formgrid p-grid">
-                    <div class="p-field p-col-12 p-md-6">
+                <div class="p-fluid formgrid grid">
+                    <div class="field col-12 md:col-6">
                         <label for="firstname6">Firstname</label>
                         <p-inputtext id="firstname6" type="text"></p-inputtext>
                     </div>
-                    <div class="p-field p-col-12 p-md-6">
+                    <div class="field col-12 md:col-6">
                         <label for="lastname6">Lastname</label>
                         <p-inputtext id="lastname6" type="text"></p-inputtext>
                     </div>
-                    <div class="p-field p-col-12">
+                    <div class="field col-12">
                         <label for="address">Address</label>
                         <p-textarea id="address" rows="4"></p-textarea>
                     </div>
-                    <div class="p-field p-col-12 p-md-6">
+                    <div class="field col-12 md:col-6">
                         <label for="city">City</label>
                         <p-inputtext id="city" type="text"></p-inputtext>
                     </div>
-                    <div class="p-field p-col-12 p-md-3">
+                    <div class="field col-12 md:col-3">
                         <label for="state">State</label>
                         <p-dropdown inputId="state" v-model="selectedState" :options="states" optionLabel="name" placeholder="Select"></p-dropdown>
                     </div>
-                    <div class="p-field p-col-12 p-md-3">
+                    <div class="field col-12 md:col-3">
                         <label for="zip">Zip</label>
                         <p-inputtext id="zip" type="text"></p-inputtext>
                     </div>
@@ -861,7 +861,7 @@ textarea {
 
         <style>
         @media screen and (max-width: 489px) {
-            .p-formgroup-inline .p-field {
+            .formgroup-inline .field {
                 margin-bottom: 1em !important;
             }
         }
diff --git a/src/views/galleria/GalleriaAdvancedDemo.vue b/src/views/galleria/GalleriaAdvancedDemo.vue
index 1eee8a5ca..9aa58df05 100644
--- a/src/views/galleria/GalleriaAdvancedDemo.vue
+++ b/src/views/galleria/GalleriaAdvancedDemo.vue
@@ -16,7 +16,7 @@
                         <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" :style="[{'width': !fullScreen ? '100%' : '', 'display': !fullScreen ? 'block' : ''}]" />
                     </template>
                     <template #thumbnail="slotProps">
-                        <div class="p-grid p-nogutter p-justify-center">
+                        <div class="grid grid-nogutter justify-content-center">
                             <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" />
                         </div>
                     </template>
@@ -46,7 +46,7 @@
         &lt;img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" :style="[{'width': !fullScreen ? '100%' : '', 'display': !fullScreen ? 'block' : ''}]" /&gt;
     &lt;/template&gt;
     &lt;template #thumbnail="slotProps"&gt;
-        &lt;div class="p-grid p-nogutter p-justify-center"&gt;
+        &lt;div class="grid grid-nogutter justify-content-center"&gt;
             &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" style="display: block;" /&gt;
         &lt;/div&gt;
     &lt;/template&gt;
diff --git a/src/views/galleria/GalleriaCaptionDemo.vue b/src/views/galleria/GalleriaCaptionDemo.vue
index d1d287134..b732dd003 100755
--- a/src/views/galleria/GalleriaCaptionDemo.vue
+++ b/src/views/galleria/GalleriaCaptionDemo.vue
@@ -14,7 +14,7 @@
                         <img :src="item.itemImageSrc" :alt="item.alt" style="width: 100%; display: block;" />
                     </template>
                     <template #thumbnail="{item}">
-                        <div class="p-grid p-nogutter p-justify-center">
+                        <div class="grid grid-nogutter justify-content-center">
                             <img :src="item.thumbnailImageSrc" :alt="item.alt" style="display: block;" />
                         </div>
                     </template>
@@ -35,7 +35,7 @@
         &lt;img :src="item.itemImageSrc" :alt="item.alt" style="width: 100%; display: block;" /&gt;
     &lt;/template&gt;
     &lt;template #thumbnail="{item}"&gt;
-        &lt;div class="p-grid p-nogutter p-justify-center"&gt;
+        &lt;div class="grid grid-nogutter justify-content-center"&gt;
             &lt;img :src="item.thumbnailImageSrc" :alt="item.alt" style="display: block;" /&gt;
         &lt;/div&gt;
     &lt;/template&gt;
diff --git a/src/views/galleria/GalleriaFullScreenDemo.vue b/src/views/galleria/GalleriaFullScreenDemo.vue
index 375098181..30a2193e1 100755
--- a/src/views/galleria/GalleriaFullScreenDemo.vue
+++ b/src/views/galleria/GalleriaFullScreenDemo.vue
@@ -50,8 +50,8 @@
                     </template>
                 </Galleria>
 
-                <div v-if="images" class="p-grid" style="max-width: 400px;">
-                    <div v-for="(image, index) of images" class="p-col-3" :key="index">
+                <div v-if="images" class="grid" style="max-width: 400px;">
+                    <div v-for="(image, index) of images" class="col-3" :key="index">
                         <img :src="image.thumbnailImageSrc" :alt="image.alt" style="cursor: pointer" @click="imageClick(index)"/>
                     </div>
                 </div>
@@ -99,8 +99,8 @@
     &lt;/template&gt;
 &lt;/Galleria&gt;
 
-&lt;div v-if="images" class="p-grid" style="max-width: 400px;"&gt;
-    &lt;div v-for="(image, index) of images" class="p-col-3" :key="index"&gt;
+&lt;div v-if="images" class="grid" style="max-width: 400px;"&gt;
+    &lt;div v-for="(image, index) of images" class="col-3" :key="index"&gt;
         &lt;img :src="image.thumbnailImageSrc" :alt="image.alt" style="cursor: pointer" @click="imageClick(index)"/&gt;
     &lt;/div&gt;
 &lt;/div&gt;
diff --git a/src/views/galleria/GalleriaThumbnailDemo.vue b/src/views/galleria/GalleriaThumbnailDemo.vue
index d6a0b7b4f..cc39510b6 100755
--- a/src/views/galleria/GalleriaThumbnailDemo.vue
+++ b/src/views/galleria/GalleriaThumbnailDemo.vue
@@ -27,7 +27,7 @@
                         <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
                     </template>
                     <template #thumbnail="slotProps">
-                        <div class="p-grid p-nogutter p-justify-center">
+                        <div class="grid grid-nogutter justify-content-center">
                             <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" />
                         </div>
                     </template>
@@ -41,7 +41,7 @@
                         <img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" />
                     </template>
                     <template #thumbnail="slotProps">
-                        <div class="p-grid p-nogutter p-justify-center">
+                        <div class="grid grid-nogutter justify-content-center">
                             <img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" />
                         </div>
                     </template>
@@ -81,7 +81,7 @@
         &lt;img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
     &lt;/template&gt;
     &lt;template #thumbnail="slotProps"&gt;
-        &lt;div class="p-grid p-nogutter p-justify-center"&gt;
+        &lt;div class="grid grid-nogutter justify-content-center"&gt;
             &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" /&gt;
         &lt;/div&gt;
     &lt;/template&gt;
@@ -93,7 +93,7 @@
         &lt;img :src="slotProps.item.itemImageSrc" :alt="slotProps.item.alt" style="width: 100%; display: block;" /&gt;
     &lt;/template&gt;
     &lt;template #thumbnail="slotProps"&gt;
-        &lt;div class="p-grid p-nogutter p-justify-center"&gt;
+        &lt;div class="grid grid-nogutter justify-content-center"&gt;
             &lt;img :src="slotProps.item.thumbnailImageSrc" :alt="slotProps.item.alt" tyle="width: 100%; display: block;" /&gt;
         &lt;/div&gt;
     &lt;/template&gt;
diff --git a/src/views/grid/GridDemo.vue b/src/views/grid/GridDemo.vue
index 40fccf581..9fbd9c65b 100755
--- a/src/views/grid/GridDemo.vue
+++ b/src/views/grid/GridDemo.vue
@@ -9,14 +9,14 @@
             <p>Grid is a lightweight flex based responsive layout utility optimized for mobile phones, tablets and desktops.</p>
 
             <h5>Basic</h5>
-            <div class="p-grid">
-                <div class="p-col">
+            <div class="grid">
+                <div class="col">
                     <div class="box">1</div>
                 </div>
-                <div class="p-col">
+                <div class="col">
                     <div class="box">2</div>
                 </div>
-                <div class="p-col">
+                <div class="col">
                     <div class="box">3</div>
                 </div>
             </div>
@@ -26,331 +26,331 @@
             <Button type="button" icon="pi pi-minus" title="Remove Column" @click="removeColumn" :disabled="columns.length === 1" />
 
             <div style="margin-top: .5em">
-                <transition-group name="dynamic-box" tag="div" class="p-grid">
-                    <div v-for="col of columns" :key="col" class="p-col">
+                <transition-group name="dynamic-box" tag="div" class="grid">
+                    <div v-for="col of columns" :key="col" class="col">
                         <div class="box">{{col}}</div>
                     </div>
                 </transition-group>
             </div>
 
             <h5>Reverse Direction</h5>
-            <div class="p-grid p-flex-row-reverse">
-                <div class="p-col">
+            <div class="grid flex-row-reverse">
+                <div class="col">
                     <div class="box">1</div>
                 </div>
-                <div class="p-col">
+                <div class="col">
                     <div class="box">2</div>
                 </div>
-                <div class="p-col">
+                <div class="col">
                     <div class="box">3</div>
                 </div>
             </div>
 
             <h5>Column Direction</h5>
-            <div class="p-grid p-flex-column">
-                <div class="p-col">
+            <div class="grid flex-column">
+                <div class="col">
                     <div class="box">1</div>
                 </div>
-                <div class="p-col">
+                <div class="col">
                     <div class="box">2</div>
                 </div>
-                <div class="p-col">
+                <div class="col">
                     <div class="box">3</div>
                 </div>
             </div>
 
             <h5>Reverse Column Direction</h5>
-            <div class="p-grid p-flex-column-reverse">
-                <div class="p-col">
+            <div class="grid flex-column-reverse">
+                <div class="col">
                     <div class="box">1</div>
                 </div>
-                <div class="p-col">
+                <div class="col">
                     <div class="box">2</div>
                 </div>
-                <div class="p-col">
+                <div class="col">
                     <div class="box">3</div>
                 </div>
             </div>
 
             <h5>12 Column Grid</h5>
-            <div class="p-grid">
-                <div class="p-col-4">
+            <div class="grid">
+                <div class="col-4">
                     <div class="box">4</div>
                 </div>
-                <div class="p-col">
+                <div class="col">
                     <div class="box">1</div>
                 </div>
-                <div class="p-col">
+                <div class="col">
                     <div class="box">1</div>
                 </div>
-                <div class="p-col">
+                <div class="col">
                     <div class="box">1</div>
                 </div>
-                <div class="p-col">
+                <div class="col">
                     <div class="box">1</div>
                 </div>
-                <div class="p-col">
+                <div class="col">
                     <div class="box">1</div>
                 </div>
-                <div class="p-col">
+                <div class="col">
                     <div class="box">1</div>
                 </div>
-                <div class="p-col">
+                <div class="col">
                     <div class="box">1</div>
                 </div>
-                <div class="p-col">
+                <div class="col">
                     <div class="box">1</div>
                 </div>
             </div>
 
-            <div class="p-grid">
-                <div class="p-col-2">
+            <div class="grid">
+                <div class="col-2">
                     <div class="box">2</div>
                 </div>
-                <div class="p-col-6">
+                <div class="col-6">
                     <div class="box">6</div>
                 </div>
-                <div class="p-col-4">
+                <div class="col-4">
                     <div class="box">4</div>
                 </div>
             </div>
 
-            <div class="p-grid">
-                <div class="p-col-8">
+            <div class="grid">
+                <div class="col-8">
                     <div class="box">8</div>
                 </div>
-                <div class="p-col-2">
+                <div class="col-2">
                     <div class="box">2</div>
                 </div>
-                <div class="p-col-2">
+                <div class="col-2">
                     <div class="box">2</div>
                 </div>
             </div>
 
             <h5>MultiLine</h5>
-            <div class="p-grid">
-                <div class="p-col-6">
+            <div class="grid">
+                <div class="col-6">
                     <div class="box">6</div>
                 </div>
-                <div class="p-col-6">
+                <div class="col-6">
                     <div class="box">6</div>
                 </div>
-                <div class="p-col-6">
+                <div class="col-6">
                     <div class="box">6</div>
                 </div>
-                <div class="p-col-6">
+                <div class="col-6">
                     <div class="box">6</div>
                 </div>
             </div>
 
             <h5>Fixed Width Column</h5>
-            <div class="p-grid">
-                <div class="p-col-fixed" style="width:100px">
+            <div class="grid">
+                <div class="col-fixed" style="width:100px">
                     <div class="box">100px</div>
                 </div>
-                <div class="p-col">
+                <div class="col">
                     <div class="box">auto</div>
                 </div>
             </div>
 
             <h5>Responsive</h5>
-            <div class="p-grid">
-                <div class="p-col-12 p-md-6 p-lg-3">
-                    <div class="box">p-col-12 p-md-6 p-lg-3</div>
+            <div class="grid">
+                <div class="col-12 md:col-6 lg:col-3">
+                    <div class="box">col-12 md:col-6 lg:col-3</div>
                 </div>
-                <div class="p-col-12 p-md-6 p-lg-3">
-                    <div class="box">p-col-12 p-md-6 p-lg-3</div>
+                <div class="col-12 md:col-6 lg:col-3">
+                    <div class="box">col-12 md:col-6 lg:col-3</div>
                 </div>
-                <div class="p-col-12 p-md-6 p-lg-3">
-                    <div class="box">p-col-12 p-md-6 p-lg-3</div>
+                <div class="col-12 md:col-6 lg:col-3">
+                    <div class="box">col-12 md:col-6 lg:col-3</div>
                 </div>
-                <div class="p-col-12 p-md-6 p-lg-3">
-                    <div class="box">p-col-12 p-md-6 p-lg-3</div>
+                <div class="col-12 md:col-6 lg:col-3">
+                    <div class="box">col-12 md:col-6 lg:col-3</div>
                 </div>
             </div>
 
             <h5>Horizontal Alignment - Start</h5>
-            <div class="p-grid p-jc-start">
-                <div class="p-col-2">
+            <div class="grid justify-content-start">
+                <div class="col-2">
                     <div class="box">2</div>
                 </div>
-                <div class="p-col-1">
+                <div class="col-1">
                     <div class="box">1</div>
                 </div>
-                <div class="p-col-4">
+                <div class="col-4">
                     <div class="box">4</div>
                 </div>
             </div>
 
             <h5>Horizontal Alignment - End</h5>
-            <div class="p-grid p-jc-end">
-                <div class="p-col-2">
+            <div class="grid justify-content-end">
+                <div class="col-2">
                     <div class="box">2</div>
                 </div>
-                <div class="p-col-1">
+                <div class="col-1">
                     <div class="box">1</div>
                 </div>
-                <div class="p-col-4">
+                <div class="col-4">
                     <div class="box">4</div>
                 </div>
             </div>
 
             <h5>Horizontal Alignment - Center</h5>
-            <div class="p-grid p-jc-center">
-                <div class="p-col-2">
+            <div class="grid justify-content-center">
+                <div class="col-2">
                     <div class="box">2</div>
                 </div>
-                <div class="p-col-1">
+                <div class="col-1">
                     <div class="box">1</div>
                 </div>
-                <div class="p-col-4">
+                <div class="col-4">
                     <div class="box">4</div>
                 </div>
             </div>
 
             <h5>Horizontal Alignment - Between</h5>
-            <div class="p-grid p-jc-between">
-                <div class="p-col-2">
+            <div class="grid justify-content-center">
+                <div class="col-2">
                     <div class="box">2</div>
                 </div>
-                <div class="p-col-1">
+                <div class="col-1">
                     <div class="box">1</div>
                 </div>
-                <div class="p-col-4">
+                <div class="col-4">
                     <div class="box">4</div>
                 </div>
             </div>
 
             <h5>Horizontal Alignment - Around</h5>
-            <div class="p-grid p-jc-around">
-                <div class="p-col-2">
+            <div class="grid justify-content-around">
+                <div class="col-2">
                     <div class="box">2</div>
                 </div>
-                <div class="p-col-1">
+                <div class="col-1">
                     <div class="box">1</div>
                 </div>
-                <div class="p-col-4">
+                <div class="col-4">
                     <div class="box">4</div>
                 </div>
             </div>
 
             <h5>Horizontal Alignment - Even</h5>
-            <div class="p-grid p-jc-evenly">
-                <div class="p-col-2">
+            <div class="grid justify-content-evenly">
+                <div class="col-2">
                     <div class="box">2</div>
                 </div>
-                <div class="p-col-1">
+                <div class="col-1">
                     <div class="box">1</div>
                 </div>
-                <div class="p-col-4">
+                <div class="col-4">
                     <div class="box">4</div>
                 </div>
             </div>
 
             <h5>Vertical Alignment - Start</h5>
-            <div class="p-grid p-ai-start vertical-container">
-                <div class="p-col">
+            <div class="grid align-items-start vertical-container">
+                <div class="col">
                     <div class="box">4</div>
                 </div>
-                <div class="p-col">
+                <div class="col">
                     <div class="box">4</div>
                 </div>
-                <div class="p-col">
+                <div class="col">
                     <div class="box">4</div>
                 </div>
             </div>
 
             <h5>Vertical Alignment - End</h5>
-            <div class="p-grid p-ai-end vertical-container">
-                <div class="p-col">
+            <div class="grid align-items-end vertical-container">
+                <div class="col">
                     <div class="box">4</div>
                 </div>
-                <div class="p-col">
+                <div class="col">
                     <div class="box">4</div>
                 </div>
-                <div class="p-col">
+                <div class="col">
                     <div class="box">4</div>
                 </div>
             </div>
 
             <h5>Vertical Alignment - Center</h5>
-            <div class="p-grid p-ai-center vertical-container">
-                <div class="p-col">
+            <div class="grid align-items-center vertical-container">
+                <div class="col">
                     <div class="box">4</div>
                 </div>
-                <div class="p-col">
+                <div class="col">
                     <div class="box">4</div>
                 </div>
-                <div class="p-col">
+                <div class="col">
                     <div class="box">4</div>
                 </div>
             </div>
 
             <h5>Vertical Alignment - Stretch</h5>
-            <div class="p-grid p-ai-stretch vertical-container">
-                <div class="p-col">
+            <div class="grid align-items-stretch vertical-container">
+                <div class="col">
                     <div class="box box-stretched">4</div>
                 </div>
-                <div class="p-col">
+                <div class="col">
                     <div class="box box-stretched">4</div>
                 </div>
-                <div class="p-col">
+                <div class="col">
                     <div class="box box-stretched">4</div>
                 </div>
             </div>
 
             <h5>Vertical Alignment - Per Column</h5>
-            <div class="p-grid vertical-container">
-                <div class="p-col p-as-start">
+            <div class="grid vertical-container">
+                <div class="col align-self-start">
                     <div class="box">4</div>
                 </div>
-                <div class="p-col p-as-center">
+                <div class="col align-self-center">
                     <div class="box">4</div>
                 </div>
-                <div class="p-col p-as-end">
+                <div class="col align-self-end">
                     <div class="box">4</div>
                 </div>
             </div>
 
             <h5>Offset</h5>
-            <div class="p-grid">
-                <div class="p-col-6 p-offset-3">
+            <div class="grid">
+                <div class="col-6 col-offset-3">
                     <div class="box">6</div>
                 </div>
             </div>
 
-            <div class="p-grid">
-                <div class="p-col-4">
+            <div class="grid">
+                <div class="col-4">
                     <div class="box">4</div>
                 </div>
-                <div class="p-col-4 p-offset-4">
+                <div class="col-4 col-offset-4">
                     <div class="box">4</div>
                 </div>
             </div>
 
             <h5>Nested</h5>
-            <div class="p-grid nested-grid">
-                <div class="p-col-8">
-                    <div class="p-grid">
-                        <div class="p-col-6">
+            <div class="grid nested-grid">
+                <div class="col-8">
+                    <div class="grid">
+                        <div class="col-6">
                             <div class="box">6</div>
                         </div>
-                        <div class="p-col-6">
+                        <div class="col-6">
                             <div class="box">6</div>
                         </div>
-                        <div class="p-col-12">
+                        <div class="col-12">
                             <div class="box">12</div>
                         </div>
                     </div>
                 </div>
-                <div class="p-col-4">
+                <div class="col-4">
                     <div class="box box-stretched">4</div>
                 </div>
             </div>
 
             <h5>Panels</h5>
-            <div class="p-grid">
-                <div class="p-col">
+            <div class="grid">
+                <div class="col">
                     <Panel header="Header">
                         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                         Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
@@ -358,7 +358,7 @@
                         cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                     </Panel>
                 </div>
-                <div class="p-col">
+                <div class="col">
                     <Panel header="Header">
                         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                         Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
@@ -366,7 +366,7 @@
                         cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                     </Panel>
                 </div>
-                <div class="p-col">
+                <div class="col">
                     <Panel header="Header">
                         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                         Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
@@ -426,7 +426,7 @@ export default {
         border-radius: 4px;
     }
 
-    .nested-grid .p-col-4 {
+    .nested-grid .col-4 {
         padding-bottom: 1rem;
     }
 
diff --git a/src/views/grid/GridDoc.vue b/src/views/grid/GridDoc.vue
index 7befc7212..5144d865c 100755
--- a/src/views/grid/GridDoc.vue
+++ b/src/views/grid/GridDoc.vue
@@ -2,91 +2,91 @@
 	<AppDoc name="GridDemo" :sources="sources" github="grid/GridDemo.vue">
 		<h5>Getting Started</h5>
 		<p>FlexGrid is a CSS utility based on flexbox. For more information about Flex, visit <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/">A Complete Guide to Flexbox</a>. A basic grid is defined by giving
-			a container <i>p-grid</i> class and children the <i>p-col</i> class. Children of the grid will have the same width and scale according to the width of the parent.</p>
+			a container <i>grid</i> class and children the <i>col</i> class. Children of the grid will have the same width and scale according to the width of the parent.</p>
 <pre v-code><code>
-&lt;div class="p-grid"&gt;
-	&lt;div class="p-col"&gt;1&lt;/div&gt;
-	&lt;div class="p-col"&gt;2&lt;/div&gt;
-	&lt;div class="p-col"&gt;3&lt;/div&gt;
+&lt;div class="grid"&gt;
+	&lt;div class="col"&gt;1&lt;/div&gt;
+	&lt;div class="col"&gt;2&lt;/div&gt;
+	&lt;div class="col"&gt;3&lt;/div&gt;
 &lt;/div&gt;
 
 </code></pre>
 
-<div class="p-grid">
-	<div class="p-col">
+<div class="grid">
+	<div class="col">
 		<div class="box">1</div>
 	</div>
-	<div class="p-col">
+	<div class="col">
 		<div class="box">2</div>
 	</div>
-	<div class="p-col">
+	<div class="col">
 		<div class="box">3</div>
 	</div>
 </div>
 
 		<h5>12 Column Grid</h5>
-		<p>FlexGrid includes a 12 column based layout utility where width of a column is defined with the <i>p-col-&#123;number&#125;</i> style class. Columns with prefined widths can be used with columns with auto width (p-col) as well.</p>
+		<p>FlexGrid includes a 12 column based layout utility where width of a column is defined with the <i>col-&#123;number&#125;</i> style class. Columns with prefined widths can be used with columns with auto width (col) as well.</p>
 
 		<p>In the first example below, first column covers the 4 units out of 12 and the rest of the columns share the remaining space whereas in the second example, all three columns have explicit units.</p>
 <pre v-code><code>
-&lt;div class="p-grid"&gt;
-	&lt;div class="p-col-4"&gt;4&lt;/div&gt;
-	&lt;div class="p-col"&gt;1&lt;/div&gt;
-	&lt;div class="p-col"&gt;1&lt;/div&gt;
-	&lt;div class="p-col"&gt;1&lt;/div&gt;
-	&lt;div class="p-col"&gt;1&lt;/div&gt;
-	&lt;div class="p-col"&gt;1&lt;/div&gt;
-	&lt;div class="p-col"&gt;1&lt;/div&gt;
-	&lt;div class="p-col"&gt;1&lt;/div&gt;
-	&lt;div class="p-col"&gt;1&lt;/div&gt;
+&lt;div class="grid"&gt;
+	&lt;div class="col-4"&gt;4&lt;/div&gt;
+	&lt;div class="col"&gt;1&lt;/div&gt;
+	&lt;div class="col"&gt;1&lt;/div&gt;
+	&lt;div class="col"&gt;1&lt;/div&gt;
+	&lt;div class="col"&gt;1&lt;/div&gt;
+	&lt;div class="col"&gt;1&lt;/div&gt;
+	&lt;div class="col"&gt;1&lt;/div&gt;
+	&lt;div class="col"&gt;1&lt;/div&gt;
+	&lt;div class="col"&gt;1&lt;/div&gt;
 &lt;/div&gt;
 
-&lt;div class="p-grid"&gt;
-	&lt;div class="p-col-2"&gt;2&lt;/div&gt;
-	&lt;div class="p-col-6"&gt;6&lt;/div&gt;
-	&lt;div class="p-col-4"&gt;4&lt;/div&gt;
+&lt;div class="grid"&gt;
+	&lt;div class="col-2"&gt;2&lt;/div&gt;
+	&lt;div class="col-6"&gt;6&lt;/div&gt;
+	&lt;div class="col-4"&gt;4&lt;/div&gt;
 &lt;/div&gt;
 
 </code></pre>
 
-<div class="p-grid">
-	<div class="p-col-4">
+<div class="grid">
+	<div class="col-4">
 		<div class="box">4</div>
 	</div>
-	<div class="p-col">
+	<div class="col">
 		<div class="box">1</div>
 	</div>
-	<div class="p-col">
+	<div class="col">
 		<div class="box">1</div>
 	</div>
-	<div class="p-col">
+	<div class="col">
 		<div class="box">1</div>
 	</div>
-	<div class="p-col">
+	<div class="col">
 		<div class="box">1</div>
 	</div>
-	<div class="p-col">
+	<div class="col">
 		<div class="box">1</div>
 	</div>
-	<div class="p-col">
+	<div class="col">
 		<div class="box">1</div>
 	</div>
-	<div class="p-col">
+	<div class="col">
 		<div class="box">1</div>
 	</div>
-	<div class="p-col">
+	<div class="col">
 		<div class="box">1</div>
 	</div>
 </div>
 
-<div class="p-grid">
-	<div class="p-col-2">
+<div class="grid">
+	<div class="col-2">
 		<div class="box">2</div>
 	</div>
-	<div class="p-col-6">
+	<div class="col-6">
 		<div class="box">6</div>
 	</div>
-	<div class="p-col-4">
+	<div class="col-4">
 		<div class="box">4</div>
 	</div>
 </div>
@@ -94,50 +94,50 @@
 		<h5>MultiLine</h5>
 		<p>When the number of columns exceed 12, columns wrap to a new line.</p>
 <pre v-code><code>
-&lt;div class="p-grid"&gt;
-	&lt;div class="p-col-6"&gt;6&lt;/div&gt;
-	&lt;div class="p-col-6"&gt;6&lt;/div&gt;
-	&lt;div class="p-col-6"&gt;6&lt;/div&gt;
-	&lt;div class="p-col-6"&gt;6&lt;/div&gt;
+&lt;div class="grid"&gt;
+	&lt;div class="col-6"&gt;6&lt;/div&gt;
+	&lt;div class="col-6"&gt;6&lt;/div&gt;
+	&lt;div class="col-6"&gt;6&lt;/div&gt;
+	&lt;div class="col-6"&gt;6&lt;/div&gt;
 &lt;/div&gt;
 
 </code></pre>
 
-<div class="p-grid">
-	<div class="p-col-6">
+<div class="grid">
+	<div class="col-6">
 		<div class="box">6</div>
 	</div>
-	<div class="p-col-6">
+	<div class="col-6">
 		<div class="box">6</div>
 	</div>
-	<div class="p-col-6">
+	<div class="col-6">
 		<div class="box">6</div>
 	</div>
-	<div class="p-col-6">
+	<div class="col-6">
 		<div class="box">6</div>
 	</div>
 </div>
 
 		<h5>Fixed Width Column</h5>
-		<p>A column can have a fixed width while siblings having auto width. Apply <i>p-col-fixed</i> class to fix a column width.</p>
+		<p>A column can have a fixed width while siblings having auto width. Apply <i>col-fixed</i> class to fix a column width.</p>
 <pre v-code><code>
-&lt;div class="p-grid"&gt;
-	&lt;div class="p-col-fixed" style="width:100px"&gt;Fixed&lt;/div&gt;
-	&lt;div class="p-col"&gt;Auto&lt;/div&gt;
+&lt;div class="grid"&gt;
+	&lt;div class="col-fixed" style="width:100px"&gt;Fixed&lt;/div&gt;
+	&lt;div class="col"&gt;Auto&lt;/div&gt;
 &lt;/div&gt;
 
 </code></pre>
 
-<div class="p-grid">
-	<div class="p-col-fixed" style="width:100px">
+<div class="grid">
+	<div class="col-fixed" style="width:100px">
 		<div class="box">100px</div>
 	</div>
-	<div class="p-col">
+	<div class="col">
 		<div class="box">auto</div>
 	</div>
 </div>
 		<h5>Responsive</h5>
-		<p>Responsive layout is achieved by applying breakpoint specific classes to the columns whereas <i>p-col-*</i> define the default behavior for mobile devices with small screens. Four screen sizes are supported with different breakpoints.</p>
+		<p>Responsive layout is achieved by applying breakpoint specific classes to the columns whereas <i>col-*</i> define the default behavior for mobile devices with small screens. Four screen sizes are supported with different breakpoints.</p>
 		<div class="doc-tablewrapper">
 			<table class="doc-table">
 				<thead>
@@ -153,25 +153,25 @@
 					<td>p-sm-*</td>
 					<td>Small devices</td>
 					<td>min-width: 576px</td>
-					<td>p-sm-6, p-sm-4</td>
+					<td>sm:col-6, sm:col-4</td>
 				</tr>
 				<tr>
 					<td>p-md-*</td>
 					<td>Medium sized devices such as tablets</td>
 					<td>min-width: 768px</td>
-					<td>p-md-2, p-md-8</td>
+					<td>md:col-2, md:col-8</td>
 				</tr>
 				<tr>
 					<td>p-lg-*</td>
 					<td>Devices with large screen like desktops</td>
 					<td>min-width: 992px</td>
-					<td>p-lg-6, p-lg-12</td>
+					<td>lg:col-6, lg:col-12</td>
 				</tr>
 				<tr>
 					<td>p-xl-*</td>
 					<td>Big screen monitors</td>
 					<td>min-width: 1200px</td>
-					<td>p-xl-2, ui-xl-10</td>
+					<td>xl:col-2, ui-xl-10</td>
 				</tr>
 				</tbody>
 			</table>
@@ -179,54 +179,54 @@
 
 		<p>In example below, large screens display 4 columns, medium screens display 2 columns in 2 rows and finally on small devices, columns are stacked.</p>
 <pre v-code><code>
-&lt;div class="p-grid"&gt;
-	&lt;div class="p-col-12 p-md-6 p-lg-3"&gt;A&lt;/div&gt;
-	&lt;div class="p-col-12 p-md-6 p-lg-3"&gt;B&lt;/div&gt;
-	&lt;div class="p-col-12 p-md-6 p-lg-3"&gt;C&lt;/div&gt;
-	&lt;div class="p-col-12 p-md-6 p-lg-3"&gt;D&lt;/div&gt;
+&lt;div class="grid"&gt;
+	&lt;div class="col-12 md:col-6 lg:col-3"&gt;A&lt;/div&gt;
+	&lt;div class="col-12 md:col-6 lg:col-3"&gt;B&lt;/div&gt;
+	&lt;div class="col-12 md:col-6 lg:col-3"&gt;C&lt;/div&gt;
+	&lt;div class="col-12 md:col-6 lg:col-3"&gt;D&lt;/div&gt;
 &lt;/div&gt;
 
 </code></pre>
 
-<div class="p-grid">
-	<div class="p-col-12 p-md-6 p-lg-3">
+<div class="grid">
+	<div class="col-12 md:col-6 lg:col-3">
 		<div class="box">A</div>
 	</div>
-	<div class="p-col-12 p-md-6 p-lg-3">
+	<div class="col-12 md:col-6 lg:col-3">
 		<div class="box">B</div>
 	</div>
-	<div class="p-col-12 p-md-6 p-lg-3">
+	<div class="col-12 md:col-6 lg:col-3">
 		<div class="box">C</div>
 	</div>
-	<div class="p-col-12 p-md-6 p-lg-3">
+	<div class="col-12 md:col-6 lg:col-3">
 		<div class="box">D</div>
 	</div>
 </div>
 		<h5>Offset</h5>
 		<p>Offset classes allow defining a left margin on a column to avoid adding empty columns for spacing.</p>
 <pre v-code><code>
-&lt;div class="p-grid"&gt;
-	&lt;div class="p-col-6 p-offset-3"&gt;6&lt;/div&gt;
+&lt;div class="grid"&gt;
+	&lt;div class="col-6 col-offset-3"&gt;6&lt;/div&gt;
 &lt;/div&gt;
 
-&lt;div class="p-grid"&gt;
-	&lt;div class="p-col-4"&gt;4&lt;/div&gt;
-	&lt;div class="p-col-4 p-offset-4"&gt;4&lt;/div&gt;
+&lt;div class="grid"&gt;
+	&lt;div class="col-4"&gt;4&lt;/div&gt;
+	&lt;div class="col-4 col-offset-4"&gt;4&lt;/div&gt;
 &lt;/div&gt;
 
 </code></pre>
 
-<div class="p-grid">
-	<div class="p-col-6 p-offset-3">
+<div class="grid">
+	<div class="col-6 col-offset-3">
 		<div class="box">6</div>
 	</div>
 </div>
 
-<div class="p-grid">
-	<div class="p-col-4">
+<div class="grid">
+	<div class="col-4">
 		<div class="box">4</div>
 	</div>
-	<div class="p-col-4 p-offset-4">
+	<div class="col-4 col-offset-4">
 		<div class="box">4</div>
 	</div>
 </div>
@@ -243,10 +243,10 @@
 				</thead>
 				<tbody>
 				<tr>
-					<td>p-col-offset-*</td>
+					<td>col-offset-*</td>
 					<td>All devices</td>
 					<td>All screens</td>
-					<td>p-col-offset-6, p-col-offset-4</td>
+					<td>col-offset-6, col-offset-4</td>
 				</tr>
 				<tr>
 					<td>p-sm-offset-*</td>
@@ -279,67 +279,67 @@
 		<h5>Nested</h5>
 		<p>Columns can be nested to create more complex layouts.</p>
 <pre v-code><code>
-&lt;div class="p-grid nested-grid"&gt;
-	&lt;div class="p-col-8"&gt;
-		&lt;div class="p-grid"&gt;
-			&lt;div class="p-col-6"&gt;
+&lt;div class="grid nested-grid"&gt;
+	&lt;div class="col-8"&gt;
+		&lt;div class="grid"&gt;
+			&lt;div class="col-6"&gt;
 				6
 			&lt;/div&gt;
-			&lt;div class="p-col-6"&gt;
+			&lt;div class="col-6"&gt;
 				6
 			&lt;/div&gt;
-			&lt;div class="p-col-12"&gt;
+			&lt;div class="col-12"&gt;
 				12
 			&lt;/div&gt;
 		&lt;/div&gt;
 	&lt;/div&gt;
-	&lt;div class="p-col-4"&gt;
+	&lt;div class="col-4"&gt;
 		4
 	&lt;/div&gt;
 &lt;/div&gt;
 
 </code></pre>
 
-<div class="p-grid nested-grid">
-	<div class="p-col-8">
-		<div class="p-grid">
-			<div class="p-col-6">
+<div class="grid nested-grid">
+	<div class="col-8">
+		<div class="grid">
+			<div class="col-6">
 				<div class="box">6</div>
 			</div>
-			<div class="p-col-6">
+			<div class="col-6">
 				<div class="box">6</div>
 			</div>
-			<div class="p-col-12">
+			<div class="col-12">
 				<div class="box">12</div>
 			</div>
 		</div>
 	</div>
-	<div class="p-col-4">
+	<div class="col-4">
 		<div class="box box-stretched">4</div>
 	</div>
 </div>
 
 		<h5>Gutter</h5>
 		<p>A .5rem padding is applied to each column along with negative margins on the container element, in case you'd like to remove these gutters, apply
-			<i>p-nogutter</i> class to the container. Gutters can also be removed on an ndividual columns with the same class name.
+			<i>grid-nogutter</i> class to the container. Gutters can also be removed on an ndividual columns with the same class name.
 		</p>
 <pre v-code><code>
-&lt;div class="p-grid p-nogutter"&gt;
-	&lt;div class="p-col"&gt;1&lt;/div&gt;
-	&lt;div class="p-col p-nogutter"&gt;2&lt;/div&gt;
-	&lt;div class="p-col"&gt;3&lt;/div&gt;
+&lt;div class="grid grid-nogutter"&gt;
+	&lt;div class="col"&gt;1&lt;/div&gt;
+	&lt;div class="col grid-nogutter"&gt;2&lt;/div&gt;
+	&lt;div class="col"&gt;3&lt;/div&gt;
 &lt;/div&gt;
 
 </code></pre>
 
-        <div class="p-grid p-nogutter">
-            <div class="p-col">
+        <div class="grid grid-nogutter">
+            <div class="col">
                 <div class="box">1</div>
             </div>
-            <div class="p-col p-nogutter">
+            <div class="col grid-nogutter">
                 <div class="box">2</div>
             </div>
-            <div class="p-col">
+            <div class="col">
                 <div class="box">3</div>
             </div>
         </div>
@@ -355,16 +355,16 @@ export default {
 					tabName: 'Options API Source',
 					content: `
 <template>
-    <div class="flexgrid-demo p-p-2">
+    <div class="flexgrid-demo p-2">
         <h5>Basic</h5>
-        <div class="p-grid">
-            <div class="p-col">
+        <div class="grid">
+            <div class="col">
                 <div class="box">1</div>
             </div>
-            <div class="p-col">
+            <div class="col">
                 <div class="box">2</div>
             </div>
-            <div class="p-col">
+            <div class="col">
                 <div class="box">3</div>
             </div>
         </div>
@@ -374,331 +374,331 @@ export default {
         <Button type="button" icon="pi pi-minus" title="Remove Column" @click="removeColumn" :disabled="columns.length === 1" />
 
         <div style="margin-top: .5em">
-            <transition-group name="dynamic-box" tag="div" class="p-grid">
-                <div v-for="col of columns" :key="col" class="p-col">
+            <transition-group name="dynamic-box" tag="div" class="grid">
+                <div v-for="col of columns" :key="col" class="col">
                     <div class="box">{{col}}</div>
                 </div>
             </transition-group>
         </div>
 
         <h5>Reverse Direction</h5>
-        <div class="p-grid p-flex-row-reverse">
-            <div class="p-col">
+        <div class="grid flex-row-reverse">
+            <div class="col">
                 <div class="box">1</div>
             </div>
-            <div class="p-col">
+            <div class="col">
                 <div class="box">2</div>
             </div>
-            <div class="p-col">
+            <div class="col">
                 <div class="box">3</div>
             </div>
         </div>
 
         <h5>Column Direction</h5>
-        <div class="p-grid p-flex-column">
-            <div class="p-col">
+        <div class="grid flex-column">
+            <div class="col">
                 <div class="box">1</div>
             </div>
-            <div class="p-col">
+            <div class="col">
                 <div class="box">2</div>
             </div>
-            <div class="p-col">
+            <div class="col">
                 <div class="box">3</div>
             </div>
         </div>
 
         <h5>Reverse Column Direction</h5>
-        <div class="p-grid p-flex-column-reverse">
-            <div class="p-col">
+        <div class="grid flex-column-reverse">
+            <div class="col">
                 <div class="box">1</div>
             </div>
-            <div class="p-col">
+            <div class="col">
                 <div class="box">2</div>
             </div>
-            <div class="p-col">
+            <div class="col">
                 <div class="box">3</div>
             </div>
         </div>
 
         <h5>12 Column Grid</h5>
-        <div class="p-grid">
-            <div class="p-col-4">
+        <div class="grid">
+            <div class="col-4">
                 <div class="box">4</div>
             </div>
-            <div class="p-col">
+            <div class="col">
                 <div class="box">1</div>
             </div>
-            <div class="p-col">
+            <div class="col">
                 <div class="box">1</div>
             </div>
-            <div class="p-col">
+            <div class="col">
                 <div class="box">1</div>
             </div>
-            <div class="p-col">
+            <div class="col">
                 <div class="box">1</div>
             </div>
-            <div class="p-col">
+            <div class="col">
                 <div class="box">1</div>
             </div>
-            <div class="p-col">
+            <div class="col">
                 <div class="box">1</div>
             </div>
-            <div class="p-col">
+            <div class="col">
                 <div class="box">1</div>
             </div>
-            <div class="p-col">
+            <div class="col">
                 <div class="box">1</div>
             </div>
         </div>
 
-        <div class="p-grid">
-            <div class="p-col-2">
+        <div class="grid">
+            <div class="col-2">
                 <div class="box">2</div>
             </div>
-            <div class="p-col-6">
+            <div class="col-6">
                 <div class="box">6</div>
             </div>
-            <div class="p-col-4">
+            <div class="col-4">
                 <div class="box">4</div>
             </div>
         </div>
 
-        <div class="p-grid">
-            <div class="p-col-8">
+        <div class="grid">
+            <div class="col-8">
                 <div class="box">8</div>
             </div>
-            <div class="p-col-2">
+            <div class="col-2">
                 <div class="box">2</div>
             </div>
-            <div class="p-col-2">
+            <div class="col-2">
                 <div class="box">2</div>
             </div>
         </div>
 
         <h5>MultiLine</h5>
-        <div class="p-grid">
-            <div class="p-col-6">
+        <div class="grid">
+            <div class="col-6">
                 <div class="box">6</div>
             </div>
-            <div class="p-col-6">
+            <div class="col-6">
                 <div class="box">6</div>
             </div>
-            <div class="p-col-6">
+            <div class="col-6">
                 <div class="box">6</div>
             </div>
-            <div class="p-col-6">
+            <div class="col-6">
                 <div class="box">6</div>
             </div>
         </div>
 
         <h5>Fixed Width Column</h5>
-        <div class="p-grid">
-            <div class="p-col-fixed" style="width:100px">
+        <div class="grid">
+            <div class="col-fixed" style="width:100px">
                 <div class="box">100px</div>
             </div>
-            <div class="p-col">
+            <div class="col">
                 <div class="box">auto</div>
             </div>
         </div>
 
         <h5>Responsive</h5>
-        <div class="p-grid">
-            <div class="p-col-12 p-md-6 p-lg-3">
-                <div class="box">p-col-12 p-md-6 p-lg-3</div>
+        <div class="grid">
+            <div class="col-12 md:col-6 lg:col-3">
+                <div class="box">col-12 md:col-6 lg:col-3</div>
             </div>
-            <div class="p-col-12 p-md-6 p-lg-3">
-                <div class="box">p-col-12 p-md-6 p-lg-3</div>
+            <div class="col-12 md:col-6 lg:col-3">
+                <div class="box">col-12 md:col-6 lg:col-3</div>
             </div>
-            <div class="p-col-12 p-md-6 p-lg-3">
-                <div class="box">p-col-12 p-md-6 p-lg-3</div>
+            <div class="col-12 md:col-6 lg:col-3">
+                <div class="box">col-12 md:col-6 lg:col-3</div>
             </div>
-            <div class="p-col-12 p-md-6 p-lg-3">
-                <div class="box">p-col-12 p-md-6 p-lg-3</div>
+            <div class="col-12 md:col-6 lg:col-3">
+                <div class="box">col-12 md:col-6 lg:col-3</div>
             </div>
         </div>
 
         <h5>Horizontal Alignment - Start</h5>
-        <div class="p-grid p-jc-start">
-            <div class="p-col-2">
+        <div class="grid justify-content-start">
+            <div class="col-2">
                 <div class="box">2</div>
             </div>
-            <div class="p-col-1">
+            <div class="col-1">
                 <div class="box">1</div>
             </div>
-            <div class="p-col-4">
+            <div class="col-4">
                 <div class="box">4</div>
             </div>
         </div>
 
         <h5>Horizontal Alignment - End</h5>
-        <div class="p-grid p-jc-end">
-            <div class="p-col-2">
+        <div class="grid justify-content-end">
+            <div class="col-2">
                 <div class="box">2</div>
             </div>
-            <div class="p-col-1">
+            <div class="col-1">
                 <div class="box">1</div>
             </div>
-            <div class="p-col-4">
+            <div class="col-4">
                 <div class="box">4</div>
             </div>
         </div>
 
         <h5>Horizontal Alignment - Center</h5>
-        <div class="p-grid p-jc-center">
-            <div class="p-col-2">
+        <div class="grid justify-content-center">
+            <div class="col-2">
                 <div class="box">2</div>
             </div>
-            <div class="p-col-1">
+            <div class="col-1">
                 <div class="box">1</div>
             </div>
-            <div class="p-col-4">
+            <div class="col-4">
                 <div class="box">4</div>
             </div>
         </div>
 
         <h5>Horizontal Alignment - Between</h5>
-        <div class="p-grid p-jc-between">
-            <div class="p-col-2">
+        <div class="grid justify-content-center">
+            <div class="col-2">
                 <div class="box">2</div>
             </div>
-            <div class="p-col-1">
+            <div class="col-1">
                 <div class="box">1</div>
             </div>
-            <div class="p-col-4">
+            <div class="col-4">
                 <div class="box">4</div>
             </div>
         </div>
 
         <h5>Horizontal Alignment - Around</h5>
-        <div class="p-grid p-jc-around">
-            <div class="p-col-2">
+        <div class="grid justify-content-around">
+            <div class="col-2">
                 <div class="box">2</div>
             </div>
-            <div class="p-col-1">
+            <div class="col-1">
                 <div class="box">1</div>
             </div>
-            <div class="p-col-4">
+            <div class="col-4">
                 <div class="box">4</div>
             </div>
         </div>
 
         <h5>Horizontal Alignment - Even</h5>
-        <div class="p-grid p-jc-evenly">
-            <div class="p-col-2">
+        <div class="grid justify-content-evenly">
+            <div class="col-2">
                 <div class="box">2</div>
             </div>
-            <div class="p-col-1">
+            <div class="col-1">
                 <div class="box">1</div>
             </div>
-            <div class="p-col-4">
+            <div class="col-4">
                 <div class="box">4</div>
             </div>
         </div>
 
         <h5>Vertical Alignment - Start</h5>
-        <div class="p-grid p-ai-start vertical-container">
-            <div class="p-col">
+        <div class="grid align-items-start vertical-container">
+            <div class="col">
                 <div class="box">4</div>
             </div>
-            <div class="p-col">
+            <div class="col">
                 <div class="box">4</div>
             </div>
-            <div class="p-col">
+            <div class="col">
                 <div class="box">4</div>
             </div>
         </div>
 
         <h5>Vertical Alignment - End</h5>
-        <div class="p-grid p-ai-end vertical-container">
-            <div class="p-col">
+        <div class="grid align-items-end vertical-container">
+            <div class="col">
                 <div class="box">4</div>
             </div>
-            <div class="p-col">
+            <div class="col">
                 <div class="box">4</div>
             </div>
-            <div class="p-col">
+            <div class="col">
                 <div class="box">4</div>
             </div>
         </div>
 
         <h5>Vertical Alignment - Center</h5>
-        <div class="p-grid p-ai-center vertical-container">
-            <div class="p-col">
+        <div class="grid align-items-center vertical-container">
+            <div class="col">
                 <div class="box">4</div>
             </div>
-            <div class="p-col">
+            <div class="col">
                 <div class="box">4</div>
             </div>
-            <div class="p-col">
+            <div class="col">
                 <div class="box">4</div>
             </div>
         </div>
 
         <h5>Vertical Alignment - Stretch</h5>
-        <div class="p-grid p-ai-stretch vertical-container">
-            <div class="p-col">
+        <div class="grid align-items-stretch vertical-container">
+            <div class="col">
                 <div class="box box-stretched">4</div>
             </div>
-            <div class="p-col">
+            <div class="col">
                 <div class="box box-stretched">4</div>
             </div>
-            <div class="p-col">
+            <div class="col">
                 <div class="box box-stretched">4</div>
             </div>
         </div>
 
         <h5>Vertical Alignment - Per Column</h5>
-        <div class="p-grid vertical-container">
-            <div class="p-col p-as-start">
+        <div class="grid vertical-container">
+            <div class="col align-self-start">
                 <div class="box">4</div>
             </div>
-            <div class="p-col p-as-center">
+            <div class="col align-self-center">
                 <div class="box">4</div>
             </div>
-            <div class="p-col p-as-end">
+            <div class="col align-self-end">
                 <div class="box">4</div>
             </div>
         </div>
 
         <h5>Offset</h5>
-        <div class="p-grid">
-            <div class="p-col-6 p-offset-3">
+        <div class="grid">
+            <div class="col-6 col-offset-3">
                 <div class="box">6</div>
             </div>
         </div>
 
-        <div class="p-grid">
-            <div class="p-col-4">
+        <div class="grid">
+            <div class="col-4">
                 <div class="box">4</div>
             </div>
-            <div class="p-col-4 p-offset-4">
+            <div class="col-4 col-offset-4">
                 <div class="box">4</div>
             </div>
         </div>
 
         <h5>Nested</h5>
-        <div class="p-grid nested-grid">
-            <div class="p-col-8">
-                <div class="p-grid">
-                    <div class="p-col-6">
+        <div class="grid nested-grid">
+            <div class="col-8">
+                <div class="grid">
+                    <div class="col-6">
                         <div class="box">6</div>
                     </div>
-                    <div class="p-col-6">
+                    <div class="col-6">
                         <div class="box">6</div>
                     </div>
-                    <div class="p-col-12">
+                    <div class="col-12">
                         <div class="box">12</div>
                     </div>
                 </div>
             </div>
-            <div class="p-col-4">
+            <div class="col-4">
                 <div class="box box-stretched">4</div>
             </div>
         </div>
 
         <h5>Panels</h5>
-        <div class="p-grid">
-            <div class="p-col">
+        <div class="grid">
+            <div class="col">
                 <Panel header="Header">
                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                     Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
@@ -706,7 +706,7 @@ export default {
                     cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                 </Panel>
             </div>
-            <div class="p-col">
+            <div class="col">
                 <Panel header="Header">
                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                     Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
@@ -714,7 +714,7 @@ export default {
                     cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                 </Panel>
             </div>
-            <div class="p-col">
+            <div class="col">
                 <Panel header="Header">
                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                     Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
@@ -769,7 +769,7 @@ export default {
         border-radius: 4px;
     }
 
-    .nested-grid .p-col-4 {
+    .nested-grid .col-4 {
         padding-bottom: 1rem;
     }
 
@@ -797,16 +797,16 @@ export default {
 					tabName: 'Composition API Source',
 					content: `
 <template>
-    <div class="flexgrid-demo p-p-2">
+    <div class="flexgrid-demo p-2">
         <h5>Basic</h5>
-        <div class="p-grid">
-            <div class="p-col">
+        <div class="grid">
+            <div class="col">
                 <div class="box">1</div>
             </div>
-            <div class="p-col">
+            <div class="col">
                 <div class="box">2</div>
             </div>
-            <div class="p-col">
+            <div class="col">
                 <div class="box">3</div>
             </div>
         </div>
@@ -816,331 +816,331 @@ export default {
         <Button type="button" icon="pi pi-minus" title="Remove Column" @click="removeColumn" :disabled="columns.length === 1" />
 
         <div style="margin-top: .5em">
-            <transition-group name="dynamic-box" tag="div" class="p-grid">
-                <div v-for="col of columns" :key="col" class="p-col">
+            <transition-group name="dynamic-box" tag="div" class="grid">
+                <div v-for="col of columns" :key="col" class="col">
                     <div class="box">{{col}}</div>
                 </div>
             </transition-group>
         </div>
 
         <h5>Reverse Direction</h5>
-        <div class="p-grid p-flex-row-reverse">
-            <div class="p-col">
+        <div class="grid flex-row-reverse">
+            <div class="col">
                 <div class="box">1</div>
             </div>
-            <div class="p-col">
+            <div class="col">
                 <div class="box">2</div>
             </div>
-            <div class="p-col">
+            <div class="col">
                 <div class="box">3</div>
             </div>
         </div>
 
         <h5>Column Direction</h5>
-        <div class="p-grid p-flex-column">
-            <div class="p-col">
+        <div class="grid flex-column">
+            <div class="col">
                 <div class="box">1</div>
             </div>
-            <div class="p-col">
+            <div class="col">
                 <div class="box">2</div>
             </div>
-            <div class="p-col">
+            <div class="col">
                 <div class="box">3</div>
             </div>
         </div>
 
         <h5>Reverse Column Direction</h5>
-        <div class="p-grid p-flex-column-reverse">
-            <div class="p-col">
+        <div class="grid flex-column-reverse">
+            <div class="col">
                 <div class="box">1</div>
             </div>
-            <div class="p-col">
+            <div class="col">
                 <div class="box">2</div>
             </div>
-            <div class="p-col">
+            <div class="col">
                 <div class="box">3</div>
             </div>
         </div>
 
         <h5>12 Column Grid</h5>
-        <div class="p-grid">
-            <div class="p-col-4">
+        <div class="grid">
+            <div class="col-4">
                 <div class="box">4</div>
             </div>
-            <div class="p-col">
+            <div class="col">
                 <div class="box">1</div>
             </div>
-            <div class="p-col">
+            <div class="col">
                 <div class="box">1</div>
             </div>
-            <div class="p-col">
+            <div class="col">
                 <div class="box">1</div>
             </div>
-            <div class="p-col">
+            <div class="col">
                 <div class="box">1</div>
             </div>
-            <div class="p-col">
+            <div class="col">
                 <div class="box">1</div>
             </div>
-            <div class="p-col">
+            <div class="col">
                 <div class="box">1</div>
             </div>
-            <div class="p-col">
+            <div class="col">
                 <div class="box">1</div>
             </div>
-            <div class="p-col">
+            <div class="col">
                 <div class="box">1</div>
             </div>
         </div>
 
-        <div class="p-grid">
-            <div class="p-col-2">
+        <div class="grid">
+            <div class="col-2">
                 <div class="box">2</div>
             </div>
-            <div class="p-col-6">
+            <div class="col-6">
                 <div class="box">6</div>
             </div>
-            <div class="p-col-4">
+            <div class="col-4">
                 <div class="box">4</div>
             </div>
         </div>
 
-        <div class="p-grid">
-            <div class="p-col-8">
+        <div class="grid">
+            <div class="col-8">
                 <div class="box">8</div>
             </div>
-            <div class="p-col-2">
+            <div class="col-2">
                 <div class="box">2</div>
             </div>
-            <div class="p-col-2">
+            <div class="col-2">
                 <div class="box">2</div>
             </div>
         </div>
 
         <h5>MultiLine</h5>
-        <div class="p-grid">
-            <div class="p-col-6">
+        <div class="grid">
+            <div class="col-6">
                 <div class="box">6</div>
             </div>
-            <div class="p-col-6">
+            <div class="col-6">
                 <div class="box">6</div>
             </div>
-            <div class="p-col-6">
+            <div class="col-6">
                 <div class="box">6</div>
             </div>
-            <div class="p-col-6">
+            <div class="col-6">
                 <div class="box">6</div>
             </div>
         </div>
 
         <h5>Fixed Width Column</h5>
-        <div class="p-grid">
-            <div class="p-col-fixed" style="width:100px">
+        <div class="grid">
+            <div class="col-fixed" style="width:100px">
                 <div class="box">100px</div>
             </div>
-            <div class="p-col">
+            <div class="col">
                 <div class="box">auto</div>
             </div>
         </div>
 
         <h5>Responsive</h5>
-        <div class="p-grid">
-            <div class="p-col-12 p-md-6 p-lg-3">
-                <div class="box">p-col-12 p-md-6 p-lg-3</div>
+        <div class="grid">
+            <div class="col-12 md:col-6 lg:col-3">
+                <div class="box">col-12 md:col-6 lg:col-3</div>
             </div>
-            <div class="p-col-12 p-md-6 p-lg-3">
-                <div class="box">p-col-12 p-md-6 p-lg-3</div>
+            <div class="col-12 md:col-6 lg:col-3">
+                <div class="box">col-12 md:col-6 lg:col-3</div>
             </div>
-            <div class="p-col-12 p-md-6 p-lg-3">
-                <div class="box">p-col-12 p-md-6 p-lg-3</div>
+            <div class="col-12 md:col-6 lg:col-3">
+                <div class="box">col-12 md:col-6 lg:col-3</div>
             </div>
-            <div class="p-col-12 p-md-6 p-lg-3">
-                <div class="box">p-col-12 p-md-6 p-lg-3</div>
+            <div class="col-12 md:col-6 lg:col-3">
+                <div class="box">col-12 md:col-6 lg:col-3</div>
             </div>
         </div>
 
         <h5>Horizontal Alignment - Start</h5>
-        <div class="p-grid p-jc-start">
-            <div class="p-col-2">
+        <div class="grid justify-content-start">
+            <div class="col-2">
                 <div class="box">2</div>
             </div>
-            <div class="p-col-1">
+            <div class="col-1">
                 <div class="box">1</div>
             </div>
-            <div class="p-col-4">
+            <div class="col-4">
                 <div class="box">4</div>
             </div>
         </div>
 
         <h5>Horizontal Alignment - End</h5>
-        <div class="p-grid p-jc-end">
-            <div class="p-col-2">
+        <div class="grid justify-content-end">
+            <div class="col-2">
                 <div class="box">2</div>
             </div>
-            <div class="p-col-1">
+            <div class="col-1">
                 <div class="box">1</div>
             </div>
-            <div class="p-col-4">
+            <div class="col-4">
                 <div class="box">4</div>
             </div>
         </div>
 
         <h5>Horizontal Alignment - Center</h5>
-        <div class="p-grid p-jc-center">
-            <div class="p-col-2">
+        <div class="grid justify-content-center">
+            <div class="col-2">
                 <div class="box">2</div>
             </div>
-            <div class="p-col-1">
+            <div class="col-1">
                 <div class="box">1</div>
             </div>
-            <div class="p-col-4">
+            <div class="col-4">
                 <div class="box">4</div>
             </div>
         </div>
 
         <h5>Horizontal Alignment - Between</h5>
-        <div class="p-grid p-jc-between">
-            <div class="p-col-2">
+        <div class="grid justify-content-center">
+            <div class="col-2">
                 <div class="box">2</div>
             </div>
-            <div class="p-col-1">
+            <div class="col-1">
                 <div class="box">1</div>
             </div>
-            <div class="p-col-4">
+            <div class="col-4">
                 <div class="box">4</div>
             </div>
         </div>
 
         <h5>Horizontal Alignment - Around</h5>
-        <div class="p-grid p-jc-around">
-            <div class="p-col-2">
+        <div class="grid justify-content-around">
+            <div class="col-2">
                 <div class="box">2</div>
             </div>
-            <div class="p-col-1">
+            <div class="col-1">
                 <div class="box">1</div>
             </div>
-            <div class="p-col-4">
+            <div class="col-4">
                 <div class="box">4</div>
             </div>
         </div>
 
         <h5>Horizontal Alignment - Even</h5>
-        <div class="p-grid p-jc-evenly">
-            <div class="p-col-2">
+        <div class="grid justify-content-evenly">
+            <div class="col-2">
                 <div class="box">2</div>
             </div>
-            <div class="p-col-1">
+            <div class="col-1">
                 <div class="box">1</div>
             </div>
-            <div class="p-col-4">
+            <div class="col-4">
                 <div class="box">4</div>
             </div>
         </div>
 
         <h5>Vertical Alignment - Start</h5>
-        <div class="p-grid p-ai-start vertical-container">
-            <div class="p-col">
+        <div class="grid align-items-start vertical-container">
+            <div class="col">
                 <div class="box">4</div>
             </div>
-            <div class="p-col">
+            <div class="col">
                 <div class="box">4</div>
             </div>
-            <div class="p-col">
+            <div class="col">
                 <div class="box">4</div>
             </div>
         </div>
 
         <h5>Vertical Alignment - End</h5>
-        <div class="p-grid p-ai-end vertical-container">
-            <div class="p-col">
+        <div class="grid align-items-end vertical-container">
+            <div class="col">
                 <div class="box">4</div>
             </div>
-            <div class="p-col">
+            <div class="col">
                 <div class="box">4</div>
             </div>
-            <div class="p-col">
+            <div class="col">
                 <div class="box">4</div>
             </div>
         </div>
 
         <h5>Vertical Alignment - Center</h5>
-        <div class="p-grid p-ai-center vertical-container">
-            <div class="p-col">
+        <div class="grid align-items-center vertical-container">
+            <div class="col">
                 <div class="box">4</div>
             </div>
-            <div class="p-col">
+            <div class="col">
                 <div class="box">4</div>
             </div>
-            <div class="p-col">
+            <div class="col">
                 <div class="box">4</div>
             </div>
         </div>
 
         <h5>Vertical Alignment - Stretch</h5>
-        <div class="p-grid p-ai-stretch vertical-container">
-            <div class="p-col">
+        <div class="grid align-items-stretch vertical-container">
+            <div class="col">
                 <div class="box box-stretched">4</div>
             </div>
-            <div class="p-col">
+            <div class="col">
                 <div class="box box-stretched">4</div>
             </div>
-            <div class="p-col">
+            <div class="col">
                 <div class="box box-stretched">4</div>
             </div>
         </div>
 
         <h5>Vertical Alignment - Per Column</h5>
-        <div class="p-grid vertical-container">
-            <div class="p-col p-as-start">
+        <div class="grid vertical-container">
+            <div class="col align-self-start">
                 <div class="box">4</div>
             </div>
-            <div class="p-col p-as-center">
+            <div class="col align-self-center">
                 <div class="box">4</div>
             </div>
-            <div class="p-col p-as-end">
+            <div class="col align-self-end">
                 <div class="box">4</div>
             </div>
         </div>
 
         <h5>Offset</h5>
-        <div class="p-grid">
-            <div class="p-col-6 p-offset-3">
+        <div class="grid">
+            <div class="col-6 col-offset-3">
                 <div class="box">6</div>
             </div>
         </div>
 
-        <div class="p-grid">
-            <div class="p-col-4">
+        <div class="grid">
+            <div class="col-4">
                 <div class="box">4</div>
             </div>
-            <div class="p-col-4 p-offset-4">
+            <div class="col-4 col-offset-4">
                 <div class="box">4</div>
             </div>
         </div>
 
         <h5>Nested</h5>
-        <div class="p-grid nested-grid">
-            <div class="p-col-8">
-                <div class="p-grid">
-                    <div class="p-col-6">
+        <div class="grid nested-grid">
+            <div class="col-8">
+                <div class="grid">
+                    <div class="col-6">
                         <div class="box">6</div>
                     </div>
-                    <div class="p-col-6">
+                    <div class="col-6">
                         <div class="box">6</div>
                     </div>
-                    <div class="p-col-12">
+                    <div class="col-12">
                         <div class="box">12</div>
                     </div>
                 </div>
             </div>
-            <div class="p-col-4">
+            <div class="col-4">
                 <div class="box box-stretched">4</div>
             </div>
         </div>
 
         <h5>Panels</h5>
-        <div class="p-grid">
-            <div class="p-col">
+        <div class="grid">
+            <div class="col">
                 <Panel header="Header">
                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                     Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
@@ -1148,7 +1148,7 @@ export default {
                     cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                 </Panel>
             </div>
-            <div class="p-col">
+            <div class="col">
                 <Panel header="Header">
                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                     Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
@@ -1156,7 +1156,7 @@ export default {
                     cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                 </Panel>
             </div>
-            <div class="p-col">
+            <div class="col">
                 <Panel header="Header">
                     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                     Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
@@ -1211,7 +1211,7 @@ export default {
         border-radius: 4px;
     }
 
-    .nested-grid .p-col-4 {
+    .nested-grid .col-4 {
         padding-bottom: 1rem;
     }
 
@@ -1239,16 +1239,16 @@ export default {
 					tabName: 'Browser Source',
                     imports: `<script src="https://unpkg.com/primevue@^3/panel/panel.min.js"><\\/script>`,
 					content: `<div id="app">
-            <div class="flexgrid-demo p-p-2">
+            <div class="flexgrid-demo p-2">
                 <h5>Basic</h5>
-                <div class="p-grid">
-                    <div class="p-col">
+                <div class="grid">
+                    <div class="col">
                         <div class="box">1</div>
                     </div>
-                    <div class="p-col">
+                    <div class="col">
                         <div class="box">2</div>
                     </div>
-                    <div class="p-col">
+                    <div class="col">
                         <div class="box">3</div>
                     </div>
                 </div>
@@ -1258,331 +1258,331 @@ export default {
                 <p-button type="button" icon="pi pi-minus" title="Remove Column" @click="removeColumn" :disabled="columns.length === 1"></p-button>
 
                 <div style="margin-top: .5em">
-                    <transition-group name="dynamic-box" tag="div" class="p-grid">
-                        <div v-for="col of columns" :key="col" class="p-col">
+                    <transition-group name="dynamic-box" tag="div" class="grid">
+                        <div v-for="col of columns" :key="col" class="col">
                             <div class="box">{{col}}</div>
                         </div>
                     </transition-group>
                 </div>
 
                 <h5>Reverse Direction</h5>
-                <div class="p-grid p-flex-row-reverse">
-                    <div class="p-col">
+                <div class="grid flex-row-reverse">
+                    <div class="col">
                         <div class="box">1</div>
                     </div>
-                    <div class="p-col">
+                    <div class="col">
                         <div class="box">2</div>
                     </div>
-                    <div class="p-col">
+                    <div class="col">
                         <div class="box">3</div>
                     </div>
                 </div>
 
                 <h5>Column Direction</h5>
-                <div class="p-grid p-flex-column">
-                    <div class="p-col">
+                <div class="grid flex-column">
+                    <div class="col">
                         <div class="box">1</div>
                     </div>
-                    <div class="p-col">
+                    <div class="col">
                         <div class="box">2</div>
                     </div>
-                    <div class="p-col">
+                    <div class="col">
                         <div class="box">3</div>
                     </div>
                 </div>
 
                 <h5>Reverse Column Direction</h5>
-                <div class="p-grid p-flex-column-reverse">
-                    <div class="p-col">
+                <div class="grid flex-column-reverse">
+                    <div class="col">
                         <div class="box">1</div>
                     </div>
-                    <div class="p-col">
+                    <div class="col">
                         <div class="box">2</div>
                     </div>
-                    <div class="p-col">
+                    <div class="col">
                         <div class="box">3</div>
                     </div>
                 </div>
 
                 <h5>12 Column Grid</h5>
-                <div class="p-grid">
-                    <div class="p-col-4">
+                <div class="grid">
+                    <div class="col-4">
                         <div class="box">4</div>
                     </div>
-                    <div class="p-col">
+                    <div class="col">
                         <div class="box">1</div>
                     </div>
-                    <div class="p-col">
+                    <div class="col">
                         <div class="box">1</div>
                     </div>
-                    <div class="p-col">
+                    <div class="col">
                         <div class="box">1</div>
                     </div>
-                    <div class="p-col">
+                    <div class="col">
                         <div class="box">1</div>
                     </div>
-                    <div class="p-col">
+                    <div class="col">
                         <div class="box">1</div>
                     </div>
-                    <div class="p-col">
+                    <div class="col">
                         <div class="box">1</div>
                     </div>
-                    <div class="p-col">
+                    <div class="col">
                         <div class="box">1</div>
                     </div>
-                    <div class="p-col">
+                    <div class="col">
                         <div class="box">1</div>
                     </div>
                 </div>
 
-                <div class="p-grid">
-                    <div class="p-col-2">
+                <div class="grid">
+                    <div class="col-2">
                         <div class="box">2</div>
                     </div>
-                    <div class="p-col-6">
+                    <div class="col-6">
                         <div class="box">6</div>
                     </div>
-                    <div class="p-col-4">
+                    <div class="col-4">
                         <div class="box">4</div>
                     </div>
                 </div>
 
-                <div class="p-grid">
-                    <div class="p-col-8">
+                <div class="grid">
+                    <div class="col-8">
                         <div class="box">8</div>
                     </div>
-                    <div class="p-col-2">
+                    <div class="col-2">
                         <div class="box">2</div>
                     </div>
-                    <div class="p-col-2">
+                    <div class="col-2">
                         <div class="box">2</div>
                     </div>
                 </div>
 
                 <h5>MultiLine</h5>
-                <div class="p-grid">
-                    <div class="p-col-6">
+                <div class="grid">
+                    <div class="col-6">
                         <div class="box">6</div>
                     </div>
-                    <div class="p-col-6">
+                    <div class="col-6">
                         <div class="box">6</div>
                     </div>
-                    <div class="p-col-6">
+                    <div class="col-6">
                         <div class="box">6</div>
                     </div>
-                    <div class="p-col-6">
+                    <div class="col-6">
                         <div class="box">6</div>
                     </div>
                 </div>
 
                 <h5>Fixed Width Column</h5>
-                <div class="p-grid">
-                    <div class="p-col-fixed" style="width:100px">
+                <div class="grid">
+                    <div class="col-fixed" style="width:100px">
                         <div class="box">100px</div>
                     </div>
-                    <div class="p-col">
+                    <div class="col">
                         <div class="box">auto</div>
                     </div>
                 </div>
 
                 <h5>Responsive</h5>
-                <div class="p-grid">
-                    <div class="p-col-12 p-md-6 p-lg-3">
-                        <div class="box">p-col-12 p-md-6 p-lg-3</div>
+                <div class="grid">
+                    <div class="col-12 md:col-6 lg:col-3">
+                        <div class="box">col-12 md:col-6 lg:col-3</div>
                     </div>
-                    <div class="p-col-12 p-md-6 p-lg-3">
-                        <div class="box">p-col-12 p-md-6 p-lg-3</div>
+                    <div class="col-12 md:col-6 lg:col-3">
+                        <div class="box">col-12 md:col-6 lg:col-3</div>
                     </div>
-                    <div class="p-col-12 p-md-6 p-lg-3">
-                        <div class="box">p-col-12 p-md-6 p-lg-3</div>
+                    <div class="col-12 md:col-6 lg:col-3">
+                        <div class="box">col-12 md:col-6 lg:col-3</div>
                     </div>
-                    <div class="p-col-12 p-md-6 p-lg-3">
-                        <div class="box">p-col-12 p-md-6 p-lg-3</div>
+                    <div class="col-12 md:col-6 lg:col-3">
+                        <div class="box">col-12 md:col-6 lg:col-3</div>
                     </div>
                 </div>
 
                 <h5>Horizontal Alignment - Start</h5>
-                <div class="p-grid p-jc-start">
-                    <div class="p-col-2">
+                <div class="grid justify-content-start">
+                    <div class="col-2">
                         <div class="box">2</div>
                     </div>
-                    <div class="p-col-1">
+                    <div class="col-1">
                         <div class="box">1</div>
                     </div>
-                    <div class="p-col-4">
+                    <div class="col-4">
                         <div class="box">4</div>
                     </div>
                 </div>
 
                 <h5>Horizontal Alignment - End</h5>
-                <div class="p-grid p-jc-end">
-                    <div class="p-col-2">
+                <div class="grid justify-content-end">
+                    <div class="col-2">
                         <div class="box">2</div>
                     </div>
-                    <div class="p-col-1">
+                    <div class="col-1">
                         <div class="box">1</div>
                     </div>
-                    <div class="p-col-4">
+                    <div class="col-4">
                         <div class="box">4</div>
                     </div>
                 </div>
 
                 <h5>Horizontal Alignment - Center</h5>
-                <div class="p-grid p-jc-center">
-                    <div class="p-col-2">
+                <div class="grid justify-content-center">
+                    <div class="col-2">
                         <div class="box">2</div>
                     </div>
-                    <div class="p-col-1">
+                    <div class="col-1">
                         <div class="box">1</div>
                     </div>
-                    <div class="p-col-4">
+                    <div class="col-4">
                         <div class="box">4</div>
                     </div>
                 </div>
 
                 <h5>Horizontal Alignment - Between</h5>
-                <div class="p-grid p-jc-between">
-                    <div class="p-col-2">
+                <div class="grid justify-content-center">
+                    <div class="col-2">
                         <div class="box">2</div>
                     </div>
-                    <div class="p-col-1">
+                    <div class="col-1">
                         <div class="box">1</div>
                     </div>
-                    <div class="p-col-4">
+                    <div class="col-4">
                         <div class="box">4</div>
                     </div>
                 </div>
 
                 <h5>Horizontal Alignment - Around</h5>
-                <div class="p-grid p-jc-around">
-                    <div class="p-col-2">
+                <div class="grid justify-content-around">
+                    <div class="col-2">
                         <div class="box">2</div>
                     </div>
-                    <div class="p-col-1">
+                    <div class="col-1">
                         <div class="box">1</div>
                     </div>
-                    <div class="p-col-4">
+                    <div class="col-4">
                         <div class="box">4</div>
                     </div>
                 </div>
 
                 <h5>Horizontal Alignment - Even</h5>
-                <div class="p-grid p-jc-evenly">
-                    <div class="p-col-2">
+                <div class="grid justify-content-evenly">
+                    <div class="col-2">
                         <div class="box">2</div>
                     </div>
-                    <div class="p-col-1">
+                    <div class="col-1">
                         <div class="box">1</div>
                     </div>
-                    <div class="p-col-4">
+                    <div class="col-4">
                         <div class="box">4</div>
                     </div>
                 </div>
 
                 <h5>Vertical Alignment - Start</h5>
-                <div class="p-grid p-ai-start vertical-container">
-                    <div class="p-col">
+                <div class="grid align-items-start vertical-container">
+                    <div class="col">
                         <div class="box">4</div>
                     </div>
-                    <div class="p-col">
+                    <div class="col">
                         <div class="box">4</div>
                     </div>
-                    <div class="p-col">
+                    <div class="col">
                         <div class="box">4</div>
                     </div>
                 </div>
 
                 <h5>Vertical Alignment - End</h5>
-                <div class="p-grid p-ai-end vertical-container">
-                    <div class="p-col">
+                <div class="grid align-items-end vertical-container">
+                    <div class="col">
                         <div class="box">4</div>
                     </div>
-                    <div class="p-col">
+                    <div class="col">
                         <div class="box">4</div>
                     </div>
-                    <div class="p-col">
+                    <div class="col">
                         <div class="box">4</div>
                     </div>
                 </div>
 
                 <h5>Vertical Alignment - Center</h5>
-                <div class="p-grid p-ai-center vertical-container">
-                    <div class="p-col">
+                <div class="grid align-items-center vertical-container">
+                    <div class="col">
                         <div class="box">4</div>
                     </div>
-                    <div class="p-col">
+                    <div class="col">
                         <div class="box">4</div>
                     </div>
-                    <div class="p-col">
+                    <div class="col">
                         <div class="box">4</div>
                     </div>
                 </div>
 
                 <h5>Vertical Alignment - Stretch</h5>
-                <div class="p-grid p-ai-stretch vertical-container">
-                    <div class="p-col">
+                <div class="grid align-items-stretch vertical-container">
+                    <div class="col">
                         <div class="box box-stretched">4</div>
                     </div>
-                    <div class="p-col">
+                    <div class="col">
                         <div class="box box-stretched">4</div>
                     </div>
-                    <div class="p-col">
+                    <div class="col">
                         <div class="box box-stretched">4</div>
                     </div>
                 </div>
 
                 <h5>Vertical Alignment - Per Column</h5>
-                <div class="p-grid vertical-container">
-                    <div class="p-col p-as-start">
+                <div class="grid vertical-container">
+                    <div class="col align-self-start">
                         <div class="box">4</div>
                     </div>
-                    <div class="p-col p-as-center">
+                    <div class="col align-self-center">
                         <div class="box">4</div>
                     </div>
-                    <div class="p-col p-as-end">
+                    <div class="col align-self-end">
                         <div class="box">4</div>
                     </div>
                 </div>
 
                 <h5>Offset</h5>
-                <div class="p-grid">
-                    <div class="p-col-6 p-offset-3">
+                <div class="grid">
+                    <div class="col-6 col-offset-3">
                         <div class="box">6</div>
                     </div>
                 </div>
 
-                <div class="p-grid">
-                    <div class="p-col-4">
+                <div class="grid">
+                    <div class="col-4">
                         <div class="box">4</div>
                     </div>
-                    <div class="p-col-4 p-offset-4">
+                    <div class="col-4 col-offset-4">
                         <div class="box">4</div>
                     </div>
                 </div>
 
                 <h5>Nested</h5>
-                <div class="p-grid nested-grid">
-                    <div class="p-col-8">
-                        <div class="p-grid">
-                            <div class="p-col-6">
+                <div class="grid nested-grid">
+                    <div class="col-8">
+                        <div class="grid">
+                            <div class="col-6">
                                 <div class="box">6</div>
                             </div>
-                            <div class="p-col-6">
+                            <div class="col-6">
                                 <div class="box">6</div>
                             </div>
-                            <div class="p-col-12">
+                            <div class="col-12">
                                 <div class="box">12</div>
                             </div>
                         </div>
                     </div>
-                    <div class="p-col-4">
+                    <div class="col-4">
                         <div class="box box-stretched">4</div>
                     </div>
                 </div>
 
                 <h5>Panels</h5>
-                <div class="p-grid">
-                    <div class="p-col">
+                <div class="grid">
+                    <div class="col">
                         <p-panel header="Header">
                             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                             Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
@@ -1590,7 +1590,7 @@ export default {
                             cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                         </p-panel>
                     </div>
-                    <div class="p-col">
+                    <div class="col">
                         <p-panel header="Header">
                             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                             Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
@@ -1598,7 +1598,7 @@ export default {
                             cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
                         </p-panel>
                     </div>
-                    <div class="p-col">
+                    <div class="col">
                         <p-panel header="Header">
                             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                             Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
@@ -1662,7 +1662,7 @@ export default {
             border-radius: 4px;
         }
 
-        .flexgrid-demo .nested-grid .p-col-4 {
+        .flexgrid-demo .nested-grid .col-4 {
             padding-bottom: 1rem;
         }
 
diff --git a/src/views/icons/Icons.vue b/src/views/icons/Icons.vue
index 5cfe7896c..5cf2f0d29 100755
--- a/src/views/icons/Icons.vue
+++ b/src/views/icons/Icons.vue
@@ -94,8 +94,8 @@ export default {
 
             <InputText v-model="filter" class="icon-filter" placeholder="Search an icon" />
 
-            <div class="p-grid icons-list">
-                <div class="p-col-12 p-md-2" v-for="icon of filteredIcons" :key="icon.properties.name">
+            <div class="grid icons-list">
+                <div class="col-12 md:col-2 icon" v-for="icon of filteredIcons" :key="icon.properties.name">
                     <i :class="'pi pi-' + icon.properties.name"></i>
                     <div>pi-{{icon.properties.name}}</div>
                 </div>
@@ -158,7 +158,7 @@ export default {
         margin-bottom: .5rem;
     }
 
-    .p-md-2 {
+    .icon {
         padding-bottom: 2rem;
     }
 }
diff --git a/src/views/inputgroup/InputGroupDemo.vue b/src/views/inputgroup/InputGroupDemo.vue
index 1b8afe4a6..66f62db64 100755
--- a/src/views/inputgroup/InputGroupDemo.vue
+++ b/src/views/inputgroup/InputGroupDemo.vue
@@ -12,8 +12,8 @@
             <div class="card">
 
                 <h5>Addons</h5>
-                <div class="p-grid p-fluid">
-                    <div class="p-col-12 p-md-4">
+                <div class="grid p-fluid">
+                    <div class="col-12 md:col-4">
                         <div class="p-inputgroup">
                             <span class="p-inputgroup-addon">
                                 <i class="pi pi-user"></i>
@@ -22,7 +22,7 @@
                         </div>
                     </div>
 
-                    <div class="p-col-12 p-md-4">
+                    <div class="col-12 md:col-4">
                         <div class="p-inputgroup">
                             <span class="p-inputgroup-addon">$</span>
                             <InputText placeholder="Price" />
@@ -30,7 +30,7 @@
                         </div>
                     </div>
 
-                    <div class="p-col-12 p-md-4">
+                    <div class="col-12 md:col-4">
                         <div class="p-inputgroup">
                             <span class="p-inputgroup-addon">W</span>
                             <InputText placeholder="Website" />
@@ -39,8 +39,8 @@
                 </div>
 
                 <h5>Multiple Addons</h5>
-                <div class="p-grid">
-                    <div class="p-col-12">
+                <div class="grid">
+                    <div class="col-12">
                         <div class="p-inputgroup">
                             <span class="p-inputgroup-addon">
                                 <i class="pi pi-clock"></i>
@@ -56,22 +56,22 @@
                 </div>
 
                 <h5>Button Addons</h5>
-                <div class="p-grid p-fluid">
-                    <div class="p-col-12 p-md-4">
+                <div class="grid p-fluid">
+                    <div class="col-12 md:col-4">
                         <div class="p-inputgroup">
                             <Button label="Search"/>
                             <InputText placeholder="Keyword"/>
                         </div>
                     </div>
 
-                    <div class="p-col-12 p-md-4">
+                    <div class="col-12 md:col-4">
                         <div class="p-inputgroup">
                             <InputText placeholder="Keyword"/>
                             <Button icon="pi pi-search" class="p-button-warning"/>
                         </div>
                     </div>
 
-                    <div class="p-col-12 p-md-4">
+                    <div class="col-12 md:col-4">
                         <div class="p-inputgroup">
                             <Button icon="pi pi-check" class="p-button-success"/>
                             <InputText placeholder="Vote"/>
@@ -81,8 +81,8 @@
                 </div>
 
                 <h5>Checkbox and RadioButton</h5>
-                <div class="p-grid p-fluid">
-                    <div class="p-col-12 p-md-12">
+                <div class="grid p-fluid">
+                    <div class="col-12 md:col-12">
                         <div class="p-inputgroup">
                             <span class="p-inputgroup-addon">
                                 <Checkbox v-model="checked1" :binary="true" />
@@ -91,7 +91,7 @@
                         </div>
                     </div>
 
-                    <div class="p-col-12 p-md-12">
+                    <div class="col-12 md:col-12">
                         <div class="p-inputgroup">
                             <InputText placeholder="Price"/>
                             <span class="p-inputgroup-addon">
@@ -100,7 +100,7 @@
                         </div>
                     </div>
 
-                    <div class="p-col-12 p-md-12">
+                    <div class="col-12 md:col-12">
                         <div class="p-inputgroup">
                             <span class="p-inputgroup-addon">
                                 <Checkbox v-model="checked2" :binary="true" />
diff --git a/src/views/inputgroup/InputGroupDoc.vue b/src/views/inputgroup/InputGroupDoc.vue
index 2eb836906..9401008e4 100755
--- a/src/views/inputgroup/InputGroupDoc.vue
+++ b/src/views/inputgroup/InputGroupDoc.vue
@@ -13,8 +13,8 @@ export default {
 <template>
     <div>
         <h5>Addons</h5>
-        <div class="p-grid p-fluid">
-            <div class="p-col-12 p-md-4">
+        <div class="grid p-fluid">
+            <div class="col-12 md:col-4">
                 <div class="p-inputgroup">
                     <span class="p-inputgroup-addon">
                         <i class="pi pi-user"></i>
@@ -23,7 +23,7 @@ export default {
                 </div>
             </div>
 
-            <div class="p-col-12 p-md-4">
+            <div class="col-12 md:col-4">
                 <div class="p-inputgroup">
                     <span class="p-inputgroup-addon">$</span>
                     <InputText placeholder="Price" />
@@ -31,7 +31,7 @@ export default {
                 </div>
             </div>
 
-            <div class="p-col-12 p-md-4">
+            <div class="col-12 md:col-4">
                 <div class="p-inputgroup">
                     <span class="p-inputgroup-addon">W</span>
                     <InputText placeholder="Website" />
@@ -40,8 +40,8 @@ export default {
         </div>
 
         <h5>Multiple Addons</h5>
-        <div class="p-grid">
-            <div class="p-col-12">
+        <div class="grid">
+            <div class="col-12">
                 <div class="p-inputgroup">
                     <span class="p-inputgroup-addon">
                         <i class="pi pi-clock"></i>
@@ -57,22 +57,22 @@ export default {
         </div>
 
         <h5>Button Addons</h5>
-        <div class="p-grid p-fluid">
-            <div class="p-col-12 p-md-4">
+        <div class="grid p-fluid">
+            <div class="col-12 md:col-4">
                 <div class="p-inputgroup">
                     <Button label="Search"/>
                     <InputText placeholder="Keyword"/>
                 </div>
             </div>
 
-            <div class="p-col-12 p-md-4">
+            <div class="col-12 md:col-4">
                 <div class="p-inputgroup">
                     <InputText placeholder="Keyword"/>
                     <Button icon="pi pi-search" class="p-button-warning"/>
                 </div>
             </div>
 
-            <div class="p-col-12 p-md-4">
+            <div class="col-12 md:col-4">
                 <div class="p-inputgroup">
                     <Button icon="pi pi-check" class="p-button-success"/>
                     <InputText placeholder="Vote"/>
@@ -82,8 +82,8 @@ export default {
         </div>
 
         <h5>Checkbox and RadioButton</h5>
-        <div class="p-grid p-fluid">
-            <div class="p-col-12 p-md-12">
+        <div class="grid p-fluid">
+            <div class="col-12 md:col-12">
                 <div class="p-inputgroup">
                     <span class="p-inputgroup-addon">
                         <Checkbox v-model="checked1" :binary="true" />
@@ -92,7 +92,7 @@ export default {
                 </div>
             </div>
 
-            <div class="p-col-12 p-md-12">
+            <div class="col-12 md:col-12">
                 <div class="p-inputgroup">
                     <InputText placeholder="Price"/>
                     <span class="p-inputgroup-addon">
@@ -101,7 +101,7 @@ export default {
                 </div>
             </div>
 
-            <div class="p-col-12 p-md-12">
+            <div class="col-12 md:col-12">
                 <div class="p-inputgroup">
                     <span class="p-inputgroup-addon">
                         <Checkbox v-model="checked2" :binary="true" />
@@ -135,8 +135,8 @@ export default {
 <template>
     <div>
         <h5>Addons</h5>
-        <div class="p-grid p-fluid">
-            <div class="p-col-12 p-md-4">
+        <div class="grid p-fluid">
+            <div class="col-12 md:col-4">
                 <div class="p-inputgroup">
                     <span class="p-inputgroup-addon">
                         <i class="pi pi-user"></i>
@@ -145,7 +145,7 @@ export default {
                 </div>
             </div>
 
-            <div class="p-col-12 p-md-4">
+            <div class="col-12 md:col-4">
                 <div class="p-inputgroup">
                     <span class="p-inputgroup-addon">$</span>
                     <InputText placeholder="Price" />
@@ -153,7 +153,7 @@ export default {
                 </div>
             </div>
 
-            <div class="p-col-12 p-md-4">
+            <div class="col-12 md:col-4">
                 <div class="p-inputgroup">
                     <span class="p-inputgroup-addon">W</span>
                     <InputText placeholder="Website" />
@@ -162,8 +162,8 @@ export default {
         </div>
 
         <h5>Multiple Addons</h5>
-        <div class="p-grid">
-            <div class="p-col-12">
+        <div class="grid">
+            <div class="col-12">
                 <div class="p-inputgroup">
                     <span class="p-inputgroup-addon">
                         <i class="pi pi-clock"></i>
@@ -179,22 +179,22 @@ export default {
         </div>
 
         <h5>Button Addons</h5>
-        <div class="p-grid p-fluid">
-            <div class="p-col-12 p-md-4">
+        <div class="grid p-fluid">
+            <div class="col-12 md:col-4">
                 <div class="p-inputgroup">
                     <Button label="Search"/>
                     <InputText placeholder="Keyword"/>
                 </div>
             </div>
 
-            <div class="p-col-12 p-md-4">
+            <div class="col-12 md:col-4">
                 <div class="p-inputgroup">
                     <InputText placeholder="Keyword"/>
                     <Button icon="pi pi-search" class="p-button-warning"/>
                 </div>
             </div>
 
-            <div class="p-col-12 p-md-4">
+            <div class="col-12 md:col-4">
                 <div class="p-inputgroup">
                     <Button icon="pi pi-check" class="p-button-success"/>
                     <InputText placeholder="Vote"/>
@@ -204,8 +204,8 @@ export default {
         </div>
 
         <h5>Checkbox and RadioButton</h5>
-        <div class="p-grid p-fluid">
-            <div class="p-col-12 p-md-12">
+        <div class="grid p-fluid">
+            <div class="col-12 md:col-12">
                 <div class="p-inputgroup">
                     <span class="p-inputgroup-addon">
                         <Checkbox v-model="checked1" :binary="true" />
@@ -214,7 +214,7 @@ export default {
                 </div>
             </div>
 
-            <div class="p-col-12 p-md-12">
+            <div class="col-12 md:col-12">
                 <div class="p-inputgroup">
                     <InputText placeholder="Price"/>
                     <span class="p-inputgroup-addon">
@@ -223,7 +223,7 @@ export default {
                 </div>
             </div>
 
-            <div class="p-col-12 p-md-12">
+            <div class="col-12 md:col-12">
                 <div class="p-inputgroup">
                     <span class="p-inputgroup-addon">
                         <Checkbox v-model="checked2" :binary="true" />
@@ -259,8 +259,8 @@ export default {
         <script src="https://unpkg.com/primevue@^3/radiobutton/radiobutton.min.js"><\\/script>`,
                     content: `<div id="app">
             <h5>Addons</h5>
-            <div class="p-grid p-fluid">
-                <div class="p-col-12 p-md-4">
+            <div class="grid p-fluid">
+                <div class="col-12 md:col-4">
                     <div class="p-inputgroup">
                         <span class="p-inputgroup-addon">
                             <i class="pi pi-user"></i>
@@ -269,7 +269,7 @@ export default {
                     </div>
                 </div>
 
-                <div class="p-col-12 p-md-4">
+                <div class="col-12 md:col-4">
                     <div class="p-inputgroup">
                         <span class="p-inputgroup-addon">$</span>
                         <p-inputtext placeholder="Price"></p-inputtext>
@@ -277,7 +277,7 @@ export default {
                     </div>
                 </div>
 
-                <div class="p-col-12 p-md-4">
+                <div class="col-12 md:col-4">
                     <div class="p-inputgroup">
                         <span class="p-inputgroup-addon">W</span>
                         <p-inputtext placeholder="Website"></p-inputtext>
@@ -286,8 +286,8 @@ export default {
             </div>
 
             <h5>Multiple Addons</h5>
-            <div class="p-grid">
-                <div class="p-col-12">
+            <div class="grid">
+                <div class="col-12">
                     <div class="p-inputgroup">
                         <span class="p-inputgroup-addon">
                             <i class="pi pi-clock"></i>
@@ -303,22 +303,22 @@ export default {
             </div>
 
             <h5>Button Addons</h5>
-            <div class="p-grid p-fluid">
-                <div class="p-col-12 p-md-4">
+            <div class="grid p-fluid">
+                <div class="col-12 md:col-4">
                     <div class="p-inputgroup">
                         <p-button label="Search"></p-button>
                         <p-inputtext placeholder="Keyword"></p-inputtext>
                     </div>
                 </div>
 
-                <div class="p-col-12 p-md-4">
+                <div class="col-12 md:col-4">
                     <div class="p-inputgroup">
                         <p-inputtext placeholder="Keyword"></p-inputtext>
                         <p-button icon="pi pi-search" class="p-button-warning"></p-button>
                     </div>
                 </div>
 
-                <div class="p-col-12 p-md-4">
+                <div class="col-12 md:col-4">
                     <div class="p-inputgroup">
                         <p-button icon="pi pi-check" class="p-button-success"></p-button>
                         <p-inputtext placeholder="Vote"></p-inputtext>
@@ -328,8 +328,8 @@ export default {
             </div>
 
             <h5>Checkbox and RadioButton</h5>
-            <div class="p-grid p-fluid">
-                <div class="p-col-12 p-md-12">
+            <div class="grid p-fluid">
+                <div class="col-12 md:col-12">
                     <div class="p-inputgroup">
                         <span class="p-inputgroup-addon">
                             <p-checkbox v-model="checked1" :binary="true"></p-checkbox>
@@ -338,7 +338,7 @@ export default {
                     </div>
                 </div>
 
-                <div class="p-col-12 p-md-12">
+                <div class="col-12 md:col-12">
                     <div class="p-inputgroup">
                         <p-inputtext placeholder="Price"></p-inputtext>
                         <span class="p-inputgroup-addon">
@@ -347,7 +347,7 @@ export default {
                     </div>
                 </div>
 
-                <div class="p-col-12 p-md-12">
+                <div class="col-12 md:col-12">
                     <div class="p-inputgroup">
                         <span class="p-inputgroup-addon">
                             <p-checkbox v-model="checked2" :binary="true"></p-checkbox>
diff --git a/src/views/inputmask/InputMaskDemo.vue b/src/views/inputmask/InputMaskDemo.vue
index 0948b6f8b..4f96bd18b 100755
--- a/src/views/inputmask/InputMaskDemo.vue
+++ b/src/views/inputmask/InputMaskDemo.vue
@@ -10,33 +10,33 @@
 
         <div class="content-section implementation">
             <div class="card">
-                <div class="p-fluid p-formgrid p-grid">
-                    <div class="p-field p-col-12 p-md-4">
+                <div class="p-fluid formgrid grid">
+                    <div class="field col-12 md:col-4">
                         <label for="basic">Basic</label>
                         <InputMask mask="99-999999" v-model="val1" placeholder="99-999999" />
                     </div>
 
-                    <div class="p-field p-col-12 p-md-4">
+                    <div class="field col-12 md:col-4">
                         <label for="ssn">SSN</label>
                         <InputMask mask="999-99-9999" v-model="val2" placeholder="999-99-9999" />
                     </div>
 
-                    <div class="p-field p-col-12 p-md-4">
+                    <div class="field col-12 md:col-4">
                         <label for="date">Date</label>
                         <InputMask mask="99/99/9999" v-model="val3" placeholder="99/99/9999" slotChar="mm/dd/yyyy" />
                     </div>
 
-                    <div class="p-field p-col-12 p-md-4">
+                    <div class="field col-12 md:col-4">
                         <label for="Phone">Phone</label>
                         <InputMask mask="(999) 999-9999" v-model="val4" placeholder="(999) 999-9999" />
                     </div>
 
-                    <div class="p-field p-col-12 p-md-4">
+                    <div class="field col-12 md:col-4">
                         <label for="phoneext">Phone Ext</label>
                         <InputMask mask="(999) 999-9999? x99999" v-model="val5" placeholder="(999) 999-9999? x99999"/>
                     </div>
 
-                    <div class="p-field p-col-12 p-md-4">
+                    <div class="field col-12 md:col-4">
                         <label for="serial">Serial</label>
                         <InputMask mask="a*-999-a999" v-model="val6" placeholder="a*-999-a999" />
                     </div>
diff --git a/src/views/inputmask/InputMaskDoc.vue b/src/views/inputmask/InputMaskDoc.vue
index cf0ad39c9..543194fc6 100755
--- a/src/views/inputmask/InputMaskDoc.vue
+++ b/src/views/inputmask/InputMaskDoc.vue
@@ -139,33 +139,33 @@ export default {
                     content: `
 <template>
     <div>
-        <div class="p-fluid p-formgrid p-grid">
-            <div class="p-field p-col-12 p-md-4">
+        <div class="p-fluid formgrid grid">
+            <div class="field col-12 md:col-4">
                 <label for="basic">Basic</label>
                 <InputMask mask="99-999999" v-model="val1" placeholder="99-999999" />
             </div>
 
-            <div class="p-field p-col-12 p-md-4">
+            <div class="field col-12 md:col-4">
                 <label for="ssn">SSN</label>
                 <InputMask mask="999-99-9999" v-model="val2" placeholder="999-99-9999" />
             </div>
 
-            <div class="p-field p-col-12 p-md-4">
+            <div class="field col-12 md:col-4">
                 <label for="date">Date</label>
                 <InputMask mask="99/99/9999" v-model="val3" placeholder="99/99/9999" slotChar="mm/dd/yyyy" />
             </div>
 
-            <div class="p-field p-col-12 p-md-4">
+            <div class="field col-12 md:col-4">
                 <label for="Phone">Phone</label>
                 <InputMask mask="(999) 999-9999" v-model="val4" placeholder="(999) 999-9999" />
             </div>
 
-            <div class="p-field p-col-12 p-md-4">
+            <div class="field col-12 md:col-4">
                 <label for="phoneext">Phone Ext</label>
                 <InputMask mask="(999) 999-9999? x99999" v-model="val5" placeholder="(999) 999-9999? x99999"/>
             </div>
 
-            <div class="p-field p-col-12 p-md-4">
+            <div class="field col-12 md:col-4">
                 <label for="serial">Serial</label>
                 <InputMask mask="a*-999-a999" v-model="val6" placeholder="a*-999-a999" />
             </div>
@@ -194,33 +194,33 @@ export default {
                     content: `
 <template>
     <div>
-        <div class="p-fluid p-formgrid p-grid">
-            <div class="p-field p-col-12 p-md-4">
+        <div class="p-fluid formgrid grid">
+            <div class="field col-12 md:col-4">
                 <label for="basic">Basic</label>
                 <InputMask mask="99-999999" v-model="val1" placeholder="99-999999" />
             </div>
 
-            <div class="p-field p-col-12 p-md-4">
+            <div class="field col-12 md:col-4">
                 <label for="ssn">SSN</label>
                 <InputMask mask="999-99-9999" v-model="val2" placeholder="999-99-9999" />
             </div>
 
-            <div class="p-field p-col-12 p-md-4">
+            <div class="field col-12 md:col-4">
                 <label for="date">Date</label>
                 <InputMask mask="99/99/9999" v-model="val3" placeholder="99/99/9999" slotChar="mm/dd/yyyy" />
             </div>
 
-            <div class="p-field p-col-12 p-md-4">
+            <div class="field col-12 md:col-4">
                 <label for="Phone">Phone</label>
                 <InputMask mask="(999) 999-9999" v-model="val4" placeholder="(999) 999-9999" />
             </div>
 
-            <div class="p-field p-col-12 p-md-4">
+            <div class="field col-12 md:col-4">
                 <label for="phoneext">Phone Ext</label>
                 <InputMask mask="(999) 999-9999? x99999" v-model="val5" placeholder="(999) 999-9999? x99999"/>
             </div>
 
-            <div class="p-field p-col-12 p-md-4">
+            <div class="field col-12 md:col-4">
                 <label for="serial">Serial</label>
                 <InputMask mask="a*-999-a999" v-model="val6" placeholder="a*-999-a999" />
             </div>
@@ -250,33 +250,33 @@ export default {
                     tabName: 'Browser Source',
                     imports: `<script src="https://unpkg.com/primevue@^3/inputmask/inputmask.min.js"><\\/script>`,
                     content: `<div id="app">
-            <div class="p-fluid p-formgrid p-grid">
-                <div class="p-field p-col-12 p-md-4">
+            <div class="p-fluid formgrid grid">
+                <div class="field col-12 md:col-4">
                     <label for="basic">Basic</label>
                     <p-inputmask mask="99-999999" v-model="val1" placeholder="99-999999"></p-inputmask>
                 </div>
 
-                <div class="p-field p-col-12 p-md-4">
+                <div class="field col-12 md:col-4">
                     <label for="ssn">SSN</label>
                     <p-inputmask mask="999-99-9999" v-model="val2" placeholder="999-99-9999"></p-inputmask>
                 </div>
 
-                <div class="p-field p-col-12 p-md-4">
+                <div class="field col-12 md:col-4">
                     <label for="date">Date</label>
                     <p-inputmask mask="99/99/9999" v-model="val3" placeholder="99/99/9999" slot-char="mm/dd/yyyy"></p-inputmask>
                 </div>
 
-                <div class="p-field p-col-12 p-md-4">
+                <div class="field col-12 md:col-4">
                     <label for="Phone">Phone</label>
                     <p-inputmask mask="(999) 999-9999" v-model="val4" placeholder="(999) 999-9999"></p-inputmask>
                 </div>
 
-                <div class="p-field p-col-12 p-md-4">
+                <div class="field col-12 md:col-4">
                     <label for="phoneext">Phone Ext</label>
                     <p-inputmask mask="(999) 999-9999? x99999" v-model="val5" placeholder="(999) 999-9999? x99999"></p-inputmask>
                 </div>
 
-                <div class="p-field p-col-12 p-md-4">
+                <div class="field col-12 md:col-4">
                     <label for="serial">Serial</label>
                     <p-inputmask mask="a*-999-a999" v-model="val6" placeholder="a*-999-a999"></p-inputmask>
                 </div>
diff --git a/src/views/inputnumber/InputNumberDemo.vue b/src/views/inputnumber/InputNumberDemo.vue
index 28847a338..44466fe51 100755
--- a/src/views/inputnumber/InputNumberDemo.vue
+++ b/src/views/inputnumber/InputNumberDemo.vue
@@ -12,100 +12,100 @@
             <div class="card">
 
                 <h5>Numerals</h5>
-                <div class="p-fluid p-grid p-formgrid">
-                    <div class="p-field p-col-12 p-md-3">
+                <div class="p-fluid grid formgrid">
+                    <div class="field col-12 md:col-3">
                         <label for="integeronly">Integer Only</label>
                         <InputNumber id="integeronly" v-model="value1" />
                     </div>
-                    <div class="p-field p-col-12 p-md-3">
+                    <div class="field col-12 md:col-3">
                         <label for="withoutgrouping">Without Grouping</label>
                         <InputNumber id="withoutgrouping" v-model="value2" mode="decimal" :useGrouping="false" />
                     </div>
-                    <div class="p-field p-col-12 p-md-3">
+                    <div class="field col-12 md:col-3">
                         <label for="minmaxfraction">Min-Max Fraction Digits</label>
                         <InputNumber id="minmaxfraction" v-model="value3" mode="decimal" :minFractionDigits="2" :maxFractionDigits="5" />
                     </div>
-                    <div class="p-field p-col-12 p-md-3">
+                    <div class="field col-12 md:col-3">
                         <label for="minmax">Min-Max Boundaries</label>
                         <InputNumber id="minmax" v-model="value4" mode="decimal" :min="0" :max="100" />
                     </div>
 
-                    <div class="p-field p-col-12 p-md-3">
+                    <div class="field col-12 md:col-3">
                         <label for="locale-user">User Locale</label>
                         <InputNumber id="locale-user" v-model="value5" mode="decimal" :minFractionDigits="2" />
                     </div>
-                    <div class="p-field p-col-12 p-md-3">
+                    <div class="field col-12 md:col-3">
                         <label for="locale-us">United States Locale</label>
                         <InputNumber id="locale-us" v-model="value6" mode="decimal" locale="en-US" :minFractionDigits="2" />
                     </div>
-                    <div class="p-field p-col-12 p-md-3">
+                    <div class="field col-12 md:col-3">
                         <label for="locale-german">German Locale</label>
                         <InputNumber id="locale-german" v-model="value7" mode="decimal" locale="de-DE" :minFractionDigits="2"/>
                     </div>
-                    <div class="p-field p-col-12 p-md-3">
+                    <div class="field col-12 md:col-3">
                         <label for="locale-indian">Indian Locale</label>
                         <InputNumber id="locale-indian" v-model="value8" mode="decimal" locale="en-IN" :minFractionDigits="2" />
                     </div>
                 </div>
 
                 <h5>Currency</h5>
-                <div class="p-grid p-fluid">
-                    <div class="p-field p-col-12 p-md-3">
+                <div class="grid p-fluid">
+                    <div class="field col-12 md:col-3">
                         <label for="currency-us">United States</label>
                         <InputNumber id="currency-us" v-model="value9" mode="currency" currency="USD" locale="en-US" />
                     </div>
-                    <div class="p-field p-col-12 p-md-3">
+                    <div class="field col-12 md:col-3">
                         <label for="currency-germany">Germany</label>
                         <InputNumber id="currency-germany" v-model="value10" mode="currency" currency="EUR" locale="de-DE" />
                     </div>
-                    <div class="p-field p-col-12 p-md-3">
+                    <div class="field col-12 md:col-3">
                         <label for="currency-india">India</label>
                         <InputNumber id="currency-india" v-model="value11" mode="currency" currency="INR" currencyDisplay="code" locale="en-IN" />
                     </div>
-                    <div class="p-field p-col-12 p-md-3">
+                    <div class="field col-12 md:col-3">
                         <label for="currency-japan">Japan</label>
                         <InputNumber id="currency-japan" v-model="value12" mode="currency" currency="JPY" locale="jp-JP" />
                     </div>
                 </div>
 
                 <h5>Prefix and Suffix</h5>
-                <div class="p-grid p-fluid">
-                    <div class="p-field p-col-12 p-md-3">
+                <div class="grid p-fluid">
+                    <div class="field col-12 md:col-3">
                         <label for="mile">Mile</label>
                         <InputNumber id="mile" v-model="value13" suffix=" mi" />
                     </div>
-                    <div class="p-field p-col-12 p-md-3">
+                    <div class="field col-12 md:col-3">
                         <label for="percent">Percent</label>
                         <InputNumber id="percent" v-model="value14" prefix="%" />
                     </div>
-                    <div class="p-field p-col-12 p-md-3">
+                    <div class="field col-12 md:col-3">
                         <label for="expiry">Expiry</label>
                         <InputNumber id="expiry" v-model="value15" prefix="Expires in " suffix=" days" />
                     </div>
-                    <div class="p-field p-col-12 p-md-3">
+                    <div class="field col-12 md:col-3">
                         <label for="temperature">Temperature</label>
                         <InputNumber id="temperature" v-model="value16" prefix="↑ " suffix="℃" :min="0" :max="40" />
                     </div>
                 </div>
 
                 <h5>Buttons</h5>
-                <div class="p-grid p-fluid">
-                    <div class="p-field p-col-12 p-md-3">
+                <div class="grid p-fluid">
+                    <div class="field col-12 md:col-3">
                         <label for="stacked">Stacked</label>
                         <InputNumber id="stacked" v-model="value17" showButtons mode="currency" currency="USD" />
                     </div>
-                    <div class="p-field p-col-12 p-md-3">
+                    <div class="field col-12 md:col-3">
                         <label for="horizontal">Horizontal with Step</label>
                         <InputNumber id="horizontal" v-model="value18" showButtons buttonLayout="horizontal" :step="0.25"
                             decrementButtonClass="p-button-danger" incrementButtonClass="p-button-success" incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus" mode="currency" currency="EUR" />
                     </div>
-                    <div class="p-field p-col-12 p-md-3">
+                    <div class="field col-12 md:col-3">
                         <label for="minmax-buttons">Min-Max Boundaries</label>
                         <InputNumber id="minmax-buttons" v-model="value20" mode="decimal" showButtons :min="0" :max="100" />
                     </div>
                 </div>
 
-                <div class="p-field p-col-12 p-md-3">
+                <div class="field col-12 md:col-3">
                     <label for="vertical" style="display: block">Vertical</label>
                     <InputNumber id="vertical" v-model="value19" mode="decimal" showButtons buttonLayout="vertical" style="width:4rem"
                         decrementButtonClass="p-button-secondary" incrementButtonClass="p-button-secondary" incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus" />
diff --git a/src/views/inputnumber/InputNumberDoc.vue b/src/views/inputnumber/InputNumberDoc.vue
index 186c6283b..5c2c74c37 100755
--- a/src/views/inputnumber/InputNumberDoc.vue
+++ b/src/views/inputnumber/InputNumberDoc.vue
@@ -409,100 +409,100 @@ export default {
 <template>
     <div>
         <h5>Numerals</h5>
-        <div class="p-fluid p-grid p-formgrid">
-            <div class="p-field p-col-12 p-md-3">
+        <div class="p-fluid grid formgrid">
+            <div class="field col-12 md:col-3">
                 <label for="integeronly">Integer Only</label>
                 <InputNumber id="integeronly" v-model="value1" />
             </div>
-            <div class="p-field p-col-12 p-md-3">
+            <div class="field col-12 md:col-3">
                 <label for="withoutgrouping">Without Grouping</label>
                 <InputNumber id="withoutgrouping" v-model="value2" mode="decimal" :useGrouping="false" />
             </div>
-            <div class="p-field p-col-12 p-md-3">
+            <div class="field col-12 md:col-3">
                 <label for="minmaxfraction">Min-Max Fraction Digits</label>
                 <InputNumber id="minmaxfraction" v-model="value3" mode="decimal" :minFractionDigits="2" :maxFractionDigits="5" />
             </div>
-            <div class="p-field p-col-12 p-md-3">
+            <div class="field col-12 md:col-3">
                 <label for="minmax">Min-Max Boundaries</label>
                 <InputNumber id="minmax" v-model="value4" mode="decimal" :min="0" :max="100" />
             </div>
 
-            <div class="p-field p-col-12 p-md-3">
+            <div class="field col-12 md:col-3">
                 <label for="locale-user">User Locale</label>
                 <InputNumber id="locale-user" v-model="value5" mode="decimal" :minFractionDigits="2" />
             </div>
-            <div class="p-field p-col-12 p-md-3">
+            <div class="field col-12 md:col-3">
                 <label for="locale-us">United States Locale</label>
                 <InputNumber id="locale-us" v-model="value6" mode="decimal" locale="en-US" :minFractionDigits="2" />
             </div>
-            <div class="p-field p-col-12 p-md-3">
+            <div class="field col-12 md:col-3">
                 <label for="locale-german">German Locale</label>
                 <InputNumber id="locale-german" v-model="value7" mode="decimal" locale="de-DE" :minFractionDigits="2"/>
             </div>
-            <div class="p-field p-col-12 p-md-3">
+            <div class="field col-12 md:col-3">
                 <label for="locale-indian">Indian Locale</label>
                 <InputNumber id="locale-indian" v-model="value8" mode="decimal" locale="en-IN" :minFractionDigits="2" />
             </div>
         </div>
 
         <h5>Currency</h5>
-        <div class="p-grid p-fluid">
-            <div class="p-field p-col-12 p-md-3">
+        <div class="grid p-fluid">
+            <div class="field col-12 md:col-3">
                 <label for="currency-us">United States</label>
                 <InputNumber id="currency-us" v-model="value9" mode="currency" currency="USD" locale="en-US" />
             </div>
-            <div class="p-field p-col-12 p-md-3">
+            <div class="field col-12 md:col-3">
                 <label for="currency-germany">Germany</label>
                 <InputNumber id="currency-germany" v-model="value10" mode="currency" currency="EUR" locale="de-DE" />
             </div>
-            <div class="p-field p-col-12 p-md-3">
+            <div class="field col-12 md:col-3">
                 <label for="currency-india">India</label>
                 <InputNumber id="currency-india" v-model="value11" mode="currency" currency="INR" currencyDisplay="code" locale="en-IN" />
             </div>
-            <div class="p-field p-col-12 p-md-3">
+            <div class="field col-12 md:col-3">
                 <label for="currency-japan">Japan</label>
                 <InputNumber id="currency-japan" v-model="value12" mode="currency" currency="JPY" locale="jp-JP" />
             </div>
         </div>
 
         <h5>Prefix and Suffix</h5>
-        <div class="p-grid p-fluid">
-            <div class="p-field p-col-12 p-md-3">
+        <div class="grid p-fluid">
+            <div class="field col-12 md:col-3">
                 <label for="mile">Mile</label>
                 <InputNumber id="mile" v-model="value13" suffix=" mi" />
             </div>
-            <div class="p-field p-col-12 p-md-3">
+            <div class="field col-12 md:col-3">
                 <label for="percent">Percent</label>
                 <InputNumber id="percent" v-model="value14" prefix="%" />
             </div>
-            <div class="p-field p-col-12 p-md-3">
+            <div class="field col-12 md:col-3">
                 <label for="expiry">Expiry</label>
                 <InputNumber id="expiry" v-model="value15" prefix="Expires in " suffix=" days" />
             </div>
-            <div class="p-field p-col-12 p-md-3">
+            <div class="field col-12 md:col-3">
                 <label for="temperature">Temperature</label>
                 <InputNumber id="temperature" v-model="value16" prefix="↑ " suffix="℃" :min="0" :max="40" />
             </div>
         </div>
 
         <h5>Buttons</h5>
-        <div class="p-grid p-fluid">
-            <div class="p-field p-col-12 p-md-3">
+        <div class="grid p-fluid">
+            <div class="field col-12 md:col-3">
                 <label for="stacked">Stacked</label>
                 <InputNumber id="stacked" v-model="value17" showButtons mode="currency" currency="USD" />
             </div>
-            <div class="p-field p-col-12 p-md-3">
+            <div class="field col-12 md:col-3">
                 <label for="horizontal">Horizontal with Step</label>
                 <InputNumber id="horizontal" v-model="value18" showButtons buttonLayout="horizontal" :step="0.25"
                     decrementButtonClass="p-button-danger" incrementButtonClass="p-button-success" incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus" mode="currency" currency="EUR" />
             </div>
-            <div class="p-field p-col-12 p-md-3">
+            <div class="field col-12 md:col-3">
                 <label for="minmax-buttons">Min-Max Boundaries</label>
                 <InputNumber id="minmax-buttons" v-model="value20" mode="decimal" showButtons :min="0" :max="100" />
             </div>
         </div>
 
-        <div class="p-field p-col-12 p-md-3">
+        <div class="field col-12 md:col-3">
             <label for="vertical" style="display: block">Vertical</label>
             <InputNumber id="vertical" v-model="value19" mode="decimal" showButtons buttonLayout="vertical" style="width:4rem"
                 decrementButtonClass="p-button-secondary" incrementButtonClass="p-button-secondary" incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus" />
@@ -546,100 +546,100 @@ export default {
 <template>
     <div>
         <h5>Numerals</h5>
-        <div class="p-fluid p-grid p-formgrid">
-            <div class="p-field p-col-12 p-md-3">
+        <div class="p-fluid grid formgrid">
+            <div class="field col-12 md:col-3">
                 <label for="integeronly">Integer Only</label>
                 <InputNumber id="integeronly" v-model="value1" />
             </div>
-            <div class="p-field p-col-12 p-md-3">
+            <div class="field col-12 md:col-3">
                 <label for="withoutgrouping">Without Grouping</label>
                 <InputNumber id="withoutgrouping" v-model="value2" mode="decimal" :useGrouping="false" />
             </div>
-            <div class="p-field p-col-12 p-md-3">
+            <div class="field col-12 md:col-3">
                 <label for="minmaxfraction">Min-Max Fraction Digits</label>
                 <InputNumber id="minmaxfraction" v-model="value3" mode="decimal" :minFractionDigits="2" :maxFractionDigits="5" />
             </div>
-            <div class="p-field p-col-12 p-md-3">
+            <div class="field col-12 md:col-3">
                 <label for="minmax">Min-Max Boundaries</label>
                 <InputNumber id="minmax" v-model="value4" mode="decimal" :min="0" :max="100" />
             </div>
 
-            <div class="p-field p-col-12 p-md-3">
+            <div class="field col-12 md:col-3">
                 <label for="locale-user">User Locale</label>
                 <InputNumber id="locale-user" v-model="value5" mode="decimal" :minFractionDigits="2" />
             </div>
-            <div class="p-field p-col-12 p-md-3">
+            <div class="field col-12 md:col-3">
                 <label for="locale-us">United States Locale</label>
                 <InputNumber id="locale-us" v-model="value6" mode="decimal" locale="en-US" :minFractionDigits="2" />
             </div>
-            <div class="p-field p-col-12 p-md-3">
+            <div class="field col-12 md:col-3">
                 <label for="locale-german">German Locale</label>
                 <InputNumber id="locale-german" v-model="value7" mode="decimal" locale="de-DE" :minFractionDigits="2"/>
             </div>
-            <div class="p-field p-col-12 p-md-3">
+            <div class="field col-12 md:col-3">
                 <label for="locale-indian">Indian Locale</label>
                 <InputNumber id="locale-indian" v-model="value8" mode="decimal" locale="en-IN" :minFractionDigits="2" />
             </div>
         </div>
 
         <h5>Currency</h5>
-        <div class="p-grid p-fluid">
-            <div class="p-field p-col-12 p-md-3">
+        <div class="grid p-fluid">
+            <div class="field col-12 md:col-3">
                 <label for="currency-us">United States</label>
                 <InputNumber id="currency-us" v-model="value9" mode="currency" currency="USD" locale="en-US" />
             </div>
-            <div class="p-field p-col-12 p-md-3">
+            <div class="field col-12 md:col-3">
                 <label for="currency-germany">Germany</label>
                 <InputNumber id="currency-germany" v-model="value10" mode="currency" currency="EUR" locale="de-DE" />
             </div>
-            <div class="p-field p-col-12 p-md-3">
+            <div class="field col-12 md:col-3">
                 <label for="currency-india">India</label>
                 <InputNumber id="currency-india" v-model="value11" mode="currency" currency="INR" currencyDisplay="code" locale="en-IN" />
             </div>
-            <div class="p-field p-col-12 p-md-3">
+            <div class="field col-12 md:col-3">
                 <label for="currency-japan">Japan</label>
                 <InputNumber id="currency-japan" v-model="value12" mode="currency" currency="JPY" locale="jp-JP" />
             </div>
         </div>
 
         <h5>Prefix and Suffix</h5>
-        <div class="p-grid p-fluid">
-            <div class="p-field p-col-12 p-md-3">
+        <div class="grid p-fluid">
+            <div class="field col-12 md:col-3">
                 <label for="mile">Mile</label>
                 <InputNumber id="mile" v-model="value13" suffix=" mi" />
             </div>
-            <div class="p-field p-col-12 p-md-3">
+            <div class="field col-12 md:col-3">
                 <label for="percent">Percent</label>
                 <InputNumber id="percent" v-model="value14" prefix="%" />
             </div>
-            <div class="p-field p-col-12 p-md-3">
+            <div class="field col-12 md:col-3">
                 <label for="expiry">Expiry</label>
                 <InputNumber id="expiry" v-model="value15" prefix="Expires in " suffix=" days" />
             </div>
-            <div class="p-field p-col-12 p-md-3">
+            <div class="field col-12 md:col-3">
                 <label for="temperature">Temperature</label>
                 <InputNumber id="temperature" v-model="value16" prefix="↑ " suffix="℃" :min="0" :max="40" />
             </div>
         </div>
 
         <h5>Buttons</h5>
-        <div class="p-grid p-fluid">
-            <div class="p-field p-col-12 p-md-3">
+        <div class="grid p-fluid">
+            <div class="field col-12 md:col-3">
                 <label for="stacked">Stacked</label>
                 <InputNumber id="stacked" v-model="value17" showButtons mode="currency" currency="USD" />
             </div>
-            <div class="p-field p-col-12 p-md-3">
+            <div class="field col-12 md:col-3">
                 <label for="horizontal">Horizontal with Step</label>
                 <InputNumber id="horizontal" v-model="value18" showButtons buttonLayout="horizontal" :step="0.25"
                     decrementButtonClass="p-button-danger" incrementButtonClass="p-button-success" incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus" mode="currency" currency="EUR" />
             </div>
-            <div class="p-field p-col-12 p-md-3">
+            <div class="field col-12 md:col-3">
                 <label for="minmax-buttons">Min-Max Boundaries</label>
                 <InputNumber id="minmax-buttons" v-model="value20" mode="decimal" showButtons :min="0" :max="100" />
             </div>
         </div>
 
-        <div class="p-field p-col-12 p-md-3">
+        <div class="field col-12 md:col-3">
             <label for="vertical" style="display: block">Vertical</label>
             <InputNumber id="vertical" v-model="value19" mode="decimal" showButtons buttonLayout="vertical" style="width:4rem"
                 decrementButtonClass="p-button-secondary" incrementButtonClass="p-button-secondary" incrementButtonIcon="pi pi-plus" decrementButtonIcon="pi pi-minus" />
@@ -684,100 +684,100 @@ export default {
                     tabName: 'Browser Source',
                     content: `<div id="app">
             <h5>Numerals</h5>
-            <div class="p-fluid p-grid p-formgrid">
-                <div class="p-field p-col-12 p-md-3">
+            <div class="p-fluid grid formgrid">
+                <div class="field col-12 md:col-3">
                     <label for="integeronly">Integer Only</label>
                     <p-inputnumber id="integeronly" v-model="value1"></p-inputnumber>
                 </div>
-                <div class="p-field p-col-12 p-md-3">
+                <div class="field col-12 md:col-3">
                     <label for="withoutgrouping">Without Grouping</label>
                     <p-inputnumber id="withoutgrouping" v-model="value2" mode="decimal" :use-grouping="false"></p-inputnumber>
                 </div>
-                <div class="p-field p-col-12 p-md-3">
+                <div class="field col-12 md:col-3">
                     <label for="minmaxfraction">Min-Max Fraction Digits</label>
                     <p-inputnumber id="minmaxfraction" v-model="value3" mode="decimal" :min-fraction-digits="2" :max-fraction-digits="5"></p-inputnumber>
                 </div>
-                <div class="p-field p-col-12 p-md-3">
+                <div class="field col-12 md:col-3">
                     <label for="minmax">Min-Max Boundaries</label>
                     <p-inputnumber id="minmax" v-model="value4" mode="decimal" :min="0" :max="100"></p-inputnumber>
                 </div>
 
-                <div class="p-field p-col-12 p-md-3">
+                <div class="field col-12 md:col-3">
                     <label for="locale-user">User Locale</label>
                     <p-inputnumber id="locale-user" v-model="value5" mode="decimal" :min-fraction-digits="2"></p-inputnumber>
                 </div>
-                <div class="p-field p-col-12 p-md-3">
+                <div class="field col-12 md:col-3">
                     <label for="locale-us">United States Locale</label>
                     <p-inputnumber id="locale-us" v-model="value6" mode="decimal" locale="en-US" :min-fraction-digits="2"></p-inputnumber>
                 </div>
-                <div class="p-field p-col-12 p-md-3">
+                <div class="field col-12 md:col-3">
                     <label for="locale-german">German Locale</label>
                     <p-inputnumber id="locale-german" v-model="value7" mode="decimal" locale="de-DE" :min-fraction-digits="2"></p-inputnumber>
                 </div>
-                <div class="p-field p-col-12 p-md-3">
+                <div class="field col-12 md:col-3">
                     <label for="locale-indian">Indian Locale</label>
                     <p-inputnumber id="locale-indian" v-model="value8" mode="decimal" locale="en-IN" :min-fraction-digits="2"></p-inputnumber>
                 </div>
             </div>
 
             <h5>Currency</h5>
-            <div class="p-grid p-fluid">
-                <div class="p-field p-col-12 p-md-3">
+            <div class="grid p-fluid">
+                <div class="field col-12 md:col-3">
                     <label for="currency-us">United States</label>
                     <p-inputnumber id="currency-us" v-model="value9" mode="currency" currency="USD" locale="en-US"></p-inputnumber>
                 </div>
-                <div class="p-field p-col-12 p-md-3">
+                <div class="field col-12 md:col-3">
                     <label for="currency-germany">Germany</label>
                     <p-inputnumber id="currency-germany" v-model="value10" mode="currency" currency="EUR" locale="de-DE"></p-inputnumber>
                 </div>
-                <div class="p-field p-col-12 p-md-3">
+                <div class="field col-12 md:col-3">
                     <label for="currency-india">India</label>
                     <p-inputnumber id="currency-india" v-model="value11" mode="currency" currency="INR" currency-display="code" locale="en-IN"></p-inputnumber>
                 </div>
-                <div class="p-field p-col-12 p-md-3">
+                <div class="field col-12 md:col-3">
                     <label for="currency-japan">Japan</label>
                     <p-inputnumber id="currency-japan" v-model="value12" mode="currency" currency="JPY" locale="jp-JP"></p-inputnumber>
                 </div>
             </div>
 
             <h5>Prefix and Suffix</h5>
-            <div class="p-grid p-fluid">
-                <div class="p-field p-col-12 p-md-3">
+            <div class="grid p-fluid">
+                <div class="field col-12 md:col-3">
                     <label for="mile">Mile</label>
                     <p-inputnumber id="mile" v-model="value13" suffix=" mi"></p-inputnumber>
                 </div>
-                <div class="p-field p-col-12 p-md-3">
+                <div class="field col-12 md:col-3">
                     <label for="percent">Percent</label>
                     <p-inputnumber id="percent" v-model="value14" prefix="%"></p-inputnumber>
                 </div>
-                <div class="p-field p-col-12 p-md-3">
+                <div class="field col-12 md:col-3">
                     <label for="expiry">Expiry</label>
                     <p-inputnumber id="expiry" v-model="value15" prefix="Expires in " suffix=" days"></p-inputnumber>
                 </div>
-                <div class="p-field p-col-12 p-md-3">
+                <div class="field col-12 md:col-3">
                     <label for="temperature">Temperature</label>
                     <p-inputnumber id="temperature" v-model="value16" prefix="↑ " suffix="℃" :min="0" :max="40"></p-inputnumber>
                 </div>
             </div>
 
             <h5>Buttons</h5>
-            <div class="p-grid p-fluid">
-                <div class="p-field p-col-12 p-md-3">
+            <div class="grid p-fluid">
+                <div class="field col-12 md:col-3">
                     <label for="stacked">Stacked</label>
                     <p-inputnumber id="stacked" v-model="value17" show-buttons mode="currency" currency="USD"></p-inputnumber>
                 </div>
-                <div class="p-field p-col-12 p-md-3">
+                <div class="field col-12 md:col-3">
                     <label for="horizontal">Horizontal with Step</label>
                     <p-inputnumber id="horizontal" v-model="value18" show-buttons button-layout="horizontal" :step="0.25"
                         decrement-button-class="p-button-danger" increment-button-class="p-button-success" increment-button-icon="pi pi-plus" decrement-button-icon="pi pi-minus" mode="currency" currency="EUR"></p-inputnumber>
                 </div>
-                <div class="p-field p-col-12 p-md-3">
+                <div class="field col-12 md:col-3">
                     <label for="minmax-buttons">Min-Max Boundaries</label>
                     <p-inputnumber id="minmax-buttons" v-model="value20" mode="decimal" show-buttons :min="0" :max="100"></p-inputnumber>
                 </div>
             </div>
 
-            <div class="p-field p-col-12 p-md-3">
+            <div class="field col-12 md:col-3">
                 <label for="vertical" style="display: block">Vertical</label>
                 <p-inputnumber id="vertical" v-model="value19" mode="decimal" show-buttons button-layout="vertical" style="width:4rem"
                     decrement-button-class="p-button-secondary" increment-button-class="p-button-secondary" increment-button-icon="pi pi-plus" decrement-button-icon="pi pi-minus"></p-inputnumber>
diff --git a/src/views/inputtext/InputTextDemo.vue b/src/views/inputtext/InputTextDemo.vue
index fbf632b70..936535a08 100755
--- a/src/views/inputtext/InputTextDemo.vue
+++ b/src/views/inputtext/InputTextDemo.vue
@@ -33,14 +33,14 @@
                 </span>
 
                 <h5>Help Text</h5>
-                <div class="p-field">
+                <div class="field">
                     <label for="username1">Username</label>
                     <InputText id="username1" type="username" aria-describedby="username1-help" />
                     <small id="username1-help">Enter your username to reset your password.</small>
                 </div>
 
                 <h5>Invalid</h5>
-                <div class="p-field">
+                <div class="field">
                     <label for="username2">Username</label>
                     <InputText id="username2" type="username" aria-describedby="username2-help" class="p-invalid" />
                     <small id="username2-help" class="p-error">Username is not available.</small>
@@ -93,7 +93,7 @@ export default {
     }
 }
 
-.p-field * {
+.field * {
     display: block;
 }
 </style>
\ No newline at end of file
diff --git a/src/views/inputtext/InputTextDoc.vue b/src/views/inputtext/InputTextDoc.vue
index c6314db1c..30bab91f1 100755
--- a/src/views/inputtext/InputTextDoc.vue
+++ b/src/views/inputtext/InputTextDoc.vue
@@ -182,14 +182,14 @@ export default {
         </span>
 
         <h5>Help Text</h5>
-        <div class="p-field">
+        <div class="field">
             <label for="username1">Username</label>
             <InputText id="username1" type="username" aria-describedby="username1-help" />
             <small id="username1-help">Enter your username to reset your password.</small>
         </div>
 
         <h5>Invalid</h5>
-        <div class="p-field">
+        <div class="field">
             <label for="username2">Username</label>
             <InputText id="username2" type="username" aria-describedby="username2-help" class="p-invalid" />
             <small id="username2-help" class="p-error">Username is not available.</small>
@@ -233,7 +233,7 @@ export default {
     }
 }
 
-.p-field * {
+.field * {
     display: block;
 }
 </style>`
@@ -266,14 +266,14 @@ export default {
         </span>
 
         <h5>Help Text</h5>
-        <div class="p-field">
+        <div class="field">
             <label for="username1">Username</label>
             <InputText id="username1" type="username" aria-describedby="username1-help" />
             <small id="username1-help">Enter your username to reset your password.</small>
         </div>
 
         <h5>Invalid</h5>
-        <div class="p-field">
+        <div class="field">
             <label for="username2">Username</label>
             <InputText id="username2" type="username" aria-describedby="username2-help" class="p-invalid" />
             <small id="username2-help" class="p-error">Username is not available.</small>
@@ -319,7 +319,7 @@ export default {
     }
 }
 
-.p-field * {
+.field * {
     display: block;
 }
 </style>`
@@ -351,14 +351,14 @@ export default {
                 </span>
 
                 <h5>Help Text</h5>
-                <div class="p-field">
+                <div class="field">
                     <label for="username1">Username</label>
                     <p-inputtext id="username1" type="username" aria-describedby="username1-help"></p-inputtext>
                     <small id="username1-help">Enter your username to reset your password.</small>
                 </div>
 
                 <h5>Invalid</h5>
-                <div class="p-field">
+                <div class="field">
                     <label for="username2">Username</label>
                     <p-inputtext id="username2" type="username" aria-describedby="username2-help" class="p-invalid"></p-inputtext>
                     <small id="username2-help" class="p-error">Username is not available.</small>
@@ -409,7 +409,7 @@ export default {
                 margin-bottom: 0;
             }
 
-            .p-field * {
+            .field * {
                 display: block;
             }
         </style>`
diff --git a/src/views/invalid/InvalidDemo.vue b/src/views/invalid/InvalidDemo.vue
index a0d8d52d7..bb931e344 100644
--- a/src/views/invalid/InvalidDemo.vue
+++ b/src/views/invalid/InvalidDemo.vue
@@ -10,42 +10,42 @@
 
         <div class="content-section implementation">
             <div class="card">
-                <div class="p-fluid p-grid">
-                    <div class="p-field p-col-12 p-md-4">
+                <div class="p-fluid grid">
+                    <div class="field col-12 md:col-4">
                         <InputText id="inputtext" type="text" v-model="value1" placeholder="InputText" class="p-invalid" />
                     </div>
-                    <div class="p-field p-col-12 p-md-4">
+                    <div class="field col-12 md:col-4">
                         <AutoComplete v-model="value2" :suggestions="filteredCountries" @complete="searchCountry($event)" field="name" placeholder="AutoComplete" class="p-invalid" />
                     </div>
-                    <div class="p-field p-col-12 p-md-4">
+                    <div class="field col-12 md:col-4">
                         <Calendar id="calendar" v-model="value3" placeholder="Calendar" class="p-invalid" :showIcon="true" />
                     </div>
-                    <div class="p-field p-col-12 p-md-4">
+                    <div class="field col-12 md:col-4">
                         <Chips id="chips" v-model="value4" placeholder="Chips" class="p-invalid" />
                     </div>
-                    <div class="p-field p-col-12 p-md-4">
+                    <div class="field col-12 md:col-4">
                         <InputMask id="inputmask" v-model="value5" mask="99/99/9999" slotChar="mm/dd/yyyy" placeholder="InputMask" class="p-invalid" />
                     </div>
-                    <div class="p-field p-col-12 p-md-4">
+                    <div class="field col-12 md:col-4">
                         <InputNumber id="inputnumber" v-model="value6" placeholder="InputNumber" class="p-invalid" />
                     </div>
-                    <div class="p-field p-col-12 p-md-4">
+                    <div class="field col-12 md:col-4">
                         <CascadeSelect v-model="selectedCity" :options="cascadeCountries" optionLabel="cname" optionGroupLabel="name"
                             :optionGroupChildren="['states', 'cities']" placeholder="CascadeSelect" class="p-invalid" />
                     </div>
-                    <div class="p-field p-col-12 p-md-4">
+                    <div class="field col-12 md:col-4">
                         <Dropdown id="dropdown" v-model="value7" :options="cities" optionLabel="name" placeholder="Dropdown" class="p-invalid" />
                     </div>
-                    <div class="p-field p-col-12 p-md-4">
+                    <div class="field col-12 md:col-4">
                         <MultiSelect id="multiselect" v-model="value8" :options="cities" optionLabel="name" placeholder="MultiSelect" class="p-invalid" />
                     </div>
-                    <div class="p-field p-col-12 p-md-4">
+                    <div class="field col-12 md:col-4">
                         <TreeSelect id="treeselect" v-model="selectedNode" :options="nodes" placeholder="TreeSelect" class="p-invalid"></TreeSelect>
                     </div>
-                    <div class="p-field p-col-12 p-md-4">
+                    <div class="field col-12 md:col-4">
                         <Password id="password" v-model="value10" placeholder="Password" class="p-invalid" />
                     </div>
-                    <div class="p-field p-col-12 p-md-4">
+                    <div class="field col-12 md:col-4">
                         <Textarea id="textarea" v-model="value9" rows="3" placeholder="Textarea" class="p-invalid" />
                     </div>
                 </div>
@@ -167,42 +167,42 @@ export default {
                     content: `
 <template>
     <div>
-        <div class="p-fluid p-grid">
-            <div class="p-field p-col-12 p-md-4">
+        <div class="p-fluid grid">
+            <div class="field col-12 md:col-4">
                 <InputText id="inputtext" type="text" v-model="value1" placeholder="InputText" class="p-invalid" />
             </div>
-            <div class="p-field p-col-12 p-md-4">
+            <div class="field col-12 md:col-4">
                 <AutoComplete v-model="value2" :suggestions="filteredCountries" @complete="searchCountry($event)" field="name" placeholder="AutoComplete" class="p-invalid" />
             </div>
-            <div class="p-field p-col-12 p-md-4">
+            <div class="field col-12 md:col-4">
                 <Calendar id="calendar" v-model="value3" placeholder="Calendar" class="p-invalid" :showIcon="true" />
             </div>
-            <div class="p-field p-col-12 p-md-4">
+            <div class="field col-12 md:col-4">
                 <Chips id="chips" v-model="value4" placeholder="Chips" class="p-invalid" />
             </div>
-            <div class="p-field p-col-12 p-md-4">
+            <div class="field col-12 md:col-4">
                 <InputMask id="inputmask" v-model="value5" mask="99/99/9999" slotChar="mm/dd/yyyy" placeholder="InputMask" class="p-invalid" />
             </div>
-            <div class="p-field p-col-12 p-md-4">
+            <div class="field col-12 md:col-4">
                 <InputNumber id="inputnumber" v-model="value6" placeholder="InputNumber" class="p-invalid" />
             </div>
-            <div class="p-field p-col-12 p-md-4">
+            <div class="field col-12 md:col-4">
                 <CascadeSelect v-model="selectedCity" :options="cascadeCountries" optionLabel="cname" optionGroupLabel="name"
                     :optionGroupChildren="['states', 'cities']" placeholder="CascadeSelect" class="p-invalid" />
             </div>
-            <div class="p-field p-col-12 p-md-4">
+            <div class="field col-12 md:col-4">
                 <Dropdown id="dropdown" v-model="value7" :options="cities" optionLabel="name" placeholder="Dropdown" class="p-invalid" />
             </div>
-            <div class="p-field p-col-12 p-md-4">
+            <div class="field col-12 md:col-4">
                 <MultiSelect id="multiselect" v-model="value8" :options="cities" optionLabel="name" placeholder="MultiSelect" class="p-invalid" />
             </div>
-            <div class="p-field p-col-12 p-md-4">
+            <div class="field col-12 md:col-4">
                 <TreeSelect id="treeselect" v-model="selectedNode" :options="nodes" placeholder="TreeSelect" class="p-invalid"></TreeSelect>
             </div>
-            <div class="p-field p-col-12 p-md-4">
+            <div class="field col-12 md:col-4">
                 <Password id="password" v-model="value10" placeholder="Password" class="p-invalid" />
             </div>
-            <div class="p-field p-col-12 p-md-4">
+            <div class="field col-12 md:col-4">
                 <Textarea id="textarea" v-model="value9" rows="3" placeholder="Textarea" class="p-invalid" />
             </div>
         </div>
@@ -349,42 +349,42 @@ export default {
                     content: `
 <template>
     <div>
-        <div class="p-fluid p-grid">
-            <div class="p-field p-col-12 p-md-4">
+        <div class="p-fluid grid">
+            <div class="field col-12 md:col-4">
                 <InputText id="inputtext" type="text" v-model="value1" placeholder="InputText" class="p-invalid" />
             </div>
-            <div class="p-field p-col-12 p-md-4">
+            <div class="field col-12 md:col-4">
                 <AutoComplete v-model="value2" :suggestions="filteredCountries" @complete="searchCountry($event)" field="name" placeholder="AutoComplete" class="p-invalid" />
             </div>
-            <div class="p-field p-col-12 p-md-4">
+            <div class="field col-12 md:col-4">
                 <Calendar id="calendar" v-model="value3" placeholder="Calendar" class="p-invalid" :showIcon="true" />
             </div>
-            <div class="p-field p-col-12 p-md-4">
+            <div class="field col-12 md:col-4">
                 <Chips id="chips" v-model="value4" placeholder="Chips" class="p-invalid" />
             </div>
-            <div class="p-field p-col-12 p-md-4">
+            <div class="field col-12 md:col-4">
                 <InputMask id="inputmask" v-model="value5" mask="99/99/9999" slotChar="mm/dd/yyyy" placeholder="InputMask" class="p-invalid" />
             </div>
-            <div class="p-field p-col-12 p-md-4">
+            <div class="field col-12 md:col-4">
                 <InputNumber id="inputnumber" v-model="value6" placeholder="InputNumber" class="p-invalid" />
             </div>
-            <div class="p-field p-col-12 p-md-4">
+            <div class="field col-12 md:col-4">
                 <CascadeSelect v-model="selectedCity" :options="cascadeCountries" optionLabel="cname" optionGroupLabel="name"
                     :optionGroupChildren="['states', 'cities']" placeholder="CascadeSelect" class="p-invalid" />
             </div>
-            <div class="p-field p-col-12 p-md-4">
+            <div class="field col-12 md:col-4">
                 <Dropdown id="dropdown" v-model="value7" :options="cities" optionLabel="name" placeholder="Dropdown" class="p-invalid" />
             </div>
-            <div class="p-field p-col-12 p-md-4">
+            <div class="field col-12 md:col-4">
                 <MultiSelect id="multiselect" v-model="value8" :options="cities" optionLabel="name" placeholder="MultiSelect" class="p-invalid" />
             </div>
-            <div class="p-field p-col-12 p-md-4">
+            <div class="field col-12 md:col-4">
                 <TreeSelect id="treeselect" v-model="selectedNode" :options="nodes" placeholder="TreeSelect" class="p-invalid"></TreeSelect>
             </div>
-            <div class="p-field p-col-12 p-md-4">
+            <div class="field col-12 md:col-4">
                 <Password id="password" v-model="value10" placeholder="Password" class="p-invalid" />
             </div>
-            <div class="p-field p-col-12 p-md-4">
+            <div class="field col-12 md:col-4">
                 <Textarea id="textarea" v-model="value9" rows="3" placeholder="Textarea" class="p-invalid" />
             </div>
         </div>
@@ -538,42 +538,42 @@ export default {
         <script src="./CountryService.js"><\\/script>
         <script src="./NodeService.js"><\\/script>`,
                     content: `<div id="app">
-            <div class="p-fluid p-grid">
-                <div class="p-field p-col-12 p-md-4">
+            <div class="p-fluid grid">
+                <div class="field col-12 md:col-4">
                     <p-inputtext id="inputtext" type="text" v-model="value1" placeholder="InputText" class="p-invalid"></p-inputtext>
                 </div>
-                <div class="p-field p-col-12 p-md-4">
+                <div class="field col-12 md:col-4">
                     <p-autocomplete v-model="value2" :suggestions="filteredCountries" @complete="searchCountry($event)" field="name" placeholder="AutoComplete" class="p-invalid"></p-autocomplete>
                 </div>
-                <div class="p-field p-col-12 p-md-4">
+                <div class="field col-12 md:col-4">
                     <p-calendar id="calendar" v-model="value3" placeholder="Calendar" class="p-invalid" :show-icon="true"></p-calendar>
                 </div>
-                <div class="p-field p-col-12 p-md-4">
+                <div class="field col-12 md:col-4">
                     <p-chips id="chips" v-model="value4" placeholder="Chips" class="p-invalid"></p-chips>
                 </div>
-                <div class="p-field p-col-12 p-md-4">
+                <div class="field col-12 md:col-4">
                     <p-inputmask id="inputmask" v-model="value5" mask="99/99/9999" slot-char="mm/dd/yyyy" placeholder="InputMask" class="p-invalid"></p-inputmask>
                 </div>
-                <div class="p-field p-col-12 p-md-4">
+                <div class="field col-12 md:col-4">
                     <p-inputnumber id="inputnumber" v-model="value6" placeholder="InputNumber" class="p-invalid"></p-inputnumber>
                 </div>
-                <div class="p-field p-col-12 p-md-4">
+                <div class="field col-12 md:col-4">
                     <p-cascadeselect v-model="selectedCity" :options="cascadeCountries" option-label="cname" option-group-label="name"
                         :option-group-children="['states', 'cities']" placeholder="CascadeSelect" class="p-invalid"></p-cascadeselect>
                 </div>
-                <div class="p-field p-col-12 p-md-4">
+                <div class="field col-12 md:col-4">
                     <p-dropdown id="dropdown" v-model="value7" :options="cities" option-label="name" placeholder="Dropdown" class="p-invalid"></p-dropdown>
                 </div>
-                <div class="p-field p-col-12 p-md-4">
+                <div class="field col-12 md:col-4">
                     <p-multiselect id="multiselect" v-model="value8" :options="cities" option-label="name" placeholder="MultiSelect" class="p-invalid"></p-multiselect>
                 </div>
-                <div class="p-field p-col-12 p-md-4">
+                <div class="field col-12 md:col-4">
                     <p-treeselect id="treeselect" v-model="selectedNode" :options="nodes" placeholder="TreeSelect" class="p-invalid"></p-treeselect>
                 </div>
-                <div class="p-field p-col-12 p-md-4">
+                <div class="field col-12 md:col-4">
                     <p-password id="password" v-model="value10" placeholder="Password" class="p-invalid"></p-password>
                 </div>
-                <div class="p-field p-col-12 p-md-4">
+                <div class="field col-12 md:col-4">
                     <p-textarea id="textarea" v-model="value9" rows="3" placeholder="Textarea" class="p-invalid"></p-textarea>
                 </div>
             </div>
diff --git a/src/views/knob/KnobDemo.vue b/src/views/knob/KnobDemo.vue
index 6705c93db..6c3834cea 100644
--- a/src/views/knob/KnobDemo.vue
+++ b/src/views/knob/KnobDemo.vue
@@ -10,41 +10,41 @@
 
         <div class="content-section implementation">
             <div class="card">
-                <div class="p-grid p-formgrid p-text-center">
-                    <div class="p-field p-col-12 p-md-4">
+                <div class="grid formgrid text-center">
+                    <div class="field col-12 md:col-4">
                         <h5>Basic</h5>
                         <Knob v-model="value1" />
                     </div>
-                    <div class="p-field p-col-12 p-md-4">
+                    <div class="field col-12 md:col-4">
                         <h5>Readonly</h5>
                         <Knob v-model="value2" readonly />
                     </div>
-                     <div class="p-field p-col-12 p-md-4">
-                         <h5>Disabled</h5>
+                    <div class="field col-12 md:col-4">
+                        <h5>Disabled</h5>
                         <Knob v-model="value3" disabled />
                     </div>
-                    <div class="p-field p-col-12 p-md-4">
-                        <h5 class="p-mt-3">Min/Max</h5>
+                    <div class="field col-12 md:col-4">
+                        <h5 class="mt-3">Min/Max</h5>
                         <Knob v-model="value4" :min="-50" :max="50" />
                     </div>
-                    <div class="p-field p-col-12 p-md-4">
-                        <h5 class="p-mt-3">Step</h5>
+                    <div class="field col-12 md:col-4">
+                        <h5 class="mt-3">Step</h5>
                         <Knob v-model="value5" :step="10" />
                     </div>
-                    <div class="p-field p-col-12 p-md-4">
-                         <h5 class="p-mt-3">Template</h5>
+                    <div class="field col-12 md:col-4">
+                        <h5 class="mt-3">Template</h5>
                         <Knob v-model="value6" valueTemplate="{value}%" />
                     </div>
-                    <div class="p-field p-col-12 p-md-4">
-                        <h5 class="p-mt-3">Stroke</h5>
+                    <div class="field col-12 md:col-4">
+                        <h5 class="mt-3">Stroke</h5>
                         <Knob v-model="value7" :strokeWidth="5" />
                     </div>
-                    <div class="p-field p-col-12 p-md-4">
-                        <h5 class="p-mt-3">Size</h5>
+                    <div class="field col-12 md:col-4">
+                        <h5 class="mt-3">Size</h5>
                         <Knob v-model="value8" :size="200"/>
                     </div>
-                    <div class="p-field p-col-12 p-md-4">
-                        <h5 class="p-mt-3">Color</h5>
+                    <div class="field col-12 md:col-4">
+                        <h5 class="mt-3">Color</h5>
                         <Knob v-model="value9" valueColor="SlateGray" rangeColor="MediumTurquoise"  />
                     </div>
                 </div>
diff --git a/src/views/knob/KnobDoc.vue b/src/views/knob/KnobDoc.vue
index 37d7f924f..97bb5286a 100644
--- a/src/views/knob/KnobDoc.vue
+++ b/src/views/knob/KnobDoc.vue
@@ -222,41 +222,41 @@ export default {
                     content: `
 <template>
     <div>
-        <div class="p-grid p-formgrid p-text-center">
-            <div class="p-field p-col-12 p-md-4">
+        <div class="grid formgrid text-center">
+            <div class="field col-12 md:col-4">
                 <h5>Basic</h5>
                 <Knob v-model="value1" />
             </div>
-            <div class="p-field p-col-12 p-md-4">
+            <div class="field col-12 md:col-4">
                 <h5>Readonly</h5>
                 <Knob v-model="value2" readonly />
             </div>
-             <div class="p-field p-col-12 p-md-4">
-                 <h5>Disabled</h5>
+            <div class="field col-12 md:col-4">
+                <h5>Disabled</h5>
                 <Knob v-model="value3" disabled />
             </div>
-            <div class="p-field p-col-12 p-md-4">
-                <h5 class="p-mt-3">Min/Max</h5>
+            <div class="field col-12 md:col-4">
+                <h5 class="mt-3">Min/Max</h5>
                 <Knob v-model="value4" :min="-50" :max="50" />
             </div>
-            <div class="p-field p-col-12 p-md-4">
-                <h5 class="p-mt-3">Step</h5>
+            <div class="field col-12 md:col-4">
+                <h5 class="mt-3">Step</h5>
                 <Knob v-model="value5" :step="10" />
             </div>
-            <div class="p-field p-col-12 p-md-4">
-                 <h5 class="p-mt-3">Template</h5>
+            <div class="field col-12 md:col-4">
+                <h5 class="mt-3">Template</h5>
                 <Knob v-model="value6" valueTemplate="{value}%" />
             </div>
-            <div class="p-field p-col-12 p-md-4">
-                <h5 class="p-mt-3">Stroke</h5>
+            <div class="field col-12 md:col-4">
+                <h5 class="mt-3">Stroke</h5>
                 <Knob v-model="value7" :strokeWidth="5" />
             </div>
-            <div class="p-field p-col-12 p-md-4">
-                <h5 class="p-mt-3">Size</h5>
+            <div class="field col-12 md:col-4">
+                <h5 class="mt-3">Size</h5>
                 <Knob v-model="value8" :size="200"/>
             </div>
-            <div class="p-field p-col-12 p-md-4">
-                <h5 class="p-mt-3">Color</h5>
+            <div class="field col-12 md:col-4">
+                <h5 class="mt-3">Color</h5>
                 <Knob v-model="value9" valueColor="SlateGray" rangeColor="MediumTurquoise"  />
             </div>
         </div>
@@ -287,41 +287,41 @@ export default {
                     content: `
 <template>
     <div>
-        <div class="p-grid p-formgrid p-text-center">
-            <div class="p-field p-col-12 p-md-4">
+        <div class="grid formgrid text-center">
+            <div class="field col-12 md:col-4">
                 <h5>Basic</h5>
                 <Knob v-model="value1" />
             </div>
-            <div class="p-field p-col-12 p-md-4">
+            <div class="field col-12 md:col-4">
                 <h5>Readonly</h5>
                 <Knob v-model="value2" readonly />
             </div>
-             <div class="p-field p-col-12 p-md-4">
-                 <h5>Disabled</h5>
+            <div class="field col-12 md:col-4">
+                <h5>Disabled</h5>
                 <Knob v-model="value3" disabled />
             </div>
-            <div class="p-field p-col-12 p-md-4">
-                <h5 class="p-mt-3">Min/Max</h5>
+            <div class="field col-12 md:col-4">
+                <h5 class="mt-3">Min/Max</h5>
                 <Knob v-model="value4" :min="-50" :max="50" />
             </div>
-            <div class="p-field p-col-12 p-md-4">
-                <h5 class="p-mt-3">Step</h5>
+            <div class="field col-12 md:col-4">
+                <h5 class="mt-3">Step</h5>
                 <Knob v-model="value5" :step="10" />
             </div>
-            <div class="p-field p-col-12 p-md-4">
-                 <h5 class="p-mt-3">Template</h5>
+            <div class="field col-12 md:col-4">
+                <h5 class="mt-3">Template</h5>
                 <Knob v-model="value6" valueTemplate="{value}%" />
             </div>
-            <div class="p-field p-col-12 p-md-4">
-                <h5 class="p-mt-3">Stroke</h5>
+            <div class="field col-12 md:col-4">
+                <h5 class="mt-3">Stroke</h5>
                 <Knob v-model="value7" :strokeWidth="5" />
             </div>
-            <div class="p-field p-col-12 p-md-4">
-                <h5 class="p-mt-3">Size</h5>
+            <div class="field col-12 md:col-4">
+                <h5 class="mt-3">Size</h5>
                 <Knob v-model="value8" :size="200"/>
             </div>
-            <div class="p-field p-col-12 p-md-4">
-                <h5 class="p-mt-3">Color</h5>
+            <div class="field col-12 md:col-4">
+                <h5 class="mt-3">Color</h5>
                 <Knob v-model="value9" valueColor="SlateGray" rangeColor="MediumTurquoise"  />
             </div>
         </div>
@@ -352,41 +352,41 @@ export default {
                     tabName: 'Browser Source',
                     imports: `<script src="https://unpkg.com/primevue@^3/knob/knob.min.js"><\\/script>`,
                     content: `<div id="app">
-            <div class="p-grid p-formgrid p-text-center">
-                <div class="p-field p-col-12 p-md-4">
+            <div class="grid formgrid text-center">
+                <div class="field col-12 md:col-4">
                     <h5>Basic</h5>
                     <p-knob v-model="value1"></p-knob>
                 </div>
-                <div class="p-field p-col-12 p-md-4">
+                <div class="field col-12 md:col-4">
                     <h5>Readonly</h5>
                     <p-knob v-model="value2" readonly></p-knob>
                 </div>
-                <div class="p-field p-col-12 p-md-4">
+                <div class="field col-12 md:col-4">
                     <h5>Disabled</h5>
                     <p-knob v-model="value3" disabled></p-knob>
                 </div>
-                <div class="p-field p-col-12 p-md-4">
-                    <h5 class="p-mt-3">Min/Max</h5>
+                <div class="field col-12 md:col-4">
+                    <h5 class="mt-3">Min/Max</h5>
                     <p-knob v-model="value4" :min="-50" :max="50"></p-knob>
                 </div>
-                <div class="p-field p-col-12 p-md-4">
-                    <h5 class="p-mt-3">Step</h5>
+                <div class="field col-12 md:col-4">
+                    <h5 class="mt-3">Step</h5>
                     <p-knob v-model="value5" :step="10"></p-knob>
                 </div>
-                <div class="p-field p-col-12 p-md-4">
-                    <h5 class="p-mt-3">Template</h5>
+                <div class="field col-12 md:col-4">
+                    <h5 class="mt-3">Template</h5>
                     <p-knob v-model="value6" value-template="{value}%"></p-knob>
                 </div>
-                <div class="p-field p-col-12 p-md-4">
-                    <h5 class="p-mt-3">Stroke</h5>
+                <div class="field col-12 md:col-4">
+                    <h5 class="mt-3">Stroke</h5>
                     <p-knob v-model="value7" :stroke-width="5"></p-knob>
                 </div>
-                <div class="p-field p-col-12 p-md-4">
-                    <h5 class="p-mt-3">Size</h5>
+                <div class="field col-12 md:col-4">
+                    <h5 class="mt-3">Size</h5>
                     <p-knob v-model="value8" :size="200"></p-knob>
                 </div>
-                <div class="p-field p-col-12 p-md-4">
-                    <h5 class="p-mt-3">Color</h5>
+                <div class="field col-12 md:col-4">
+                    <h5 class="mt-3">Color</h5>
                     <p-knob v-model="value9" value-color="SlateGray" range-color="MediumTurquoise"></p-knob>
                 </div>
             </div>
diff --git a/src/views/listbox/ListboxDemo.vue b/src/views/listbox/ListboxDemo.vue
index d4d281890..5f5e349f5 100755
--- a/src/views/listbox/ListboxDemo.vue
+++ b/src/views/listbox/ListboxDemo.vue
@@ -16,7 +16,7 @@
                 <h5>Grouped</h5>
                 <Listbox v-model="selectedGroupedCity" :options="groupedCities" optionLabel="label" style="width:15rem" optionGroupLabel="label" optionGroupChildren="items" listStyle="max-height:250px">
                     <template #optiongroup="slotProps">
-                        <div class="p-d-flex p-ai-center country-item">
+                        <div class="flex align-items-center country-item">
                             <img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" width="18" />
                             <div>{{slotProps.option.label}}</div>
                         </div>
diff --git a/src/views/listbox/ListboxDoc.vue b/src/views/listbox/ListboxDoc.vue
index b46bb3f19..bd53f09b5 100755
--- a/src/views/listbox/ListboxDoc.vue
+++ b/src/views/listbox/ListboxDoc.vue
@@ -389,8 +389,8 @@ export default {
         <h5>Grouped</h5>
         <Listbox v-model="selectedGroupedCity" :options="groupedCities" optionLabel="label" style="width:15rem" optionGroupLabel="label" optionGroupChildren="items" listStyle="max-height:250px">
             <template #optiongroup="slotProps">
-                <div class="p-d-flex p-ai-center country-item">
-                    <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="18" class="p-mr-2" />
+                <div class="flex align-items-center country-item">
+                    <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="18" class="mr-2" />
                     <div>{{slotProps.option.label}}</div>
                 </div>
             </template>
@@ -400,7 +400,7 @@ export default {
         <Listbox v-model="selectedCountries" :options="countries" :multiple="true" :filter="true" optionLabel="name" listStyle="max-height:250px" style="width:15rem" filterPlaceholder="Search">
             <template #option="slotProps">
                 <div class="country-item">
-                    <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="18" class="p-mr-2" />
+                    <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="18" class="mr-2" />
                     <div>{{slotProps.option.name}}</div>
                 </div>
             </template>
@@ -483,8 +483,8 @@ export default {
         <h5>Grouped</h5>
         <Listbox v-model="selectedGroupedCity" :options="groupedCities" optionLabel="label" style="width:15rem" optionGroupLabel="label" optionGroupChildren="items" listStyle="max-height:250px">
             <template #optiongroup="slotProps">
-                <div class="p-d-flex p-ai-center country-item">
-                    <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="18" class="p-mr-2" />
+                <div class="flex align-items-center country-item">
+                    <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="18" class="mr-2" />
                     <div>{{slotProps.option.label}}</div>
                 </div>
             </template>
@@ -494,7 +494,7 @@ export default {
        <Listbox v-model="selectedCountries" :options="countries" :multiple="true" :filter="true" optionLabel="name" listStyle="max-height:250px" style="width:15rem" filterPlaceholder="Search">
            <template #option="slotProps">
                <div class="country-item">
-                   <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="18" class="p-mr-2" />
+                   <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="18" class="mr-2" />
                    <div>{{slotProps.option.name}}</div>
                </div>
            </template>
@@ -581,8 +581,8 @@ export default {
             <h5>Grouped</h5>
             <p-listbox v-model="selectedGroupedCity" :options="groupedCities" option-label="label" style="width:15rem" option-group-label="label" option-group-children="items" list-style="max-height:250px">
                 <template #optiongroup="slotProps">
-                    <div class="p-d-flex p-ai-center country-item">
-                        <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="18" class="p-mr-2" />
+                    <div class="flex align-items-center country-item">
+                        <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="18" class="mr-2" />
                         <div>{{slotProps.option.label}}</div>
                     </div>
                 </template>
@@ -592,7 +592,7 @@ export default {
         <p-listbox v-model="selectedCountries" :options="countries" :multiple="true" :filter="true" option-label="name" list-style="max-height:250px" style="width:15rem" filter-placeholder="Search">
             <template #option="slotProps">
                 <div class="country-item">
-                    <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="18" class="p-mr-2" />
+                    <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" width="18" class="mr-2" />
                     <div>{{slotProps.option.name}}</div>
                 </div>
             </template>
diff --git a/src/views/liveeditor/LiveEditor.vue b/src/views/liveeditor/LiveEditor.vue
index e1fab384f..d3447d6e5 100644
--- a/src/views/liveeditor/LiveEditor.vue
+++ b/src/views/liveeditor/LiveEditor.vue
@@ -1,5 +1,5 @@
 <template>
-    <span v-if="showEditor" class="p-d-flex p-jc-end">
+    <span v-if="showEditor" class="flex justify-content-end">
         <SplitButton :model="items" label="Edit in CodeSandbox" class="liveEditorSplitButton" @click="openDefaultCSB" v-show="false"/>
     </span>
 </template>
@@ -301,7 +301,6 @@ export default {
                     }
                 }
             }
-             
 
             return {
                 files: {
@@ -418,7 +417,7 @@ export default {
         <!-- PrimeVue -->
         <link href="https://unpkg.com/primevue@^3/resources/themes/lara-light-indigo/theme.css" rel="stylesheet" />
         <link href="https://unpkg.com/primevue@^3/resources/primevue.min.css" rel="stylesheet" />
-        <link href="https://unpkg.com/primeflex@2.0.0/primeflex.min.css" rel="stylesheet" />
+        <link href="https://unpkg.com/primeflex@^3/primeflex.min.css" rel="stylesheet" />
         <link href="https://unpkg.com/primeicons/primeicons.css" rel="stylesheet" />
 
         <!-- Dependencies -->
diff --git a/src/views/menubar/MenubarDemo.vue b/src/views/menubar/MenubarDemo.vue
index 8b7bf35ae..8c25aef2d 100755
--- a/src/views/menubar/MenubarDemo.vue
+++ b/src/views/menubar/MenubarDemo.vue
@@ -12,7 +12,7 @@
             <div class="card">
                 <Menubar :model="items">
                     <template #start>
-                        <img alt="logo" src="../../assets/images/logo.svg" height="40" class="p-mr-2">
+                        <img alt="logo" src="../../assets/images/logo.svg" height="40" class="mr-2">
                     </template>
                     <template #end>
                         <InputText placeholder="Search" type="text" />
@@ -33,132 +33,129 @@ export default {
         return {
             items: [
                 {
-                   label:'File',
-                   icon:'pi pi-fw pi-file',
-                   items:[
-                      {
-                         label:'New',
-                         icon:'pi pi-fw pi-plus',
-                         items:[
-                            {
-                               label:'Bookmark',
-                               icon:'pi pi-fw pi-bookmark'
-                            },
-                            {
-                               label:'Video',
-                               icon:'pi pi-fw pi-video'
-                            },
-
-                         ]
-                      },
-                      {
-                         label:'Delete',
-                         icon:'pi pi-fw pi-trash'
-                      },
-                      {
-                         separator:true
-                      },
-                      {
-                         label:'Export',
-                         icon:'pi pi-fw pi-external-link'
-                      }
-                   ]
+                    label:'File',
+                    icon:'pi pi-fw pi-file',
+                    items:[
+                        {
+                            label:'New',
+                            icon:'pi pi-fw pi-plus',
+                            items:[
+                                {
+                                    label:'Bookmark',
+                                    icon:'pi pi-fw pi-bookmark'
+                                },
+                                {
+                                    label:'Video',
+                                    icon:'pi pi-fw pi-video'
+                                }
+                            ]
+                        },
+                        {
+                            label:'Delete',
+                            icon:'pi pi-fw pi-trash'
+                        },
+                        {
+                            separator:true
+                        },
+                        {
+                            label:'Export',
+                            icon:'pi pi-fw pi-external-link'
+                        }
+                    ]
                 },
                 {
-                   label:'Edit',
-                   icon:'pi pi-fw pi-pencil',
-                   items:[
-                      {
-                         label:'Left',
-                         icon:'pi pi-fw pi-align-left'
-                      },
-                      {
-                         label:'Right',
-                         icon:'pi pi-fw pi-align-right'
-                      },
-                      {
-                         label:'Center',
-                         icon:'pi pi-fw pi-align-center'
-                      },
-                      {
-                         label:'Justify',
-                         icon:'pi pi-fw pi-align-justify'
-                      },
-
-                   ]
+                    label:'Edit',
+                    icon:'pi pi-fw pi-pencil',
+                    items:[
+                        {
+                            label:'Left',
+                            icon:'pi pi-fw pi-align-left'
+                        },
+                        {
+                            label:'Right',
+                            icon:'pi pi-fw pi-align-right'
+                        },
+                        {
+                            label:'Center',
+                            icon:'pi pi-fw pi-align-center'
+                        },
+                        {
+                            label:'Justify',
+                            icon:'pi pi-fw pi-align-justify'
+                        }
+                    ]
                 },
                 {
-                   label:'Users',
-                   icon:'pi pi-fw pi-user',
-                   items:[
-                      {
-                         label:'New',
-                         icon:'pi pi-fw pi-user-plus',
+                    label:'Users',
+                    icon:'pi pi-fw pi-user',
+                    items:[
+                        {
+                            label:'New',
+                            icon:'pi pi-fw pi-user-plus',
 
-                      },
-                      {
-                         label:'Delete',
-                         icon:'pi pi-fw pi-user-minus',
+                        },
+                        {
+                            label:'Delete',
+                            icon:'pi pi-fw pi-user-minus',
 
-                      },
-                      {
-                         label:'Search',
-                         icon:'pi pi-fw pi-users',
-                         items:[
-                            {
-                               label:'Filter',
-                               icon:'pi pi-fw pi-filter',
-                               items:[
-                                  {
-                                     label:'Print',
-                                     icon:'pi pi-fw pi-print'
-                                  }
-                               ]
-                            },
-                            {
-                               icon:'pi pi-fw pi-bars',
-                               label:'List'
-                            }
-                         ]
-                      }
-                   ]
+                        },
+                        {
+                            label:'Search',
+                            icon:'pi pi-fw pi-users',
+                            items:[
+                                {
+                                    label:'Filter',
+                                    icon:'pi pi-fw pi-filter',
+                                    items:[
+                                        {
+                                            label:'Print',
+                                            icon:'pi pi-fw pi-print'
+                                        }
+                                    ]
+                                },
+                                {
+                                    icon:'pi pi-fw pi-bars',
+                                    label:'List'
+                                }
+                            ]
+                        }
+                    ]
                 },
                 {
-                   label:'Events',
-                   icon:'pi pi-fw pi-calendar',
-                   items:[
-                      {
-                         label:'Edit',
-                         icon:'pi pi-fw pi-pencil',
-                         items:[
-                            {
-                               label:'Save',
-                               icon:'pi pi-fw pi-calendar-plus'
-                            },
-                            {
-                               label:'Delete',
-                               icon:'pi pi-fw pi-calendar-minus'
-                            },
-
-                         ]
-                      },
-                      {
-                         label:'Archieve',
-                         icon:'pi pi-fw pi-calendar-times',
-                         items:[
-                            {
-                               label:'Remove',
-                               icon:'pi pi-fw pi-calendar-minus'
-                            }
-                         ]
-                      }
-                   ]
+                    label:'Events',
+                    icon:'pi pi-fw pi-calendar',
+                    items:[
+                        {
+                            label:'Edit',
+                            icon:'pi pi-fw pi-pencil',
+                            items:[
+                                {
+                                    label:'Save',
+                                    icon:'pi pi-fw pi-calendar-plus'
+                                },
+                                {
+                                    label:'Delete',
+                                    icon:'pi pi-fw pi-calendar-minus'
+                                }
+                            ]
+                        },
+                        {
+                            label:'Archieve',
+                            icon:'pi pi-fw pi-calendar-times',
+                            items:[
+                                {
+                                    label:'Remove',
+                                    icon:'pi pi-fw pi-calendar-minus'
+                                }
+                            ]
+                        }
+                    ]
                 },
                 {
-                   label:'Quit',
-                   icon:'pi pi-fw pi-power-off'
+                    label:'Quit',
+                    icon:'pi pi-fw pi-power-off'
                 }
-             ]
+            ]
         }
     },
     components: {
diff --git a/src/views/menubar/MenubarDoc.vue b/src/views/menubar/MenubarDoc.vue
index 19a8064ba..4f4eba725 100755
--- a/src/views/menubar/MenubarDoc.vue
+++ b/src/views/menubar/MenubarDoc.vue
@@ -305,7 +305,7 @@ export default {
 			<div>
 				<Menubar :model="items">
 					<template #start>
-						<img alt="logo" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" height="40" class="p-mr-2">
+						<img alt="logo" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" height="40" class="mr-2">
 					</template>
 					<template #end>
 						<InputText placeholder="Search" type="text" />
@@ -459,7 +459,7 @@ export default {
 			<div>
 				<Menubar :model="items">
 					<template #start>
-						<img alt="logo" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" height="40" class="p-mr-2">
+						<img alt="logo" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" height="40" class="mr-2">
 					</template>
 					<template #end>
 						<InputText placeholder="Search" type="text" />
@@ -610,7 +610,7 @@ export default {
 					content: `<div id="app">
 			<p-menubar :model="items">
 				<template #start>
-					<img alt="logo" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" height="40" class="p-mr-2">
+					<img alt="logo" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" height="40" class="mr-2">
 				</template>
 				<template #end>
 					<p-inputtext placeholder="Search" type="text"></p-inputtext>
diff --git a/src/views/message/MessageDemo.vue b/src/views/message/MessageDemo.vue
index ca93863d0..1184865fb 100755
--- a/src/views/message/MessageDemo.vue
+++ b/src/views/message/MessageDemo.vue
@@ -27,17 +27,17 @@
 
                 <h5>Inline Messages</h5>
                 <p>Message component is used to display inline messages mostly within forms.</p>
-                <div class="p-grid">
-                    <div class="p-col-12 p-md-3">
+                <div class="grid">
+                    <div class="col-12 md:col-3">
                         <InlineMessage severity="info">Message Content</InlineMessage>
                     </div>
-                    <div class="p-col-12 p-md-3">
+                    <div class="col-12 md:col-3">
                         <InlineMessage severity="success">Message Content</InlineMessage>
                     </div>
-                    <div class="p-col-12 p-md-3">
+                    <div class="col-12 md:col-3">
                         <InlineMessage severity="warn">Message Content</InlineMessage>
                     </div>
-                    <div class="p-col-12 p-md-3">
+                    <div class="col-12 md:col-3">
                         <InlineMessage severity="error">Message Content</InlineMessage>
                     </div>
                 </div>
@@ -46,12 +46,12 @@
                 <Message severity="warn" :life="3000" :sticky="false">This message will hide in 3 seconds.</Message>
 
                 <h5>Validation Message</h5>
-                <div class="p-formgroup-inline" style="margin-bottom:.5rem">
+                <div class="formgroup-inline" style="margin-bottom:.5rem">
                     <label for="username" class="p-sr-only">Username</label>
                     <InputText id="username" placeholder="Username" class="p-invalid" />
                     <InlineMessage>Username is required</InlineMessage>
                 </div>
-                <div class="p-formgroup-inline">
+                <div class="formgroup-inline">
                     <label for="email" class="p-sr-only">email</label>
                     <InputText id="email" placeholder="Email" class="p-invalid" />
                     <InlineMessage />
diff --git a/src/views/message/MessageDoc.vue b/src/views/message/MessageDoc.vue
index 6e1363bd0..d3fa4cad2 100755
--- a/src/views/message/MessageDoc.vue
+++ b/src/views/message/MessageDoc.vue
@@ -286,17 +286,17 @@ export default {
 
         <h5>Inline Messages</h5>
         <p>Message component is used to display inline messages mostly within forms.</p>
-        <div class="p-grid">
-            <div class="p-col-12 p-md-3">
+        <div class="grid">
+            <div class="col-12 md:col-3">
                 <InlineMessage severity="info">Message Content</InlineMessage>
             </div>
-            <div class="p-col-12 p-md-3">
+            <div class="col-12 md:col-3">
                 <InlineMessage severity="success">Message Content</InlineMessage>
             </div>
-            <div class="p-col-12 p-md-3">
+            <div class="col-12 md:col-3">
                 <InlineMessage severity="warn">Message Content</InlineMessage>
             </div>
-            <div class="p-col-12 p-md-3">
+            <div class="col-12 md:col-3">
                 <InlineMessage severity="error">Message Content</InlineMessage>
             </div>
         </div>
@@ -305,12 +305,12 @@ export default {
         <Message severity="warn" :life="3000" :sticky="false">This message will hide in 3 seconds.</Message>
 
         <h5>Validation Message</h5>
-        <div class="p-formgroup-inline" style="margin-bottom:.5rem">
+        <div class="formgroup-inline" style="margin-bottom:.5rem">
             <label for="username" class="p-sr-only">Username</label>
             <InputText id="username" placeholder="Username" class="p-invalid" />
             <InlineMessage>Username is required</InlineMessage>
         </div>
-        <div class="p-formgroup-inline">
+        <div class="formgroup-inline">
             <label for="email" class="p-sr-only">email</label>
             <InputText id="email" placeholder="Email" class="p-invalid" />
             <InlineMessage />
@@ -367,17 +367,17 @@ button.p-button {
 
         <h5>Inline Messages</h5>
         <p>Message component is used to display inline messages mostly within forms.</p>
-        <div class="p-grid">
-            <div class="p-col-12 p-md-3">
+        <div class="grid">
+            <div class="col-12 md:col-3">
                 <InlineMessage severity="info">Message Content</InlineMessage>
             </div>
-            <div class="p-col-12 p-md-3">
+            <div class="col-12 md:col-3">
                 <InlineMessage severity="success">Message Content</InlineMessage>
             </div>
-            <div class="p-col-12 p-md-3">
+            <div class="col-12 md:col-3">
                 <InlineMessage severity="warn">Message Content</InlineMessage>
             </div>
-            <div class="p-col-12 p-md-3">
+            <div class="col-12 md:col-3">
                 <InlineMessage severity="error">Message Content</InlineMessage>
             </div>
         </div>
@@ -386,12 +386,12 @@ button.p-button {
         <Message severity="warn" :life="3000" :sticky="false">This message will hide in 3 seconds.</Message>
 
         <h5>Validation Message</h5>
-        <div class="p-formgroup-inline" style="margin-bottom:.5rem">
+        <div class="formgroup-inline" style="margin-bottom:.5rem">
             <label for="username" class="p-sr-only">Username</label>
             <InputText id="username" placeholder="Username" class="p-invalid" />
             <InlineMessage>Username is required</InlineMessage>
         </div>
-        <div class="p-formgroup-inline">
+        <div class="formgroup-inline">
             <label for="email" class="p-sr-only">email</label>
             <InputText id="email" placeholder="Email" class="p-invalid" />
             <InlineMessage />
@@ -447,17 +447,17 @@ button.p-button {
 
             <h5>Inline Messages</h5>
             <p>Message component is used to display inline messages mostly within forms.</p>
-            <div class="p-grid">
-                <div class="p-col-12 p-md-3">
+            <div class="grid">
+                <div class="col-12 md:col-3">
                     <p-inlinemessage severity="info">Message Content</p-inlinemessage>
                 </div>
-                <div class="p-col-12 p-md-3">
+                <div class="col-12 md:col-3">
                     <p-inlinemessage severity="success">Message Content</p-inlinemessage>
                 </div>
-                <div class="p-col-12 p-md-3">
+                <div class="col-12 md:col-3">
                     <p-inlinemessage severity="warn">Message Content</p-inlinemessage>
                 </div>
-                <div class="p-col-12 p-md-3">
+                <div class="col-12 md:col-3">
                     <p-inlinemessage severity="error">Message Content</p-inlinemessage>
                 </div>
             </div>
@@ -466,12 +466,12 @@ button.p-button {
             <p-message severity="warn" :life="3000" :sticky="false">This message will hide in 3 seconds.</p-message>
 
             <h5>Validation Message</h5>
-            <div class="p-formgroup-inline" style="margin-bottom:.5rem">
+            <div class="formgroup-inline" style="margin-bottom:.5rem">
                 <label for="username" class="p-sr-only">Username</label>
                 <p-inputtext id="username" placeholder="Username" class="p-invalid"></p-inputtext>
                 <p-inlinemessage>Username is required</p-inlinemessage>
             </div>
-            <div class="p-formgroup-inline">
+            <div class="formgroup-inline">
                 <label for="email" class="p-sr-only">email</label>
                 <p-inputtext id="email" placeholder="Email" class="p-invalid"></p-inputtext>
                 <p-inlinemessage></p-inlinemessage>
diff --git a/src/views/multiselect/MultiSelectDemo.vue b/src/views/multiselect/MultiSelectDemo.vue
index eb6f566ae..f0e205348 100755
--- a/src/views/multiselect/MultiSelectDemo.vue
+++ b/src/views/multiselect/MultiSelectDemo.vue
@@ -19,7 +19,7 @@
                 <h5>Grouped</h5>
                 <MultiSelect v-model="selectedGroupedCities" :options="groupedCities" optionLabel="label"  optionGroupLabel="label" optionGroupChildren="items" placeholder="Select Cities">
                     <template #optiongroup="slotProps">
-                        <div class="p-d-flex p-ai-center country-item">
+                        <div class="flex align-items-center country-item">
                             <img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.option.code.toLowerCase()" width="18" />
                             <div>{{slotProps.option.label}}</div>
                         </div>
diff --git a/src/views/multiselect/MultiSelectDoc.vue b/src/views/multiselect/MultiSelectDoc.vue
index f17b19aee..43930c2fd 100755
--- a/src/views/multiselect/MultiSelectDoc.vue
+++ b/src/views/multiselect/MultiSelectDoc.vue
@@ -552,8 +552,8 @@ export default {
         <h5>Grouped</h5>
         <MultiSelect v-model="selectedGroupedCities" :options="groupedCities" optionLabel="label"  optionGroupLabel="label" optionGroupChildren="items" placeholder="Select Cities">
             <template #optiongroup="slotProps">
-                <div class="p-d-flex p-ai-center country-item">
-                    <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2" width="18" />
+                <div class="flex align-items-center country-item">
+                    <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="mr-2" width="18" />
                     <div>{{slotProps.option.label}}</div>
                 </div>
             </template>
@@ -563,7 +563,7 @@ export default {
         <MultiSelect v-model="selectedCountries" :options="countries" optionLabel="name" placeholder="Select Countries" :filter="true" class="multiselect-custom">
             <template #value="slotProps">
                 <div class="country-item country-item-value" v-for="option of slotProps.value" :key="option.code">
-                    <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2" width="18" />
+                    <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="mr-2" width="18" />
                     <div>{{option.name}}</div>
                 </div>
                 <template v-if="!slotProps.value || slotProps.value.length === 0">
@@ -572,7 +572,7 @@ export default {
             </template>
             <template #option="slotProps">
                 <div class="country-item">
-                    <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2" width="18" />
+                    <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="mr-2" width="18" />
                     <div>{{slotProps.option.name}}</div>
                 </div>
             </template>
@@ -703,8 +703,8 @@ export default {
         <h5>Grouped</h5>
         <MultiSelect v-model="selectedGroupedCities" :options="groupedCities" optionLabel="label"  optionGroupLabel="label" optionGroupChildren="items" placeholder="Select Cities">
             <template #optiongroup="slotProps">
-                <div class="p-d-flex p-ai-center country-item">
-                    <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2" width="18" />
+                <div class="flex align-items-center country-item">
+                    <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="mr-2" width="18" />
                     <div>{{slotProps.option.label}}</div>
                 </div>
             </template>
@@ -714,7 +714,7 @@ export default {
         <MultiSelect v-model="selectedCountries" :options="countries" optionLabel="name" placeholder="Select Countries" :filter="true" class="multiselect-custom">
             <template #value="slotProps">
                 <div class="country-item country-item-value" v-for="option of slotProps.value" :key="option.code">
-                    <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2" width="18" />
+                    <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="mr-2" width="18" />
                     <div>{{option.name}}</div>
                 </div>
                 <template v-if="!slotProps.value || slotProps.value.length === 0">
@@ -723,7 +723,7 @@ export default {
             </template>
             <template #option="slotProps">
                 <div class="country-item">
-                    <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2" width="18" />
+                    <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="mr-2" width="18" />
                     <div>{{slotProps.option.name}}</div>
                 </div>
             </template>
@@ -857,8 +857,8 @@ export default {
             <h5>Grouped</h5>
             <p-multiselect v-model="selectedGroupedCities" :options="groupedCities" option-label="label"  option-group-label="label" option-group-children="items" placeholder="Select Cities">
                 <template #optiongroup="slotProps">
-                    <div class="p-d-flex p-ai-center country-item">
-                        <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2" width="18" />
+                    <div class="flex align-items-center country-item">
+                        <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="mr-2" width="18" />
                         <div>{{slotProps.option.label}}</div>
                     </div>
                 </template>
@@ -868,7 +868,7 @@ export default {
             <p-multiselect  v-model="selectedCountries" :options="countries" option-label="name" placeholder="Select Countries" :filter="true" class="multiselect-custom">
                 <template #value="slotProps">
                     <div class="country-item country-item-value" v-for="option of slotProps.value" :key="option.code">
-                        <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2" width="18" />
+                        <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="mr-2" width="18" />
                         <div>{{option.name}}</div>
                     </div>
                     <template v-if="!slotProps.value || slotProps.value.length === 0">
@@ -877,7 +877,7 @@ export default {
                 </template>
                 <template #option="slotProps">
                     <div class="country-item">
-                        <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="p-mr-2" width="18" />
+                        <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" class="mr-2" width="18" />
                         <div>{{slotProps.option.name}}</div>
                     </div>
                 </template>
diff --git a/src/views/orderlist/OrderListDemo.vue b/src/views/orderlist/OrderListDemo.vue
index 3351a2edb..fd8374a54 100755
--- a/src/views/orderlist/OrderListDemo.vue
+++ b/src/views/orderlist/OrderListDemo.vue
@@ -20,12 +20,12 @@
                                 <img :src="'demo/images/product/' + slotProps.item.image" :alt="slotProps.item.name" />
                             </div>
                             <div class="product-list-detail">
-                                <h6 class="p-mb-2">{{slotProps.item.name}}</h6>
+                                <h6 class="mb-2">{{slotProps.item.name}}</h6>
                                 <i class="pi pi-tag product-category-icon"></i>
                                 <span class="product-category">{{slotProps.item.category}}</span>
                             </div>
                             <div class="product-list-action">
-                                <h6 class="p-mb-2">${{slotProps.item.price}}</h6>
+                                <h6 class="mb-2">${{slotProps.item.price}}</h6>
                                 <span :class="'product-badge status-'+slotProps.item.inventoryStatus.toLowerCase()">{{slotProps.item.inventoryStatus}}</span>
                             </div>
                         </div>
diff --git a/src/views/orderlist/OrderListDoc.vue b/src/views/orderlist/OrderListDoc.vue
index f4307fb62..71568f3e0 100755
--- a/src/views/orderlist/OrderListDoc.vue
+++ b/src/views/orderlist/OrderListDoc.vue
@@ -243,12 +243,12 @@ export default {
                         <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="slotProps.item.name" />
                     </div>
                     <div class="product-list-detail">
-                        <h6 class="p-mb-2">{{slotProps.item.name}}</h6>
+                        <h6 class="mb-2">{{slotProps.item.name}}</h6>
                         <i class="pi pi-tag product-category-icon"></i>
                         <span class="product-category">{{slotProps.item.category}}</span>
                     </div>
                     <div class="product-list-action">
-                        <h6 class="p-mb-2">\${{slotProps.item.price}}</h6>
+                        <h6 class="mb-2">\${{slotProps.item.price}}</h6>
                         <span :class="'product-badge status-'+slotProps.item.inventoryStatus.toLowerCase()">{{slotProps.item.inventoryStatus}}</span>
                     </div>
                 </div>
@@ -350,12 +350,12 @@ export default {
                         <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="slotProps.item.name" />
                     </div>
                     <div class="product-list-detail">
-                        <h6 class="p-mb-2">{{slotProps.item.name}}</h6>
+                        <h6 class="mb-2">{{slotProps.item.name}}</h6>
                         <i class="pi pi-tag product-category-icon"></i>
                         <span class="product-category">{{slotProps.item.category}}</span>
                     </div>
                     <div class="product-list-action">
-                        <h6 class="p-mb-2">\${{slotProps.item.price}}</h6>
+                        <h6 class="mb-2">\${{slotProps.item.price}}</h6>
                         <span :class="'product-badge status-'+slotProps.item.inventoryStatus.toLowerCase()">{{slotProps.item.inventoryStatus}}</span>
                     </div>
                 </div>
@@ -458,12 +458,12 @@ export default {
                                 <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="slotProps.item.name" />
                             </div>
                             <div class="product-list-detail">
-                                <h6 class="p-mb-2">{{slotProps.item.name}}</h6>
+                                <h6 class="mb-2">{{slotProps.item.name}}</h6>
                                 <i class="pi pi-tag product-category-icon"></i>
                                 <span class="product-category">{{slotProps.item.category}}</span>
                             </div>
                             <div class="product-list-action">
-                                <h6 class="p-mb-2">\${{slotProps.item.price}}</h6>
+                                <h6 class="mb-2">\${{slotProps.item.price}}</h6>
                                 <span :class="'product-badge status-'+slotProps.item.inventoryStatus.toLowerCase()">{{slotProps.item.inventoryStatus}}</span>
                             </div>
                         </div>
diff --git a/src/views/panel/PanelDemo.vue b/src/views/panel/PanelDemo.vue
index 2cec71fb1..e06369304 100755
--- a/src/views/panel/PanelDemo.vue
+++ b/src/views/panel/PanelDemo.vue
@@ -20,7 +20,7 @@
             <h5>Advanced</h5>
             <Panel header="Header" :toggleable="true">
                 <template #icons>
-                    <button class="p-panel-header-icon p-link p-mr-2" @click="toggle">
+                    <button class="p-panel-header-icon p-link mr-2" @click="toggle">
                         <span class="pi pi-cog"></span>
                     </button>
                     <Menu id="config_menu" ref="menu" :model="items" :popup="true" />
diff --git a/src/views/panel/PanelDoc.vue b/src/views/panel/PanelDoc.vue
index c04d7433e..785589509 100755
--- a/src/views/panel/PanelDoc.vue
+++ b/src/views/panel/PanelDoc.vue
@@ -74,7 +74,7 @@ import Panel from 'primevue/panel';
 &lt;h5&gt;Advanced&lt;/h5&gt;
 &lt;Panel header="Header"&gt;
     &lt;template #icons&gt;
-        &lt;button class="p-panel-header-icon p-link p-mr-2" @click="toggle"&gt;
+        &lt;button class="p-panel-header-icon p-link mr-2" @click="toggle"&gt;
             &lt;span class="pi pi-cog"&gt;&lt;/span&gt;
         &lt;/button&gt;
         &lt;Menu id="config_menu" ref="menu" :model="items" :popup="true" /&gt;
@@ -229,7 +229,7 @@ export default {
         <h5>Advanced</h5>
         <Panel header="Header" :toggleable="true">
             <template #icons>
-                <button class="p-panel-header-icon p-link p-mr-2" @click="toggle">
+                <button class="p-panel-header-icon p-link mr-2" @click="toggle">
                     <span class="pi pi-cog"></span>
                 </button>
                 <Menu id="config_menu" ref="menu" :model="items" :popup="true" />
@@ -319,7 +319,7 @@ export default {
         <h5>Advanced</h5>
         <Panel header="Header" :toggleable="true">
             <template #icons>
-                <button class="p-panel-header-icon p-link p-mr-2" @click="toggle">
+                <button class="p-panel-header-icon p-link mr-2" @click="toggle">
                     <span class="pi pi-cog"></span>
                 </button>
                 <Menu id="config_menu" ref="menu" :model="items" :popup="true" />
@@ -416,7 +416,7 @@ export default {
             <h5>Advanced</h5>
             <p-panel header="Header" :toggleable="true">
                 <template #icons>
-                    <p-button class="p-panel-header-icon p-link p-mr-2" @click="toggle">
+                    <p-button class="p-panel-header-icon p-link mr-2" @click="toggle">
                         <span class="pi pi-cog"></span>
                     </p-button>
                     <p-menu id="config_menu" ref="menu" :model="items" :popup="true"></p-menu>
diff --git a/src/views/panelmenu/PanelMenuDemo.vue b/src/views/panelmenu/PanelMenuDemo.vue
index dbcdcd4f0..d92d09376 100755
--- a/src/views/panelmenu/PanelMenuDemo.vue
+++ b/src/views/panelmenu/PanelMenuDemo.vue
@@ -10,15 +10,15 @@
 
         <div class="content-section implementation">
             <div class="card">
-               <h5>Default</h5>
-               <PanelMenu :model="items" />
+                <h5>Default</h5>
+                <PanelMenu :model="items" />
 
-               <h5>Programmatic</h5>
-               <div class="p-mb-3">
-                    <Button type="button" icon="pi pi-plus" label="Expand All" @click="expandAll" class="p-mr-2" />
+                <h5>Programmatic</h5>
+                <div class="mb-3">
+                    <Button type="button" icon="pi pi-plus" label="Expand All" @click="expandAll" class="mr-2" />
                     <Button type="button" icon="pi pi-minus" label="Collapse All" @click="collapseAll" />
                 </div>
-               <PanelMenu :model="items" v-model:expandedKeys="expandedKeys" />
+                <PanelMenu :model="items" v-model:expandedKeys="expandedKeys" />
             </div>
         </div>
 
diff --git a/src/views/panelmenu/PanelMenuDoc.vue b/src/views/panelmenu/PanelMenuDoc.vue
index e0a23ed0a..f7ebc9d4e 100755
--- a/src/views/panelmenu/PanelMenuDoc.vue
+++ b/src/views/panelmenu/PanelMenuDoc.vue
@@ -30,121 +30,121 @@ export default {
 		return {
 			items: [
                 {
-                   label: 'File',
-                   icon:'pi pi-fw pi-file',
-                   items: [
-                      {
-                         label: 'New',
-                         icon:'pi pi-fw pi-plus',
-                         items: [
-                            {
-                               label: 'Bookmark',
-                               icon:'pi pi-fw pi-bookmark'
-                            },
-                            {
-                               label: 'Video',
-                               icon:'pi pi-fw pi-video'
-                            }
-                         ]
-                      },
-                      {
-                         label: 'Delete',
-                         icon:'pi pi-fw pi-trash'
-                      },
-                      {
-                         label: 'Export',
-                         icon:'pi pi-fw pi-external-link'
-                      }
-                   ]
+                    label: 'File',
+                    icon:'pi pi-fw pi-file',
+                    items: [
+                        {
+                            label: 'New',
+                            icon:'pi pi-fw pi-plus',
+                            items: [
+                                {
+                                    label: 'Bookmark',
+                                    icon:'pi pi-fw pi-bookmark'
+                                },
+                                {
+                                    label: 'Video',
+                                    icon:'pi pi-fw pi-video'
+                                }
+                            ]
+                        },
+                        {
+                            label: 'Delete',
+                            icon:'pi pi-fw pi-trash'
+                        },
+                        {
+                            label: 'Export',
+                            icon:'pi pi-fw pi-external-link'
+                        }
+                    ]
                 },
                 {
-                   label: 'Edit',
-                   icon:'pi pi-fw pi-pencil',
-                   items: [
-                      {
-                         label: 'Left',
-                         icon:'pi pi-fw pi-align-left'
-                      },
-                      {
-                         label: 'Right',
-                         icon:'pi pi-fw pi-align-right'
-                      },
-                      {
-                         label: 'Center',
-                         icon:'pi pi-fw pi-align-center'
-                      },
-                      {
-                         label: 'Justify',
-                         icon:'pi pi-fw pi-align-justify'
-                      }
-                   ]
+                    label: 'Edit',
+                    icon:'pi pi-fw pi-pencil',
+                    items: [
+                        {
+                            label: 'Left',
+                            icon:'pi pi-fw pi-align-left'
+                        },
+                        {
+                            label: 'Right',
+                            icon:'pi pi-fw pi-align-right'
+                        },
+                        {
+                            label: 'Center',
+                            icon:'pi pi-fw pi-align-center'
+                        },
+                        {
+                            label: 'Justify',
+                            icon:'pi pi-fw pi-align-justify'
+                        }
+                    ]
                 },
                 {
-                   label: 'Users',
-                   icon:'pi pi-fw pi-user',
-                   items: [
-                      {
-                         label: 'New',
-                         icon:'pi pi-fw pi-user-plus',
+                    label: 'Users',
+                    icon:'pi pi-fw pi-user',
+                    items: [
+                        {
+                            label: 'New',
+                            icon:'pi pi-fw pi-user-plus',
 
-                      },
-                      {
-                         label: 'Delete',
-                         icon:'pi pi-fw pi-user-minus',
-                      },
-                      {
-                         label: 'Search',
-                         icon:'pi pi-fw pi-users',
-                         items: [
-                            {
-                               label: 'Filter',
-                               icon:'pi pi-fw pi-filter',
-                               items: [
-                                  {
-                                     label: 'Print',
-                                     icon:'pi pi-fw pi-print'
-                                  }
-                               ]
-                            },
-                            {
-                               icon:'pi pi-fw pi-bars',
-                               label: 'List'
-                            }
-                         ]
-                      }
-                   ]
+                        },
+                        {
+                            label: 'Delete',
+                            icon:'pi pi-fw pi-user-minus',
+                        },
+                        {
+                            label: 'Search',
+                            icon:'pi pi-fw pi-users',
+                            items: [
+                                {
+                                    label: 'Filter',
+                                    icon:'pi pi-fw pi-filter',
+                                    items: [
+                                        {
+                                            label: 'Print',
+                                            icon:'pi pi-fw pi-print'
+                                        }
+                                    ]
+                                },
+                                {
+                                    icon:'pi pi-fw pi-bars',
+                                    label: 'List'
+                                }
+                            ]
+                        }
+                    ]
                 },
                 {
-                   label: 'Events',
-                   icon:'pi pi-fw pi-calendar',
-                   items: [
-                      {
-                         label: 'Edit',
-                         icon:'pi pi-fw pi-pencil',
-                         items: [
-                            {
-                               label: 'Save',
-                               icon:'pi pi-fw pi-calendar-plus'
-                            },
-                            {
-                               label: 'Delete',
-                               icon:'pi pi-fw pi-calendar-minus'
-                            }
-                         ]
-                      },
-                      {
-                         label: 'Archieve',
-                         icon:'pi pi-fw pi-calendar-times',
-                         items: [
-                            {
-                               label: 'Remove',
-                               icon:'pi pi-fw pi-calendar-minus'
-                            }
-                         ]
-                      }
-                   ]
+                    label: 'Events',
+                    icon:'pi pi-fw pi-calendar',
+                    items: [
+                        {
+                            label: 'Edit',
+                            icon:'pi pi-fw pi-pencil',
+                            items: [
+                                {
+                                    label: 'Save',
+                                    icon:'pi pi-fw pi-calendar-plus'
+                                },
+                                {
+                                    label: 'Delete',
+                                    icon:'pi pi-fw pi-calendar-minus'
+                                }
+                            ]
+                        },
+                        {
+                            label: 'Archieve',
+                            icon:'pi pi-fw pi-calendar-times',
+                            items: [
+                                {
+                                    label: 'Remove',
+                                    icon:'pi pi-fw pi-calendar-minus'
+                                }
+                            ]
+                        }
+                    ]
                 }
-             ]
+            ]
 		}
 	}
 }
@@ -152,8 +152,8 @@ export default {
 </code></pre>
 </div>
 
-         <h5>Templating</h5>
-         <p>PanelMenu offers content customization with the <i>item</i> template that receives the menuitem instance from the model as a parameter.</p>
+        <h5>Templating</h5>
+        <p>PanelMenu offers content customization with the <i>item</i> template that receives the menuitem instance from the model as a parameter.</p>
 <pre v-code><code><template v-pre>
 &lt;PanelMenu :model="items"&gt;
     &lt;template #item="{item}"&gt;
@@ -355,7 +355,7 @@ export default {
 </code></pre>
 </div>
 
-        <p class="p-mt-3">In order to display some nodes as expanded by default, simply add their keys to the map.</p>
+        <p class="mt-3">In order to display some nodes as expanded by default, simply add their keys to the map.</p>
 <pre v-code.script><code>
 export default {
     data() {
@@ -406,23 +406,23 @@ export default {
 			</table>
 		</div>
 
-      <h5>Slots</h5>
-		<div class="doc-tablewrapper">
+        <h5>Slots</h5>
+        <div class="doc-tablewrapper">
             <table class="doc-table">
-				<thead>
-               <tr>
-                  <th>Name</th>
-                  <th>Parameters</th>
-               </tr>
-				</thead>
-				<tbody>
-               <tr>
-                  <td>item</td>
-                  <td>item: Menuitem instance</td>
-               </tr>
-				</tbody>
-			</table>
-      </div>
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>item</td>
+                        <td>item: Menuitem instance</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
 		<h5>Styling</h5>
 		<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
@@ -487,14 +487,14 @@ export default {
 <template>
     <div>
         <h5>Default</h5>
-         <PanelMenu :model="items" />
+        <PanelMenu :model="items" />
 
-         <h5>Programmatic</h5>
-         <div class="p-mb-3">
-               <Button type="button" icon="pi pi-plus" label="Expand All" @click="expandAll" class="p-mr-2" />
-               <Button type="button" icon="pi pi-minus" label="Collapse All" @click="collapseAll" />
+        <h5>Programmatic</h5>
+        <div class="mb-3">
+            <Button type="button" icon="pi pi-plus" label="Expand All" @click="expandAll" class="mr-2" />
+            <Button type="button" icon="pi pi-minus" label="Collapse All" @click="collapseAll" />
             </div>
-         <PanelMenu :model="items" :expandedKeys="expandedKeys" />
+        <PanelMenu :model="items" :expandedKeys="expandedKeys" />
     </div>
 </template>
 
@@ -673,14 +673,14 @@ export default {
 <template>
     <div>
         <h5>Default</h5>
-         <PanelMenu :model="items" />
+        <PanelMenu :model="items" />
 
-         <h5>Programmatic</h5>
-         <div class="p-mb-3">
-               <Button type="button" icon="pi pi-plus" label="Expand All" @click="expandAll" class="p-mr-2" />
-               <Button type="button" icon="pi pi-minus" label="Collapse All" @click="collapseAll" />
+        <h5>Programmatic</h5>
+        <div class="mb-3">
+            <Button type="button" icon="pi pi-plus" label="Expand All" @click="expandAll" class="mr-2" />
+            <Button type="button" icon="pi pi-minus" label="Collapse All" @click="collapseAll" />
             </div>
-         <PanelMenu :model="items" :expandedKeys="expandedKeys" />
+        <PanelMenu :model="items" :expandedKeys="expandedKeys" />
     </div>
 </template>
 
@@ -690,137 +690,138 @@ import { ref } from 'vue';
 export default {
     setup() {
         const expandedKeys = ref({});
-        const items = ref([{
-                  key: '0',
-                  label: 'File',
-                  icon: 'pi pi-fw pi-file',
-                  items: [{
-                           key: '0_0',
-                           label: 'New',
-                           icon: 'pi pi-fw pi-plus',
-                           items: [{
-                                 key: '0_0_0',
-                                 label: 'Bookmark',
-                                 icon: 'pi pi-fw pi-bookmark'
-                              },
-                              {
-                                 key: '0_0_1',
-                                 label: 'Video',
-                                 icon: 'pi pi-fw pi-video'
-                              }
-                           ]
-                     },
-                     {
-                           key: '0_1',
-                           label: 'Delete',
-                           icon: 'pi pi-fw pi-trash'
-                     },
-                     {
-                           key: '0_2',
-                           label: 'Export',
-                           icon: 'pi pi-fw pi-external-link'
-                     }
-                  ]
-               },
-               {
-                  key: '1',
-                  label: 'Edit',
-                  icon: 'pi pi-fw pi-pencil',
-                  items: [{
-                           key: '1_0',
-                           label: 'Left',
-                           icon: 'pi pi-fw pi-align-left'
-                     },
-                     {
-                           key: '1_1',
-                           label: 'Right',
-                           icon: 'pi pi-fw pi-align-right'
-                     },
-                     {
-                           key: '1_2',
-                           label: 'Center',
-                           icon: 'pi pi-fw pi-align-center'
-                     },
-                     {
-                           key: '1_3',
-                           label: 'Justify',
-                           icon: 'pi pi-fw pi-align-justify'
-                     }
-                  ]
-               },
-               {
-                  key: '2',
-                  label: 'Users',
-                  icon: 'pi pi-fw pi-user',
-                  items: [{
-                           key: '2_0',
-                           label: 'New',
-                           icon: 'pi pi-fw pi-user-plus',
+        const items = ref([
+            {
+                key: '0',
+                label: 'File',
+                icon: 'pi pi-fw pi-file',
+                items: [{
+                        key: '0_0',
+                        label: 'New',
+                        icon: 'pi pi-fw pi-plus',
+                        items: [{
+                                key: '0_0_0',
+                                label: 'Bookmark',
+                                icon: 'pi pi-fw pi-bookmark'
+                            },
+                            {
+                                key: '0_0_1',
+                                label: 'Video',
+                                icon: 'pi pi-fw pi-video'
+                            }
+                        ]
+                    },
+                    {
+                        key: '0_1',
+                        label: 'Delete',
+                        icon: 'pi pi-fw pi-trash'
+                    },
+                    {
+                        key: '0_2',
+                        label: 'Export',
+                        icon: 'pi pi-fw pi-external-link'
+                    }
+                ]
+            },
+            {
+                key: '1',
+                label: 'Edit',
+                icon: 'pi pi-fw pi-pencil',
+                items: [{
+                        key: '1_0',
+                        label: 'Left',
+                        icon: 'pi pi-fw pi-align-left'
+                    },
+                    {
+                        key: '1_1',
+                        label: 'Right',
+                        icon: 'pi pi-fw pi-align-right'
+                    },
+                    {
+                        key: '1_2',
+                        label: 'Center',
+                        icon: 'pi pi-fw pi-align-center'
+                    },
+                    {
+                        key: '1_3',
+                        label: 'Justify',
+                        icon: 'pi pi-fw pi-align-justify'
+                    }
+                ]
+            },
+            {
+                key: '2',
+                label: 'Users',
+                icon: 'pi pi-fw pi-user',
+                items: [{
+                        key: '2_0',
+                        label: 'New',
+                        icon: 'pi pi-fw pi-user-plus',
 
-                     },
-                     {
-                           key: '2_1',
-                           label: 'Delete',
-                           icon: 'pi pi-fw pi-user-minus',
-                     },
-                     {
-                           key: '2_2',
-                           label: 'Search',
-                           icon: 'pi pi-fw pi-users',
-                           items: [{
-                                 key: '2_2_0',
-                                 label: 'Filter',
-                                 icon: 'pi pi-fw pi-filter',
-                                 items: [{
-                                       key: '2_2_0_0',
-                                       label: 'Print',
-                                       icon: 'pi pi-fw pi-print'
-                                 }]
-                              },
-                              {
-                                 key: '2_2_1',
-                                 icon: 'pi pi-fw pi-bars',
-                                 label: 'List'
-                              }
-                           ]
-                     }
-                  ]
-               },
-               {
-                  key: '3',
-                  label: 'Events',
-                  icon: 'pi pi-fw pi-calendar',
-                  items: [{
-                           key: '3_0',
-                           label: 'Edit',
-                           icon: 'pi pi-fw pi-pencil',
-                           items: [{
-                                 key: '3_0_0',
-                                 label: 'Save',
-                                 icon: 'pi pi-fw pi-calendar-plus'
-                              },
-                              {
-                                 key: '3_0_0',
-                                 label: 'Delete',
-                                 icon: 'pi pi-fw pi-calendar-minus'
-                              }
-                           ]
-                     },
-                     {
-                           key: '3_1',
-                           label: 'Archieve',
-                           icon: 'pi pi-fw pi-calendar-times',
-                           items: [{
-                              key: '3_1_0',
-                              label: 'Remove',
-                              icon: 'pi pi-fw pi-calendar-minus'
-                           }]
-                     }
-                  ]
-               }
-         ]);
+                    },
+                    {
+                        key: '2_1',
+                        label: 'Delete',
+                        icon: 'pi pi-fw pi-user-minus',
+                    },
+                    {
+                        key: '2_2',
+                        label: 'Search',
+                        icon: 'pi pi-fw pi-users',
+                        items: [{
+                                key: '2_2_0',
+                                label: 'Filter',
+                                icon: 'pi pi-fw pi-filter',
+                                items: [{
+                                    key: '2_2_0_0',
+                                    label: 'Print',
+                                    icon: 'pi pi-fw pi-print'
+                                }]
+                            },
+                            {
+                                key: '2_2_1',
+                                icon: 'pi pi-fw pi-bars',
+                                label: 'List'
+                            }
+                        ]
+                    }
+                ]
+            },
+            {
+                key: '3',
+                label: 'Events',
+                icon: 'pi pi-fw pi-calendar',
+                items: [{
+                        key: '3_0',
+                        label: 'Edit',
+                        icon: 'pi pi-fw pi-pencil',
+                        items: [{
+                                key: '3_0_0',
+                                label: 'Save',
+                                icon: 'pi pi-fw pi-calendar-plus'
+                            },
+                            {
+                                key: '3_0_0',
+                                label: 'Delete',
+                                icon: 'pi pi-fw pi-calendar-minus'
+                            }
+                        ]
+                    },
+                    {
+                        key: '3_1',
+                        label: 'Archieve',
+                        icon: 'pi pi-fw pi-calendar-times',
+                        items: [{
+                            key: '3_1_0',
+                            label: 'Remove',
+                            icon: 'pi pi-fw pi-calendar-minus'
+                        }]
+                    }
+                ]
+            }
+        ]);
 
-         const expandAll = () => {
+        const expandAll = () => {
             for (let node of nodes.value) {
                 expandNode(node);
             }
@@ -861,8 +862,8 @@ export default {
             <p-panelmenu :model="items"></p-panelmenu>
 
             <h5>Programmatic</h5>
-            <div class="p-mb-3">
-                <p-button type="button" icon="pi pi-plus" label="Expand All" @click="expandAll" class="p-mr-2"></p-button>
+            <div class="mb-3">
+                <p-button type="button" icon="pi pi-plus" label="Expand All" @click="expandAll" class="mr-2"></p-button>
                 <p-button type="button" icon="pi pi-minus" label="Collapse All" @click="collapseAll"></p-button>
                 </div>
             <p-panelmenu :model="items" :expanded-keys="expandedKeys"></p-panelmenu>
diff --git a/src/views/password/PasswordDemo.vue b/src/views/password/PasswordDemo.vue
index 799344d9e..6657401e8 100755
--- a/src/views/password/PasswordDemo.vue
+++ b/src/views/password/PasswordDemo.vue
@@ -26,8 +26,8 @@
                     </template>
                     <template #footer>
                         <Divider />
-                        <p class="p-mt-2">Suggestions</p>
-                        <ul class="p-pl-2 p-ml-2 p-mt-0" style="line-height: 1.5">
+                        <p class="mt-2">Suggestions</p>
+                        <ul class="pl-2 ml-2 mt-0" style="line-height: 1.5">
                             <li>At least one lowercase</li>
                             <li>At least one uppercase</li>
                             <li>At least one numeric</li>
diff --git a/src/views/password/PasswordDoc.vue b/src/views/password/PasswordDoc.vue
index d087730ce..eb7127e07 100755
--- a/src/views/password/PasswordDoc.vue
+++ b/src/views/password/PasswordDoc.vue
@@ -51,8 +51,8 @@ import Password from 'primevue/password';
     &lt;/template&gt;
     &lt;template #footer&gt;
         &lt;Divider /&gt;
-        &lt;p class="p-mt-2"&gt;Suggestions&lt;/p&gt;
-        &lt;ul class="p-pl-2 p-ml-2 p-mt-0" style="line-height: 1.5"&gt;
+        &lt;p class="mt-2"&gt;Suggestions&lt;/p&gt;
+        &lt;ul class="pl-2 ml-2 mt-0" style="line-height: 1.5"&gt;
             &lt;li&gt;At least one lowercase&lt;/li&gt;
             &lt;li&gt;At least one uppercase&lt;/li&gt;
             &lt;li&gt;At least one numeric&lt;/li&gt;
@@ -271,8 +271,8 @@ export default {
             <template #footer="sp">
                 {{sp.level}}
                 <Divider />
-                <p class="p-mt-2">Suggestions</p>
-                <ul class="p-pl-2 p-ml-2 p-mt-0" style="line-height: 1.5">
+                <p class="mt-2">Suggestions</p>
+                <ul class="pl-2 ml-2 mt-0" style="line-height: 1.5">
                     <li>At least one lowercase</li>
                     <li>At least one uppercase</li>
                     <li>At least one numeric</li>
@@ -325,8 +325,8 @@ export default {
             <template #footer="sp">
                 {{sp.level}}
                 <Divider />
-                <p class="p-mt-2">Suggestions</p>
-                <ul class="p-pl-2 p-ml-2 p-mt-0" style="line-height: 1.5">
+                <p class="mt-2">Suggestions</p>
+                <ul class="pl-2 ml-2 mt-0" style="line-height: 1.5">
                     <li>At least one lowercase</li>
                     <li>At least one uppercase</li>
                     <li>At least one numeric</li>
@@ -381,8 +381,8 @@ export default {
                 <template #footer="sp">
                     {{sp.level}}
                     <p-divider></p-divider>
-                    <p class="p-mt-2">Suggestions</p>
-                    <ul class="p-pl-2 p-ml-2 p-mt-0" style="line-height: 1.5">
+                    <p class="mt-2">Suggestions</p>
+                    <ul class="pl-2 ml-2 mt-0" style="line-height: 1.5">
                         <li>At least one lowercase</li>
                         <li>At least one uppercase</li>
                         <li>At least one numeric</li>
diff --git a/src/views/picklist/PickListDemo.vue b/src/views/picklist/PickListDemo.vue
index 7c41ca7d1..b318d6a82 100755
--- a/src/views/picklist/PickListDemo.vue
+++ b/src/views/picklist/PickListDemo.vue
@@ -23,12 +23,12 @@
                                 <img :src="'demo/images/product/' + slotProps.item.image" :alt="slotProps.item.name" />
                             </div>
                             <div class="product-list-detail">
-                                <h6 class="p-mb-2">{{slotProps.item.name}}</h6>
+                                <h6 class="mb-2">{{slotProps.item.name}}</h6>
                                 <i class="pi pi-tag product-category-icon"></i>
                                 <span class="product-category">{{slotProps.item.category}}</span>
                             </div>
                             <div class="product-list-action">
-                                <h6 class="p-mb-2">${{slotProps.item.price}}</h6>
+                                <h6 class="mb-2">${{slotProps.item.price}}</h6>
                                 <span :class="'product-badge status-'+slotProps.item.inventoryStatus.toLowerCase()">{{slotProps.item.inventoryStatus}}</span>
                             </div>
                         </div>
diff --git a/src/views/picklist/PickListDoc.vue b/src/views/picklist/PickListDoc.vue
index 4b91a338f..21ac99ca6 100755
--- a/src/views/picklist/PickListDoc.vue
+++ b/src/views/picklist/PickListDoc.vue
@@ -325,12 +325,12 @@ export default {
                         <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" />
                     </div>
                     <div class="product-list-detail">
-                        <h6 class="p-mb-2">{{slotProps.item.name}}</h6>
+                        <h6 class="mb-2">{{slotProps.item.name}}</h6>
                         <i class="pi pi-tag product-category-icon"></i>
                         <span class="product-category">{{slotProps.item.category}}</span>
                     </div>
                     <div class="product-list-action">
-                        <h6 class="p-mb-2">\${{slotProps.item.price}}</h6>
+                        <h6 class="mb-2">\${{slotProps.item.price}}</h6>
                         <span :class="'product-badge status-'+slotProps.item.inventoryStatus.toLowerCase()">{{slotProps.item.inventoryStatus}}</span>
                     </div>
                 </div>
@@ -429,12 +429,12 @@ export default {
                         <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" />
                     </div>
                     <div class="product-list-detail">
-                        <h6 class="p-mb-2">{{slotProps.item.name}}</h6>
+                        <h6 class="mb-2">{{slotProps.item.name}}</h6>
                         <i class="pi pi-tag product-category-icon"></i>
                         <span class="product-category">{{slotProps.item.category}}</span>
                     </div>
                     <div class="product-list-action">
-                        <h6 class="p-mb-2">\${{slotProps.item.price}}</h6>
+                        <h6 class="mb-2">\${{slotProps.item.price}}</h6>
                         <span :class="'product-badge status-'+slotProps.item.inventoryStatus.toLowerCase()">{{slotProps.item.inventoryStatus}}</span>
                     </div>
                 </div>
@@ -532,12 +532,12 @@ export default {
                             <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" />
                         </div>
                         <div class="product-list-detail">
-                            <h6 class="p-mb-2">{{slotProps.item.name}}</h6>
+                            <h6 class="mb-2">{{slotProps.item.name}}</h6>
                             <i class="pi pi-tag product-category-icon"></i>
                             <span class="product-category">{{slotProps.item.category}}</span>
                         </div>
                         <div class="product-list-action">
-                            <h6 class="p-mb-2">\${{slotProps.item.price}}</h6>
+                            <h6 class="mb-2">\${{slotProps.item.price}}</h6>
                             <span :class="'product-badge status-'+slotProps.item.inventoryStatus.toLowerCase()">{{slotProps.item.inventoryStatus}}</span>
                         </div>
                     </div>
diff --git a/src/views/radiobutton/RadioButtonDemo.vue b/src/views/radiobutton/RadioButtonDemo.vue
index 8294e8f6f..d39f1c72a 100755
--- a/src/views/radiobutton/RadioButtonDemo.vue
+++ b/src/views/radiobutton/RadioButtonDemo.vue
@@ -11,25 +11,25 @@
         <div class="content-section implementation">
             <div class="card">
                 <h5>Basic</h5>
-                <div class="p-field-radiobutton">
+                <div class="field-radiobutton">
                     <RadioButton id="city1" name="city" value="Chicago" v-model="city" />
                     <label for="city1">Chicago</label>
                 </div>
-                <div class="p-field-radiobutton">
+                <div class="field-radiobutton">
                     <RadioButton id="city2" name="city" value="Los Angeles" v-model="city" />
                     <label for="city2">Los Angeles</label>
                 </div>
-                <div class="p-field-radiobutton">
+                <div class="field-radiobutton">
                     <RadioButton id="city3" name="city" value="New York" v-model="city" />
                     <label for="city3">New York</label>
                 </div>
-                <div class="p-field-radiobutton">
+                <div class="field-radiobutton">
                     <RadioButton id="city4" name="city" value="San Francisco" v-model="city" />
                     <label for="city4">San Francisco</label>
                 </div>
 
                 <h5>Dynamic Values, Preselection, Value Binding and Disabled Option</h5>
-                <div v-for="category of categories" :key="category.key" class="p-field-radiobutton">
+                <div v-for="category of categories" :key="category.key" class="field-radiobutton">
                     <RadioButton :id="category.key" name="category" :value="category" v-model="selectedCategory" :disabled="category.key === 'R'" />
                     <label :for="category.key">{{category.name}}</label>
                 </div>
diff --git a/src/views/radiobutton/RadioButtonDoc.vue b/src/views/radiobutton/RadioButtonDoc.vue
index c6a7ea35b..55718b1c1 100755
--- a/src/views/radiobutton/RadioButtonDoc.vue
+++ b/src/views/radiobutton/RadioButtonDoc.vue
@@ -156,25 +156,25 @@ export default {
 <template>
     <div>
         <h5>Basic</h5>
-        <div class="p-field-radiobutton">
+        <div class="field-radiobutton">
             <RadioButton id="city1" name="city" value="Chicago" v-model="city" />
             <label for="city1">Chicago</label>
         </div>
-        <div class="p-field-radiobutton">
+        <div class="field-radiobutton">
             <RadioButton id="city2" name="city" value="Los Angeles" v-model="city" />
             <label for="city2">Los Angeles</label>
         </div>
-        <div class="p-field-radiobutton">
+        <div class="field-radiobutton">
             <RadioButton id="city3" name="city" value="New York" v-model="city" />
             <label for="city3">New York</label>
         </div>
-        <div class="p-field-radiobutton">
+        <div class="field-radiobutton">
             <RadioButton id="city4" name="city" value="San Francisco" v-model="city" />
             <label for="city4">San Francisco</label>
         </div>
 
         <h5>Dynamic Values, Preselection, Value Binding and Disabled Option</h5>
-        <div v-for="category of categories" :key="category.key" class="p-field-radiobutton">
+        <div v-for="category of categories" :key="category.key" class="field-radiobutton">
             <RadioButton :id="category.key" name="category" :value="category" v-model="selectedCategory" :disabled="category.key === 'R'" />
             <label :for="category.key">{{category.name}}</label>
         </div>
@@ -208,25 +208,25 @@ export default {
 <template>
     <div>
         <h5>Basic</h5>
-        <div class="p-field-radiobutton">
+        <div class="field-radiobutton">
             <RadioButton id="city1" name="city" value="Chicago" v-model="city" />
             <label for="city1">Chicago</label>
         </div>
-        <div class="p-field-radiobutton">
+        <div class="field-radiobutton">
             <RadioButton id="city2" name="city" value="Los Angeles" v-model="city" />
             <label for="city2">Los Angeles</label>
         </div>
-        <div class="p-field-radiobutton">
+        <div class="field-radiobutton">
             <RadioButton id="city3" name="city" value="New York" v-model="city" />
             <label for="city3">New York</label>
         </div>
-        <div class="p-field-radiobutton">
+        <div class="field-radiobutton">
             <RadioButton id="city4" name="city" value="San Francisco" v-model="city" />
             <label for="city4">San Francisco</label>
         </div>
 
         <h5>Dynamic Values, Preselection, Value Binding and Disabled Option</h5>
-        <div v-for="category of categories" :key="category.key" class="p-field-radiobutton">
+        <div v-for="category of categories" :key="category.key" class="field-radiobutton">
             <RadioButton :id="category.key" name="category" :value="category" v-model="selectedCategory" :disabled="category.key === 'R'" />
             <label :for="category.key">{{category.name}}</label>
         </div>
@@ -258,25 +258,25 @@ export default {
                     imports: `<script src="https://unpkg.com/primevue@^3/radiobutton/radiobutton.min.js"><\\/script>`,
                     content: `<div id="app">
             <h5>Basic</h5>
-            <div class="p-field-radiobutton">
+            <div class="field-radiobutton">
                 <p-radiobutton id="city1" name="city" value="Chicago" v-model="city"></p-radiobutton>
                 <label for="city1">Chicago</label>
             </div>
-            <div class="p-field-radiobutton">
+            <div class="field-radiobutton">
                 <p-radiobutton id="city2" name="city" value="Los Angeles" v-model="city"></p-radiobutton>
                 <label for="city2">Los Angeles</label>
             </div>
-            <div class="p-field-radiobutton">
+            <div class="field-radiobutton">
                 <p-radiobutton id="city3" name="city" value="New York" v-model="city"></p-radiobutton>
                 <label for="city3">New York</label>
             </div>
-            <div class="p-field-radiobutton">
+            <div class="field-radiobutton">
                 <p-radiobutton id="city4" name="city" value="San Francisco" v-model="city"></p-radiobutton>
                 <label for="city4">San Francisco</label>
             </div>
 
             <h5>Dynamic Values, Preselection, Value Binding and Disabled Option</h5>
-            <div v-for="category of categories" :key="category.key" class="p-field-radiobutton">
+            <div v-for="category of categories" :key="category.key" class="field-radiobutton">
                 <p-radiobutton :id="category.key" name="category" :value="category" v-model="selectedCategory" :disabled="category.key === 'R'"></p-radiobutton>
                 <label :for="category.key">{{category.name}}</label>
             </div>
diff --git a/src/views/responsive/ResponsiveDemo.vue b/src/views/responsive/ResponsiveDemo.vue
index ec16c842c..0f4b0a68f 100644
--- a/src/views/responsive/ResponsiveDemo.vue
+++ b/src/views/responsive/ResponsiveDemo.vue
@@ -9,37 +9,37 @@
         </div>
 
         <div class="content-section implementation">
-            <div class="p-grid">
-                <div class="p-col-12 p-md-6 p-fluid">
+            <div class="grid">
+                <div class="col-12 md:col-6 p-fluid">
                     <div class="card">
                         <h5>InputText</h5>
-                        <div class="p-grid p-formgrid">
-                            <div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0">
+                        <div class="grid formgrid">
+                            <div class="col-12 mb-2 lg:col-4 lg:mb-0">
                                 <InputText type="text" placeholder="Default"></InputText>
                             </div>
-                            <div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0">
+                            <div class="col-12 mb-2 lg:col-4 lg:mb-0">
                                 <InputText type="text" placeholder="Disabled" :disabled="true"></InputText>
                             </div>
-                            <div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0">
+                            <div class="col-12 mb-2 lg:col-4 lg:mb-0">
                                 <InputText type="text" placeholder="Invalid" class="p-invalid" />
                             </div>
                         </div>
 
                         <h5>Icons</h5>
-                        <div class="p-grid p-formgrid">
-                            <div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0">
+                        <div class="grid formgrid">
+                            <div class="col-12 mb-2 lg:col-4 lg:mb-0">
                                 <span class="p-input-icon-left">
                                     <i class="pi pi-user" />
                                     <InputText type="text" placeholder="Username" />
                                 </span>
                             </div>
-                            <div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0">
+                            <div class="col-12 mb-2 lg:col-4 lg:mb-0">
                                 <span class="p-input-icon-right">
                                     <InputText type="text" placeholder="Search" />
                                     <i class="pi pi-search" />
                                 </span>
                             </div>
-                            <div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0">
+                            <div class="col-12 mb-2 lg:col-4 lg:mb-0">
                                 <span class="p-input-icon-left p-input-icon-right">
                                     <i class="pi pi-user" />
                                     <InputText type="text" placeholder="Search" />
@@ -83,24 +83,24 @@
                     </div>
                 </div>
 
-                <div class="p-col-12 p-md-6">
+                <div class="col-12 md:col-6">
                     <div class="card">
                         <h5>RadioButton</h5>
-                        <div class="p-grid">
-                            <div class="p-col-12 p-md-4">
-                                <div class="p-field-radiobutton">
+                        <div class="grid">
+                            <div class="col-12 md:col-4">
+                                <div class="field-radiobutton">
                                     <RadioButton id="option1" name="option" value="Option 1" v-model="radioValue" />
                                     <label for="option1">Option 1</label>
                                 </div>
                             </div>
-                            <div class="p-col-12 p-md-4">
-                                <div class="p-field-radiobutton">
+                            <div class="col-12 md:col-4">
+                                <div class="field-radiobutton">
                                     <RadioButton id="option2" name="option" value="Option 2" v-model="radioValue" />
                                     <label for="option2">Option 2</label>
                                 </div>
                             </div>
-                            <div class="p-col-12 p-md-4">
-                                <div class="p-field-radiobutton">
+                            <div class="col-12 md:col-4">
+                                <div class="field-radiobutton">
                                     <RadioButton id="option3" name="option" value="Option 3" v-model="radioValue" />
                                     <label for="option3">Option 3</label>
                                 </div>
@@ -108,21 +108,21 @@
                         </div>
 
                         <h5>Checkbox</h5>
-                        <div class="p-grid">
-                            <div class="p-col-12 p-md-4">
-                                <div class="p-field-checkbox">
+                        <div class="grid">
+                            <div class="col-12 md:col-4">
+                                <div class="field-checkbox">
                                     <Checkbox id="checkOption1" name="option" value="Option 1" v-model="checkboxValue" />
                                     <label for="checkOption1">Option 1</label>
                                 </div>
                             </div>
-                            <div class="p-col-12 p-md-4">
-                                <div class="p-field-checkbox">
+                            <div class="col-12 md:col-4">
+                                <div class="field-checkbox">
                                     <Checkbox id="checkOption2" name="option" value="Option 2" v-model="checkboxValue" />
                                     <label for="checkOption2">Option 2</label>
                                 </div>
                             </div>
-                            <div class="p-col-12 p-md-4">
-                                <div class="p-field-checkbox">
+                            <div class="col-12 md:col-4">
+                                <div class="field-checkbox">
                                     <Checkbox id="checkOption3" name="option" value="Option 3" v-model="checkboxValue" />
                                     <label for="checkOption3">Option 3</label>
                                 </div>
@@ -153,102 +153,102 @@
                     </div>
                 </div>
 
-                <div class="p-col-12">
+                <div class="col-12">
                     <div class="card">
                         <h5>Buttons</h5>
-                        <Button label="Submit" class="p-mr-2 p-mb-2" />
-                        <Button icon="pi pi-check" class="p-mr-2 p-mb-2" />
-                        <Button label="Submit" icon="pi pi-check" class="p-mr-2 p-mb-2" />
-                        <Button label="Submit" icon="pi pi-check" iconPos="right" class="p-mr-2 p-mb-2" />
-                        <Button label="Disabled" disabled="disabled" class="p-mr-2 p-mb-2" />
+                        <Button label="Submit" class="mr-2 mb-2" />
+                        <Button icon="pi pi-check" class="mr-2 mb-2" />
+                        <Button label="Submit" icon="pi pi-check" class="mr-2 mb-2" />
+                        <Button label="Submit" icon="pi pi-check" iconPos="right" class="mr-2 mb-2" />
+                        <Button label="Disabled" disabled="disabled" class="mr-2 mb-2" />
                     
                         <h5>Severities</h5>
-                        <Button label="Primary" class="p-mr-2 p-mb-2" />
-                        <Button label="Secondary" class="p-button-secondary p-mr-2 p-mb-2" />
-                        <Button label="Success" class="p-button-success p-mr-2 p-mb-2" />
-                        <Button label="Info" class="p-button-info p-mr-2 p-mb-2" />
-                        <Button label="Warning" class="p-button-warning p-mr-2 p-mb-2" />
-                        <Button label="Help" class="p-button-help p-mr-2 p-mb-2" />
-                        <Button label="Danger" class="p-button-danger p-mr-2 p-mb-2" />
+                        <Button label="Primary" class="mr-2 mb-2" />
+                        <Button label="Secondary" class="p-button-secondary mr-2 mb-2" />
+                        <Button label="Success" class="p-button-success mr-2 mb-2" />
+                        <Button label="Info" class="p-button-info mr-2 mb-2" />
+                        <Button label="Warning" class="p-button-warning mr-2 mb-2" />
+                        <Button label="Help" class="p-button-help mr-2 mb-2" />
+                        <Button label="Danger" class="p-button-danger mr-2 mb-2" />
 
                         <h5>Raised Buttons</h5>
-                        <Button label="Primary" class="p-button-raised p-mr-2 p-mb-2" />
-                        <Button label="Secondary" class="p-button-raised p-button-secondary p-mr-2 p-mb-2" />
-                        <Button label="Success" class="p-button-raised p-button-success p-mr-2 p-mb-2" />
-                        <Button label="Info" class="p-button-raised p-button-info p-mr-2 p-mb-2" />
-                        <Button label="Warning" class="p-button-raised p-button-warning p-mr-2 p-mb-2" />
-                        <Button label="Help" class="p-button-raised p-button-help p-mr-2 p-mb-2" />
-                        <Button label="Danger" class="p-button-raised p-button-danger p-mb-2" />
+                        <Button label="Primary" class="p-button-raised mr-2 mb-2" />
+                        <Button label="Secondary" class="p-button-raised p-button-secondary mr-2 mb-2" />
+                        <Button label="Success" class="p-button-raised p-button-success mr-2 mb-2" />
+                        <Button label="Info" class="p-button-raised p-button-info mr-2 mb-2" />
+                        <Button label="Warning" class="p-button-raised p-button-warning mr-2 mb-2" />
+                        <Button label="Help" class="p-button-raised p-button-help mr-2 mb-2" />
+                        <Button label="Danger" class="p-button-raised p-button-danger mb-2" />
 
                         <h5>Rounded Buttons</h5>
-                        <Button label="Primary" class="p-button-rounded p-mr-2 p-mb-2" />
-                        <Button label="Secondary" class="p-button-rounded p-button-secondary p-mr-2 p-mb-2" />
-                        <Button label="Success" class="p-button-rounded p-button-success p-mr-2 p-mb-2" />
-                        <Button label="Info" class="p-button-rounded p-button-info p-mr-2 p-mb-2" />
-                        <Button label="Warning" class="p-button-rounded p-button-warning p-mr-2 p-mb-2" />
-                        <Button label="Help" class="p-button-rounded p-button-help p-mr-2 p-mb-2" />
-                        <Button label="Danger" class="p-button-rounded p-button-danger p-mb-2" />
+                        <Button label="Primary" class="p-button-rounded mr-2 mb-2" />
+                        <Button label="Secondary" class="p-button-rounded p-button-secondary mr-2 mb-2" />
+                        <Button label="Success" class="p-button-rounded p-button-success mr-2 mb-2" />
+                        <Button label="Info" class="p-button-rounded p-button-info mr-2 mb-2" />
+                        <Button label="Warning" class="p-button-rounded p-button-warning mr-2 mb-2" />
+                        <Button label="Help" class="p-button-rounded p-button-help mr-2 mb-2" />
+                        <Button label="Danger" class="p-button-rounded p-button-danger mb-2" />
 
                         <h5>Text Buttons</h5>
-                        <Button label="Primary" class="p-button-text p-mr-2 p-mb-2" />
-                        <Button label="Secondary" class="p-button-secondary p-button-text p-mr-2 p-mb-2" />
-                        <Button label="Success" class="p-button-success p-button-text p-mr-2 p-mb-2" />
-                        <Button label="Info" class="p-button-info p-button-text p-mr-2 p-mb-2" />
-                        <Button label="Warning" class="p-button-warning p-button-text p-mr-2 p-mb-2" />
-                        <Button label="Help" class="p-button-help p-button-text p-mr-2 p-mb-2" />
-                        <Button label="Danger" class="p-button-danger p-button-text p-mr-2 p-mb-2" />
-                        <Button label="Plain" class="p-button-text p-button-plain p-mb-2" />
+                        <Button label="Primary" class="p-button-text mr-2 mb-2" />
+                        <Button label="Secondary" class="p-button-secondary p-button-text mr-2 mb-2" />
+                        <Button label="Success" class="p-button-success p-button-text mr-2 mb-2" />
+                        <Button label="Info" class="p-button-info p-button-text mr-2 mb-2" />
+                        <Button label="Warning" class="p-button-warning p-button-text mr-2 mb-2" />
+                        <Button label="Help" class="p-button-help p-button-text mr-2 mb-2" />
+                        <Button label="Danger" class="p-button-danger p-button-text mr-2 mb-2" />
+                        <Button label="Plain" class="p-button-text p-button-plain mb-2" />
 
                         <h5>Raised Text Buttons</h5>
-                        <Button label="Primary" class="p-button-raised p-button-text p-mr-2 p-mb-2" />
-                        <Button label="Secondary" class="p-button-raised p-button-secondary p-button-text p-mr-2 p-mb-2" />
-                        <Button label="Success" class="p-button-raised p-button-success p-button-text p-mr-2 p-mb-2" />
-                        <Button label="Info" class="p-button-raised p-button-info p-button-text p-mr-2 p-mb-2" />
-                        <Button label="Warning" class="p-button-raised p-button-warning p-button-text p-mr-2 p-mb-2" />
-                        <Button label="Help" class="p-button-raised p-button-help p-button-text p-mr-2 p-mb-2" />
-                        <Button label="Danger" class="p-button-raised p-button-danger p-button-text p-mr-2 p-mb-2" />
-                        <Button label="Plain" class="p-button-raised p-button-plain p-button-text p-mb-2" />
+                        <Button label="Primary" class="p-button-raised p-button-text mr-2 mb-2" />
+                        <Button label="Secondary" class="p-button-raised p-button-secondary p-button-text mr-2 mb-2" />
+                        <Button label="Success" class="p-button-raised p-button-success p-button-text mr-2 mb-2" />
+                        <Button label="Info" class="p-button-raised p-button-info p-button-text mr-2 mb-2" />
+                        <Button label="Warning" class="p-button-raised p-button-warning p-button-text mr-2 mb-2" />
+                        <Button label="Help" class="p-button-raised p-button-help p-button-text mr-2 mb-2" />
+                        <Button label="Danger" class="p-button-raised p-button-danger p-button-text mr-2 mb-2" />
+                        <Button label="Plain" class="p-button-raised p-button-plain p-button-text mb-2" />
 
                         <h5>Outlined Buttons</h5>
-                        <Button label="Primary" class="p-button-outlined p-mr-2 p-mb-2" />
-                        <Button label="Secondary" class="p-button-outlined p-button-secondary p-mr-2 p-mb-2" />
-                        <Button label="Success" class="p-button-outlined p-button-success p-mr-2 p-mb-2" />
-                        <Button label="Info" class="p-button-outlined p-button-info p-mr-2 p-mb-2" />
-                        <Button label="Warning" class="p-button-outlined p-button-warning p-mr-2 p-mb-2" />
-                        <Button label="Help" class="p-button-outlined p-button-help p-mr-2 p-mb-2" />
-                        <Button label="Danger" class="p-button-outlined p-button-danger p-mr-2 p-mb-2" />
-                        <Button label="Plain" class="p-button-outlined p-button-plain p-mb-2" />
+                        <Button label="Primary" class="p-button-outlined mr-2 mb-2" />
+                        <Button label="Secondary" class="p-button-outlined p-button-secondary mr-2 mb-2" />
+                        <Button label="Success" class="p-button-outlined p-button-success mr-2 mb-2" />
+                        <Button label="Info" class="p-button-outlined p-button-info mr-2 mb-2" />
+                        <Button label="Warning" class="p-button-outlined p-button-warning mr-2 mb-2" />
+                        <Button label="Help" class="p-button-outlined p-button-help mr-2 mb-2" />
+                        <Button label="Danger" class="p-button-outlined p-button-danger mr-2 mb-2" />
+                        <Button label="Plain" class="p-button-outlined p-button-plain mb-2" />
 
                         <h5>Rounded Icon Buttons</h5>
-                        <Button icon="pi pi-check" class="p-button-rounded p-mr-2 p-mb-2" />
-                        <Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-mr-2 p-mb-2" />
-                        <Button icon="pi pi-search" class="p-button-rounded p-button-success p-mr-2 p-mb-2" />
-                        <Button icon="pi pi-user" class="p-button-rounded p-button-info p-mr-2 p-mb-2" />
-                        <Button icon="pi pi-bell" class="p-button-rounded p-button-warning p-mr-2 p-mb-2" />
-                        <Button icon="pi pi-heart" class="p-button-rounded p-button-help p-mr-2 p-mb-2" />
-                        <Button icon="pi pi-times" class="p-button-rounded p-button-danger p-mb-2" />
+                        <Button icon="pi pi-check" class="p-button-rounded mr-2 mb-2" />
+                        <Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary mr-2 mb-2" />
+                        <Button icon="pi pi-search" class="p-button-rounded p-button-success mr-2 mb-2" />
+                        <Button icon="pi pi-user" class="p-button-rounded p-button-info mr-2 mb-2" />
+                        <Button icon="pi pi-bell" class="p-button-rounded p-button-warning mr-2 mb-2" />
+                        <Button icon="pi pi-heart" class="p-button-rounded p-button-help mr-2 mb-2" />
+                        <Button icon="pi pi-times" class="p-button-rounded p-button-danger mb-2" />
 
                         <h5>Rounded Text Icon Buttons</h5>
-                        <Button icon="pi pi-check" class="p-button-rounded p-button-text p-mr-2 p-mb-2" />
-                        <Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-button-text p-mr-2 p-mb-2" />
-                        <Button icon="pi pi-search" class="p-button-rounded p-button-success p-button-text p-mr-2 p-mb-2" />
-                        <Button icon="pi pi-user" class="p-button-rounded p-button-info p-button-text p-mr-2 p-mb-2" />
-                        <Button icon="pi pi-bell" class="p-button-rounded p-button-warning p-button-text p-mr-2 p-mb-2" />
-                        <Button icon="pi pi-heart" class="p-button-rounded p-button-help p-button-text p-mr-2 p-mb-2" />
-                        <Button icon="pi pi-times" class="p-button-rounded p-button-danger p-button-text p-mr-2 p-mb-2" />
+                        <Button icon="pi pi-check" class="p-button-rounded p-button-text mr-2 mb-2" />
+                        <Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-button-text mr-2 mb-2" />
+                        <Button icon="pi pi-search" class="p-button-rounded p-button-success p-button-text mr-2 mb-2" />
+                        <Button icon="pi pi-user" class="p-button-rounded p-button-info p-button-text mr-2 mb-2" />
+                        <Button icon="pi pi-bell" class="p-button-rounded p-button-warning p-button-text mr-2 mb-2" />
+                        <Button icon="pi pi-heart" class="p-button-rounded p-button-help p-button-text mr-2 mb-2" />
+                        <Button icon="pi pi-times" class="p-button-rounded p-button-danger p-button-text mr-2 mb-2" />
 
                         <h5>Rounded and Outlined Icon Buttons</h5>
-                        <Button icon="pi pi-check" class="p-button-rounded p-button-outlined p-mr-2 p-mb-2" />
-                        <Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-button-outlined p-mr-2 p-mb-2" />
-                        <Button icon="pi pi-search" class="p-button-rounded p-button-success p-button-outlined p-mr-2 p-mb-2" />
-                        <Button icon="pi pi-user" class="p-button-rounded p-button-info p-button-outlined p-mr-2 p-mb-2" />
-                        <Button icon="pi pi-bell" class="p-button-rounded p-button-warning p-button-outlined p-mr-2 p-mb-2" />
-                        <Button icon="pi pi-heart" class="p-button-rounded p-button-help p-button-outlined p-mr-2 p-mb-2" />
-                        <Button icon="pi pi-times" class="p-button-rounded p-button-danger p-button-outlined p-mb-2" />
+                        <Button icon="pi pi-check" class="p-button-rounded p-button-outlined mr-2 mb-2" />
+                        <Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-button-outlined mr-2 mb-2" />
+                        <Button icon="pi pi-search" class="p-button-rounded p-button-success p-button-outlined mr-2 mb-2" />
+                        <Button icon="pi pi-user" class="p-button-rounded p-button-info p-button-outlined mr-2 mb-2" />
+                        <Button icon="pi pi-bell" class="p-button-rounded p-button-warning p-button-outlined mr-2 mb-2" />
+                        <Button icon="pi pi-heart" class="p-button-rounded p-button-help p-button-outlined mr-2 mb-2" />
+                        <Button icon="pi pi-times" class="p-button-rounded p-button-danger p-button-outlined mb-2" />
 
                         <h5>Badges</h5>
-                        <Button type="button" label="Emails" badge="8" class="p-mr-2 p-mb-2" />
-                        <Button type="button" label="Messages" icon="pi pi-users" class="p-button-warning p-mb-2" badge="8" badgeClass="p-badge-danger" />
+                        <Button type="button" label="Emails" badge="8" class="mr-2 mb-2" />
+                        <Button type="button" label="Messages" icon="pi pi-users" class="p-button-warning mb-2" badge="8" badgeClass="p-badge-danger" />
 
                         <h5>Button Set</h5>
                         <span class="p-buttonset">
@@ -259,14 +259,14 @@
                     </div>
                 </div>
 
-                <div class="p-col-12">
+                <div class="col-12">
                     <div class="card">
                         <DataTable :value="customers" :paginator="true" :rows="10"
                             dataKey="id" :rowHover="true" v-model:selection="selectedCustomers" :filters="filters"
                             paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown" :rowsPerPageOptions="[10,25,50]"
                             currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries" responsiveLayout="scroll">
                             <template #header>
-                                <div class="p-d-flex p-ai-center p-jc-between">
+                                <div class="flex flex-column md:flex-row md:justify-content-between md:align-items-center">
                                     DataTable
                                     <span class="p-input-icon-left">
                                         <i class="pi pi-search" />
@@ -285,7 +285,7 @@
                             </Column>
                             <Column header="Country" :sortable="true" sortField="country.name" filterField="country.name" filterMatchMode="contains" style="min-width:16rem">
                                 <template #body="slotProps">
-                                    <img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.data.country.code" width="30" class="p-mr-2" />
+                                    <img src="../../assets/images/flag_placeholder.png" :class="'flag flag-' + slotProps.data.country.code" width="30" class="mr-2" />
                                     <span class="image-text">{{slotProps.data.country.name}}</span>
                                 </template>
                             </Column>
@@ -302,7 +302,7 @@
                         </DataTable>
                     </div>
                 </div>
-                <div class="p-col-12 p-md-6">
+                <div class="col-12 md:col-6">
                     <div class="card">
                         <h5>AccordionPanel</h5>
                         <Accordion :multiple="true" :activeIndex="[0]">
@@ -349,7 +349,7 @@
                         </TabView>
                     </div>
                 </div>
-                <div class="p-col-12 p-md-6">
+                <div class="col-12 md:col-6">
                     <div class="card">
                         <h5>Panel</h5>
                         <Panel header="Header" :toggleable="true">
@@ -369,7 +369,7 @@
                         </Fieldset>
                     </div>
                 </div>
-                <div class="p-col-12 p-md-3">
+                <div class="col-12 md:col-3">
                     <div class="card p-fluid">
                         <h5>Overlay Panel</h5>
                         <Button type="button" label="Choose" @click="toggle" icon="pi pi-search" />
@@ -390,7 +390,7 @@
                         </OverlayPanel>
                     </div>
                 </div>
-                <div class="p-col-12 p-md-3">
+                <div class="col-12 md:col-3">
                     <div class="card p-fluid">
                         <h5>Dialog</h5>
                         <Dialog header="Dialog" v-model:visible="display" :style="{width: '50vw'}" :breakpoints="{'960px':'75vw'}" :modal="true">
@@ -407,21 +407,21 @@
                         <Button label="Show" icon="pi pi-external-link" @click="open" class="p-button-secondary"/>
                     </div>
                 </div>
-                <div class="p-col-12 p-md-3">
+                <div class="col-12 md:col-3">
                     <div class="card p-fluid">
                         <h5>Confirm Popup</h5>
                         <Button type="button" label="Confirm" @click="confirmWithPopup" class="p-button-success" icon="pi pi-check" />
                         <ConfirmPopup group="popup"></ConfirmPopup>
                     </div>
                 </div>
-                <div class="p-col-12 p-md-3">
+                <div class="col-12 md:col-3">
                     <div class="card p-fluid">
                         <h5>Confirm Dialog</h5>
                         <Button type="button" label="Confirm" @click="confirmWithDialog" class="p-button-help" icon="pi pi-check" />
                         <ConfirmDialog group="dialog">></ConfirmDialog>
                     </div>
                 </div>
-                <div class="p-col-12">
+                <div class="col-12">
                     <div class="card card-w-title">
                         <h5>Menubar</h5>
                         <Menubar :model="tieredMenuItems">
@@ -435,14 +435,14 @@
                     </div>
                 </div>
 
-                <div class="p-col-12 p-md-4">
+                <div class="col-12 md:col-4">
                     <div class="card">
                         <h5>Plain Menu</h5>
                         <Menu :model="menuitems" />
                     </div>
                 </div>
 
-                <div class="p-col-12 p-md-4">
+                <div class="col-12 md:col-4">
                     <div class="card">
                         <h5>Overlay Menu</h5>
 
@@ -457,7 +457,7 @@
                     </div>
                 </div>
 
-                <div class="p-col-12 p-lg-6">
+                <div class="col-12 lg:col-6">
                     <div class="card">
                         <h5>Messages</h5>
                         <Message severity="info">Info Message</Message>
@@ -467,15 +467,15 @@
                     </div>
                 </div>
 
-                <div class="p-col-12 p-lg-6">
+                <div class="col-12 lg:col-6">
                     <div class="card">
                         <h5>Toast</h5>
 
                         <Toast />
-                        <Button @click="showToast('info')" label="Info" class="p-button-info p-mr-2 p-mb-2" />
-                        <Button @click="showToast('success')" label="Success" class="p-button-success p-mr-2 p-mb-2" />
-                        <Button @click="showToast('warn')" label="Warn" class="p-button-warning p-mr-2 p-mb-2" />
-                        <Button @click="showToast('error')" label="Error" class="p-button-danger p-mb-2" />
+                        <Button @click="showToast('info')" label="Info" class="p-button-info mr-2 mb-2" />
+                        <Button @click="showToast('success')" label="Success" class="p-button-success mr-2 mb-2" />
+                        <Button @click="showToast('warn')" label="Warn" class="p-button-warning mr-2 mb-2" />
+                        <Button @click="showToast('error')" label="Error" class="p-button-danger mb-2" />
                     </div>
 
                     <div class="card">
@@ -488,26 +488,26 @@
                     </div>
                 </div>
 
-                <div class="p-col-12 p-lg-8">
+                <div class="col-12 lg:col-8">
                     <div class="card">
                         <h5>Inline Message</h5>
-                        <div class="p-formgroup-inline" style="margin-bottom:.5rem">
+                        <div class="formgroup-inline" style="margin-bottom:.5rem">
                             <label for="username1" class="p-sr-only">Username</label>
-                            <InputText id="username1" type="text" placeholder="Username" class="p-invalid p-mr-2" />
+                            <InputText id="username1" type="text" placeholder="Username" class="p-invalid mr-2" />
                             <InlineMessage>Username is required</InlineMessage>
                         </div>
-                        <div class="p-formgroup-inline">
+                        <div class="formgroup-inline">
                             <label for="email" class="p-sr-only">email</label>
-                            <InputText id="email" placeholder="Email" class="p-invalid p-mr-2" />
+                            <InputText id="email" placeholder="Email" class="p-invalid mr-2" />
                             <InlineMessage />
                         </div>
                     </div>
                 </div>
 
-                <div class="p-col-12 p-lg-4">
+                <div class="col-12 lg:col-4">
                     <div class="card">
                         <h5>Helper Text</h5>
-                        <div class="p-field p-fluid">
+                        <div class="field p-fluid">
                             <label for="username2">Username</label>
                             <InputText id="username2" type="text" class="p-invalid" aria-describedby="username-help" />
                             <small id="username-help" class="p-error">Enter your username to reset your password.</small>
@@ -739,37 +739,37 @@ export default {
 <template>
     <div>
         <h1>Responsive Design</h1>
-        <div class="p-grid">
-            <div class="p-col-12 p-md-6 p-fluid">
+        <div class="grid">
+            <div class="col-12 md:col-6 p-fluid">
                 <div class="card">
                     <h5>InputText</h5>
-                    <div class="p-grid p-formgrid">
-                        <div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0">
+                    <div class="grid formgrid">
+                        <div class="col-12 mb-2 lg:col-4 lg:mb-0">
                             <InputText type="text" placeholder="Default"></InputText>
                         </div>
-                        <div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0">
+                        <div class="col-12 mb-2 lg:col-4 lg:mb-0">
                             <InputText type="text" placeholder="Disabled" :disabled="true"></InputText>
                         </div>
-                        <div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0">
+                        <div class="col-12 mb-2 lg:col-4 lg:mb-0">
                             <InputText type="text" placeholder="Invalid" class="p-invalid" />
                         </div>
                     </div>
 
                     <h5>Icons</h5>
-                    <div class="p-grid p-formgrid">
-                        <div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0">
+                    <div class="grid formgrid">
+                        <div class="col-12 mb-2 lg:col-4 lg:mb-0">
                             <span class="p-input-icon-left">
                                 <i class="pi pi-user" />
                                 <InputText type="text" placeholder="Username" />
                             </span>
                         </div>
-                        <div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0">
+                        <div class="col-12 mb-2 lg:col-4 lg:mb-0">
                             <span class="p-input-icon-right">
                                 <InputText type="text" placeholder="Search" />
                                 <i class="pi pi-search" />
                             </span>
                         </div>
-                        <div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0">
+                        <div class="col-12 mb-2 lg:col-4 lg:mb-0">
                             <span class="p-input-icon-left p-input-icon-right">
                                 <i class="pi pi-user" />
                                 <InputText type="text" placeholder="Search" />
@@ -813,24 +813,24 @@ export default {
                 </div>
             </div>
 
-            <div class="p-col-12 p-md-6">
+            <div class="col-12 md:col-6">
                 <div class="card">
                     <h5>RadioButton</h5>
-                    <div class="p-grid">
-                        <div class="p-col-12 p-md-4">
-                            <div class="p-field-radiobutton">
+                    <div class="grid">
+                        <div class="col-12 md:col-4">
+                            <div class="field-radiobutton">
                                 <RadioButton id="option1" name="option" value="Option 1" v-model="radioValue" />
                                 <label for="option1">Option 1</label>
                             </div>
                         </div>
-                        <div class="p-col-12 p-md-4">
-                            <div class="p-field-radiobutton">
+                        <div class="col-12 md:col-4">
+                            <div class="field-radiobutton">
                                 <RadioButton id="option2" name="option" value="Option 2" v-model="radioValue" />
                                 <label for="option2">Option 2</label>
                             </div>
                         </div>
-                        <div class="p-col-12 p-md-4">
-                            <div class="p-field-radiobutton">
+                        <div class="col-12 md:col-4">
+                            <div class="field-radiobutton">
                                 <RadioButton id="option3" name="option" value="Option 3" v-model="radioValue" />
                                 <label for="option3">Option 3</label>
                             </div>
@@ -838,21 +838,21 @@ export default {
                     </div>
 
                     <h5>Checkbox</h5>
-                    <div class="p-grid">
-                        <div class="p-col-12 p-md-4">
-                            <div class="p-field-checkbox">
+                    <div class="grid">
+                        <div class="col-12 md:col-4">
+                            <div class="field-checkbox">
                                 <Checkbox id="checkOption1" name="option" value="Option 1" v-model="checkboxValue" />
                                 <label for="checkOption1">Option 1</label>
                             </div>
                         </div>
-                        <div class="p-col-12 p-md-4">
-                            <div class="p-field-checkbox">
+                        <div class="col-12 md:col-4">
+                            <div class="field-checkbox">
                                 <Checkbox id="checkOption2" name="option" value="Option 2" v-model="checkboxValue" />
                                 <label for="checkOption2">Option 2</label>
                             </div>
                         </div>
-                        <div class="p-col-12 p-md-4">
-                            <div class="p-field-checkbox">
+                        <div class="col-12 md:col-4">
+                            <div class="field-checkbox">
                                 <Checkbox id="checkOption3" name="option" value="Option 3" v-model="checkboxValue" />
                                 <label for="checkOption3">Option 3</label>
                             </div>
@@ -883,102 +883,102 @@ export default {
                 </div>
             </div>
 
-            <div class="p-col-12">
+            <div class="col-12">
                 <div class="card">
                     <h5>Buttons</h5>
-                    <Button label="Submit" class="p-mr-2 p-mb-2" />
-                    <Button icon="pi pi-check" class="p-mr-2 p-mb-2" />
-                    <Button label="Submit" icon="pi pi-check" class="p-mr-2 p-mb-2" />
-                    <Button label="Submit" icon="pi pi-check" iconPos="right" class="p-mr-2 p-mb-2" />
-                    <Button label="Disabled" disabled="disabled" class="p-mr-2 p-mb-2" />
+                    <Button label="Submit" class="mr-2 mb-2" />
+                    <Button icon="pi pi-check" class="mr-2 mb-2" />
+                    <Button label="Submit" icon="pi pi-check" class="mr-2 mb-2" />
+                    <Button label="Submit" icon="pi pi-check" iconPos="right" class="mr-2 mb-2" />
+                    <Button label="Disabled" disabled="disabled" class="mr-2 mb-2" />
                     
                     <h5>Severities</h5>
-                    <Button label="Primary" class="p-mr-2 p-mb-2" />
-                    <Button label="Secondary" class="p-button-secondary p-mr-2 p-mb-2" />
-                    <Button label="Success" class="p-button-success p-mr-2 p-mb-2" />
-                    <Button label="Info" class="p-button-info p-mr-2 p-mb-2" />
-                    <Button label="Warning" class="p-button-warning p-mr-2 p-mb-2" />
-                    <Button label="Help" class="p-button-help p-mr-2 p-mb-2" />
-                    <Button label="Danger" class="p-button-danger p-mr-2 p-mb-2" />
+                    <Button label="Primary" class="mr-2 mb-2" />
+                    <Button label="Secondary" class="p-button-secondary mr-2 mb-2" />
+                    <Button label="Success" class="p-button-success mr-2 mb-2" />
+                    <Button label="Info" class="p-button-info mr-2 mb-2" />
+                    <Button label="Warning" class="p-button-warning mr-2 mb-2" />
+                    <Button label="Help" class="p-button-help mr-2 mb-2" />
+                    <Button label="Danger" class="p-button-danger mr-2 mb-2" />
 
                     <h5>Raised Buttons</h5>
-                    <Button label="Primary" class="p-button-raised p-mr-2 p-mb-2" />
-                    <Button label="Secondary" class="p-button-raised p-button-secondary p-mr-2 p-mb-2" />
-                    <Button label="Success" class="p-button-raised p-button-success p-mr-2 p-mb-2" />
-                    <Button label="Info" class="p-button-raised p-button-info p-mr-2 p-mb-2" />
-                    <Button label="Warning" class="p-button-raised p-button-warning p-mr-2 p-mb-2" />
-                    <Button label="Help" class="p-button-raised p-button-help p-mr-2 p-mb-2" />
-                    <Button label="Danger" class="p-button-raised p-button-danger p-mb-2" />
+                    <Button label="Primary" class="p-button-raised mr-2 mb-2" />
+                    <Button label="Secondary" class="p-button-raised p-button-secondary mr-2 mb-2" />
+                    <Button label="Success" class="p-button-raised p-button-success mr-2 mb-2" />
+                    <Button label="Info" class="p-button-raised p-button-info mr-2 mb-2" />
+                    <Button label="Warning" class="p-button-raised p-button-warning mr-2 mb-2" />
+                    <Button label="Help" class="p-button-raised p-button-help mr-2 mb-2" />
+                    <Button label="Danger" class="p-button-raised p-button-danger mb-2" />
 
                     <h5>Rounded Buttons</h5>
-                    <Button label="Primary" class="p-button-rounded p-mr-2 p-mb-2" />
-                    <Button label="Secondary" class="p-button-rounded p-button-secondary p-mr-2 p-mb-2" />
-                    <Button label="Success" class="p-button-rounded p-button-success p-mr-2 p-mb-2" />
-                    <Button label="Info" class="p-button-rounded p-button-info p-mr-2 p-mb-2" />
-                    <Button label="Warning" class="p-button-rounded p-button-warning p-mr-2 p-mb-2" />
-                    <Button label="Help" class="p-button-rounded p-button-help p-mr-2 p-mb-2" />
-                    <Button label="Danger" class="p-button-rounded p-button-danger p-mb-2" />
+                    <Button label="Primary" class="p-button-rounded mr-2 mb-2" />
+                    <Button label="Secondary" class="p-button-rounded p-button-secondary mr-2 mb-2" />
+                    <Button label="Success" class="p-button-rounded p-button-success mr-2 mb-2" />
+                    <Button label="Info" class="p-button-rounded p-button-info mr-2 mb-2" />
+                    <Button label="Warning" class="p-button-rounded p-button-warning mr-2 mb-2" />
+                    <Button label="Help" class="p-button-rounded p-button-help mr-2 mb-2" />
+                    <Button label="Danger" class="p-button-rounded p-button-danger mb-2" />
 
                     <h5>Text Buttons</h5>
-                    <Button label="Primary" class="p-button-text p-mr-2 p-mb-2" />
-                    <Button label="Secondary" class="p-button-secondary p-button-text p-mr-2 p-mb-2" />
-                    <Button label="Success" class="p-button-success p-button-text p-mr-2 p-mb-2" />
-                    <Button label="Info" class="p-button-info p-button-text p-mr-2 p-mb-2" />
-                    <Button label="Warning" class="p-button-warning p-button-text p-mr-2 p-mb-2" />
-                    <Button label="Help" class="p-button-help p-button-text p-mr-2 p-mb-2" />
-                    <Button label="Danger" class="p-button-danger p-button-text p-mr-2 p-mb-2" />
-                    <Button label="Plain" class="p-button-text p-button-plain p-mb-2" />
+                    <Button label="Primary" class="p-button-text mr-2 mb-2" />
+                    <Button label="Secondary" class="p-button-secondary p-button-text mr-2 mb-2" />
+                    <Button label="Success" class="p-button-success p-button-text mr-2 mb-2" />
+                    <Button label="Info" class="p-button-info p-button-text mr-2 mb-2" />
+                    <Button label="Warning" class="p-button-warning p-button-text mr-2 mb-2" />
+                    <Button label="Help" class="p-button-help p-button-text mr-2 mb-2" />
+                    <Button label="Danger" class="p-button-danger p-button-text mr-2 mb-2" />
+                    <Button label="Plain" class="p-button-text p-button-plain mb-2" />
 
                     <h5>Raised Text Buttons</h5>
-                    <Button label="Primary" class="p-button-raised p-button-text p-mr-2 p-mb-2" />
-                    <Button label="Secondary" class="p-button-raised p-button-secondary p-button-text p-mr-2 p-mb-2" />
-                    <Button label="Success" class="p-button-raised p-button-success p-button-text p-mr-2 p-mb-2" />
-                    <Button label="Info" class="p-button-raised p-button-info p-button-text p-mr-2 p-mb-2" />
-                    <Button label="Warning" class="p-button-raised p-button-warning p-button-text p-mr-2 p-mb-2" />
-                    <Button label="Help" class="p-button-raised p-button-help p-button-text p-mr-2 p-mb-2" />
-                    <Button label="Danger" class="p-button-raised p-button-danger p-button-text p-mr-2 p-mb-2" />
-                    <Button label="Plain" class="p-button-raised p-button-plain p-button-text p-mb-2" />
+                    <Button label="Primary" class="p-button-raised p-button-text mr-2 mb-2" />
+                    <Button label="Secondary" class="p-button-raised p-button-secondary p-button-text mr-2 mb-2" />
+                    <Button label="Success" class="p-button-raised p-button-success p-button-text mr-2 mb-2" />
+                    <Button label="Info" class="p-button-raised p-button-info p-button-text mr-2 mb-2" />
+                    <Button label="Warning" class="p-button-raised p-button-warning p-button-text mr-2 mb-2" />
+                    <Button label="Help" class="p-button-raised p-button-help p-button-text mr-2 mb-2" />
+                    <Button label="Danger" class="p-button-raised p-button-danger p-button-text mr-2 mb-2" />
+                    <Button label="Plain" class="p-button-raised p-button-plain p-button-text mb-2" />
 
                     <h5>Outlined Buttons</h5>
-                    <Button label="Primary" class="p-button-outlined p-mr-2 p-mb-2" />
-                    <Button label="Secondary" class="p-button-outlined p-button-secondary p-mr-2 p-mb-2" />
-                    <Button label="Success" class="p-button-outlined p-button-success p-mr-2 p-mb-2" />
-                    <Button label="Info" class="p-button-outlined p-button-info p-mr-2 p-mb-2" />
-                    <Button label="Warning" class="p-button-outlined p-button-warning p-mr-2 p-mb-2" />
-                    <Button label="Help" class="p-button-outlined p-button-help p-mr-2 p-mb-2" />
-                    <Button label="Danger" class="p-button-outlined p-button-danger p-mr-2 p-mb-2" />
-                    <Button label="Plain" class="p-button-outlined p-button-plain p-mb-2" />
+                    <Button label="Primary" class="p-button-outlined mr-2 mb-2" />
+                    <Button label="Secondary" class="p-button-outlined p-button-secondary mr-2 mb-2" />
+                    <Button label="Success" class="p-button-outlined p-button-success mr-2 mb-2" />
+                    <Button label="Info" class="p-button-outlined p-button-info mr-2 mb-2" />
+                    <Button label="Warning" class="p-button-outlined p-button-warning mr-2 mb-2" />
+                    <Button label="Help" class="p-button-outlined p-button-help mr-2 mb-2" />
+                    <Button label="Danger" class="p-button-outlined p-button-danger mr-2 mb-2" />
+                    <Button label="Plain" class="p-button-outlined p-button-plain mb-2" />
 
                     <h5>Rounded Icon Buttons</h5>
-                    <Button icon="pi pi-check" class="p-button-rounded p-mr-2 p-mb-2" />
-                    <Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-mr-2 p-mb-2" />
-                    <Button icon="pi pi-search" class="p-button-rounded p-button-success p-mr-2 p-mb-2" />
-                    <Button icon="pi pi-user" class="p-button-rounded p-button-info p-mr-2 p-mb-2" />
-                    <Button icon="pi pi-bell" class="p-button-rounded p-button-warning p-mr-2 p-mb-2" />
-                    <Button icon="pi pi-heart" class="p-button-rounded p-button-help p-mr-2 p-mb-2" />
-                    <Button icon="pi pi-times" class="p-button-rounded p-button-danger p-mb-2" />
+                    <Button icon="pi pi-check" class="p-button-rounded mr-2 mb-2" />
+                    <Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary mr-2 mb-2" />
+                    <Button icon="pi pi-search" class="p-button-rounded p-button-success mr-2 mb-2" />
+                    <Button icon="pi pi-user" class="p-button-rounded p-button-info mr-2 mb-2" />
+                    <Button icon="pi pi-bell" class="p-button-rounded p-button-warning mr-2 mb-2" />
+                    <Button icon="pi pi-heart" class="p-button-rounded p-button-help mr-2 mb-2" />
+                    <Button icon="pi pi-times" class="p-button-rounded p-button-danger mb-2" />
 
                     <h5>Rounded Text Icon Buttons</h5>
-                    <Button icon="pi pi-check" class="p-button-rounded p-button-text p-mr-2 p-mb-2" />
-                    <Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-button-text p-mr-2 p-mb-2" />
-                    <Button icon="pi pi-search" class="p-button-rounded p-button-success p-button-text p-mr-2 p-mb-2" />
-                    <Button icon="pi pi-user" class="p-button-rounded p-button-info p-button-text p-mr-2 p-mb-2" />
-                    <Button icon="pi pi-bell" class="p-button-rounded p-button-warning p-button-text p-mr-2 p-mb-2" />
-                    <Button icon="pi pi-heart" class="p-button-rounded p-button-help p-button-text p-mr-2 p-mb-2" />
-                    <Button icon="pi pi-times" class="p-button-rounded p-button-danger p-button-text p-mr-2 p-mb-2" />
+                    <Button icon="pi pi-check" class="p-button-rounded p-button-text mr-2 mb-2" />
+                    <Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-button-text mr-2 mb-2" />
+                    <Button icon="pi pi-search" class="p-button-rounded p-button-success p-button-text mr-2 mb-2" />
+                    <Button icon="pi pi-user" class="p-button-rounded p-button-info p-button-text mr-2 mb-2" />
+                    <Button icon="pi pi-bell" class="p-button-rounded p-button-warning p-button-text mr-2 mb-2" />
+                    <Button icon="pi pi-heart" class="p-button-rounded p-button-help p-button-text mr-2 mb-2" />
+                    <Button icon="pi pi-times" class="p-button-rounded p-button-danger p-button-text mr-2 mb-2" />
 
                     <h5>Rounded and Outlined Icon Buttons</h5>
-                    <Button icon="pi pi-check" class="p-button-rounded p-button-outlined p-mr-2 p-mb-2" />
-                    <Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-button-outlined p-mr-2 p-mb-2" />
-                    <Button icon="pi pi-search" class="p-button-rounded p-button-success p-button-outlined p-mr-2 p-mb-2" />
-                    <Button icon="pi pi-user" class="p-button-rounded p-button-info p-button-outlined p-mr-2 p-mb-2" />
-                    <Button icon="pi pi-bell" class="p-button-rounded p-button-warning p-button-outlined p-mr-2 p-mb-2" />
-                    <Button icon="pi pi-heart" class="p-button-rounded p-button-help p-button-outlined p-mr-2 p-mb-2" />
-                    <Button icon="pi pi-times" class="p-button-rounded p-button-danger p-button-outlined p-mb-2" />
+                    <Button icon="pi pi-check" class="p-button-rounded p-button-outlined mr-2 mb-2" />
+                    <Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-button-outlined mr-2 mb-2" />
+                    <Button icon="pi pi-search" class="p-button-rounded p-button-success p-button-outlined mr-2 mb-2" />
+                    <Button icon="pi pi-user" class="p-button-rounded p-button-info p-button-outlined mr-2 mb-2" />
+                    <Button icon="pi pi-bell" class="p-button-rounded p-button-warning p-button-outlined mr-2 mb-2" />
+                    <Button icon="pi pi-heart" class="p-button-rounded p-button-help p-button-outlined mr-2 mb-2" />
+                    <Button icon="pi pi-times" class="p-button-rounded p-button-danger p-button-outlined mb-2" />
 
                     <h5>Badges</h5>
-                    <Button type="button" label="Emails" badge="8" class="p-mr-2 p-mb-2" />
-                    <Button type="button" label="Messages" icon="pi pi-users" class="p-button-warning p-mb-2" badge="8" badgeClass="p-badge-danger" />
+                    <Button type="button" label="Emails" badge="8" class="mr-2 mb-2" />
+                    <Button type="button" label="Messages" icon="pi pi-users" class="p-button-warning mb-2" badge="8" badgeClass="p-badge-danger" />
 
                     <h5>Button Set</h5>
                     <span class="p-buttonset">
@@ -989,14 +989,14 @@ export default {
                 </div>
             </div>
 
-            <div class="p-col-12">
+            <div class="col-12">
                 <div class="card">
                     <DataTable :value="customers" :paginator="true" :rows="10"
                         dataKey="id" :rowHover="true" v-model:selection="selectedCustomers" :filters="filters"
                         paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown" :rowsPerPageOptions="[10,25,50]"
                         currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries" responsiveLayout="scroll">
                         <template #header>
-                            <div class="p-d-flex p-ai-center p-jc-between">
+                            <div class="flex flex-column md:flex-row md:justify-content-between md:align-items-center">
                                 DataTable
                                 <span class="p-input-icon-left">
                                     <i class="pi pi-search" />
@@ -1015,7 +1015,7 @@ export default {
                         </Column>
                         <Column header="Country" :sortable="true" sortField="country.name" filterField="country.name" filterMatchMode="contains" style="min-width:16rem">
                             <template #body="slotProps">
-                                <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :class="'flag flag-' + slotProps.data.country.code" width="30" class="p-mr-2" />
+                                <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :class="'flag flag-' + slotProps.data.country.code" width="30" class="mr-2" />
                                 <span class="image-text">{{slotProps.data.country.name}}</span>
                             </template>
                         </Column>
@@ -1033,7 +1033,7 @@ export default {
                 </div>
             </div>
 
-            <div class="p-col-12 p-md-6">
+            <div class="col-12 md:col-6">
                 <div class="card">
                     <h5>AccordionPanel</h5>
                     <Accordion :multiple="true" :activeIndex="[0]">
@@ -1082,7 +1082,7 @@ export default {
                 </div>
             </div>
 
-            <div class="p-col-12 p-md-6">
+            <div class="col-12 md:col-6">
                 <div class="card">
                     <h5>Panel</h5>
                     <Panel header="Header" :toggleable="true">
@@ -1103,7 +1103,7 @@ export default {
                 </div>
             </div>
 
-            <div class="p-col-12 p-md-3">
+            <div class="col-12 md:col-3">
                 <div class="card p-fluid">
                     <h5>Overlay Panel</h5>
                     <Button type="button" label="Choose" @click="toggle" icon="pi pi-search" />
@@ -1125,7 +1125,7 @@ export default {
                 </div>
             </div>
 
-            <div class="p-col-12 p-md-3">
+            <div class="col-12 md:col-3">
                 <div class="card p-fluid">
                     <h5>Dialog</h5>
                     <Dialog header="Dialog" v-model:visible="display" :style="{width: '50vw'}" :breakpoints="{'960px':'75vw'}" :modal="true">
@@ -1143,21 +1143,21 @@ export default {
                 </div>
             </div>
 
-            <div class="p-col-12 p-md-3">
+            <div class="col-12 md:col-3">
                 <div class="card p-fluid">
                     <h5>Confirm Popup</h5>
                     <Button type="button" label="Confirm" @click="confirmWithPopup" class="p-button-success" icon="pi pi-check" />
                     <ConfirmPopup group="popup"></ConfirmPopup>
                 </div>
             </div>
-            <div class="p-col-12 p-md-3">
+            <div class="col-12 md:col-3">
                 <div class="card p-fluid">
                     <h5>Confirm Dialog</h5>
                     <Button type="button" label="Confirm" @click="confirmWithDialog" class="p-button-help" icon="pi pi-check" />
                     <ConfirmDialog group="dialog">></ConfirmDialog>
                 </div>
             </div>
-            <div class="p-col-12">
+            <div class="col-12">
                 <div class="card card-w-title">
                     <h5>Menubar</h5>
                     <Menubar :model="tieredMenuItems">
@@ -1171,14 +1171,14 @@ export default {
                 </div>
             </div>
 
-            <div class="p-col-12 p-md-4">
+            <div class="col-12 md:col-4">
                 <div class="card">
                     <h5>Plain Menu</h5>
                     <Menu :model="menuitems" />
                 </div>
             </div>
 
-            <div class="p-col-12 p-md-4">
+            <div class="col-12 md:col-4">
                 <div class="card">
                     <h5>Overlay Menu</h5>
 
@@ -1193,7 +1193,7 @@ export default {
                 </div>
             </div>
 
-            <div class="p-col-12 p-lg-6">
+            <div class="col-12 lg:col-6">
                 <div class="card">
                     <h5>Messages</h5>
                     <Message severity="info">Info Message</Message>
@@ -1203,15 +1203,15 @@ export default {
                 </div>
             </div>
 
-            <div class="p-col-12 p-lg-6">
+            <div class="col-12 lg:col-6">
                 <div class="card">
                     <h5>Toast</h5>
 
                     <Toast />
-                    <Button @click="showToast('info')" label="Info" class="p-button-info p-mr-2 p-mb-2" />
-                    <Button @click="showToast('success')" label="Success" class="p-button-success p-mr-2 p-mb-2" />
-                    <Button @click="showToast('warn')" label="Warn" class="p-button-warning p-mr-2 p-mb-2" />
-                    <Button @click="showToast('error')" label="Error" class="p-button-danger p-mb-2" />
+                    <Button @click="showToast('info')" label="Info" class="p-button-info mr-2 mb-2" />
+                    <Button @click="showToast('success')" label="Success" class="p-button-success mr-2 mb-2" />
+                    <Button @click="showToast('warn')" label="Warn" class="p-button-warning mr-2 mb-2" />
+                    <Button @click="showToast('error')" label="Error" class="p-button-danger mb-2" />
                 </div>
 
                 <div class="card">
@@ -1224,26 +1224,26 @@ export default {
                 </div>
             </div>
 
-            <div class="p-col-12 p-lg-8">
+            <div class="col-12 lg:col-8">
                 <div class="card">
                     <h5>Inline Message</h5>
-                    <div class="p-formgroup-inline" style="margin-bottom:.5rem">
+                    <div class="formgroup-inline" style="margin-bottom:.5rem">
                         <label for="username1" class="p-sr-only">Username</label>
-                        <InputText id="username1" type="text" placeholder="Username" class="p-invalid p-mr-2" />
+                        <InputText id="username1" type="text" placeholder="Username" class="p-invalid mr-2" />
                         <InlineMessage>Username is required</InlineMessage>
                     </div>
-                    <div class="p-formgroup-inline">
+                    <div class="formgroup-inline">
                         <label for="email" class="p-sr-only">email</label>
-                        <InputText id="email" placeholder="Email" class="p-invalid p-mr-2" />
+                        <InputText id="email" placeholder="Email" class="p-invalid mr-2" />
                         <InlineMessage />
                     </div>
                 </div>
             </div>
 
-            <div class="p-col-12 p-lg-4">
+            <div class="col-12 lg:col-4">
                 <div class="card">
                     <h5>Helper Text</h5>
-                    <div class="p-field p-fluid">
+                    <div class="field p-fluid">
                         <label for="username2">Username</label>
                         <InputText id="username2" type="text" class="p-invalid" aria-describedby="username-help" />
                         <small id="username-help" class="p-error">Enter your username to reset your password.</small>
@@ -1631,37 +1631,37 @@ export default {
 <template>
     <div>
         <h1>Responsive Design</h1>
-        <div class="p-grid">
-            <div class="p-col-12 p-md-6 p-fluid">
+        <div class="grid">
+            <div class="col-12 md:col-6 p-fluid">
                 <div class="card">
                     <h5>InputText</h5>
-                    <div class="p-grid p-formgrid">
-                        <div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0">
+                    <div class="grid formgrid">
+                        <div class="col-12 mb-2 lg:col-4 lg:mb-0">
                             <InputText type="text" placeholder="Default"></InputText>
                         </div>
-                        <div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0">
+                        <div class="col-12 mb-2 lg:col-4 lg:mb-0">
                             <InputText type="text" placeholder="Disabled" :disabled="true"></InputText>
                         </div>
-                        <div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0">
+                        <div class="col-12 mb-2 lg:col-4 lg:mb-0">
                             <InputText type="text" placeholder="Invalid" class="p-invalid" />
                         </div>
                     </div>
 
                     <h5>Icons</h5>
-                    <div class="p-grid p-formgrid">
-                        <div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0">
+                    <div class="grid formgrid">
+                        <div class="col-12 mb-2 lg:col-4 lg:mb-0">
                             <span class="p-input-icon-left">
                                 <i class="pi pi-user" />
                                 <InputText type="text" placeholder="Username" />
                             </span>
                         </div>
-                        <div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0">
+                        <div class="col-12 mb-2 lg:col-4 lg:mb-0">
                             <span class="p-input-icon-right">
                                 <InputText type="text" placeholder="Search" />
                                 <i class="pi pi-search" />
                             </span>
                         </div>
-                        <div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0">
+                        <div class="col-12 mb-2 lg:col-4 lg:mb-0">
                             <span class="p-input-icon-left p-input-icon-right">
                                 <i class="pi pi-user" />
                                 <InputText type="text" placeholder="Search" />
@@ -1705,24 +1705,24 @@ export default {
                 </div>
             </div>
 
-            <div class="p-col-12 p-md-6">
+            <div class="col-12 md:col-6">
                 <div class="card">
                     <h5>RadioButton</h5>
-                    <div class="p-grid">
-                        <div class="p-col-12 p-md-4">
-                            <div class="p-field-radiobutton">
+                    <div class="grid">
+                        <div class="col-12 md:col-4">
+                            <div class="field-radiobutton">
                                 <RadioButton id="option1" name="option" value="Option 1" v-model="radioValue" />
                                 <label for="option1">Option 1</label>
                             </div>
                         </div>
-                        <div class="p-col-12 p-md-4">
-                            <div class="p-field-radiobutton">
+                        <div class="col-12 md:col-4">
+                            <div class="field-radiobutton">
                                 <RadioButton id="option2" name="option" value="Option 2" v-model="radioValue" />
                                 <label for="option2">Option 2</label>
                             </div>
                         </div>
-                        <div class="p-col-12 p-md-4">
-                            <div class="p-field-radiobutton">
+                        <div class="col-12 md:col-4">
+                            <div class="field-radiobutton">
                                 <RadioButton id="option3" name="option" value="Option 3" v-model="radioValue" />
                                 <label for="option3">Option 3</label>
                             </div>
@@ -1730,21 +1730,21 @@ export default {
                     </div>
 
                     <h5>Checkbox</h5>
-                    <div class="p-grid">
-                        <div class="p-col-12 p-md-4">
-                            <div class="p-field-checkbox">
+                    <div class="grid">
+                        <div class="col-12 md:col-4">
+                            <div class="field-checkbox">
                                 <Checkbox id="checkOption1" name="option" value="Option 1" v-model="checkboxValue" />
                                 <label for="checkOption1">Option 1</label>
                             </div>
                         </div>
-                        <div class="p-col-12 p-md-4">
-                            <div class="p-field-checkbox">
+                        <div class="col-12 md:col-4">
+                            <div class="field-checkbox">
                                 <Checkbox id="checkOption2" name="option" value="Option 2" v-model="checkboxValue" />
                                 <label for="checkOption2">Option 2</label>
                             </div>
                         </div>
-                        <div class="p-col-12 p-md-4">
-                            <div class="p-field-checkbox">
+                        <div class="col-12 md:col-4">
+                            <div class="field-checkbox">
                                 <Checkbox id="checkOption3" name="option" value="Option 3" v-model="checkboxValue" />
                                 <label for="checkOption3">Option 3</label>
                             </div>
@@ -1775,102 +1775,102 @@ export default {
                 </div>
             </div>
 
-            <div class="p-col-12">
+            <div class="col-12">
                 <div class="card">
                     <h5>Buttons</h5>
-                    <Button label="Submit" class="p-mr-2 p-mb-2" />
-                    <Button icon="pi pi-check" class="p-mr-2 p-mb-2" />
-                    <Button label="Submit" icon="pi pi-check" class="p-mr-2 p-mb-2" />
-                    <Button label="Submit" icon="pi pi-check" iconPos="right" class="p-mr-2 p-mb-2" />
-                    <Button label="Disabled" disabled="disabled" class="p-mr-2 p-mb-2" />
+                    <Button label="Submit" class="mr-2 mb-2" />
+                    <Button icon="pi pi-check" class="mr-2 mb-2" />
+                    <Button label="Submit" icon="pi pi-check" class="mr-2 mb-2" />
+                    <Button label="Submit" icon="pi pi-check" iconPos="right" class="mr-2 mb-2" />
+                    <Button label="Disabled" disabled="disabled" class="mr-2 mb-2" />
                     
                     <h5>Severities</h5>
-                    <Button label="Primary" class="p-mr-2 p-mb-2" />
-                    <Button label="Secondary" class="p-button-secondary p-mr-2 p-mb-2" />
-                    <Button label="Success" class="p-button-success p-mr-2 p-mb-2" />
-                    <Button label="Info" class="p-button-info p-mr-2 p-mb-2" />
-                    <Button label="Warning" class="p-button-warning p-mr-2 p-mb-2" />
-                    <Button label="Help" class="p-button-help p-mr-2 p-mb-2" />
-                    <Button label="Danger" class="p-button-danger p-mr-2 p-mb-2" />
+                    <Button label="Primary" class="mr-2 mb-2" />
+                    <Button label="Secondary" class="p-button-secondary mr-2 mb-2" />
+                    <Button label="Success" class="p-button-success mr-2 mb-2" />
+                    <Button label="Info" class="p-button-info mr-2 mb-2" />
+                    <Button label="Warning" class="p-button-warning mr-2 mb-2" />
+                    <Button label="Help" class="p-button-help mr-2 mb-2" />
+                    <Button label="Danger" class="p-button-danger mr-2 mb-2" />
 
                     <h5>Raised Buttons</h5>
-                    <Button label="Primary" class="p-button-raised p-mr-2 p-mb-2" />
-                    <Button label="Secondary" class="p-button-raised p-button-secondary p-mr-2 p-mb-2" />
-                    <Button label="Success" class="p-button-raised p-button-success p-mr-2 p-mb-2" />
-                    <Button label="Info" class="p-button-raised p-button-info p-mr-2 p-mb-2" />
-                    <Button label="Warning" class="p-button-raised p-button-warning p-mr-2 p-mb-2" />
-                    <Button label="Help" class="p-button-raised p-button-help p-mr-2 p-mb-2" />
-                    <Button label="Danger" class="p-button-raised p-button-danger p-mb-2" />
+                    <Button label="Primary" class="p-button-raised mr-2 mb-2" />
+                    <Button label="Secondary" class="p-button-raised p-button-secondary mr-2 mb-2" />
+                    <Button label="Success" class="p-button-raised p-button-success mr-2 mb-2" />
+                    <Button label="Info" class="p-button-raised p-button-info mr-2 mb-2" />
+                    <Button label="Warning" class="p-button-raised p-button-warning mr-2 mb-2" />
+                    <Button label="Help" class="p-button-raised p-button-help mr-2 mb-2" />
+                    <Button label="Danger" class="p-button-raised p-button-danger mb-2" />
 
                     <h5>Rounded Buttons</h5>
-                    <Button label="Primary" class="p-button-rounded p-mr-2 p-mb-2" />
-                    <Button label="Secondary" class="p-button-rounded p-button-secondary p-mr-2 p-mb-2" />
-                    <Button label="Success" class="p-button-rounded p-button-success p-mr-2 p-mb-2" />
-                    <Button label="Info" class="p-button-rounded p-button-info p-mr-2 p-mb-2" />
-                    <Button label="Warning" class="p-button-rounded p-button-warning p-mr-2 p-mb-2" />
-                    <Button label="Help" class="p-button-rounded p-button-help p-mr-2 p-mb-2" />
-                    <Button label="Danger" class="p-button-rounded p-button-danger p-mb-2" />
+                    <Button label="Primary" class="p-button-rounded mr-2 mb-2" />
+                    <Button label="Secondary" class="p-button-rounded p-button-secondary mr-2 mb-2" />
+                    <Button label="Success" class="p-button-rounded p-button-success mr-2 mb-2" />
+                    <Button label="Info" class="p-button-rounded p-button-info mr-2 mb-2" />
+                    <Button label="Warning" class="p-button-rounded p-button-warning mr-2 mb-2" />
+                    <Button label="Help" class="p-button-rounded p-button-help mr-2 mb-2" />
+                    <Button label="Danger" class="p-button-rounded p-button-danger mb-2" />
 
                     <h5>Text Buttons</h5>
-                    <Button label="Primary" class="p-button-text p-mr-2 p-mb-2" />
-                    <Button label="Secondary" class="p-button-secondary p-button-text p-mr-2 p-mb-2" />
-                    <Button label="Success" class="p-button-success p-button-text p-mr-2 p-mb-2" />
-                    <Button label="Info" class="p-button-info p-button-text p-mr-2 p-mb-2" />
-                    <Button label="Warning" class="p-button-warning p-button-text p-mr-2 p-mb-2" />
-                    <Button label="Help" class="p-button-help p-button-text p-mr-2 p-mb-2" />
-                    <Button label="Danger" class="p-button-danger p-button-text p-mr-2 p-mb-2" />
-                    <Button label="Plain" class="p-button-text p-button-plain p-mb-2" />
+                    <Button label="Primary" class="p-button-text mr-2 mb-2" />
+                    <Button label="Secondary" class="p-button-secondary p-button-text mr-2 mb-2" />
+                    <Button label="Success" class="p-button-success p-button-text mr-2 mb-2" />
+                    <Button label="Info" class="p-button-info p-button-text mr-2 mb-2" />
+                    <Button label="Warning" class="p-button-warning p-button-text mr-2 mb-2" />
+                    <Button label="Help" class="p-button-help p-button-text mr-2 mb-2" />
+                    <Button label="Danger" class="p-button-danger p-button-text mr-2 mb-2" />
+                    <Button label="Plain" class="p-button-text p-button-plain mb-2" />
 
                     <h5>Raised Text Buttons</h5>
-                    <Button label="Primary" class="p-button-raised p-button-text p-mr-2 p-mb-2" />
-                    <Button label="Secondary" class="p-button-raised p-button-secondary p-button-text p-mr-2 p-mb-2" />
-                    <Button label="Success" class="p-button-raised p-button-success p-button-text p-mr-2 p-mb-2" />
-                    <Button label="Info" class="p-button-raised p-button-info p-button-text p-mr-2 p-mb-2" />
-                    <Button label="Warning" class="p-button-raised p-button-warning p-button-text p-mr-2 p-mb-2" />
-                    <Button label="Help" class="p-button-raised p-button-help p-button-text p-mr-2 p-mb-2" />
-                    <Button label="Danger" class="p-button-raised p-button-danger p-button-text p-mr-2 p-mb-2" />
-                    <Button label="Plain" class="p-button-raised p-button-plain p-button-text p-mb-2" />
+                    <Button label="Primary" class="p-button-raised p-button-text mr-2 mb-2" />
+                    <Button label="Secondary" class="p-button-raised p-button-secondary p-button-text mr-2 mb-2" />
+                    <Button label="Success" class="p-button-raised p-button-success p-button-text mr-2 mb-2" />
+                    <Button label="Info" class="p-button-raised p-button-info p-button-text mr-2 mb-2" />
+                    <Button label="Warning" class="p-button-raised p-button-warning p-button-text mr-2 mb-2" />
+                    <Button label="Help" class="p-button-raised p-button-help p-button-text mr-2 mb-2" />
+                    <Button label="Danger" class="p-button-raised p-button-danger p-button-text mr-2 mb-2" />
+                    <Button label="Plain" class="p-button-raised p-button-plain p-button-text mb-2" />
 
                     <h5>Outlined Buttons</h5>
-                    <Button label="Primary" class="p-button-outlined p-mr-2 p-mb-2" />
-                    <Button label="Secondary" class="p-button-outlined p-button-secondary p-mr-2 p-mb-2" />
-                    <Button label="Success" class="p-button-outlined p-button-success p-mr-2 p-mb-2" />
-                    <Button label="Info" class="p-button-outlined p-button-info p-mr-2 p-mb-2" />
-                    <Button label="Warning" class="p-button-outlined p-button-warning p-mr-2 p-mb-2" />
-                    <Button label="Help" class="p-button-outlined p-button-help p-mr-2 p-mb-2" />
-                    <Button label="Danger" class="p-button-outlined p-button-danger p-mr-2 p-mb-2" />
-                    <Button label="Plain" class="p-button-outlined p-button-plain p-mb-2" />
+                    <Button label="Primary" class="p-button-outlined mr-2 mb-2" />
+                    <Button label="Secondary" class="p-button-outlined p-button-secondary mr-2 mb-2" />
+                    <Button label="Success" class="p-button-outlined p-button-success mr-2 mb-2" />
+                    <Button label="Info" class="p-button-outlined p-button-info mr-2 mb-2" />
+                    <Button label="Warning" class="p-button-outlined p-button-warning mr-2 mb-2" />
+                    <Button label="Help" class="p-button-outlined p-button-help mr-2 mb-2" />
+                    <Button label="Danger" class="p-button-outlined p-button-danger mr-2 mb-2" />
+                    <Button label="Plain" class="p-button-outlined p-button-plain mb-2" />
 
                     <h5>Rounded Icon Buttons</h5>
-                    <Button icon="pi pi-check" class="p-button-rounded p-mr-2 p-mb-2" />
-                    <Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-mr-2 p-mb-2" />
-                    <Button icon="pi pi-search" class="p-button-rounded p-button-success p-mr-2 p-mb-2" />
-                    <Button icon="pi pi-user" class="p-button-rounded p-button-info p-mr-2 p-mb-2" />
-                    <Button icon="pi pi-bell" class="p-button-rounded p-button-warning p-mr-2 p-mb-2" />
-                    <Button icon="pi pi-heart" class="p-button-rounded p-button-help p-mr-2 p-mb-2" />
-                    <Button icon="pi pi-times" class="p-button-rounded p-button-danger p-mb-2" />
+                    <Button icon="pi pi-check" class="p-button-rounded mr-2 mb-2" />
+                    <Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary mr-2 mb-2" />
+                    <Button icon="pi pi-search" class="p-button-rounded p-button-success mr-2 mb-2" />
+                    <Button icon="pi pi-user" class="p-button-rounded p-button-info mr-2 mb-2" />
+                    <Button icon="pi pi-bell" class="p-button-rounded p-button-warning mr-2 mb-2" />
+                    <Button icon="pi pi-heart" class="p-button-rounded p-button-help mr-2 mb-2" />
+                    <Button icon="pi pi-times" class="p-button-rounded p-button-danger mb-2" />
 
                     <h5>Rounded Text Icon Buttons</h5>
-                    <Button icon="pi pi-check" class="p-button-rounded p-button-text p-mr-2 p-mb-2" />
-                    <Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-button-text p-mr-2 p-mb-2" />
-                    <Button icon="pi pi-search" class="p-button-rounded p-button-success p-button-text p-mr-2 p-mb-2" />
-                    <Button icon="pi pi-user" class="p-button-rounded p-button-info p-button-text p-mr-2 p-mb-2" />
-                    <Button icon="pi pi-bell" class="p-button-rounded p-button-warning p-button-text p-mr-2 p-mb-2" />
-                    <Button icon="pi pi-heart" class="p-button-rounded p-button-help p-button-text p-mr-2 p-mb-2" />
-                    <Button icon="pi pi-times" class="p-button-rounded p-button-danger p-button-text p-mr-2 p-mb-2" />
+                    <Button icon="pi pi-check" class="p-button-rounded p-button-text mr-2 mb-2" />
+                    <Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-button-text mr-2 mb-2" />
+                    <Button icon="pi pi-search" class="p-button-rounded p-button-success p-button-text mr-2 mb-2" />
+                    <Button icon="pi pi-user" class="p-button-rounded p-button-info p-button-text mr-2 mb-2" />
+                    <Button icon="pi pi-bell" class="p-button-rounded p-button-warning p-button-text mr-2 mb-2" />
+                    <Button icon="pi pi-heart" class="p-button-rounded p-button-help p-button-text mr-2 mb-2" />
+                    <Button icon="pi pi-times" class="p-button-rounded p-button-danger p-button-text mr-2 mb-2" />
 
                     <h5>Rounded and Outlined Icon Buttons</h5>
-                    <Button icon="pi pi-check" class="p-button-rounded p-button-outlined p-mr-2 p-mb-2" />
-                    <Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-button-outlined p-mr-2 p-mb-2" />
-                    <Button icon="pi pi-search" class="p-button-rounded p-button-success p-button-outlined p-mr-2 p-mb-2" />
-                    <Button icon="pi pi-user" class="p-button-rounded p-button-info p-button-outlined p-mr-2 p-mb-2" />
-                    <Button icon="pi pi-bell" class="p-button-rounded p-button-warning p-button-outlined p-mr-2 p-mb-2" />
-                    <Button icon="pi pi-heart" class="p-button-rounded p-button-help p-button-outlined p-mr-2 p-mb-2" />
-                    <Button icon="pi pi-times" class="p-button-rounded p-button-danger p-button-outlined p-mb-2" />
+                    <Button icon="pi pi-check" class="p-button-rounded p-button-outlined mr-2 mb-2" />
+                    <Button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-button-outlined mr-2 mb-2" />
+                    <Button icon="pi pi-search" class="p-button-rounded p-button-success p-button-outlined mr-2 mb-2" />
+                    <Button icon="pi pi-user" class="p-button-rounded p-button-info p-button-outlined mr-2 mb-2" />
+                    <Button icon="pi pi-bell" class="p-button-rounded p-button-warning p-button-outlined mr-2 mb-2" />
+                    <Button icon="pi pi-heart" class="p-button-rounded p-button-help p-button-outlined mr-2 mb-2" />
+                    <Button icon="pi pi-times" class="p-button-rounded p-button-danger p-button-outlined mb-2" />
 
                     <h5>Badges</h5>
-                    <Button type="button" label="Emails" badge="8" class="p-mr-2 p-mb-2" />
-                    <Button type="button" label="Messages" icon="pi pi-users" class="p-button-warning p-mb-2" badge="8" badgeClass="p-badge-danger" />
+                    <Button type="button" label="Emails" badge="8" class="mr-2 mb-2" />
+                    <Button type="button" label="Messages" icon="pi pi-users" class="p-button-warning mb-2" badge="8" badgeClass="p-badge-danger" />
 
                     <h5>Button Set</h5>
                     <span class="p-buttonset">
@@ -1881,14 +1881,14 @@ export default {
                 </div>
             </div>
 
-            <div class="p-col-12">
+            <div class="col-12">
                 <div class="card">
                     <DataTable :value="customers" :paginator="true" :rows="10"
                         dataKey="id" :rowHover="true" v-model:selection="selectedCustomers" :filters="filters"
                         paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown" :rowsPerPageOptions="[10,25,50]"
                         currentPageReportTemplate="Showing {first} to {last} of {totalRecords} entries" responsiveLayout="scroll">
                         <template #header>
-                            <div class="p-d-flex p-ai-center p-jc-between">
+                            <div class="flex flex-column md:flex-row md:justify-content-between md:align-items-center">
                                 DataTable
                                 <span class="p-input-icon-left">
                                     <i class="pi pi-search" />
@@ -1907,7 +1907,7 @@ export default {
                         </Column>
                         <Column header="Country" :sortable="true" sortField="country.name" filterField="country.name" filterMatchMode="contains" style="min-width:16rem">
                             <template #body="slotProps">
-                                <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :class="'flag flag-' + slotProps.data.country.code" width="30" class="p-mr-2" />
+                                <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :class="'flag flag-' + slotProps.data.country.code" width="30" class="mr-2" />
                                 <span class="image-text">{{slotProps.data.country.name}}</span>
                             </template>
                         </Column>
@@ -1925,7 +1925,7 @@ export default {
                 </div>
             </div>
 
-            <div class="p-col-12 p-md-6">
+            <div class="col-12 md:col-6">
                 <div class="card">
                     <h5>AccordionPanel</h5>
                     <Accordion :multiple="true" :activeIndex="[0]">
@@ -1974,7 +1974,7 @@ export default {
                 </div>
             </div>
 
-            <div class="p-col-12 p-md-6">
+            <div class="col-12 md:col-6">
                 <div class="card">
                     <h5>Panel</h5>
                     <Panel header="Header" :toggleable="true">
@@ -1995,7 +1995,7 @@ export default {
                 </div>
             </div>
 
-            <div class="p-col-12 p-md-3">
+            <div class="col-12 md:col-3">
                 <div class="card p-fluid">
                     <h5>Overlay Panel</h5>
                     <Button type="button" label="Choose" @click="toggle" icon="pi pi-search" />
@@ -2017,7 +2017,7 @@ export default {
                 </div>
             </div>
 
-            <div class="p-col-12 p-md-3">
+            <div class="col-12 md:col-3">
                 <div class="card p-fluid">
                     <h5>Dialog</h5>
                     <Dialog header="Dialog" v-model:visible="display" :style="{width: '50vw'}" :breakpoints="{'960px':'75vw'}" :modal="true">
@@ -2035,21 +2035,21 @@ export default {
                 </div>
             </div>
 
-            <div class="p-col-12 p-md-3">
+            <div class="col-12 md:col-3">
                 <div class="card p-fluid">
                     <h5>Confirm Popup</h5>
                     <Button type="button" label="Confirm" @click="confirmWithPopup" class="p-button-success" icon="pi pi-check" />
                     <ConfirmPopup group="popup"></ConfirmPopup>
                 </div>
             </div>
-            <div class="p-col-12 p-md-3">
+            <div class="col-12 md:col-3">
                 <div class="card p-fluid">
                     <h5>Confirm Dialog</h5>
                     <Button type="button" label="Confirm" @click="confirmWithDialog" class="p-button-help" icon="pi pi-check" />
                     <ConfirmDialog group="dialog">></ConfirmDialog>
                 </div>
             </div>
-            <div class="p-col-12">
+            <div class="col-12">
                 <div class="card card-w-title">
                     <h5>Menubar</h5>
                     <Menubar :model="tieredMenuItems">
@@ -2063,14 +2063,14 @@ export default {
                 </div>
             </div>
 
-            <div class="p-col-12 p-md-4">
+            <div class="col-12 md:col-4">
                 <div class="card">
                     <h5>Plain Menu</h5>
                     <Menu :model="menuitems" />
                 </div>
             </div>
 
-            <div class="p-col-12 p-md-4">
+            <div class="col-12 md:col-4">
                 <div class="card">
                     <h5>Overlay Menu</h5>
 
@@ -2085,7 +2085,7 @@ export default {
                 </div>
             </div>
 
-            <div class="p-col-12 p-lg-6">
+            <div class="col-12 lg:col-6">
                 <div class="card">
                     <h5>Messages</h5>
                     <Message severity="info">Info Message</Message>
@@ -2095,15 +2095,15 @@ export default {
                 </div>
             </div>
 
-            <div class="p-col-12 p-lg-6">
+            <div class="col-12 lg:col-6">
                 <div class="card">
                     <h5>Toast</h5>
 
                     <Toast />
-                    <Button @click="showToast('info')" label="Info" class="p-button-info p-mr-2 p-mb-2" />
-                    <Button @click="showToast('success')" label="Success" class="p-button-success p-mr-2 p-mb-2" />
-                    <Button @click="showToast('warn')" label="Warn" class="p-button-warning p-mr-2 p-mb-2" />
-                    <Button @click="showToast('error')" label="Error" class="p-button-danger p-mb-2" />
+                    <Button @click="showToast('info')" label="Info" class="p-button-info mr-2 mb-2" />
+                    <Button @click="showToast('success')" label="Success" class="p-button-success mr-2 mb-2" />
+                    <Button @click="showToast('warn')" label="Warn" class="p-button-warning mr-2 mb-2" />
+                    <Button @click="showToast('error')" label="Error" class="p-button-danger mb-2" />
                 </div>
 
                 <div class="card">
@@ -2116,26 +2116,26 @@ export default {
                 </div>
             </div>
 
-            <div class="p-col-12 p-lg-8">
+            <div class="col-12 lg:col-8">
                 <div class="card">
                     <h5>Inline Message</h5>
-                    <div class="p-formgroup-inline" style="margin-bottom:.5rem">
+                    <div class="formgroup-inline" style="margin-bottom:.5rem">
                         <label for="username1" class="p-sr-only">Username</label>
-                        <InputText id="username1" type="text" placeholder="Username" class="p-invalid p-mr-2" />
+                        <InputText id="username1" type="text" placeholder="Username" class="p-invalid mr-2" />
                         <InlineMessage>Username is required</InlineMessage>
                     </div>
-                    <div class="p-formgroup-inline">
+                    <div class="formgroup-inline">
                         <label for="email" class="p-sr-only">email</label>
-                        <InputText id="email" placeholder="Email" class="p-invalid p-mr-2" />
+                        <InputText id="email" placeholder="Email" class="p-invalid mr-2" />
                         <InlineMessage />
                     </div>
                 </div>
             </div>
 
-            <div class="p-col-12 p-lg-4">
+            <div class="col-12 lg:col-4">
                 <div class="card">
                     <h5>Helper Text</h5>
-                    <div class="p-field p-fluid">
+                    <div class="field p-fluid">
                         <label for="username2">Username</label>
                         <InputText id="username2" type="text" class="p-invalid" aria-describedby="username-help" />
                         <small id="username-help" class="p-error">Enter your username to reset your password.</small>
@@ -2567,37 +2567,37 @@ export default {
                     content: `
         <div id="app">
             <h1>Responsive Design</h1>
-            <div class="p-grid">
-                <div class="p-col-12 p-md-6 p-fluid">
+            <div class="grid">
+                <div class="col-12 md:col-6 p-fluid">
                     <div class="card">
                         <h5>InputText</h5>
-                        <div class="p-grid p-formgrid">
-                            <div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0">
+                        <div class="grid formgrid">
+                            <div class="col-12 mb-2 lg:col-4 lg:mb-0">
                                 <p-inputtext type="text" placeholder="Default"></p-inputtext>
                             </div>
-                            <div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0">
+                            <div class="col-12 mb-2 lg:col-4 lg:mb-0">
                                 <p-inputtext type="text" placeholder="Disabled" :disabled="true"></p-inputtext>
                             </div>
-                            <div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0">
+                            <div class="col-12 mb-2 lg:col-4 lg:mb-0">
                                 <p-inputtext type="text" placeholder="Invalid" class="p-invalid"></p-inputtext>
                             </div>
                         </div>
 
                         <h5>Icons</h5>
-                        <div class="p-grid p-formgrid">
-                            <div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0">
+                        <div class="grid formgrid">
+                            <div class="col-12 mb-2 lg:col-4 lg:mb-0">
                                 <span class="p-input-icon-left">
                                     <i class="pi pi-user"></i>
                                     <p-inputtext type="text" placeholder="Username"></p-inputtext>
                                 </span>
                             </div>
-                            <div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0">
+                            <div class="col-12 mb-2 lg:col-4 lg:mb-0">
                                 <span class="p-input-icon-right">
                                     <p-inputtext type="text" placeholder="Search"></p-inputtext>
                                     <i class="pi pi-search"></i>
                                 </span>
                             </div>
-                            <div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0">
+                            <div class="col-12 mb-2 lg:col-4 lg:mb-0">
                                 <span class="p-input-icon-left p-input-icon-right">
                                     <i class="pi pi-user"></i>
                                     <p-inputtext type="text" placeholder="Search"></p-inputtext>
@@ -2641,24 +2641,24 @@ export default {
                     </div>
                 </div>
 
-                <div class="p-col-12 p-md-6">
+                <div class="col-12 md:col-6">
                     <div class="card">
                         <h5>RadioButton</h5>
-                        <div class="p-grid">
-                            <div class="p-col-12 p-md-4">
-                                <div class="p-field-radiobutton">
+                        <div class="grid">
+                            <div class="col-12 md:col-4">
+                                <div class="field-radiobutton">
                                     <p-radiobutton id="option1" name="option" value="Option 1" v-model="radioValue"></p-radiobutton>
                                     <label for="option1">Option 1</label>
                                 </div>
                             </div>
-                            <div class="p-col-12 p-md-4">
-                                <div class="p-field-radiobutton">
+                            <div class="col-12 md:col-4">
+                                <div class="field-radiobutton">
                                     <p-radiobutton id="option2" name="option" value="Option 2" v-model="radioValue"></p-radiobutton>
                                     <label for="option2">Option 2</label>
                                 </div>
                             </div>
-                            <div class="p-col-12 p-md-4">
-                                <div class="p-field-radiobutton">
+                            <div class="col-12 md:col-4">
+                                <div class="field-radiobutton">
                                     <p-radiobutton id="option3" name="option" value="Option 3" v-model="radioValue"></p-radiobutton>
                                     <label for="option3">Option 3</label>
                                 </div>
@@ -2666,21 +2666,21 @@ export default {
                         </div>
 
                         <h5>Checkbox</h5>
-                        <div class="p-grid">
-                            <div class="p-col-12 p-md-4">
-                                <div class="p-field-checkbox">
+                        <div class="grid">
+                            <div class="col-12 md:col-4">
+                                <div class="field-checkbox">
                                     <p-checkbox id="checkOption1" name="option" value="Option 1" v-model="checkboxValue"></p-checkbox>
                                     <label for="checkOption1">Option 1</label>
                                 </div>
                             </div>
-                            <div class="p-col-12 p-md-4">
-                                <div class="p-field-checkbox">
+                            <div class="col-12 md:col-4">
+                                <div class="field-checkbox">
                                     <p-checkbox id="checkOption2" name="option" value="Option 2" v-model="checkboxValue"></p-checkbox>
                                     <label for="checkOption2">Option 2</label>
                                 </div>
                             </div>
-                            <div class="p-col-12 p-md-4">
-                                <div class="p-field-checkbox">
+                            <div class="col-12 md:col-4">
+                                <div class="field-checkbox">
                                     <p-checkbox id="checkOption3" name="option" value="Option 3" v-model="checkboxValue"></p-checkbox>
                                     <label for="checkOption3">Option 3</label>
                                 </div>
@@ -2711,102 +2711,102 @@ export default {
                     </div>
                 </div>
 
-                <div class="p-col-12">
+                <div class="col-12">
                     <div class="card">
                         <h5>Buttons</h5>
-                        <p-button label="Submit" class="p-mr-2 p-mb-2"></p-button>
-                        <p-button icon="pi pi-check" class="p-mr-2 p-mb-2"></p-button>
-                        <p-button label="Submit" icon="pi pi-check" class="p-mr-2 p-mb-2"></p-button>
-                        <p-button label="Submit" icon="pi pi-check" iconPos="right" class="p-mr-2 p-mb-2"></p-button>
-                        <p-button label="Disabled" disabled="disabled" class="p-mr-2 p-mb-2"></p-button>
+                        <p-button label="Submit" class="mr-2 mb-2"></p-button>
+                        <p-button icon="pi pi-check" class="mr-2 mb-2"></p-button>
+                        <p-button label="Submit" icon="pi pi-check" class="mr-2 mb-2"></p-button>
+                        <p-button label="Submit" icon="pi pi-check" iconPos="right" class="mr-2 mb-2"></p-button>
+                        <p-button label="Disabled" disabled="disabled" class="mr-2 mb-2"></p-button>
                         
                         <h5>Severities</h5>
-                        <p-button label="Primary" class="p-mr-2 p-mb-2"></p-button>
-                        <p-button label="Secondary" class="p-button-secondary p-mr-2 p-mb-2"></p-button>
-                        <p-button label="Success" class="p-button-success p-mr-2 p-mb-2"></p-button>
-                        <p-button label="Info" class="p-button-info p-mr-2 p-mb-2"></p-button>
-                        <p-button label="Warning" class="p-button-warning p-mr-2 p-mb-2"></p-button>
-                        <p-button label="Help" class="p-button-help p-mr-2 p-mb-2"></p-button>
-                        <p-button label="Danger" class="p-button-danger p-mr-2 p-mb-2"></p-button>
+                        <p-button label="Primary" class="mr-2 mb-2"></p-button>
+                        <p-button label="Secondary" class="p-button-secondary mr-2 mb-2"></p-button>
+                        <p-button label="Success" class="p-button-success mr-2 mb-2"></p-button>
+                        <p-button label="Info" class="p-button-info mr-2 mb-2"></p-button>
+                        <p-button label="Warning" class="p-button-warning mr-2 mb-2"></p-button>
+                        <p-button label="Help" class="p-button-help mr-2 mb-2"></p-button>
+                        <p-button label="Danger" class="p-button-danger mr-2 mb-2"></p-button>
 
                         <h5>Raised Buttons</h5>
-                        <p-button label="Primary" class="p-button-raised p-mr-2 p-mb-2"></p-button>
-                        <p-button label="Secondary" class="p-button-raised p-button-secondary p-mr-2 p-mb-2"></p-button>
-                        <p-button label="Success" class="p-button-raised p-button-success p-mr-2 p-mb-2"></p-button>
-                        <p-button label="Info" class="p-button-raised p-button-info p-mr-2 p-mb-2"></p-button>
-                        <p-button label="Warning" class="p-button-raised p-button-warning p-mr-2 p-mb-2"></p-button>
-                        <p-button label="Help" class="p-button-raised p-button-help p-mr-2 p-mb-2"></p-button>
-                        <p-button label="Danger" class="p-button-raised p-button-danger p-mb-2"></p-button>
+                        <p-button label="Primary" class="p-button-raised mr-2 mb-2"></p-button>
+                        <p-button label="Secondary" class="p-button-raised p-button-secondary mr-2 mb-2"></p-button>
+                        <p-button label="Success" class="p-button-raised p-button-success mr-2 mb-2"></p-button>
+                        <p-button label="Info" class="p-button-raised p-button-info mr-2 mb-2"></p-button>
+                        <p-button label="Warning" class="p-button-raised p-button-warning mr-2 mb-2"></p-button>
+                        <p-button label="Help" class="p-button-raised p-button-help mr-2 mb-2"></p-button>
+                        <p-button label="Danger" class="p-button-raised p-button-danger mb-2"></p-button>
 
                         <h5>Rounded Buttons</h5>
-                        <p-button label="Primary" class="p-button-rounded p-mr-2 p-mb-2"></p-button>
-                        <p-button label="Secondary" class="p-button-rounded p-button-secondary p-mr-2 p-mb-2"></p-button>
-                        <p-button label="Success" class="p-button-rounded p-button-success p-mr-2 p-mb-2"></p-button>
-                        <p-button label="Info" class="p-button-rounded p-button-info p-mr-2 p-mb-2"></p-button>
-                        <p-button label="Warning" class="p-button-rounded p-button-warning p-mr-2 p-mb-2"></p-button>
-                        <p-button label="Help" class="p-button-rounded p-button-help p-mr-2 p-mb-2"></p-button>
-                        <p-button label="Danger" class="p-button-rounded p-button-danger p-mb-2"></p-button>
+                        <p-button label="Primary" class="p-button-rounded mr-2 mb-2"></p-button>
+                        <p-button label="Secondary" class="p-button-rounded p-button-secondary mr-2 mb-2"></p-button>
+                        <p-button label="Success" class="p-button-rounded p-button-success mr-2 mb-2"></p-button>
+                        <p-button label="Info" class="p-button-rounded p-button-info mr-2 mb-2"></p-button>
+                        <p-button label="Warning" class="p-button-rounded p-button-warning mr-2 mb-2"></p-button>
+                        <p-button label="Help" class="p-button-rounded p-button-help mr-2 mb-2"></p-button>
+                        <p-button label="Danger" class="p-button-rounded p-button-danger mb-2"></p-button>
 
                         <h5>Text Buttons</h5>
-                        <p-button label="Primary" class="p-button-text p-mr-2 p-mb-2"></p-button>
-                        <p-button label="Secondary" class="p-button-secondary p-button-text p-mr-2 p-mb-2"></p-button>
-                        <p-button label="Success" class="p-button-success p-button-text p-mr-2 p-mb-2"></p-button>
-                        <p-button label="Info" class="p-button-info p-button-text p-mr-2 p-mb-2"></p-button>
-                        <p-button label="Warning" class="p-button-warning p-button-text p-mr-2 p-mb-2"></p-button>
-                        <p-button label="Help" class="p-button-help p-button-text p-mr-2 p-mb-2"></p-button>
-                        <p-button label="Danger" class="p-button-danger p-button-text p-mr-2 p-mb-2"></p-button>
-                        <p-button label="Plain" class="p-button-text p-button-plain p-mb-2"></p-button>
+                        <p-button label="Primary" class="p-button-text mr-2 mb-2"></p-button>
+                        <p-button label="Secondary" class="p-button-secondary p-button-text mr-2 mb-2"></p-button>
+                        <p-button label="Success" class="p-button-success p-button-text mr-2 mb-2"></p-button>
+                        <p-button label="Info" class="p-button-info p-button-text mr-2 mb-2"></p-button>
+                        <p-button label="Warning" class="p-button-warning p-button-text mr-2 mb-2"></p-button>
+                        <p-button label="Help" class="p-button-help p-button-text mr-2 mb-2"></p-button>
+                        <p-button label="Danger" class="p-button-danger p-button-text mr-2 mb-2"></p-button>
+                        <p-button label="Plain" class="p-button-text p-button-plain mb-2"></p-button>
 
                         <h5>Raised Text Buttons</h5>
-                        <p-button label="Primary" class="p-button-raised p-button-text p-mr-2 p-mb-2"></p-button>
-                        <p-button label="Secondary" class="p-button-raised p-button-secondary p-button-text p-mr-2 p-mb-2"></p-button>"
-                        <p-button label="Success" class="p-button-raised p-button-success p-button-text p-mr-2 p-mb-2"></p-button>
-                        <p-button label="Info" class="p-button-raised p-button-info p-button-text p-mr-2 p-mb-2"></p-button>
-                        <p-button label="Warning" class="p-button-raised p-button-warning p-button-text p-mr-2 p-mb-2"></p-button>
-                        <p-button label="Help" class="p-button-raised p-button-help p-button-text p-mr-2 p-mb-2"></p-button>
-                        <p-button label="Danger" class="p-button-raised p-button-danger p-button-text p-mr-2 p-mb-2"></p-button>
-                        <p-button label="Plain" class="p-button-raised p-button-plain p-button-text p-mb-2"></p-button>
+                        <p-button label="Primary" class="p-button-raised p-button-text mr-2 mb-2"></p-button>
+                        <p-button label="Secondary" class="p-button-raised p-button-secondary p-button-text mr-2 mb-2"></p-button>"
+                        <p-button label="Success" class="p-button-raised p-button-success p-button-text mr-2 mb-2"></p-button>
+                        <p-button label="Info" class="p-button-raised p-button-info p-button-text mr-2 mb-2"></p-button>
+                        <p-button label="Warning" class="p-button-raised p-button-warning p-button-text mr-2 mb-2"></p-button>
+                        <p-button label="Help" class="p-button-raised p-button-help p-button-text mr-2 mb-2"></p-button>
+                        <p-button label="Danger" class="p-button-raised p-button-danger p-button-text mr-2 mb-2"></p-button>
+                        <p-button label="Plain" class="p-button-raised p-button-plain p-button-text mb-2"></p-button>
 
                         <h5>Outlined Buttons</h5>
-                        <p-button label="Primary" class="p-button-outlined p-mr-2 p-mb-2"></p-button>
-                        <p-button label="Secondary" class="p-button-outlined p-button-secondary p-mr-2 p-mb-2"></p-button>
-                        <p-button label="Success" class="p-button-outlined p-button-success p-mr-2 p-mb-2"></p-button>
-                        <p-button label="Info" class="p-button-outlined p-button-info p-mr-2 p-mb-2"></p-button>
-                        <p-button label="Warning" class="p-button-outlined p-button-warning p-mr-2 p-mb-2"></p-button>
-                        <p-button label="Help" class="p-button-outlined p-button-help p-mr-2 p-mb-2"></p-button>
-                        <p-button label="Danger" class="p-button-outlined p-button-danger p-mr-2 p-mb-2"></p-button>
-                        <p-button label="Plain" class="p-button-outlined p-button-plain p-mb-2"></p-button>
+                        <p-button label="Primary" class="p-button-outlined mr-2 mb-2"></p-button>
+                        <p-button label="Secondary" class="p-button-outlined p-button-secondary mr-2 mb-2"></p-button>
+                        <p-button label="Success" class="p-button-outlined p-button-success mr-2 mb-2"></p-button>
+                        <p-button label="Info" class="p-button-outlined p-button-info mr-2 mb-2"></p-button>
+                        <p-button label="Warning" class="p-button-outlined p-button-warning mr-2 mb-2"></p-button>
+                        <p-button label="Help" class="p-button-outlined p-button-help mr-2 mb-2"></p-button>
+                        <p-button label="Danger" class="p-button-outlined p-button-danger mr-2 mb-2"></p-button>
+                        <p-button label="Plain" class="p-button-outlined p-button-plain mb-2"></p-button>
 
                         <h5>Rounded Icon Buttons</h5>
-                        <p-button icon="pi pi-check" class="p-button-rounded p-mr-2 p-mb-2"></p-button>
-                        <p-button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-mr-2 p-mb-2"></p-button>
-                        <p-button icon="pi pi-search" class="p-button-rounded p-button-success p-mr-2 p-mb-2"></p-button>
-                        <p-button icon="pi pi-user" class="p-button-rounded p-button-info p-mr-2 p-mb-2"></p-button>
-                        <p-button icon="pi pi-bell" class="p-button-rounded p-button-warning p-mr-2 p-mb-2"></p-button>
-                        <p-button icon="pi pi-heart" class="p-button-rounded p-button-help p-mr-2 p-mb-2"></p-button>
-                        <p-button icon="pi pi-times" class="p-button-rounded p-button-danger p-mb-2"></p-button>
+                        <p-button icon="pi pi-check" class="p-button-rounded mr-2 mb-2"></p-button>
+                        <p-button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary mr-2 mb-2"></p-button>
+                        <p-button icon="pi pi-search" class="p-button-rounded p-button-success mr-2 mb-2"></p-button>
+                        <p-button icon="pi pi-user" class="p-button-rounded p-button-info mr-2 mb-2"></p-button>
+                        <p-button icon="pi pi-bell" class="p-button-rounded p-button-warning mr-2 mb-2"></p-button>
+                        <p-button icon="pi pi-heart" class="p-button-rounded p-button-help mr-2 mb-2"></p-button>
+                        <p-button icon="pi pi-times" class="p-button-rounded p-button-danger mb-2"></p-button>
 
                         <h5>Rounded Text Icon Buttons</h5>
-                        <p-button icon="pi pi-check" class="p-button-rounded p-button-text p-mr-2 p-mb-2"></p-button>
-                        <p-button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-button-text p-mr-2 p-mb-2"></p-button>
-                        <p-button icon="pi pi-search" class="p-button-rounded p-button-success p-button-text p-mr-2 p-mb-2"></p-button>
-                        <p-button icon="pi pi-user" class="p-button-rounded p-button-info p-button-text p-mr-2 p-mb-2"></p-button>
-                        <p-button icon="pi pi-bell" class="p-button-rounded p-button-warning p-button-text p-mr-2 p-mb-2"></p-button>
-                        <p-button icon="pi pi-heart" class="p-button-rounded p-button-help p-button-text p-mr-2 p-mb-2"></p-button>
-                        <p-button icon="pi pi-times" class="p-button-rounded p-button-danger p-button-text p-mr-2 p-mb-2"></p-button>
+                        <p-button icon="pi pi-check" class="p-button-rounded p-button-text mr-2 mb-2"></p-button>
+                        <p-button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-button-text mr-2 mb-2"></p-button>
+                        <p-button icon="pi pi-search" class="p-button-rounded p-button-success p-button-text mr-2 mb-2"></p-button>
+                        <p-button icon="pi pi-user" class="p-button-rounded p-button-info p-button-text mr-2 mb-2"></p-button>
+                        <p-button icon="pi pi-bell" class="p-button-rounded p-button-warning p-button-text mr-2 mb-2"></p-button>
+                        <p-button icon="pi pi-heart" class="p-button-rounded p-button-help p-button-text mr-2 mb-2"></p-button>
+                        <p-button icon="pi pi-times" class="p-button-rounded p-button-danger p-button-text mr-2 mb-2"></p-button>
 
                         <h5>Rounded and Outlined Icon Buttons</h5>
-                        <p-button icon="pi pi-check" class="p-button-rounded p-button-outlined p-mr-2 p-mb-2"></p-button>
-                        <p-button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-button-outlined p-mr-2 p-mb-2"></p-button>
-                        <p-button icon="pi pi-search" class="p-button-rounded p-button-success p-button-outlined p-mr-2 p-mb-2"></p-button>
-                        <p-button icon="pi pi-user" class="p-button-rounded p-button-info p-button-outlined p-mr-2 p-mb-2"></p-button>
-                        <p-button icon="pi pi-bell" class="p-button-rounded p-button-warning p-button-outlined p-mr-2 p-mb-2"></p-button>
-                        <p-button icon="pi pi-heart" class="p-button-rounded p-button-help p-button-outlined p-mr-2 p-mb-2"></p-button>
-                        <p-button icon="pi pi-times" class="p-button-rounded p-button-danger p-button-outlined p-mb-2"></p-button>
+                        <p-button icon="pi pi-check" class="p-button-rounded p-button-outlined mr-2 mb-2"></p-button>
+                        <p-button icon="pi pi-bookmark" class="p-button-rounded p-button-secondary p-button-outlined mr-2 mb-2"></p-button>
+                        <p-button icon="pi pi-search" class="p-button-rounded p-button-success p-button-outlined mr-2 mb-2"></p-button>
+                        <p-button icon="pi pi-user" class="p-button-rounded p-button-info p-button-outlined mr-2 mb-2"></p-button>
+                        <p-button icon="pi pi-bell" class="p-button-rounded p-button-warning p-button-outlined mr-2 mb-2"></p-button>
+                        <p-button icon="pi pi-heart" class="p-button-rounded p-button-help p-button-outlined mr-2 mb-2"></p-button>
+                        <p-button icon="pi pi-times" class="p-button-rounded p-button-danger p-button-outlined mb-2"></p-button>
 
                         <h5>Badges</h5>
-                        <p-button type="button" label="Emails" badge="8" class="p-mr-2 p-mb-2"></p-button>
-                        <p-button type="button" label="Messages" icon="pi pi-users" class="p-button-warning p-mb-2" badge="8" badge-class="p-badge-danger"></p-button>
+                        <p-button type="button" label="Emails" badge="8" class="mr-2 mb-2"></p-button>
+                        <p-button type="button" label="Messages" icon="pi pi-users" class="p-button-warning mb-2" badge="8" badge-class="p-badge-danger"></p-button>
 
                         <h5>Button Set</h5>
                         <span class="p-buttonset">
@@ -2817,14 +2817,14 @@ export default {
                     </div>
                 </div>
 
-                <div class="p-col-12">
+                <div class="col-12">
                     <div class="card">
                         <p-datatable :value="customers" :paginator="true" :rows="10"
                             data-key="id" :row-hover="true" v-model:selection="selectedCustomers" :filters="filters"
                             paginator-template="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown" :rows-per-page-options="[10,25,50]"
                             current-page-report-template="Showing {first} to {last} of {totalRecords} entries" responsive-layout="scroll">
                             <template #header>
-                                <div class="p-d-flex p-ai-center p-jc-between">
+                                <div class="flex flex-column md:flex-row md:justify-content-between md:align-items-center">
                                     DataTable
                                     <span class="p-input-icon-left">
                                         <i class="pi pi-search"></i>
@@ -2843,7 +2843,7 @@ export default {
                             </p-column>
                             <p-column header="Country" :sortable="true" sort-field="country.name" filter-field="country.name" filter-match-mode="contains" style="min-width:16rem">
                                 <template #body="slotProps">
-                                    <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :class="'flag flag-' + slotProps.data.country.code" width="30" class="p-mr-2" />
+                                    <img src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :class="'flag flag-' + slotProps.data.country.code" width="30" class="mr-2" />
                                     <span class="image-text">{{slotProps.data.country.name}}</span>
                                 </template>
                             </p-column>
@@ -2861,7 +2861,7 @@ export default {
                     </div>
                 </div>
 
-                <div class="p-col-12 p-md-6">
+                <div class="col-12 md:col-6">
                     <div class="card">
                         <h5>AccordionPanel</h5>
                         <p-accordion :multiple="true" :active-index="[0]">
@@ -2910,7 +2910,7 @@ export default {
                     </div>
                 </div>
 
-                <div class="p-col-12 p-md-6">
+                <div class="col-12 md:col-6">
                     <div class="card">
                         <h5>Panel</h5>
                         <p-panel header="Header" :toggleable="true">
@@ -2922,16 +2922,16 @@ export default {
                     </div>
                     <div class="card">
                         <h5>Fieldset</h5>
-                        <p-fieldset legend="Legend" :toggleable="true">
+                        <fieldset legend="Legend" :toggleable="true">
                             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                                 Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
                                 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
                                 Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
-                        </p-fieldset>
+                        </fieldset>
                     </div>
                 </div>
 
-                <div class="p-col-12 p-md-3">
+                <div class="col-12 md:col-3">
                     <div class="card p-fluid">
                         <h5>Overlay Panel</h5>
                         <p-button type="button" label="Choose" @click="toggle" icon="pi pi-search"></p-button>
@@ -2953,7 +2953,7 @@ export default {
                     </div>
                 </div>
 
-                <div class="p-col-12 p-md-3">
+                <div class="col-12 md:col-3">
                     <div class="card p-fluid">
                         <h5>Dialog</h5>
                         <p-dialog header="Dialog" v-model:visible="display" :style="{width: '50vw'}" :breakpoints="{'960px':'75vw'}" :modal="true">
@@ -2971,21 +2971,21 @@ export default {
                     </div>
                 </div>
 
-                <div class="p-col-12 p-md-3">
+                <div class="col-12 md:col-3">
                     <div class="card p-fluid">
                         <h5>Confirm Popup</h5>
                         <p-button type="button" label="Confirm" @click="confirmWithPopup" class="p-button-success" icon="pi pi-check"></p-button>
                         <p-confirmpopup group="popup"></p-confirmpopup>
                     </div>
                 </div>
-                <div class="p-col-12 p-md-3">
+                <div class="col-12 md:col-3">
                     <div class="card p-fluid">
                         <h5>Confirm Dialog</h5>
                         <p-button type="button" label="Confirm" @click="confirmWithDialog" class="p-button-help" icon="pi pi-check"></p-button>
                         <p-confirmdialog group="dialog">></p-confirmdialog>
                     </div>
                 </div>
-                <div class="p-col-12">
+                <div class="col-12">
                     <div class="card card-w-title">
                         <h5>Menubar</h5>
                         <p-menubar :model="tieredMenuItems">
@@ -2999,14 +2999,14 @@ export default {
                     </div>
                 </div>
 
-                <div class="p-col-12 p-md-4">
+                <div class="col-12 md:col-4">
                     <div class="card">
                         <h5>Plain Menu</h5>
                         <p-menu :model="menuitems"></p-menu>
                     </div>
                 </div>
 
-                <div class="p-col-12 p-md-4">
+                <div class="col-12 md:col-4">
                     <div class="card">
                         <h5>Overlay Menu</h5>
 
@@ -3021,7 +3021,7 @@ export default {
                     </div>
                 </div>
 
-                <div class="p-col-12 p-lg-6">
+                <div class="col-12 lg:col-6">
                     <div class="card">
                         <h5>Messages</h5>
                         <p-message severity="info">Info Message</p-message>
@@ -3031,15 +3031,15 @@ export default {
                     </div>
                 </div>
 
-                <div class="p-col-12 p-lg-6">
+                <div class="col-12 lg:col-6">
                     <div class="card">
                         <h5>Toast</h5>
 
                         <p-toast></p-toast>
-                        <p-button @click="showToast('info')" label="Info" class="p-button-info p-mr-2 p-mb-2"></p-button>
-                        <p-button @click="showToast('success')" label="Success" class="p-button-success p-mr-2 p-mb-2"></p-button>
-                        <p-button @click="showToast('warn')" label="Warn" class="p-button-warning p-mr-2 p-mb-2"></p-button>
-                        <p-button @click="showToast('error')" label="Error" class="p-button-danger p-mb-2"></p-button>
+                        <p-button @click="showToast('info')" label="Info" class="p-button-info mr-2 mb-2"></p-button>
+                        <p-button @click="showToast('success')" label="Success" class="p-button-success mr-2 mb-2"></p-button>
+                        <p-button @click="showToast('warn')" label="Warn" class="p-button-warning mr-2 mb-2"></p-button>
+                        <p-button @click="showToast('error')" label="Error" class="p-button-danger mb-2"></p-button>
                     </div>
 
                     <div class="card">
@@ -3052,26 +3052,26 @@ export default {
                     </div>
                 </div>
 
-                <div class="p-col-12 p-lg-8">
+                <div class="col-12 lg:col-8">
                     <div class="card">
                         <h5>Inline Message</h5>
-                        <div class="p-formgroup-inline" style="margin-bottom:.5rem">
+                        <div class="formgroup-inline" style="margin-bottom:.5rem">
                             <label for="username1" class="p-sr-only">Username</label>
-                            <p-inputtext id="username1" type="text" placeholder="Username" class="p-invalid p-mr-2"></p-inputtext>
+                            <p-inputtext id="username1" type="text" placeholder="Username" class="p-invalid mr-2"></p-inputtext>
                             <p-inlinemessage>Username is required</p-inlinemessage>
                         </div>
-                        <div class="p-formgroup-inline">
+                        <div class="formgroup-inline">
                             <label for="email" class="p-sr-only">email</label>
-                            <p-inputtext id="email" placeholder="Email" class="p-invalid p-mr-2"></p-inputtext>
+                            <p-inputtext id="email" placeholder="Email" class="p-invalid mr-2"></p-inputtext>
                             <p-inlinemessage></p-inlinemessage>
                         </div>
                     </div>
                 </div>
 
-                <div class="p-col-12 p-lg-4">
+                <div class="col-12 lg:col-4">
                     <div class="card">
                         <h5>Helper Text</h5>
-                        <div class="p-field p-fluid">
+                        <div class="field p-fluid">
                             <label for="username2">Username</label>
                             <p-inputtext id="username2" type="text" class="p-invalid" aria-describedby="username-help"></p-inputtext>
                             <small id="username-help" class="p-error">Enter your username to reset your password.</small>
@@ -3419,7 +3419,7 @@ export default {
                 "p-tabview": primevue.tabview,
                 "p-tabpanel": primevue.tabpanel,
                 "p-panel": primevue.panel,
-                "p-fieldset": primevue.fieldset,
+                "fieldset": primevue.fieldset,
                 "p-overlaypanel": primevue.overlaypanel,
                 "p-dialog": primevue.dialog,
                 "p-confirmpopup": primevue.confirmpopup,
diff --git a/src/views/ripple/RippleDemo.vue b/src/views/ripple/RippleDemo.vue
index 9685bf161..0af4ffd0b 100644
--- a/src/views/ripple/RippleDemo.vue
+++ b/src/views/ripple/RippleDemo.vue
@@ -9,7 +9,7 @@
         </div>
 
         <div class="content-section implementation">
-            <div class="card-container p-d-flex">
+            <div class="card-container flex">
                 <div class="card primary-box p-ripple" v-ripple>Default</div>
                 <div class="card styled-box-green p-ripple" v-ripple>Green</div>
                 <div class="card styled-box-orange p-ripple" v-ripple>Orange</div>
diff --git a/src/views/ripple/RippleDoc.vue b/src/views/ripple/RippleDoc.vue
index 09b6115fe..75110a3c1 100644
--- a/src/views/ripple/RippleDoc.vue
+++ b/src/views/ripple/RippleDoc.vue
@@ -13,7 +13,7 @@ app.use(PrimeVue, {ripple: true});
 
 </code></pre>
 
-        <p><span class="p-text-bold">Note</span>: That would be it to enable ripple on PrimeVue components, next section describes how to use it with your own components and standard elements.</p>
+        <p><span class="font-bold">Note</span>: That would be it to enable ripple on PrimeVue components, next section describes how to use it with your own components and standard elements.</p>
 
         <h5>Directive</h5>
 		<p>Ripple is a directive that needs to be imported and configured with a name of your choice. Global configuration is done with the <i>app.directive</i> function.</p>
@@ -94,7 +94,7 @@ export default {
                     content: `
 <template>
     <div>
-        <div class="card-container p-d-flex">
+        <div class="card-container flex">
             <div class="card primary-box p-ripple" v-ripple>Default</div>
             <div class="card styled-box-green p-ripple" v-ripple>Green</div>
             <div class="card styled-box-orange p-ripple" v-ripple>Orange</div>
@@ -161,7 +161,7 @@ export default {
                     content: `
 <template>
     <div>
-        <div class="card-container p-d-flex">
+        <div class="card-container flex">
             <div class="card primary-box p-ripple" v-ripple>Default</div>
             <div class="card styled-box-green p-ripple" v-ripple>Green</div>
             <div class="card styled-box-orange p-ripple" v-ripple>Orange</div>
@@ -225,7 +225,7 @@ export default {
                 },
                 'browser-source': {
                     tabName: 'Browser Source',
-                    content: `<div id="app" class="p-d-flex">
+                    content: `<div id="app" class="flex">
         <div class="card primary-box p-ripple" v-ripple>Default</div>
         <div class="card styled-box-green p-ripple" v-ripple>Green</div>
         <div class="card styled-box-orange p-ripple" v-ripple>Orange</div>
diff --git a/src/views/scrollpanel/ScrollPanelDemo.vue b/src/views/scrollpanel/ScrollPanelDemo.vue
index 4acd3a7fc..183a36c86 100644
--- a/src/views/scrollpanel/ScrollPanelDemo.vue
+++ b/src/views/scrollpanel/ScrollPanelDemo.vue
@@ -10,8 +10,8 @@
 
         <div class="content-section implementation">
             <div class="card">
-                <div class="p-grid">
-                    <div class="p-col-12 p-md-4 p-p-5">
+                <div class="grid">
+                    <div class="col-12 md:col-4 p-5">
                         <ScrollPanel style="width: 100%; height: 200px">
                             <p>
                                 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
@@ -28,7 +28,7 @@
                             </p>
                         </ScrollPanel>
                     </div>
-                    <div class="p-col-12 p-md-4 p-p-5">
+                    <div class="col-12 md:col-4 p-5">
                         <ScrollPanel style="width: 100%; height: 200px" class="custombar1">
                             <p>
                                 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
@@ -45,7 +45,7 @@
                             </p>
                         </ScrollPanel>
                     </div>
-                    <div class="p-col-12 p-md-4 p-p-5">
+                    <div class="col-12 md:col-4 p-5">
                         <ScrollPanel style="width: 100%; height: 200px" class="custombar2">
                             <p style="width: 600px">
                                 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
diff --git a/src/views/scrollpanel/ScrollPanelDoc.vue b/src/views/scrollpanel/ScrollPanelDoc.vue
index 0287b11d0..8f42ece6e 100644
--- a/src/views/scrollpanel/ScrollPanelDoc.vue
+++ b/src/views/scrollpanel/ScrollPanelDoc.vue
@@ -105,8 +105,8 @@ export default {
                     content: `
 <template>
     <div>
-        <div class="p-grid">
-            <div class="p-col-12 p-md-4 p-p-5">
+        <div class="grid">
+            <div class="col-12 md:col-4 p-5">
                 <ScrollPanel style="width: 100%; height: 200px">
                     <p>
                         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
@@ -123,7 +123,7 @@ export default {
                     </p>
                 </ScrollPanel>
             </div>
-            <div class="p-col-12 p-md-4 p-p-5">
+            <div class="col-12 md:col-4 p-5">
                 <ScrollPanel style="width: 100%; height: 200px" class="custombar1">
                     <p>
                         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
@@ -140,7 +140,7 @@ export default {
                     </p>
                 </ScrollPanel>
             </div>
-            <div class="p-col-12 p-md-4 p-p-5">
+            <div class="col-12 md:col-4 p-5">
                 <ScrollPanel style="width: 100%; height: 200px" class="custombar2">
                     <p style="width: 600px">
                         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
@@ -211,8 +211,8 @@ export default {
                     content: `
 <template>
     <div>
-        <div class="p-grid">
-            <div class="p-col-12 p-md-4 p-p-5">
+        <div class="grid">
+            <div class="col-12 md:col-4 p-5">
                 <ScrollPanel style="width: 100%; height: 200px">
                     <p>
                         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
@@ -229,7 +229,7 @@ export default {
                     </p>
                 </ScrollPanel>
             </div>
-            <div class="p-col-12 p-md-4 p-p-5">
+            <div class="col-12 md:col-4 p-5">
                 <ScrollPanel style="width: 100%; height: 200px" class="custombar1">
                     <p>
                         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
@@ -246,7 +246,7 @@ export default {
                     </p>
                 </ScrollPanel>
             </div>
-            <div class="p-col-12 p-md-4 p-p-5">
+            <div class="col-12 md:col-4 p-5">
                 <ScrollPanel style="width: 100%; height: 200px" class="custombar2">
                     <p style="width: 600px">
                         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
@@ -316,8 +316,8 @@ export default {
                     tabName: 'Browser Source',
                     imports: `<script src="https://unpkg.com/primevue@^3/scrollpanel/scrollpanel.min.js"><\\/script>`,
                     content: `<div id="app">
-            <div class="p-grid">
-                <div class="p-col-12 p-md-4 p-p-5">
+            <div class="grid">
+                <div class="col-12 md:col-4 p-5">
                     <p-scrollpanel style="width: 100%; height: 200px">
                         <p>
                             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
@@ -334,7 +334,7 @@ export default {
                         </p>
                     </p-scrollpanel>
                 </div>
-                <div class="p-col-12 p-md-4 p-p-5">
+                <div class="col-12 md:col-4 p-5">
                     <p-scrollpanel style="width: 100%; height: 200px" class="custombar1">
                         <p>
                             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
@@ -351,7 +351,7 @@ export default {
                         </p>
                     </p-scrollpanel>
                 </div>
-                <div class="p-col-12 p-md-4 p-p-5">
+                <div class="col-12 md:col-4 p-5">
                     <p-scrollpanel style="width: 100%; height: 200px" class="custombar2">
                         <p style="width: 600px">
                             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
diff --git a/src/views/setup/Setup.vue b/src/views/setup/Setup.vue
index aa0c50baf..c8f76182f 100755
--- a/src/views/setup/Setup.vue
+++ b/src/views/setup/Setup.vue
@@ -313,32 +313,32 @@ app.use(PrimeVue, {
                     <thead>
                         <tr>
                             <th>
-                                <div class="p-d-flex p-ai-center">
-                                    <img src="../../assets/images//browsers/edge.svg" alt="edge" style="width: 1.5rem;" class="p-mr-2">
+                                <div class="flex align-items-center">
+                                    <img src="../../assets/images//browsers/edge.svg" alt="edge" style="width: 1.5rem;" class="mr-2">
                                     Edge
                                 </div>
                             </th>
                             <th>
-                                <div class="p-d-flex p-ai-center">
-                                    <img src="../../assets/images/browsers/firefox.svg" alt="firefox" style="width: 1.5rem;" class="p-mr-2">
+                                <div class="flex align-items-center">
+                                    <img src="../../assets/images/browsers/firefox.svg" alt="firefox" style="width: 1.5rem;" class="mr-2">
                                     Firefox
                                 </div>
                             </th>
                             <th>
-                                <div class="p-d-flex p-ai-center">
-                                    <img src="../../assets/images/browsers/chrome.svg" alt="chrome" style="width: 1.5rem;" class="p-mr-2">
+                                <div class="flex align-items-center">
+                                    <img src="../../assets/images/browsers/chrome.svg" alt="chrome" style="width: 1.5rem;" class="mr-2">
                                     Chrome
                                 </div>
                             </th>
                             <th>
-                                <div class="p-d-flex p-ai-center">
-                                    <img src="../../assets/images/browsers/safari.svg" alt="safari" style="width: 1.5rem;" class="p-mr-2">
+                                <div class="flex align-items-center">
+                                    <img src="../../assets/images/browsers/safari.svg" alt="safari" style="width: 1.5rem;" class="mr-2">
                                     Safari
                                 </div>
                             </th>
                             <th>
-                                <div class="p-d-flex p-ai-center">
-                                    <img src="../../assets/images/browsers/opera.svg" alt="opera" style="width: 1.5rem;" class="p-mr-2">
+                                <div class="flex align-items-center">
+                                    <img src="../../assets/images/browsers/opera.svg" alt="opera" style="width: 1.5rem;" class="mr-2">
                                     Opera
                                 </div>
                             </th>
diff --git a/src/views/sidebar/SidebarDemo.vue b/src/views/sidebar/SidebarDemo.vue
index 63f546fa5..895ab84b4 100755
--- a/src/views/sidebar/SidebarDemo.vue
+++ b/src/views/sidebar/SidebarDemo.vue
@@ -10,10 +10,10 @@
 
         <div class="content-section implementation">
             <div class="card">
-                <Button icon="pi pi-arrow-right" @click="visibleLeft = true" class="p-mr-2" />
-                <Button icon="pi pi-arrow-left" @click="visibleRight = true" class="p-mr-2"  />
-                <Button icon="pi pi-arrow-down" @click="visibleTop = true" class="p-mr-2"  />
-                <Button icon="pi pi-arrow-up" @click="visibleBottom = true" class="p-mr-2"  />
+                <Button icon="pi pi-arrow-right" @click="visibleLeft = true" class="mr-2" />
+                <Button icon="pi pi-arrow-left" @click="visibleRight = true" class="mr-2"  />
+                <Button icon="pi pi-arrow-down" @click="visibleTop = true" class="mr-2"  />
+                <Button icon="pi pi-arrow-up" @click="visibleBottom = true" class="mr-2"  />
                 <Button icon="pi pi-th-large" @click="visibleFull = true"  />
 
                 <Sidebar v-model:visible="visibleLeft" :baseZIndex="1000">
diff --git a/src/views/sidebar/SidebarDoc.vue b/src/views/sidebar/SidebarDoc.vue
index 9c4025f42..e3ac099da 100755
--- a/src/views/sidebar/SidebarDoc.vue
+++ b/src/views/sidebar/SidebarDoc.vue
@@ -219,10 +219,10 @@ export default {
 					content: `
 <template>
     <div>
-        <Button icon="pi pi-arrow-right" @click="visibleLeft = true" class="p-mr-2" />
-        <Button icon="pi pi-arrow-left" @click="visibleRight = true" class="p-mr-2"  />
-        <Button icon="pi pi-arrow-down" @click="visibleTop = true" class="p-mr-2"  />
-        <Button icon="pi pi-arrow-up" @click="visibleBottom = true" class="p-mr-2"  />
+        <Button icon="pi pi-arrow-right" @click="visibleLeft = true" class="mr-2" />
+        <Button icon="pi pi-arrow-left" @click="visibleRight = true" class="mr-2"  />
+        <Button icon="pi pi-arrow-down" @click="visibleTop = true" class="mr-2"  />
+        <Button icon="pi pi-arrow-up" @click="visibleBottom = true" class="mr-2"  />
         <Button icon="pi pi-th-large" @click="visibleFull = true"  />
 
         <Sidebar v-model:visible="visibleLeft" :baseZIndex="1000">
@@ -267,10 +267,10 @@ export default {
 					content: `
 <template>
     <div>
-        <Button icon="pi pi-arrow-right" @click="visibleLeft = true" class="p-mr-2" />
-        <Button icon="pi pi-arrow-left" @click="visibleRight = true" class="p-mr-2"  />
-        <Button icon="pi pi-arrow-down" @click="visibleTop = true" class="p-mr-2"  />
-        <Button icon="pi pi-arrow-up" @click="visibleBottom = true" class="p-mr-2"  />
+        <Button icon="pi pi-arrow-right" @click="visibleLeft = true" class="mr-2" />
+        <Button icon="pi pi-arrow-left" @click="visibleRight = true" class="mr-2"  />
+        <Button icon="pi pi-arrow-down" @click="visibleTop = true" class="mr-2"  />
+        <Button icon="pi pi-arrow-up" @click="visibleBottom = true" class="mr-2"  />
         <Button icon="pi pi-th-large" @click="visibleFull = true"  />
 
         <Sidebar v-model:visible="visibleLeft" :baseZIndex="1000">
@@ -316,10 +316,10 @@ export default {
 					tabName: 'Browser Source',
 					imports: `<script src="https://unpkg.com/primevue@^3/sidebar/sidebar.min.js"><\\/script>`,
 					content: `<div id="app">
-			<p-button icon="pi pi-arrow-right" @click="visibleLeft = true" class="p-mr-2"></p-button>
-			<p-button icon="pi pi-arrow-left" @click="visibleRight = true" class="p-mr-2"></p-button>
-			<p-button icon="pi pi-arrow-down" @click="visibleTop = true" class="p-mr-2"></p-button>
-			<p-button icon="pi pi-arrow-up" @click="visibleBottom = true" class="p-mr-2"></p-button>
+			<p-button icon="pi pi-arrow-right" @click="visibleLeft = true" class="mr-2"></p-button>
+			<p-button icon="pi pi-arrow-left" @click="visibleRight = true" class="mr-2"></p-button>
+			<p-button icon="pi pi-arrow-down" @click="visibleTop = true" class="mr-2"></p-button>
+			<p-button icon="pi pi-arrow-up" @click="visibleBottom = true" class="mr-2"></p-button>
 			<p-button icon="pi pi-th-large" @click="visibleFull = true"></p-button>
 
 			<p-sidebar v-model:visible="visibleLeft" :base-z-index="1000">
diff --git a/src/views/skeleton/SkeletonDemo.vue b/src/views/skeleton/SkeletonDemo.vue
index 86dfe7564..47b56480a 100644
--- a/src/views/skeleton/SkeletonDemo.vue
+++ b/src/views/skeleton/SkeletonDemo.vue
@@ -10,101 +10,101 @@
 
         <div class="content-section implementation">
             <div class="card">
-                 <div class="p-grid p-formgrid">
-                    <div class="p-field p-col-12 p-md-6">
+                <div class="grid formgrid">
+                    <div class="field col-12 md:col-6">
                         <h5>Rectangle</h5>
-                        <Skeleton class="p-mb-2"></Skeleton>
-                        <Skeleton width="10rem" class="p-mb-2"></Skeleton>
-                        <Skeleton width="5rem" class="p-mb-2"></Skeleton>
-                        <Skeleton height="2rem" class="p-mb-2"></Skeleton>
+                        <Skeleton class="mb-2"></Skeleton>
+                        <Skeleton width="10rem" class="mb-2"></Skeleton>
+                        <Skeleton width="5rem" class="mb-2"></Skeleton>
+                        <Skeleton height="2rem" class="mb-2"></Skeleton>
                         <Skeleton width="10rem" height="4rem"></Skeleton>
                     </div>
-                    <div class="p-field p-col-12 p-md-6">
+                    <div class="field col-12 md:col-6">
                         <h5>Rounded</h5>
-                        <Skeleton class="p-mb-2" borderRadius="16px"></Skeleton>
-                        <Skeleton width="10rem" class="p-mb-2" borderRadius="16px"></Skeleton>
-                        <Skeleton width="5rem" borderRadius="16px" class="p-mb-2"></Skeleton>
-                        <Skeleton height="2rem" class="p-mb-2" borderRadius="16px"></Skeleton>
+                        <Skeleton class="mb-2" borderRadius="16px"></Skeleton>
+                        <Skeleton width="10rem" class="mb-2" borderRadius="16px"></Skeleton>
+                        <Skeleton width="5rem" borderRadius="16px" class="mb-2"></Skeleton>
+                        <Skeleton height="2rem" class="mb-2" borderRadius="16px"></Skeleton>
                         <Skeleton width="10rem" height="4rem" borderRadius="16px"></Skeleton>
                     </div>
-                    <div class="p-field p-col-12 p-md-6">
-                        <h5 class="p-mt-3">Square</h5>
-                        <div class="p-d-flex p-ai-end">
-                            <Skeleton size="2rem" class="p-mr-2"></Skeleton>
-                            <Skeleton size="3rem" class="p-mr-2"></Skeleton>
-                            <Skeleton size="4rem" class="p-mr-2"></Skeleton>
+                    <div class="field col-12 md:col-6">
+                        <h5 class="mt-3">Square</h5>
+                        <div class="flex align-items-end">
+                            <Skeleton size="2rem" class="mr-2"></Skeleton>
+                            <Skeleton size="3rem" class="mr-2"></Skeleton>
+                            <Skeleton size="4rem" class="mr-2"></Skeleton>
                             <Skeleton size="5rem"></Skeleton>
                         </div>
                     </div>
-                    <div class="p-field p-col-12 p-md-6">
-                        <h5 class="p-mt-3">Circle</h5>
-                        <div class="p-d-flex p-ai-end">
-                            <Skeleton shape="circle" size="2rem" class="p-mr-2"></Skeleton>
-                            <Skeleton shape="circle" size="3rem" class="p-mr-2"></Skeleton>
-                            <Skeleton shape="circle" size="4rem" class="p-mr-2"></Skeleton>
+                    <div class="field col-12 md:col-6">
+                        <h5 class="mt-3">Circle</h5>
+                        <div class="flex align-items-end">
+                            <Skeleton shape="circle" size="2rem" class="mr-2"></Skeleton>
+                            <Skeleton shape="circle" size="3rem" class="mr-2"></Skeleton>
+                            <Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
                             <Skeleton shape="circle" size="5rem"></Skeleton>
                         </div>
                     </div>
-                 </div>
+                </div>
             </div>
 
             <div class="card">
-                 <div class="p-grid p-formgrid">
-                    <div class="p-field p-col-12 p-md-6 p-pr-md-6 p-pr-0">
+                <div class="grid formgrid">
+                    <div class="field col-12 md:col-6 md:pr-6 pr-0">
                         <h5>Card</h5>
-                        <div class="custom-skeleton p-p-4">
-                            <div class="p-d-flex p-mb-3">
-                                <Skeleton shape="circle" size="4rem" class="p-mr-2"></Skeleton>
+                        <div class="custom-skeleton p-4">
+                            <div class="flex mb-3">
+                                <Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
                                 <div>
-                                    <Skeleton width="10rem" class="p-mb-2"></Skeleton>
-                                    <Skeleton width="5rem" class="p-mb-2"></Skeleton>
+                                    <Skeleton width="10rem" class="mb-2"></Skeleton>
+                                    <Skeleton width="5rem" class="mb-2"></Skeleton>
                                     <Skeleton height=".5rem"></Skeleton>
                                 </div>
                             </div>
                             <Skeleton width="100%" height="150px"></Skeleton>
-                            <div class="p-d-flex p-jc-between p-mt-3">
+                            <div class="flex justify-content-center mt-3">
                                 <Skeleton width="4rem" height="2rem"></Skeleton>
                                 <Skeleton width="4rem" height="2rem"></Skeleton>
                             </div>
                         </div>
                     </div>
 
-                    <div class="p-field p-col-12 p-md-6">
+                    <div class="field col-12 md:col-6">
                         <h5>List</h5>
-                        <div class="custom-skeleton p-p-4">
-                            <ul class="p-m-0 p-p-0">
-                                <li class="p-mb-3">
-                                    <div class="p-d-flex">
-                                        <Skeleton shape="circle" size="4rem" class="p-mr-2"></Skeleton>
+                        <div class="custom-skeleton p-4">
+                            <ul class="m-0 p-0">
+                                <li class="mb-3">
+                                    <div class="flex">
+                                        <Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
                                         <div style="flex: 1">
-                                            <Skeleton width="100%" class="p-mb-2"></Skeleton>
+                                            <Skeleton width="100%" class="mb-2"></Skeleton>
                                             <Skeleton width="75%"></Skeleton>
                                         </div>
                                     </div>
                                 </li>
-                                <li class="p-mb-3">
-                                    <div class="p-d-flex">
-                                        <Skeleton shape="circle" size="4rem" class="p-mr-2"></Skeleton>
+                                <li class="mb-3">
+                                    <div class="flex">
+                                        <Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
                                         <div style="flex: 1">
-                                            <Skeleton width="100%" class="p-mb-2"></Skeleton>
+                                            <Skeleton width="100%" class="mb-2"></Skeleton>
                                             <Skeleton width="75%"></Skeleton>
                                         </div>
                                     </div>
                                 </li>
-                                <li class="p-mb-3">
-                                    <div class="p-d-flex">
-                                        <Skeleton shape="circle" size="4rem" class="p-mr-2"></Skeleton>
+                                <li class="mb-3">
+                                    <div class="flex">
+                                        <Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
                                         <div style="flex: 1">
-                                            <Skeleton width="100%" class="p-mb-2"></Skeleton>
+                                            <Skeleton width="100%" class="mb-2"></Skeleton>
                                             <Skeleton width="75%"></Skeleton>
                                         </div>
                                     </div>
                                 </li>
                                 <li>
-                                    <div class="p-d-flex">
-                                        <Skeleton shape="circle" size="4rem" class="p-mr-2"></Skeleton>
+                                    <div class="flex">
+                                        <Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
                                         <div style="flex: 1">
-                                            <Skeleton width="100%" class="p-mb-2"></Skeleton>
+                                            <Skeleton width="100%" class="mb-2"></Skeleton>
                                             <Skeleton width="75%"></Skeleton>
                                         </div>
                                     </div>
diff --git a/src/views/skeleton/SkeletonDoc.vue b/src/views/skeleton/SkeletonDoc.vue
index 3bc02777f..0d2c44cf0 100644
--- a/src/views/skeleton/SkeletonDoc.vue
+++ b/src/views/skeleton/SkeletonDoc.vue
@@ -145,38 +145,38 @@ export default {
 <template>
     <div>
         <div class="card">
-             <div class="p-grid p-formgrid">
-                <div class="p-field p-col-12 p-md-6">
+             <div class="grid formgrid">
+                <div class="field col-12 md:col-6">
                     <h5>Rectangle</h5>
-                    <Skeleton class="p-mb-2"></Skeleton>
-                    <Skeleton width="10rem" class="p-mb-2"></Skeleton>
-                    <Skeleton width="5rem" class="p-mb-2"></Skeleton>
-                    <Skeleton height="2rem" class="p-mb-2"></Skeleton>
+                    <Skeleton class="mb-2"></Skeleton>
+                    <Skeleton width="10rem" class="mb-2"></Skeleton>
+                    <Skeleton width="5rem" class="mb-2"></Skeleton>
+                    <Skeleton height="2rem" class="mb-2"></Skeleton>
                     <Skeleton width="10rem" height="4rem"></Skeleton>
                 </div>
-                <div class="p-field p-col-12 p-md-6">
+                <div class="field col-12 md:col-6">
                     <h5>Rounded</h5>
-                    <Skeleton class="p-mb-2" borderRadius="16px"></Skeleton>
-                    <Skeleton width="10rem" class="p-mb-2" borderRadius="16px"></Skeleton>
-                    <Skeleton width="5rem" borderRadius="16px" class="p-mb-2"></Skeleton>
-                    <Skeleton height="2rem" class="p-mb-2" borderRadius="16px"></Skeleton>
+                    <Skeleton class="mb-2" borderRadius="16px"></Skeleton>
+                    <Skeleton width="10rem" class="mb-2" borderRadius="16px"></Skeleton>
+                    <Skeleton width="5rem" borderRadius="16px" class="mb-2"></Skeleton>
+                    <Skeleton height="2rem" class="mb-2" borderRadius="16px"></Skeleton>
                     <Skeleton width="10rem" height="4rem" borderRadius="16px"></Skeleton>
                 </div>
-                <div class="p-field p-col-12 p-md-6">
-                    <h5 class="p-mt-3">Square</h5>
-                    <div class="p-d-flex p-ai-end">
-                        <Skeleton size="2rem" class="p-mr-2"></Skeleton>
-                        <Skeleton size="3rem" class="p-mr-2"></Skeleton>
-                        <Skeleton size="4rem" class="p-mr-2"></Skeleton>
+                <div class="field col-12 md:col-6">
+                    <h5 class="mt-3">Square</h5>
+                    <div class="flex align-items-end">
+                        <Skeleton size="2rem" class="mr-2"></Skeleton>
+                        <Skeleton size="3rem" class="mr-2"></Skeleton>
+                        <Skeleton size="4rem" class="mr-2"></Skeleton>
                         <Skeleton size="5rem"></Skeleton>
                     </div>
                 </div>
-                <div class="p-field p-col-12 p-md-6">
-                    <h5 class="p-mt-3">Circle</h5>
-                    <div class="p-d-flex p-ai-end">
-                        <Skeleton shape="circle" size="2rem" class="p-mr-2"></Skeleton>
-                        <Skeleton shape="circle" size="3rem" class="p-mr-2"></Skeleton>
-                        <Skeleton shape="circle" size="4rem" class="p-mr-2"></Skeleton>
+                <div class="field col-12 md:col-6">
+                    <h5 class="mt-3">Circle</h5>
+                    <div class="flex align-items-end">
+                        <Skeleton shape="circle" size="2rem" class="mr-2"></Skeleton>
+                        <Skeleton shape="circle" size="3rem" class="mr-2"></Skeleton>
+                        <Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
                         <Skeleton shape="circle" size="5rem"></Skeleton>
                     </div>
                 </div>
@@ -184,62 +184,62 @@ export default {
         </div>
 
         <div class="card">
-             <div class="p-grid p-formgrid">
-                <div class="p-field p-col-12 p-md-6 p-pr-md-6 p-pr-0">
+             <div class="grid formgrid">
+                <div class="field col-12 md:col-6 md:pr-6 pr-0">
                     <h5>Card</h5>
-                    <div class="custom-skeleton p-p-4">
-                        <div class="p-d-flex p-mb-3">
-                            <Skeleton shape="circle" size="4rem" class="p-mr-2"></Skeleton>
+                    <div class="custom-skeleton p-4">
+                        <div class="flex mb-3">
+                            <Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
                             <div>
-                                <Skeleton width="10rem" class="p-mb-2"></Skeleton>
-                                <Skeleton width="5rem" class="p-mb-2"></Skeleton>
+                                <Skeleton width="10rem" class="mb-2"></Skeleton>
+                                <Skeleton width="5rem" class="mb-2"></Skeleton>
                                 <Skeleton height=".5rem"></Skeleton>
                             </div>
                         </div>
                         <Skeleton width="100%" height="150px"></Skeleton>
-                        <div class="p-d-flex p-jc-between p-mt-3">
+                        <div class="flex justify-content-center mt-3">
                             <Skeleton width="4rem" height="2rem"></Skeleton>
                             <Skeleton width="4rem" height="2rem"></Skeleton>
                         </div>
                     </div>
                 </div>
 
-                <div class="p-field p-col-12 p-md-6">
+                <div class="field col-12 md:col-6">
                     <h5>List</h5>
-                    <div class="custom-skeleton p-p-4">
-                        <ul class="p-m-0 p-p-0">
-                            <li class="p-mb-3">
-                                <div class="p-d-flex">
-                                    <Skeleton shape="circle" size="4rem" class="p-mr-2"></Skeleton>
+                    <div class="custom-skeleton p-4">
+                        <ul class="m-0 p-0">
+                            <li class="mb-3">
+                                <div class="flex">
+                                    <Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
                                     <div style="flex: 1">
-                                        <Skeleton width="100%" class="p-mb-2"></Skeleton>
+                                        <Skeleton width="100%" class="mb-2"></Skeleton>
                                         <Skeleton width="75%"></Skeleton>
                                     </div>
                                 </div>
                             </li>
-                            <li class="p-mb-3">
-                                <div class="p-d-flex">
-                                    <Skeleton shape="circle" size="4rem" class="p-mr-2"></Skeleton>
+                            <li class="mb-3">
+                                <div class="flex">
+                                    <Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
                                     <div style="flex: 1">
-                                        <Skeleton width="100%" class="p-mb-2"></Skeleton>
+                                        <Skeleton width="100%" class="mb-2"></Skeleton>
                                         <Skeleton width="75%"></Skeleton>
                                     </div>
                                 </div>
                             </li>
-                            <li class="p-mb-3">
-                                <div class="p-d-flex">
-                                    <Skeleton shape="circle" size="4rem" class="p-mr-2"></Skeleton>
+                            <li class="mb-3">
+                                <div class="flex">
+                                    <Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
                                     <div style="flex: 1">
-                                        <Skeleton width="100%" class="p-mb-2"></Skeleton>
+                                        <Skeleton width="100%" class="mb-2"></Skeleton>
                                         <Skeleton width="75%"></Skeleton>
                                     </div>
                                 </div>
                             </li>
                             <li>
-                                <div class="p-d-flex">
-                                    <Skeleton shape="circle" size="4rem" class="p-mr-2"></Skeleton>
+                                <div class="flex">
+                                    <Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
                                     <div style="flex: 1">
-                                        <Skeleton width="100%" class="p-mb-2"></Skeleton>
+                                        <Skeleton width="100%" class="mb-2"></Skeleton>
                                         <Skeleton width="75%"></Skeleton>
                                     </div>
                                 </div>
@@ -303,38 +303,38 @@ export default {
 <template>
     <div>
         <div class="card">
-             <div class="p-grid p-formgrid">
-                <div class="p-field p-col-12 p-md-6">
+             <div class="grid formgrid">
+                <div class="field col-12 md:col-6">
                     <h5>Rectangle</h5>
-                    <Skeleton class="p-mb-2"></Skeleton>
-                    <Skeleton width="10rem" class="p-mb-2"></Skeleton>
-                    <Skeleton width="5rem" class="p-mb-2"></Skeleton>
-                    <Skeleton height="2rem" class="p-mb-2"></Skeleton>
+                    <Skeleton class="mb-2"></Skeleton>
+                    <Skeleton width="10rem" class="mb-2"></Skeleton>
+                    <Skeleton width="5rem" class="mb-2"></Skeleton>
+                    <Skeleton height="2rem" class="mb-2"></Skeleton>
                     <Skeleton width="10rem" height="4rem"></Skeleton>
                 </div>
-                <div class="p-field p-col-12 p-md-6">
+                <div class="field col-12 md:col-6">
                     <h5>Rounded</h5>
-                    <Skeleton class="p-mb-2" borderRadius="16px"></Skeleton>
-                    <Skeleton width="10rem" class="p-mb-2" borderRadius="16px"></Skeleton>
-                    <Skeleton width="5rem" borderRadius="16px" class="p-mb-2"></Skeleton>
-                    <Skeleton height="2rem" class="p-mb-2" borderRadius="16px"></Skeleton>
+                    <Skeleton class="mb-2" borderRadius="16px"></Skeleton>
+                    <Skeleton width="10rem" class="mb-2" borderRadius="16px"></Skeleton>
+                    <Skeleton width="5rem" borderRadius="16px" class="mb-2"></Skeleton>
+                    <Skeleton height="2rem" class="mb-2" borderRadius="16px"></Skeleton>
                     <Skeleton width="10rem" height="4rem" borderRadius="16px"></Skeleton>
                 </div>
-                <div class="p-field p-col-12 p-md-6">
-                    <h5 class="p-mt-3">Square</h5>
-                    <div class="p-d-flex p-ai-end">
-                        <Skeleton size="2rem" class="p-mr-2"></Skeleton>
-                        <Skeleton size="3rem" class="p-mr-2"></Skeleton>
-                        <Skeleton size="4rem" class="p-mr-2"></Skeleton>
+                <div class="field col-12 md:col-6">
+                    <h5 class="mt-3">Square</h5>
+                    <div class="flex align-items-end">
+                        <Skeleton size="2rem" class="mr-2"></Skeleton>
+                        <Skeleton size="3rem" class="mr-2"></Skeleton>
+                        <Skeleton size="4rem" class="mr-2"></Skeleton>
                         <Skeleton size="5rem"></Skeleton>
                     </div>
                 </div>
-                <div class="p-field p-col-12 p-md-6">
-                    <h5 class="p-mt-3">Circle</h5>
-                    <div class="p-d-flex p-ai-end">
-                        <Skeleton shape="circle" size="2rem" class="p-mr-2"></Skeleton>
-                        <Skeleton shape="circle" size="3rem" class="p-mr-2"></Skeleton>
-                        <Skeleton shape="circle" size="4rem" class="p-mr-2"></Skeleton>
+                <div class="field col-12 md:col-6">
+                    <h5 class="mt-3">Circle</h5>
+                    <div class="flex align-items-end">
+                        <Skeleton shape="circle" size="2rem" class="mr-2"></Skeleton>
+                        <Skeleton shape="circle" size="3rem" class="mr-2"></Skeleton>
+                        <Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
                         <Skeleton shape="circle" size="5rem"></Skeleton>
                     </div>
                 </div>
@@ -342,62 +342,62 @@ export default {
         </div>
 
         <div class="card">
-             <div class="p-grid p-formgrid">
-                <div class="p-field p-col-12 p-md-6 p-pr-md-6 p-pr-0">
+             <div class="grid formgrid">
+                <div class="field col-12 md:col-6 md:pr-6 pr-0">
                     <h5>Card</h5>
-                    <div class="custom-skeleton p-p-4">
-                        <div class="p-d-flex p-mb-3">
-                            <Skeleton shape="circle" size="4rem" class="p-mr-2"></Skeleton>
+                    <div class="custom-skeleton p-4">
+                        <div class="flex mb-3">
+                            <Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
                             <div>
-                                <Skeleton width="10rem" class="p-mb-2"></Skeleton>
-                                <Skeleton width="5rem" class="p-mb-2"></Skeleton>
+                                <Skeleton width="10rem" class="mb-2"></Skeleton>
+                                <Skeleton width="5rem" class="mb-2"></Skeleton>
                                 <Skeleton height=".5rem"></Skeleton>
                             </div>
                         </div>
                         <Skeleton width="100%" height="150px"></Skeleton>
-                        <div class="p-d-flex p-jc-between p-mt-3">
+                        <div class="flex justify-content-center mt-3">
                             <Skeleton width="4rem" height="2rem"></Skeleton>
                             <Skeleton width="4rem" height="2rem"></Skeleton>
                         </div>
                     </div>
                 </div>
 
-                <div class="p-field p-col-12 p-md-6">
+                <div class="field col-12 md:col-6">
                     <h5>List</h5>
-                    <div class="custom-skeleton p-p-4">
-                        <ul class="p-m-0 p-p-0">
-                            <li class="p-mb-3">
-                                <div class="p-d-flex">
-                                    <Skeleton shape="circle" size="4rem" class="p-mr-2"></Skeleton>
+                    <div class="custom-skeleton p-4">
+                        <ul class="m-0 p-0">
+                            <li class="mb-3">
+                                <div class="flex">
+                                    <Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
                                     <div style="flex: 1">
-                                        <Skeleton width="100%" class="p-mb-2"></Skeleton>
+                                        <Skeleton width="100%" class="mb-2"></Skeleton>
                                         <Skeleton width="75%"></Skeleton>
                                     </div>
                                 </div>
                             </li>
-                            <li class="p-mb-3">
-                                <div class="p-d-flex">
-                                    <Skeleton shape="circle" size="4rem" class="p-mr-2"></Skeleton>
+                            <li class="mb-3">
+                                <div class="flex">
+                                    <Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
                                     <div style="flex: 1">
-                                        <Skeleton width="100%" class="p-mb-2"></Skeleton>
+                                        <Skeleton width="100%" class="mb-2"></Skeleton>
                                         <Skeleton width="75%"></Skeleton>
                                     </div>
                                 </div>
                             </li>
-                            <li class="p-mb-3">
-                                <div class="p-d-flex">
-                                    <Skeleton shape="circle" size="4rem" class="p-mr-2"></Skeleton>
+                            <li class="mb-3">
+                                <div class="flex">
+                                    <Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
                                     <div style="flex: 1">
-                                        <Skeleton width="100%" class="p-mb-2"></Skeleton>
+                                        <Skeleton width="100%" class="mb-2"></Skeleton>
                                         <Skeleton width="75%"></Skeleton>
                                     </div>
                                 </div>
                             </li>
                             <li>
-                                <div class="p-d-flex">
-                                    <Skeleton shape="circle" size="4rem" class="p-mr-2"></Skeleton>
+                                <div class="flex">
+                                    <Skeleton shape="circle" size="4rem" class="mr-2"></Skeleton>
                                     <div style="flex: 1">
-                                        <Skeleton width="100%" class="p-mb-2"></Skeleton>
+                                        <Skeleton width="100%" class="mb-2"></Skeleton>
                                         <Skeleton width="75%"></Skeleton>
                                     </div>
                                 </div>
@@ -464,38 +464,38 @@ export default {
         <script src="https://unpkg.com/primevue@^3/column/column.min.js"><\\/script>`,
 					content: `<div id="app">
             <div class="card">
-                <div class="p-grid p-formgrid">
-                    <div class="p-field p-col-12 p-md-6">
+                <div class="grid formgrid">
+                    <div class="field col-12 md:col-6">
                         <h5>Rectangle</h5>
-                        <p-skeleton class="p-mb-2"></p-skeleton>
-                        <p-skeleton width="10rem" class="p-mb-2"></p-skeleton>
-                        <p-skeleton width="5rem" class="p-mb-2"></p-skeleton>
-                        <p-skeleton height="2rem" class="p-mb-2"></p-skeleton>
+                        <p-skeleton class="mb-2"></p-skeleton>
+                        <p-skeleton width="10rem" class="mb-2"></p-skeleton>
+                        <p-skeleton width="5rem" class="mb-2"></p-skeleton>
+                        <p-skeleton height="2rem" class="mb-2"></p-skeleton>
                         <p-skeleton width="10rem" height="4rem"></p-skeleton>
                     </div>
-                    <div class="p-field p-col-12 p-md-6">
+                    <div class="field col-12 md:col-6">
                         <h5>Rounded</h5>
-                        <p-skeleton class="p-mb-2" border-radius="16px"></p-skeleton>
-                        <p-skeleton width="10rem" class="p-mb-2" border-radius="16px"></p-skeleton>
-                        <p-skeleton width="5rem" border-radius="16px" class="p-mb-2"></p-skeleton>
-                        <p-skeleton height="2rem" class="p-mb-2" border-radius="16px"></p-skeleton>
+                        <p-skeleton class="mb-2" border-radius="16px"></p-skeleton>
+                        <p-skeleton width="10rem" class="mb-2" border-radius="16px"></p-skeleton>
+                        <p-skeleton width="5rem" border-radius="16px" class="mb-2"></p-skeleton>
+                        <p-skeleton height="2rem" class="mb-2" border-radius="16px"></p-skeleton>
                         <p-skeleton width="10rem" height="4rem" border-radius="16px"></p-skeleton>
                     </div>
-                    <div class="p-field p-col-12 p-md-6">
-                        <h5 class="p-mt-3">Square</h5>
-                        <div class="p-d-flex p-ai-end">
-                            <p-skeleton size="2rem" class="p-mr-2"></p-skeleton>
-                            <p-skeleton size="3rem" class="p-mr-2"></p-skeleton>
-                            <p-skeleton size="4rem" class="p-mr-2"></p-skeleton>
+                    <div class="field col-12 md:col-6">
+                        <h5 class="mt-3">Square</h5>
+                        <div class="flex align-items-end">
+                            <p-skeleton size="2rem" class="mr-2"></p-skeleton>
+                            <p-skeleton size="3rem" class="mr-2"></p-skeleton>
+                            <p-skeleton size="4rem" class="mr-2"></p-skeleton>
                             <p-skeleton size="5rem"></p-skeleton>
                         </div>
                     </div>
-                    <div class="p-field p-col-12 p-md-6">
-                        <h5 class="p-mt-3">Circle</h5>
-                        <div class="p-d-flex p-ai-end">
-                            <p-skeleton shape="circle" size="2rem" class="p-mr-2"></p-skeleton>
-                            <p-skeleton shape="circle" size="3rem" class="p-mr-2"></p-skeleton>
-                            <p-skeleton shape="circle" size="4rem" class="p-mr-2"></p-skeleton>
+                    <div class="field col-12 md:col-6">
+                        <h5 class="mt-3">Circle</h5>
+                        <div class="flex align-items-end">
+                            <p-skeleton shape="circle" size="2rem" class="mr-2"></p-skeleton>
+                            <p-skeleton shape="circle" size="3rem" class="mr-2"></p-skeleton>
+                            <p-skeleton shape="circle" size="4rem" class="mr-2"></p-skeleton>
                             <p-skeleton shape="circle" size="5rem"></p-skeleton>
                         </div>
                     </div>
@@ -503,62 +503,62 @@ export default {
             </div>
 
             <div class="card">
-                <div class="p-grid p-formgrid">
-                    <div class="p-field p-col-12 p-md-6 p-pr-md-6 p-pr-0">
+                <div class="grid formgrid">
+                    <div class="field col-12 md:col-6 md:pr-6 pr-0">
                         <h5>Card</h5>
-                        <div class="custom-skeleton p-p-4">
-                            <div class="p-d-flex p-mb-3">
-                                <p-skeleton shape="circle" size="4rem" class="p-mr-2"></p-skeleton>
+                        <div class="custom-skeleton p-4">
+                            <div class="flex mb-3">
+                                <p-skeleton shape="circle" size="4rem" class="mr-2"></p-skeleton>
                                 <div>
-                                    <p-skeleton width="10rem" class="p-mb-2"></p-skeleton>
-                                    <p-skeleton width="5rem" class="p-mb-2"></p-skeleton>
+                                    <p-skeleton width="10rem" class="mb-2"></p-skeleton>
+                                    <p-skeleton width="5rem" class="mb-2"></p-skeleton>
                                     <p-skeleton height=".5rem"></p-skeleton>
                                 </div>
                             </div>
                             <p-skeleton width="100%" height="150px"></p-skeleton>
-                            <div class="p-d-flex p-jc-between p-mt-3">
+                            <div class="flex justify-content-center mt-3">
                                 <p-skeleton width="4rem" height="2rem"></p-skeleton>
                                 <p-skeleton width="4rem" height="2rem"></p-skeleton>
                             </div>
                         </div>
                     </div>
 
-                    <div class="p-field p-col-12 p-md-6">
+                    <div class="field col-12 md:col-6">
                         <h5>List</h5>
-                        <div class="custom-skeleton p-p-4">
-                            <ul class="p-m-0 p-p-0">
-                                <li class="p-mb-3">
-                                    <div class="p-d-flex">
-                                        <p-skeleton shape="circle" size="4rem" class="p-mr-2"></p-skeleton>
+                        <div class="custom-skeleton p-4">
+                            <ul class="m-0 p-0">
+                                <li class="mb-3">
+                                    <div class="flex">
+                                        <p-skeleton shape="circle" size="4rem" class="mr-2"></p-skeleton>
                                         <div style="flex: 1">
-                                            <p-skeleton width="100%" class="p-mb-2"></p-skeleton>
+                                            <p-skeleton width="100%" class="mb-2"></p-skeleton>
                                             <p-skeleton width="75%"></p-skeleton>
                                         </div>
                                     </div>
                                 </li>
-                                <li class="p-mb-3">
-                                    <div class="p-d-flex">
-                                        <p-skeleton shape="circle" size="4rem" class="p-mr-2"></p-skeleton>
+                                <li class="mb-3">
+                                    <div class="flex">
+                                        <p-skeleton shape="circle" size="4rem" class="mr-2"></p-skeleton>
                                         <div style="flex: 1">
-                                            <p-skeleton width="100%" class="p-mb-2"></p-skeleton>
+                                            <p-skeleton width="100%" class="mb-2"></p-skeleton>
                                             <p-skeleton width="75%"></p-skeleton>
                                         </div>
                                     </div>
                                 </li>
-                                <li class="p-mb-3">
-                                    <div class="p-d-flex">
-                                        <p-skeleton shape="circle" size="4rem" class="p-mr-2"></p-skeleton>
+                                <li class="mb-3">
+                                    <div class="flex">
+                                        <p-skeleton shape="circle" size="4rem" class="mr-2"></p-skeleton>
                                         <div style="flex: 1">
-                                            <p-skeleton width="100%" class="p-mb-2"></p-skeleton>
+                                            <p-skeleton width="100%" class="mb-2"></p-skeleton>
                                             <p-skeleton width="75%"></p-skeleton>
                                         </div>
                                     </div>
                                 </li>
                                 <li>
-                                    <div class="p-d-flex">
-                                        <p-skeleton shape="circle" size="4rem" class="p-mr-2"></p-skeleton>
+                                    <div class="flex">
+                                        <p-skeleton shape="circle" size="4rem" class="mr-2"></p-skeleton>
                                         <div style="flex: 1">
-                                            <p-skeleton width="100%" class="p-mb-2"></p-skeleton>
+                                            <p-skeleton width="100%" class="mb-2"></p-skeleton>
                                             <p-skeleton width="75%"></p-skeleton>
                                         </div>
                                     </div>
diff --git a/src/views/slider/SliderDemo.vue b/src/views/slider/SliderDemo.vue
index 22da2bd6e..5473960e3 100755
--- a/src/views/slider/SliderDemo.vue
+++ b/src/views/slider/SliderDemo.vue
@@ -61,6 +61,6 @@ export default {
 }
 
 .p-slider-vertical {
-     height: 14rem;
+    height: 14rem;
 }
 </style>
diff --git a/src/views/spacing/SpacingDemo.vue b/src/views/spacing/SpacingDemo.vue
index 963a37c77..00d389e8a 100644
--- a/src/views/spacing/SpacingDemo.vue
+++ b/src/views/spacing/SpacingDemo.vue
@@ -16,39 +16,39 @@
                 <Button type="button" label="Button 2" style="width:20rem" />
 
                 <h6>With Spacing</h6>
-                <Button type="button" label="Button 1" style="width:20rem" class="p-mr-2 p-mb-2" />
-                <Button type="button" label="Button 2" style="width:20rem" class="p-mb-2"/>
+                <Button type="button" label="Button 1" style="width:20rem" class="mr-2 mb-2" />
+                <Button type="button" label="Button 2" style="width:20rem" class="mb-2"/>
 
                 <h5>Responsive Margin</h5>
                 <h6>Without Spacing</h6>
-                <div class="p-grid p-formgrid p-fluid">
-                    <div class="p-col-12 p-lg-4">
+                <div class="grid formgrid p-fluid">
+                    <div class="col-12 lg:col-4">
                         <InputText />
                     </div>
-                    <div class="p-col-12 p-lg-4">
+                    <div class="col-12 lg:col-4">
                         <InputText />
                     </div>
-                    <div class="p-col-12 p-lg-4">
+                    <div class="col-12 lg:col-4">
                         <InputText />
                     </div>
                 </div>
 
                 <h6>With Spacing</h6>
-                <div class="p-grid p-formgrid p-fluid">
-                    <div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0">
+                <div class="grid formgrid p-fluid">
+                    <div class="col-12 mb-2 lg:col-4 lg:mb-0">
                         <InputText />
                     </div>
-                    <div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0">
+                    <div class="col-12 mb-2 lg:col-4 lg:mb-0">
                         <InputText />
                     </div>
-                    <div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0">
+                    <div class="col-12 mb-2 lg:col-4 lg:mb-0">
                         <InputText />
                     </div>
                 </div>
 
                 <h6>Center</h6>
-                <div class="demo-container p-p-4">
-                    <Button type="button" label="Button" class="p-d-block p-mx-auto" />
+                <div class="demo-container p-4">
+                    <Button type="button" label="Button" class="block mx-auto" />
                 </div>
             </div>
 
@@ -60,12 +60,12 @@
                 </div>
 
                 <h6>With Spacing</h6>
-                <div class="demo-container p-p-3">
+                <div class="demo-container p-3">
                     <Button type="button" label="Button" />
                 </div>
 
                 <h6>Responsive Spacing</h6>
-                <div class="demo-container p-p-0 p-p-sm-1 p-p-md-2 p-p-lg-3">
+                <div class="demo-container p-0 sm:col-1 md:col-2 lg:col-3">
                     <Button type="button" label="Button" />
                 </div>
             </div>
diff --git a/src/views/spacing/SpacingDoc.vue b/src/views/spacing/SpacingDoc.vue
index 68cdd3aa9..7ff26d4c2 100644
--- a/src/views/spacing/SpacingDoc.vue
+++ b/src/views/spacing/SpacingDoc.vue
@@ -1,8 +1,8 @@
 <template>
 	<AppDoc name="SpacingDemo" :sources="sources" github="spacing/SpacingDemo.vue" >
         <h5>Getting Started</h5>
-        <p>The spacing classes use the <i>p-{property}{position}-{value}</i> syntax whereas for responsive
-        values <i>p-{property}{position}-{breakpoint}-{value}</i> format is used.</p>
+        <p>The spacing classes use the <i>{property}{position}-{value}</i> syntax whereas for responsive
+        values <i>{property}{position}-{breakpoint}-{value}</i> format is used.</p>
 
         <h5>Property</h5>
         <p>Property can either be a margin or a padding.</p>
@@ -48,13 +48,13 @@
 
         <h5>Examples</h5>
 <pre v-code><code>
-&lt;div class="p-mb-2"&gt;Margin bottom with level 2&lt;/div&gt;
-&lt;div class="p-mt-4"&gt;Margin top with level 2&lt;/div&gt;
-&lt;div class="p-m-2"&gt;Margin for all sides with level 2&lt;/div&gt;
-&lt;div class="p-mx-auto"&gt;Auto margins for left and right side&lt;/div&gt;
-&lt;div class="p-pb-4"&gt;Padding bottom with level 4&lt;/div&gt;
-&lt;div class="p-p-1"&gt;Padding for all sides with level 1&lt;/div&gt;
-&lt;div class="p-m-1 p-p-1 p-m-lg-3 p-b-lg-3"&gt;Level 3 spacing for lg screens and level 1 for smaller screens (xs).&lt;/div&gt;
+&lt;div class="mb-2"&gt;Margin bottom with level 2&lt;/div&gt;
+&lt;div class="mt-4"&gt;Margin top with level 2&lt;/div&gt;
+&lt;div class="m-2"&gt;Margin for all sides with level 2&lt;/div&gt;
+&lt;div class="mx-auto"&gt;Auto margins for left and right side&lt;/div&gt;
+&lt;div class="pb-4"&gt;Padding bottom with level 4&lt;/div&gt;
+&lt;div class="p-1"&gt;Padding for all sides with level 1&lt;/div&gt;
+&lt;div class="m-1 p-1 lg:m-3"&gt;Level 3 spacing for lg screens and level 1 for smaller screens (xs).&lt;/div&gt;
 
 </code></pre>
 
@@ -62,7 +62,7 @@
         <p>A custom build with different values can be obtained from <a href="https://github.com/primefaces/primeflex">PrimeFlex</a> using the _variables.scss file.</p>
 
         <h5>Dependencies</h5>
-        <p>PrimeFlex 2.0.0.</p>
+        <p>PrimeFlex 3.1.2.</p>
     </AppDoc>
 </template>
 
@@ -83,39 +83,39 @@ export default {
             <Button type="button" label="Button 2" style="width:20rem" />
 
             <h6>With Spacing</h6>
-            <Button type="button" label="Button 1" style="width:20rem" class="p-mr-2 p-mb-2" />
-            <Button type="button" label="Button 2" style="width:20rem" class="p-mb-2"/>
+            <Button type="button" label="Button 1" style="width:20rem" class="mr-2 mb-2" />
+            <Button type="button" label="Button 2" style="width:20rem" class="mb-2"/>
 
             <h5>Responsive Margin</h5>
             <h6>Without Spacing</h6>
-            <div class="p-grid p-formgrid p-fluid">
-                <div class="p-col-12 p-lg-4">
+            <div class="grid formgrid p-fluid">
+                <div class="col-12 lg:col-4">
                     <InputText />
                 </div>
-                <div class="p-col-12 p-lg-4">
+                <div class="col-12 lg:col-4">
                     <InputText />
                 </div>
-                <div class="p-col-12 p-lg-4">
+                <div class="col-12 lg:col-4">
                     <InputText />
                 </div>
             </div>
 
             <h6>With Spacing</h6>
-            <div class="p-grid p-formgrid p-fluid">
-                <div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0">
+            <div class="grid formgrid p-fluid">
+                <div class="col-12 mb-2 lg:col-4 lg:mb-0">
                     <InputText />
                 </div>
-                <div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0">
+                <div class="col-12 mb-2 lg:col-4 lg:mb-0">
                     <InputText />
                 </div>
-                <div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0">
+                <div class="col-12 mb-2 lg:col-4 lg:mb-0">
                     <InputText />
                 </div>
             </div>
 
             <h6>Center</h6>
-            <div class="demo-container p-p-4">
-                <Button type="button" label="Button" class="p-d-block p-mx-auto" />
+            <div class="demo-container p-4">
+                <Button type="button" label="Button" class="block mx-auto" />
             </div>
         </div>
 
@@ -127,12 +127,12 @@ export default {
             </div>
 
             <h6>With Spacing</h6>
-            <div class="demo-container p-p-3">
+            <div class="demo-container p-3">
                 <Button type="button" label="Button" />
             </div>
 
             <h6>Responsive Spacing</h6>
-            <div class="demo-container p-p-0 p-p-sm-1 p-p-md-2 p-p-lg-3">
+            <div class="demo-container p-0 sm:col-1 md:col-2 lg:col-3">
                 <Button type="button" label="Button" />
             </div>
         </div>
@@ -164,39 +164,39 @@ export default {
             <Button type="button" label="Button 2" style="width:20rem" />
 
             <h6>With Spacing</h6>
-            <Button type="button" label="Button 1" style="width:20rem" class="p-mr-2 p-mb-2" />
-            <Button type="button" label="Button 2" style="width:20rem" class="p-mb-2"/>
+            <Button type="button" label="Button 1" style="width:20rem" class="mr-2 mb-2" />
+            <Button type="button" label="Button 2" style="width:20rem" class="mb-2"/>
 
             <h5>Responsive Margin</h5>
             <h6>Without Spacing</h6>
-            <div class="p-grid p-formgrid p-fluid">
-                <div class="p-col-12 p-lg-4">
+            <div class="grid formgrid p-fluid">
+                <div class="col-12 lg:col-4">
                     <InputText />
                 </div>
-                <div class="p-col-12 p-lg-4">
+                <div class="col-12 lg:col-4">
                     <InputText />
                 </div>
-                <div class="p-col-12 p-lg-4">
+                <div class="col-12 lg:col-4">
                     <InputText />
                 </div>
             </div>
 
             <h6>With Spacing</h6>
-            <div class="p-grid p-formgrid p-fluid">
-                <div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0">
+            <div class="grid formgrid p-fluid">
+                <div class="col-12 mb-2 lg:col-4 lg:mb-0">
                     <InputText />
                 </div>
-                <div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0">
+                <div class="col-12 mb-2 lg:col-4 lg:mb-0">
                     <InputText />
                 </div>
-                <div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0">
+                <div class="col-12 mb-2 lg:col-4 lg:mb-0">
                     <InputText />
                 </div>
             </div>
 
             <h6>Center</h6>
-            <div class="demo-container p-p-4">
-                <Button type="button" label="Button" class="p-d-block p-mx-auto" />
+            <div class="demo-container p-4">
+                <Button type="button" label="Button" class="block mx-auto" />
             </div>
         </div>
 
@@ -208,12 +208,12 @@ export default {
             </div>
 
             <h6>With Spacing</h6>
-            <div class="demo-container p-p-3">
+            <div class="demo-container p-3">
                 <Button type="button" label="Button" />
             </div>
 
             <h6>Responsive Spacing</h6>
-            <div class="demo-container p-p-0 p-p-sm-1 p-p-md-2 p-p-lg-3">
+            <div class="demo-container p-0 sm:col-1 md:col-2 lg:col-3">
                 <Button type="button" label="Button" />
             </div>
         </div>
@@ -243,39 +243,39 @@ export default {
                 <p-button type="button" label="Button 2" style="width:20rem"></p-button>
 
                 <h6>With Spacing</h6>
-                <p-button type="button" label="Button 1" style="width:20rem" class="p-mr-2 p-mb-2"></p-button>
-                <p-button type="button" label="Button 2" style="width:20rem" class="p-mb-2"></p-button>
+                <p-button type="button" label="Button 1" style="width:20rem" class="mr-2 mb-2"></p-button>
+                <p-button type="button" label="Button 2" style="width:20rem" class="mb-2"></p-button>
 
                 <h5>Responsive Margin</h5>
                 <h6>Without Spacing</h6>
-                <div class="p-grid p-formgrid p-fluid">
-                    <div class="p-col-12 p-lg-4">
+                <div class="grid formgrid p-fluid">
+                    <div class="col-12 lg:col-4">
                         <p-inputtext></p-inputtext>
                     </div>
-                    <div class="p-col-12 p-lg-4">
+                    <div class="col-12 lg:col-4">
                         <p-inputtext></p-inputtext>
                     </div>
-                    <div class="p-col-12 p-lg-4">
+                    <div class="col-12 lg:col-4">
                         <p-inputtext></p-inputtext>
                     </div>
                 </div>
 
                 <h6>With Spacing</h6>
-                <div class="p-grid p-formgrid p-fluid">
-                    <div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0">
+                <div class="grid formgrid p-fluid">
+                    <div class="col-12 mb-2 lg:col-4 lg:mb-0">
                         <p-inputtext></p-inputtext>
                     </div>
-                    <div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0">
+                    <div class="col-12 mb-2 lg:col-4 lg:mb-0">
                         <p-inputtext></p-inputtext>
                     </div>
-                    <div class="p-col-12 p-mb-2 p-lg-4 p-mb-lg-0">
+                    <div class="col-12 mb-2 lg:col-4 lg:mb-0">
                         <p-inputtext></p-inputtext>
                     </div>
                 </div>
 
                 <h6>Center</h6>
-                <div class="demo-container p-p-4">
-                    <p-button type="button" label="Button" class="p-d-block p-mx-auto"></p-button>
+                <div class="demo-container p-4">
+                    <p-button type="button" label="Button" class="block mx-auto"></p-button>
                 </div>
             </div>
 
@@ -287,12 +287,12 @@ export default {
                 </div>
 
                 <h6>With Spacing</h6>
-                <div class="demo-container p-p-3">
+                <div class="demo-container p-3">
                     <p-button type="button" label="Button"></p-button>
                 </div>
 
                 <h6>Responsive Spacing</h6>
-                <div class="demo-container p-p-0 p-p-sm-1 p-p-md-2 p-p-lg-3">
+                <div class="demo-container p-0 sm:col-1 md:col-2 lg:col-3">
                     <p-button type="button" label="Button"></p-button>
                 </div>
             </div>
diff --git a/src/views/speeddial/SpeedDialDoc.vue b/src/views/speeddial/SpeedDialDoc.vue
index f818decf5..0864cd368 100644
--- a/src/views/speeddial/SpeedDialDoc.vue
+++ b/src/views/speeddial/SpeedDialDoc.vue
@@ -60,6 +60,7 @@ items: [
         }
     }
 ]
+
 </code></pre>
 
         <h5>MenuModel API</h5>
diff --git a/src/views/splitbutton/SplitButtonDemo.vue b/src/views/splitbutton/SplitButtonDemo.vue
index 385861fa2..3e0eafb24 100755
--- a/src/views/splitbutton/SplitButtonDemo.vue
+++ b/src/views/splitbutton/SplitButtonDemo.vue
@@ -17,13 +17,13 @@
                 <SplitButton label="Save" icon="pi pi-plus" @click="save" :model="nestedItems"></SplitButton>
 
                 <h5>Severities</h5>
-                <SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-mb-2"></SplitButton>
-                <SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-secondary p-mb-2"></SplitButton>
-                <SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-success p-mb-2"></SplitButton>
-                <SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-info p-mb-2"></SplitButton>
-                <SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-warning p-mb-2"></SplitButton>
-                <SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-help p-mb-2"></SplitButton>
-                <SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-danger p-mb-2"></SplitButton>
+                <SplitButton label="Save" icon="pi pi-plus" :model="items" class="mb-2"></SplitButton>
+                <SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-secondary mb-2"></SplitButton>
+                <SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-success mb-2"></SplitButton>
+                <SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-info mb-2"></SplitButton>
+                <SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-warning mb-2"></SplitButton>
+                <SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-help mb-2"></SplitButton>
+                <SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-danger mb-2"></SplitButton>
             </div>
         </div>
 
@@ -73,14 +73,14 @@ export default {
                             label:'New',
                             icon:'pi pi-fw pi-plus',
                             items:[
-                               {
-                                  label:'Bookmark',
-                                  icon:'pi pi-fw pi-bookmark'
-                               },
-                               {
-                                  label:'Video',
-                                  icon:'pi pi-fw pi-video'
-                               },
+                                {
+                                    label:'Bookmark',
+                                    icon:'pi pi-fw pi-bookmark'
+                                },
+                                {
+                                    label:'Video',
+                                    icon:'pi pi-fw pi-video'
+                                },
                             ]
                         },
                         {
@@ -94,7 +94,7 @@ export default {
                             label:'Export',
                             icon:'pi pi-fw pi-external-link'
                         }
-                   ]
+                    ]
                 },
                 {
                     label:'Edit',
@@ -139,18 +139,18 @@ export default {
                                     icon:'pi pi-fw pi-filter',
                                     items:[
                                         {
-                                           label:'Print',
-                                           icon:'pi pi-fw pi-print'
+                                            label:'Print',
+                                            icon:'pi pi-fw pi-print'
                                         }
-                                   ]
+                                    ]
                                 },
                                 {
                                     icon:'pi pi-fw pi-bars',
                                     label:'List'
                                 }
-                           ]
+                            ]
                         }
-                   ]
+                    ]
                 },
                 {
                     label:'Events',
@@ -161,12 +161,12 @@ export default {
                             icon:'pi pi-fw pi-pencil',
                             items:[
                                 {
-                                   label:'Save',
-                                   icon:'pi pi-fw pi-calendar-plus'
+                                    label:'Save',
+                                    icon:'pi pi-fw pi-calendar-plus'
                                 },
                                 {
-                                   label:'Delete',
-                                   icon:'pi pi-fw pi-calendar-minus'
+                                    label:'Delete',
+                                    icon:'pi pi-fw pi-calendar-minus'
                                 }
                             ]
                         },
@@ -183,11 +183,11 @@ export default {
                     ]
                 },
                 {
-                   separator:true
+                    separator:true
                 },
                 {
-                   label:'Quit',
-                   icon:'pi pi-fw pi-power-off'
+                    label:'Quit',
+                    icon:'pi pi-fw pi-power-off'
                 }
             ]
         }
diff --git a/src/views/splitbutton/SplitButtonDoc.vue b/src/views/splitbutton/SplitButtonDoc.vue
index dfe134e03..70544cbb7 100755
--- a/src/views/splitbutton/SplitButtonDoc.vue
+++ b/src/views/splitbutton/SplitButtonDoc.vue
@@ -221,13 +221,13 @@ export default {
         <SplitButton label="Save" icon="pi pi-plus" @click="save" :model="nestedItems"></SplitButton>
 
         <h5>Severities</h5>
-        <SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-mb-2"></SplitButton>
-        <SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-secondary p-mb-2"></SplitButton>
-        <SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-success p-mb-2"></SplitButton>
-        <SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-info p-mb-2"></SplitButton>
-        <SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-warning p-mb-2"></SplitButton>
-        <SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-help p-mb-2"></SplitButton>
-        <SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-danger p-mb-2"></SplitButton>
+        <SplitButton label="Save" icon="pi pi-plus" :model="items" class="mb-2"></SplitButton>
+        <SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-secondary mb-2"></SplitButton>
+        <SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-success mb-2"></SplitButton>
+        <SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-info mb-2"></SplitButton>
+        <SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-warning mb-2"></SplitButton>
+        <SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-help mb-2"></SplitButton>
+        <SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-danger mb-2"></SplitButton>
     </div>
 </template>
 
@@ -425,13 +425,13 @@ export default {
         <SplitButton label="Save" icon="pi pi-plus" @click="save" :model="nestedItems"></SplitButton>
 
         <h5>Severities</h5>
-        <SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-mb-2"></SplitButton>
-        <SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-secondary p-mb-2"></SplitButton>
-        <SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-success p-mb-2"></SplitButton>
-        <SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-info p-mb-2"></SplitButton>
-        <SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-warning p-mb-2"></SplitButton>
-        <SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-help p-mb-2"></SplitButton>
-        <SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-danger p-mb-2"></SplitButton>
+        <SplitButton label="Save" icon="pi pi-plus" :model="items" class="mb-2"></SplitButton>
+        <SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-secondary mb-2"></SplitButton>
+        <SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-success mb-2"></SplitButton>
+        <SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-info mb-2"></SplitButton>
+        <SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-warning mb-2"></SplitButton>
+        <SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-help mb-2"></SplitButton>
+        <SplitButton label="Save" icon="pi pi-plus" :model="items" class="p-button-danger mb-2"></SplitButton>
     </div>
 </template>
 
@@ -626,13 +626,13 @@ export default {
          <p-splitbutton label="Save" icon="pi pi-plus" @click="save" :model="nestedItems"></p-splitbutton>
 
          <h5>Severities</h5>
-         <p-splitbutton label="Save" icon="pi pi-plus" :model="items" class="p-mb-2"></p-splitbutton>
-         <p-splitbutton label="Save" icon="pi pi-plus" :model="items" class="p-button-secondary p-mb-2"></p-splitbutton>
-         <p-splitbutton label="Save" icon="pi pi-plus" :model="items" class="p-button-success p-mb-2"></p-splitbutton>
-         <p-splitbutton label="Save" icon="pi pi-plus" :model="items" class="p-button-info p-mb-2"></p-splitbutton>
-         <p-splitbutton label="Save" icon="pi pi-plus" :model="items" class="p-button-warning p-mb-2"></p-splitbutton>
-         <p-splitbutton label="Save" icon="pi pi-plus" :model="items" class="p-button-help p-mb-2"></p-splitbutton>
-         <p-splitbutton label="Save" icon="pi pi-plus" :model="items" class="p-button-danger p-mb-2"></p-splitbutton>
+         <p-splitbutton label="Save" icon="pi pi-plus" :model="items" class="mb-2"></p-splitbutton>
+         <p-splitbutton label="Save" icon="pi pi-plus" :model="items" class="p-button-secondary mb-2"></p-splitbutton>
+         <p-splitbutton label="Save" icon="pi pi-plus" :model="items" class="p-button-success mb-2"></p-splitbutton>
+         <p-splitbutton label="Save" icon="pi pi-plus" :model="items" class="p-button-info mb-2"></p-splitbutton>
+         <p-splitbutton label="Save" icon="pi pi-plus" :model="items" class="p-button-warning mb-2"></p-splitbutton>
+         <p-splitbutton label="Save" icon="pi pi-plus" :model="items" class="p-button-help mb-2"></p-splitbutton>
+         <p-splitbutton label="Save" icon="pi pi-plus" :model="items" class="p-button-danger mb-2"></p-splitbutton>
       </div>
 
       <script>
diff --git a/src/views/splitter/SplitterDemo.vue b/src/views/splitter/SplitterDemo.vue
index 6a07ae519..4b970e3bd 100644
--- a/src/views/splitter/SplitterDemo.vue
+++ b/src/views/splitter/SplitterDemo.vue
@@ -11,11 +11,11 @@
         <div class="content-section implementation">
             <div class="card">
                 <h5>Horizontal</h5>
-                <Splitter style="height: 300px" class="p-mb-5">
-                    <SplitterPanel class="p-d-flex p-ai-center p-jc-center">
+                <Splitter style="height: 300px" class="mb-5">
+                    <SplitterPanel class="flex align-items-center justify-content-center">
                         Panel 1
                     </SplitterPanel>
-                    <SplitterPanel class="p-d-flex p-ai-center p-jc-center">
+                    <SplitterPanel class="flex align-items-center justify-content-center">
                         Panel 2
                     </SplitterPanel>
                 </Splitter>
@@ -24,10 +24,10 @@
             <div class="card">
                 <h5>Vertical</h5>
                 <Splitter style="height: 300px" layout="vertical">
-                    <SplitterPanel class="p-d-flex p-ai-center p-jc-center">
+                    <SplitterPanel class="flex align-items-center justify-content-center">
                         Panel 1
                     </SplitterPanel>
-                    <SplitterPanel class="p-d-flex p-ai-center p-jc-center">
+                    <SplitterPanel class="flex align-items-center justify-content-center">
                         Panel 2
                     </SplitterPanel>
                 </Splitter>
@@ -36,20 +36,20 @@
             <div class="card">
                 <h5>Nested</h5>
                 <Splitter style="height: 300px">
-                    <SplitterPanel class="p-d-flex p-ai-center p-jc-center" :size="20" :minSize="10">
+                    <SplitterPanel class="flex align-items-center justify-content-center" :size="20" :minSize="10">
                         Panel 1
                     </SplitterPanel>
                     <SplitterPanel :size="80">
                         <Splitter layout="vertical">
-                            <SplitterPanel class="p-d-flex p-ai-center p-jc-center" :size="15">
+                            <SplitterPanel class="flex align-items-center justify-content-center" :size="15">
                                 Panel 2
                             </SplitterPanel>
                             <SplitterPanel :size="85">
                                 <Splitter>
-                                    <SplitterPanel class="p-d-flex p-ai-center p-jc-center" :size="20">
+                                    <SplitterPanel class="flex align-items-center justify-content-center" :size="20">
                                         Panel 3
                                     </SplitterPanel>
-                                    <SplitterPanel class="p-d-flex p-ai-center p-jc-center" :size="80">
+                                    <SplitterPanel class="flex align-items-center justify-content-center" :size="80">
                                         Panel 4
                                     </SplitterPanel>
                                 </Splitter>
diff --git a/src/views/splitter/SplitterDoc.vue b/src/views/splitter/SplitterDoc.vue
index 06ad272f3..96f67503f 100644
--- a/src/views/splitter/SplitterDoc.vue
+++ b/src/views/splitter/SplitterDoc.vue
@@ -86,20 +86,20 @@ import SplitterPanel from 'primevue/splitterpanel';
 		<p>Splitters can be combined to create advanced layouts.</p>
 <pre v-code><code>
 &lt;Splitter style="height: 300px"&gt;
-	&lt;SplitterPanel class="p-d-flex p-ai-center p-jc-center" :size="20" :minSize="10"&gt;
+	&lt;SplitterPanel class="flex align-items-center justify-content-center" :size="20" :minSize="10"&gt;
 		Panel 1
 	&lt;/SplitterPanel&gt;
 	&lt;SplitterPanel :size="80"&gt;
 		&lt;Splitter layout="vertical"&gt;
-			&lt;SplitterPanel class="p-d-flex p-ai-center p-jc-center" :size="15"&gt;
+			&lt;SplitterPanel class="flex align-items-center justify-content-center" :size="15"&gt;
 				Panel 2
 			&lt;/SplitterPanel&gt;
 			&lt;SplitterPanel :size="85"&gt;
 				&lt;Splitter&gt;
-					&lt;SplitterPanel class="p-d-flex p-ai-center p-jc-center" :size="20"&gt;
+					&lt;SplitterPanel class="flex align-items-center justify-content-center" :size="20"&gt;
 						Panel 3
 					&lt;/SplitterPanel&gt;
-					&lt;SplitterPanel class="p-d-flex p-ai-center p-jc-center" :size="80"&gt;
+					&lt;SplitterPanel class="flex align-items-center justify-content-center" :size="80"&gt;
 						Panel 4
 					&lt;/SplitterPanel&gt;
 				&lt;/Splitter&gt;
@@ -277,11 +277,11 @@ export default {
     <div>
         <div class="card">
             <h5>Horizontal</h5>
-            <Splitter style="height: 300px" class="p-mb-5">
-                <SplitterPanel class="p-d-flex p-ai-center p-jc-center">
+            <Splitter style="height: 300px" class="mb-5">
+                <SplitterPanel class="flex align-items-center justify-content-center">
                     Panel 1
                 </SplitterPanel>
-                <SplitterPanel class="p-d-flex p-ai-center p-jc-center">
+                <SplitterPanel class="flex align-items-center justify-content-center">
                     Panel 2
                 </SplitterPanel>
             </Splitter>
@@ -290,10 +290,10 @@ export default {
         <div class="card">
             <h5>Vertical</h5>
             <Splitter style="height: 300px" layout="vertical">
-                <SplitterPanel class="p-d-flex p-ai-center p-jc-center">
+                <SplitterPanel class="flex align-items-center justify-content-center">
                     Panel 1
                 </SplitterPanel>
-                <SplitterPanel class="p-d-flex p-ai-center p-jc-center">
+                <SplitterPanel class="flex align-items-center justify-content-center">
                     Panel 2
                 </SplitterPanel>
             </Splitter>
@@ -302,20 +302,20 @@ export default {
         <div class="card">
             <h5>Nested</h5>
             <Splitter style="height: 300px">
-                <SplitterPanel class="p-d-flex p-ai-center p-jc-center" :size="20" :minSize="10">
+                <SplitterPanel class="flex align-items-center justify-content-center" :size="20" :minSize="10">
                     Panel 1
                 </SplitterPanel>
                 <SplitterPanel :size="80">
                     <Splitter layout="vertical">
-                        <SplitterPanel class="p-d-flex p-ai-center p-jc-center" :size="15">
+                        <SplitterPanel class="flex align-items-center justify-content-center" :size="15">
                             Panel 2
                         </SplitterPanel>
                         <SplitterPanel :size="85">
                             <Splitter>
-                                <SplitterPanel class="p-d-flex p-ai-center p-jc-center" :size="20">
+                                <SplitterPanel class="flex align-items-center justify-content-center" :size="20">
                                     Panel 3
                                 </SplitterPanel>
-                                <SplitterPanel class="p-d-flex p-ai-center p-jc-center" :size="80">
+                                <SplitterPanel class="flex align-items-center justify-content-center" :size="80">
                                     Panel 4
                                 </SplitterPanel>
                             </Splitter>
@@ -339,11 +339,11 @@ export default {
     <div>
         <div class="card">
             <h5>Horizontal</h5>
-            <Splitter style="height: 300px" class="p-mb-5">
-                <SplitterPanel class="p-d-flex p-ai-center p-jc-center">
+            <Splitter style="height: 300px" class="mb-5">
+                <SplitterPanel class="flex align-items-center justify-content-center">
                     Panel 1
                 </SplitterPanel>
-                <SplitterPanel class="p-d-flex p-ai-center p-jc-center">
+                <SplitterPanel class="flex align-items-center justify-content-center">
                     Panel 2
                 </SplitterPanel>
             </Splitter>
@@ -352,10 +352,10 @@ export default {
         <div class="card">
             <h5>Vertical</h5>
             <Splitter style="height: 300px" layout="vertical">
-                <SplitterPanel class="p-d-flex p-ai-center p-jc-center">
+                <SplitterPanel class="flex align-items-center justify-content-center">
                     Panel 1
                 </SplitterPanel>
-                <SplitterPanel class="p-d-flex p-ai-center p-jc-center">
+                <SplitterPanel class="flex align-items-center justify-content-center">
                     Panel 2
                 </SplitterPanel>
             </Splitter>
@@ -364,20 +364,20 @@ export default {
         <div class="card">
             <h5>Nested</h5>
             <Splitter style="height: 300px">
-                <SplitterPanel class="p-d-flex p-ai-center p-jc-center" :size="20" :minSize="10">
+                <SplitterPanel class="flex align-items-center justify-content-center" :size="20" :minSize="10">
                     Panel 1
                 </SplitterPanel>
                 <SplitterPanel :size="80">
                     <Splitter layout="vertical">
-                        <SplitterPanel class="p-d-flex p-ai-center p-jc-center" :size="15">
+                        <SplitterPanel class="flex align-items-center justify-content-center" :size="15">
                             Panel 2
                         </SplitterPanel>
                         <SplitterPanel :size="85">
                             <Splitter>
-                                <SplitterPanel class="p-d-flex p-ai-center p-jc-center" :size="20">
+                                <SplitterPanel class="flex align-items-center justify-content-center" :size="20">
                                     Panel 3
                                 </SplitterPanel>
-                                <SplitterPanel class="p-d-flex p-ai-center p-jc-center" :size="80">
+                                <SplitterPanel class="flex align-items-center justify-content-center" :size="80">
                                     Panel 4
                                 </SplitterPanel>
                             </Splitter>
@@ -401,11 +401,11 @@ export default {
 					content: `<div id="app">
             <div class="card">
                 <h5>Horizontal</h5>
-                <p-splitter style="height: 300px" class="p-mb-5">
-                    <p-splitterpanel class="p-d-flex p-ai-center p-jc-center">
+                <p-splitter style="height: 300px" class="mb-5">
+                    <p-splitterpanel class="flex align-items-center justify-content-center">
                         Panel 1
                     </p-splitterpanel>
-                    <p-splitterpanel class="p-d-flex p-ai-center p-jc-center">
+                    <p-splitterpanel class="flex align-items-center justify-content-center">
                         Panel 2
                     </p-splitterpanel>
                 </p-splitter>
@@ -414,10 +414,10 @@ export default {
             <div class="card">
                 <h5>Vertical</h5>
                 <p-splitter style="height: 300px" layout="vertical">
-                    <p-splitterpanel class="p-d-flex p-ai-center p-jc-center">
+                    <p-splitterpanel class="flex align-items-center justify-content-center">
                         Panel 1
                     </p-splitterpanel>
-                    <p-splitterpanel class="p-d-flex p-ai-center p-jc-center">
+                    <p-splitterpanel class="flex align-items-center justify-content-center">
                         Panel 2
                     </p-splitterpanel>
                 </p-splitter>
@@ -426,20 +426,20 @@ export default {
             <div class="card">
                 <h5>Nested</h5>
                 <p-splitter style="height: 300px">
-                    <p-splitterpanel class="p-d-flex p-ai-center p-jc-center" :size="20" :minSize="10">
+                    <p-splitterpanel class="flex align-items-center justify-content-center" :size="20" :minSize="10">
                         Panel 1
                     </p-splitterpanel>
                     <p-splitterpanel :size="80">
                         <p-splitter layout="vertical">
-                            <p-splitterpanel class="p-d-flex p-ai-center p-jc-center" :size="15">
+                            <p-splitterpanel class="flex align-items-center justify-content-center" :size="15">
                                 Panel 2
                             </p-splitterpanel>
                             <p-splitterpanel :size="85">
                                 <p-splitter>
-                                    <p-splitterpanel class="p-d-flex p-ai-center p-jc-center" :size="20">
+                                    <p-splitterpanel class="flex align-items-center justify-content-center" :size="20">
                                         Panel 3
                                     </p-splitterpanel>
-                                    <p-splitterpanel class="p-d-flex p-ai-center p-jc-center" :size="80">
+                                    <p-splitterpanel class="flex align-items-center justify-content-center" :size="80">
                                         Panel 4
                                     </p-splitterpanel>
                                 </p-splitter>
diff --git a/src/views/steps/ConfirmationDemo.vue b/src/views/steps/ConfirmationDemo.vue
index 8a0fb1b24..85293eea3 100755
--- a/src/views/steps/ConfirmationDemo.vue
+++ b/src/views/steps/ConfirmationDemo.vue
@@ -5,45 +5,45 @@
                 Confirmation
             </template>
             <template v-slot:content>
-                <div class="p-field p-col-12">
+                <div class="field col-12">
                     <label for="class">Name</label>
                     <b>{{formData.firstname ? formData.firstname : '-'}} {{formData.lastname ? formData.lastname : '-'}}</b>
                 </div>
-                <div class="p-field p-col-12">
+                <div class="field col-12">
                     <label for="Age">Age</label>
                     <b>{{formData.age ? formData.age : '-'}}</b>
                 </div>
-                <div class="p-field p-col-12">
+                <div class="field col-12">
                     <label for="Age">Seat Class</label>
                     <b>{{formData.class ? formData.class : '-'}}</b>
                 </div>
-                <div class="p-field p-col-12">
+                <div class="field col-12">
                     <label for="Age">Wagon Number</label>
                     <b>{{formData.vagon ? formData.vagon : '-'}}</b>
                 </div>
-                <div class="p-field p-col-12">
+                <div class="field col-12">
                     <label for="Age">Seat</label>
                     <b>{{formData.seat ? formData.seat : '-'}}</b>
                 </div>
-                <div class="p-field p-col-12">
+                <div class="field col-12">
                     <label for="Age">Cardholder Name</label>
                     <b>{{formData.cardholderName ? formData.cardholderName : '-'}}</b>
                 </div>
-                <div class="p-field p-col-12">
+                <div class="field col-12">
                     <label for="Age">Card Number</label>
                     <b>{{formData.cardholderNumber ? formData.cardholderNumber : '-'}}</b>
                 </div>
-                <div class="p-field p-col-12">
+                <div class="field col-12">
                     <label for="Age">Date</label>
                     <b>{{formData.date ? formData.date : '-'}}</b>
                 </div>
-                <div class="p-field p-col-12">
+                <div class="field col-12">
                     <label for="Age">CVV</label>
                     <b>{{formData.cvv && formData.cvv.length === 3  ? '**' + formData.cvv[2] : '-'}}</b>
                 </div>
             </template>
             <template v-slot:footer>
-                <div class="p-grid p-nogutter p-justify-between">
+                <div class="grid grid-nogutter justify-content-between">
                     <Button label="Back" @click="prevPage()" icon="pi pi-angle-left" />
                     <Button label="Complete" @click="complete()" icon="pi pi-check" iconPos="right" class="p-button-success"/>
                 </div>
diff --git a/src/views/steps/PaymentDemo.vue b/src/views/steps/PaymentDemo.vue
index 5dac90e0c..7262789f7 100755
--- a/src/views/steps/PaymentDemo.vue
+++ b/src/views/steps/PaymentDemo.vue
@@ -8,31 +8,31 @@
                 Enter your card details
             </template>
             <template v-slot:content>
-                <div class="p-fluid p-formgrid p-grid">
-                    <div class="p-field p-col-12">
+                <div class="p-fluid formgrid grid">
+                    <div class="field col-12">
                         <label for="class">Card Holder Name</label>
                         <InputText type="text" v-model="cardholderName" />
                     </div>
-                    <div class="p-field p-col-8">
+                    <div class="field col-8">
                         <label id="number" for="lastname">Number</label>
                         <InputMask id="number" mask="9999-9999-9999-9999" v-model="cardholderNumber" />
                     </div>
-                    <div class="p-field p-col-2">
+                    <div class="field col-2">
                         <label id="date" for="date">Date</label>
                         <InputMask id="date" mask="99/99" v-model="date" />
                     </div>
-                    <div class="p-field p-col-2">
+                    <div class="field col-2">
                         <label for="cvv">CVV</label>
                         <InputMask id="cvv" mask="999" v-model="cvv" />
                     </div>
-                    <div class="p-field-checkbox p-col-12">
+                    <div class="field-checkbox col-12">
                         <Checkbox id="remember" v-model="remember" :binary="true" />
                         <label for="remember" class="p-checkbox-label">Save credit card information for future</label>
                     </div>
                 </div>
             </template>
             <template v-slot:footer>
-                <div class="p-grid p-nogutter p-justify-between">
+                <div class="grid grid-nogutter justify-content-between">
                     <Button label="Back" @click="prevPage()" icon="pi pi-angle-left" />
                     <Button label="Next" @click="nextPage()" icon="pi pi-angle-right" iconPos="right" />
                 </div>
diff --git a/src/views/steps/PersonalDemo.vue b/src/views/steps/PersonalDemo.vue
index b24f0367b..e6a8f1193 100755
--- a/src/views/steps/PersonalDemo.vue
+++ b/src/views/steps/PersonalDemo.vue
@@ -9,24 +9,24 @@
             </template>
             <template v-slot:content>
                 <div class="p-fluid">
-                    <div class="p-field">
+                    <div class="field">
                         <label for="firstname">Firstname</label>
                         <InputText id="firstname" v-model="firstname" :class="{'p-invalid': validationErrors.firstname && submitted}" />
                         <small v-show="validationErrors.firstname && submitted" class="p-error">Firstname is required.</small>
                     </div>
-                    <div class="p-field">
+                    <div class="field">
                         <label for="lastname">Lastname</label>
                         <InputText id="lastname" v-model="lastname" :class="{'p-invalid': validationErrors.lastname && submitted}" />
                         <small v-show="validationErrors.lastname && submitted" class="p-error">Lastname is required.</small>
                     </div>
-                    <div class="p-field">
+                    <div class="field">
                         <label for="age">Age</label>
                         <InputNumber id="age" v-model="age" />
                     </div>
                 </div>
             </template>
             <template v-slot:footer>
-                <div class="p-grid p-nogutter p-justify-between">
+                <div class="grid grid-nogutter justify-content-between">
                     <i></i>
                     <Button label="Next" @click="nextPage()" icon="pi pi-angle-right" iconPos="right" />
                 </div>
diff --git a/src/views/steps/SeatDemo.vue b/src/views/steps/SeatDemo.vue
index 30e0cdb13..f6c0d6726 100755
--- a/src/views/steps/SeatDemo.vue
+++ b/src/views/steps/SeatDemo.vue
@@ -1,30 +1,30 @@
 <template>
     <div class="stepsdemo-content">
         <Card>
-           <template v-slot:title>
+            <template v-slot:title>
                 Seat Information
             </template>
             <template v-slot:subtitle>
                 Choose your seat
             </template>
             <template v-slot:content>
-                <div class="p-fluid p-formgrid p-grid">
-                    <div class="p-field p-col-12 p-md-6">
+                <div class="p-fluid formgrid grid">
+                    <div class="field col-12 md:col-6">
                         <label for="class">Class</label>
                         <Dropdown inputId="class" v-model="selectedClass" :options="classes" @change="setWagons($event)" optionLabel="name" placeholder="Select a Class" />
                     </div>
-                    <div class="p-field p-col-12 p-md-6">
+                    <div class="field col-12 md:col-6">
                         <label for="lastname">Wagon</label>
                         <Dropdown inputId="wagon" v-model="selectedWagon" :options="wagons" @change="setSeats($event)" optionLabel="wagon" placeholder="Select a Wagon" />
                     </div>
-                    <div class="p-field p-col-12">
+                    <div class="field col-12">
                         <label for="seat">Seat</label>
                         <Dropdown inputId="seat" v-model="selectedSeat" :options="seats" optionLabel="seat" placeholder="Select a Seat" />
                     </div>
                 </div>
             </template>
             <template v-slot:footer>
-                <div class="p-grid p-nogutter p-justify-between">
+                <div class="grid grid-nogutter justify-content-between">
                     <Button label="Back" @click="prevPage()" icon="pi pi-angle-left" />
                     <Button label="Next" @click="nextPage()" icon="pi pi-angle-right" iconPos="right" />
                 </div>
diff --git a/src/views/steps/StepsDoc.vue b/src/views/steps/StepsDoc.vue
index bab621882..7d16d3561 100755
--- a/src/views/steps/StepsDoc.vue
+++ b/src/views/steps/StepsDoc.vue
@@ -415,24 +415,24 @@ export default {
                     </template>
                     <template v-slot:content>
                         <div class="p-fluid">
-                            <div class="p-field">
+                            <div class="field">
                                 <label for="firstname">Firstname</label>
                                 <p-inputtext id="firstname" v-model="firstname" :class="{'p-invalid': validationErrors.firstname && submitted}"></p-inputtext>
                                 <small v-show="validationErrors.firstname && submitted" class="p-error">Firstname is required.</small>
                             </div>
-                            <div class="p-field">
+                            <div class="field">
                                 <label for="lastname">Lastname</label>
                                 <p-inputtext id="lastname" v-model="lastname" :class="{'p-invalid': validationErrors.lastname && submitted}"></p-inputtext>
                                 <small v-show="validationErrors.lastname && submitted" class="p-error">Lastname is required.</small>
                             </div>
-                            <div class="p-field">
+                            <div class="field">
                                 <label for="age">Age</label>
                                 <p-inputnumber id="age" v-model="age"></p-inputnumber>
                             </div>
                         </div>
                     </template>
                     <template v-slot:footer>
-                        <div class="p-grid p-nogutter p-justify-between">
+                        <div class="grid grid-nogutter justify-content-between">
                             <i></i>
                             <p-button label="Next" @click="nextPage()" icon="pi pi-angle-right" icon-pos="right"></p-button>
                         </div>
@@ -487,23 +487,23 @@ export default {
                         Choose your seat
                     </template>
                     <template v-slot:content>
-                        <div class="p-fluid p-formgrid p-grid">
-                            <div class="p-field p-col-12 p-md-6">
+                        <div class="p-fluid formgrid grid">
+                            <div class="field col-12 md:col-6">
                                 <label for="class">Class</label>
                                 <p-dropdown input-id="class" v-model="selectedClass" :options="classes" @change="setWagons($event)" option-label="name" placeholder="Select a Class"></p-dropdown>
                             </div>
-                            <div class="p-field p-col-12 p-md-6">
+                            <div class="field col-12 md:col-6">
                                 <label for="lastname">Wagon</label>
                                 <p-dropdown input-id="wagon" v-model="selectedWagon" :options="wagons" @change="setSeats($event)" option-label="wagon" placeholder="Select a Wagon"></p-dropdown>
                             </div>
-                            <div class="p-field p-col-12">
+                            <div class="field col-12">
                                 <label for="seat">Seat</label>
                                 <p-dropdown input-id="seat" v-model="selectedSeat" :options="seats" option-label="seat" placeholder="Select a Seat"></p-dropdown>
                             </div>
                         </div>
                     </template>
                     <template v-slot:footer>
-                        <div class="p-grid p-nogutter p-justify-between">
+                        <div class="grid grid-nogutter justify-content-between">
                             <p-button label="Back" @click="prevPage()" icon="pi pi-angle-left"></p-button>
                             <p-button label="Next" @click="nextPage()" icon="pi pi-angle-right" icon-pos="right"></p-button>
                         </div>
@@ -566,31 +566,31 @@ export default {
                         Enter your card details
                     </template>
                     <template v-slot:content>
-                        <div class="p-fluid p-formgrid p-grid">
-                            <div class="p-field p-col-12">
+                        <div class="p-fluid formgrid grid">
+                            <div class="field col-12">
                                 <label for="class">Card Holder Name</label>
                                 <p-inputtext type="text" v-model="cardholderName"></p-inputext>
                             </div>
-                            <div class="p-field p-col-8">
+                            <div class="field col-8">
                                 <label id="number" for="lastname">Number</label>
                                 <p-inputmask id="number" mask="9999-9999-9999-9999" v-model="cardholderNumber"></p-inputmask>
                             </div>
-                            <div class="p-field p-col-2">
+                            <div class="field col-2">
                                 <label id="date" for="date">Date</label>
                                 <p-inputmask id="date" mask="99/99" v-model="date"></p-inputmask>
                             </div>
-                            <div class="p-field p-col-2">
+                            <div class="field col-2">
                                 <label for="cvv">CVV</label>
                                 <p-inputmask id="cvv" mask="999" v-model="cvv"></p-inputmask>
                             </div>
-                            <div class="p-field-checkbox p-col-12">
+                            <div class="field-checkbox col-12">
                                 <p-checkbox id="remember" v-model="remember" :binary="true"></p-checkbox>
                                 <label for="remember" class="p-checkbox-label">Save credit card information for future</label>
                             </div>
                         </div>
                     </template>
                     <template v-slot:footer>
-                        <div class="p-grid p-nogutter p-justify-between">
+                        <div class="grid grid-nogutter justify-content-between">
                             <p-button label="Back" @click="prevPage()" icon="pi pi-angle-left"></p-button>
                             <p-button label="Next" @click="nextPage()" icon="pi pi-angle-right" icon-pos="right"></p-button>
                         </div>
@@ -630,45 +630,45 @@ export default {
                         Confirmation
                     </template>
                     <template v-slot:content>
-                        <div class="p-field p-col-12">
+                        <div class="field col-12">
                             <label for="class">Name</label>
                             <b>{{formData.firstname ? formData.firstname : '-'}} {{formData.lastname ? formData.lastname : '-'}}</b>
                         </div>
-                        <div class="p-field p-col-12">
+                        <div class="field col-12">
                             <label for="Age">Age</label>
                             <b>{{formData.age ? formData.age : '-'}}</b>
                         </div>
-                        <div class="p-field p-col-12">
+                        <div class="field col-12">
                             <label for="Age">Seat Class</label>
                             <b>{{formData.class ? formData.class : '-'}}</b>
                         </div>
-                        <div class="p-field p-col-12">
+                        <div class="field col-12">
                             <label for="Age">Wagon Number</label>
                             <b>{{formData.vagon ? formData.vagon : '-'}}</b>
                         </div>
-                        <div class="p-field p-col-12">
+                        <div class="field col-12">
                             <label for="Age">Seat</label>
                             <b>{{formData.seat ? formData.seat : '-'}}</b>
                         </div>
-                        <div class="p-field p-col-12">
+                        <div class="field col-12">
                             <label for="Age">Cardholder Name</label>
                             <b>{{formData.cardholderName ? formData.cardholderName : '-'}}</b>
                         </div>
-                        <div class="p-field p-col-12">
+                        <div class="field col-12">
                             <label for="Age">Card Number</label>
                             <b>{{formData.cardholderNumber ? formData.cardholderNumber : '-'}}</b>
                         </div>
-                        <div class="p-field p-col-12">
+                        <div class="field col-12">
                             <label for="Age">Date</label>
                             <b>{{formData.date ? formData.date : '-'}}</b>
                         </div>
-                        <div class="p-field p-col-12">
+                        <div class="field col-12">
                             <label for="Age">CVV</label>
                             <b>{{formData.cvv && formData.cvv.length === 3  ? '**' + formData.cvv[2] : '-'}}</b>
                         </div>
                     </template>
                     <template v-slot:footer>
-                        <div class="p-grid p-nogutter p-justify-between">
+                        <div class="grid grid-nogutter justify-content-between">
                             <p-button label="Back" @click="prevPage()" icon="pi pi-angle-left"></p-button>
                             <p-button label="Complete" @click="complete()" icon="pi pi-check" icon-pos="right" class="p-button-success"></p-button>
                         </div>
@@ -738,24 +738,24 @@ export default {
             </template>
             <template v-slot:content>
                 <div class="p-fluid">
-                    <div class="p-field">
+                    <div class="field">
                         <label for="firstname">Firstname</label>
                         <InputText id="firstname" v-model="firstname" :class="{'p-invalid': validationErrors.firstname && submitted}" />
                         <small v-show="validationErrors.firstname && submitted" class="p-error">Firstname is required.</small>
                     </div>
-                    <div class="p-field">
+                    <div class="field">
                         <label for="lastname">Lastname</label>
                         <InputText id="lastname" v-model="lastname" :class="{'p-invalid': validationErrors.lastname && submitted}" />
                         <small v-show="validationErrors.lastname && submitted" class="p-error">Lastname is required.</small>
                     </div>
-                    <div class="p-field">
+                    <div class="field">
                         <label for="age">Age</label>
                         <InputNumber id="age" v-model="age" />
                     </div>
                 </div>
             </template>
             <template v-slot:footer>
-                <div class="p-grid p-nogutter p-justify-between">
+                <div class="grid grid-nogutter justify-content-between">
                     <i></i>
                     <Button label="Next" @click="nextPage()" icon="pi pi-angle-right" iconPos="right" />
                 </div>
@@ -813,23 +813,23 @@ export default {
                 Choose your seat
             </template>
             <template v-slot:content>
-                <div class="p-fluid p-formgrid p-grid">
-                    <div class="p-field p-col-12 p-md-6">
+                <div class="p-fluid formgrid grid">
+                    <div class="field col-12 md:col-6">
                         <label for="class">Class</label>
                         <Dropdown inputId="class" v-model="selectedClass" :options="classes" @change="setVagons($event)" optionLabel="name" placeholder="Select a Class" />
                     </div>
-                    <div class="p-field p-col-12 p-md-6">
+                    <div class="field col-12 md:col-6">
                         <label for="lastname">Wagon</label>
                         <Dropdown inputId="wagon" v-model="selectedVagon" :options="vagons" @change="setSeats($event)" optionLabel="vagon" placeholder="Select a Vagon" />
                     </div>
-                    <div class="p-field p-col-12">
+                    <div class="field col-12">
                         <label for="seat">Seat</label>
                         <Dropdown inputId="seat" v-model="selectedSeat" :options="seats" optionLabel="seat" placeholder="Select a Seat" />
                     </div>
                 </div>
             </template>
             <template v-slot:footer>
-                <div class="p-grid p-nogutter p-justify-between">
+                <div class="grid grid-nogutter justify-content-between">
                     <Button label="Back" @click="prevPage()" icon="pi pi-angle-left" />
                     <Button label="Next" @click="nextPage()" icon="pi pi-angle-right" iconPos="right" />
                 </div>
@@ -896,31 +896,31 @@ export default {
                 Enter your card details
             </template>
             <template v-slot:content>
-                <div class="p-fluid p-formgrid p-grid">
-                    <div class="p-field p-col-12">
+                <div class="p-fluid formgrid grid">
+                    <div class="field col-12">
                         <label for="class">Card Holder Name</label>
                         <InputText type="text" v-model="cardholderName" />
                     </div>
-                    <div class="p-field p-col-8">
+                    <div class="field col-8">
                         <label id="number" for="lastname">Number</label>
                         <InputMask id="number" mask="9999-9999-9999-9999" v-model="cardholderNumber" />
                     </div>
-                    <div class="p-field p-col-2">
+                    <div class="field col-2">
                         <label id="date" for="date">Date</label>
                         <InputMask id="date" mask="99/99" v-model="date" />
                     </div>
-                    <div class="p-field p-col-2">
+                    <div class="field col-2">
                         <label for="cvv">CVV</label>
                         <InputMask id="cvv" mask="999" v-model="cvv" />
                     </div>
-                    <div class="p-field-checkbox p-col-12">
+                    <div class="field-checkbox col-12">
                         <Checkbox id="remember" v-model="remember" :binary="true" />
                         <label for="remember" class="p-checkbox-label">Save credit card information for future</label>
                     </div>
                 </div>
             </template>
             <template v-slot:footer>
-                <div class="p-grid p-nogutter p-justify-between">
+                <div class="grid grid-nogutter justify-content-between">
                     <Button label="Back" @click="prevPage()" icon="pi pi-angle-left" />
                     <Button label="Next" @click="nextPage()" icon="pi pi-angle-right" iconPos="right" />
                 </div>
@@ -962,45 +962,45 @@ export default {
                 Confirmation
             </template>
             <template v-slot:content>
-                <div class="p-field p-col-12">
+                <div class="field col-12">
                     <label for="class">Name</label>
                     <b>{{formData.firstname ? formData.firstname : '-'}} {{formData.lastname ? formData.lastname : '-'}}</b>
                 </div>
-                <div class="p-field p-col-12">
+                <div class="field col-12">
                     <label for="Age">Age</label>
                     <b>{{formData.age ? formData.age : '-'}}</b>
                 </div>
-                <div class="p-field p-col-12">
+                <div class="field col-12">
                     <label for="Age">Seat Class</label>
                     <b>{{formData.class ? formData.class : '-'}}</b>
                 </div>
-                <div class="p-field p-col-12">
+                <div class="field col-12">
                     <label for="Age">Wagon Number</label>
                     <b>{{formData.vagon ? formData.vagon : '-'}}</b>
                 </div>
-                <div class="p-field p-col-12">
+                <div class="field col-12">
                     <label for="Age">Seat</label>
                     <b>{{formData.seat ? formData.seat : '-'}}</b>
                 </div>
-                <div class="p-field p-col-12">
+                <div class="field col-12">
                     <label for="Age">Cardholder Name</label>
                     <b>{{formData.cardholderName ? formData.cardholderName : '-'}}</b>
                 </div>
-                <div class="p-field p-col-12">
+                <div class="field col-12">
                     <label for="Age">Card Number</label>
                     <b>{{formData.cardholderNumber ? formData.cardholderNumber : '-'}}</b>
                 </div>
-                <div class="p-field p-col-12">
+                <div class="field col-12">
                     <label for="Age">Date</label>
                     <b>{{formData.date ? formData.date : '-'}}</b>
                 </div>
-                <div class="p-field p-col-12">
+                <div class="field col-12">
                     <label for="Age">CVV</label>
                     <b>{{formData.cvv && formData.cvv.length === 3  ? '**' + formData.cvv[2] : '-'}}</b>
                 </div>
             </template>
             <template v-slot:footer>
-                <div class="p-grid p-nogutter p-justify-between">
+                <div class="grid grid-nogutter justify-content-between">
                     <Button label="Back" @click="prevPage()" icon="pi pi-angle-left" />
                     <Button label="Complete" @click="complete()" icon="pi pi-check" iconPos="right" class="p-button-success"/>
                 </div>
diff --git a/src/views/styleclass/StyleClassDemo.vue b/src/views/styleclass/StyleClassDemo.vue
index 86cb7f733..3e5e27401 100644
--- a/src/views/styleclass/StyleClassDemo.vue
+++ b/src/views/styleclass/StyleClassDemo.vue
@@ -13,12 +13,12 @@
         <div class="card">
             <h5>Toggle Class</h5>
             <Button label="Toggle p-disabled" v-styleclass="{ selector: '@next', toggleClass: 'p-disabled' }" />
-            <InputText class="p-d-block p-mt-3" />
+            <InputText class="block mt-3" />
 
             <h5>Animations</h5>
-            <Button label="Show" class="p-mr-2" v-styleclass="{ selector: '.box', enterClass: 'p-d-none', enterActiveClass: 'my-fadein' }" />
-            <Button label="Hide" v-styleclass="{ selector: '.box', leaveActiveClass: 'my-fadeout', leaveToClass: 'p-d-none' }" />
-            <div class="box p-d-none">Content</div>
+            <Button label="Show" class="mr-2" v-styleclass="{ selector: '.box', enterClass: 'hidden', enterActiveClass: 'my-fadein' }" />
+            <Button label="Hide" v-styleclass="{ selector: '.box', leaveActiveClass: 'my-fadeout', leaveToClass: 'hidden' }" />
+            <div class="box hidden">Content</div>
         </div>
     </div>
 
diff --git a/src/views/styleclass/StyleClassDoc.vue b/src/views/styleclass/StyleClassDoc.vue
index 4a02db040..3c3f74b60 100644
--- a/src/views/styleclass/StyleClassDoc.vue
+++ b/src/views/styleclass/StyleClassDoc.vue
@@ -21,15 +21,15 @@ app.directive('styleclass', StyleClass);
         <p><b>ToggleClass</b></p>
 <pre v-code><code>
 &lt;Button label="Toggle p-disabled" v-styleclass="{ selector: '@next', toggleClass: 'p-disabled' }" /&gt;
-&lt;InputText class="p-d-block p-mt-3" /&gt;
+&lt;InputText class="block mt-3" /&gt;
 
 </code></pre>
 
         <p><b>Enter/Leave Animation</b></p>
 <pre v-code><code>
-&lt;Button label="Show" class="p-mr-2" v-styleclass="{ selector: '.box', enterClass: 'p-d-none', enterActiveClass: 'my-fadein' }" /&gt;
-&lt;Button label="Hide" v-styleclass="{ selector: '.box', leaveActiveClass: 'my-fadeout', leaveToClass: 'p-d-none' }" /&gt;
-&lt;div class="box p-d-none"&gt;Content&lt;/div&gt;
+&lt;Button label="Show" class="mr-2" v-styleclass="{ selector: '.box', enterClass: 'hidden', enterActiveClass: 'my-fadein' }" /&gt;
+&lt;Button label="Hide" v-styleclass="{ selector: '.box', leaveActiveClass: 'my-fadeout', leaveToClass: 'hidden' }" /&gt;
+&lt;div class="box hidden"&gt;Content&lt;/div&gt;
 
 </code></pre>
 
@@ -154,12 +154,12 @@ export default {
     <div>
         <h5>Toggle Class</h5>
         <Button label="Toggle p-disabled" v-styleclass="{ selector: '@next', toggleClass: 'p-disabled' }" />
-        <InputText class="p-d-block p-mt-3" />
+        <InputText class="block mt-3" />
 
         <h5>Animations</h5>
-        <Button label="Show" class="p-mr-2" v-styleclass="{ selector: '.box', enterClass: 'p-d-none', enterActiveClass: 'my-fadein' }" />
-        <Button label="Hide" v-styleclass="{ selector: '.box', leaveActiveClass: 'my-fadeout', leaveToClass: 'p-d-none' }" />
-        <div class="box p-d-none">Content</div>
+        <Button label="Show" class="mr-2" v-styleclass="{ selector: '.box', enterClass: 'hidden', enterActiveClass: 'my-fadein' }" />
+        <Button label="Hide" v-styleclass="{ selector: '.box', leaveActiveClass: 'my-fadeout', leaveToClass: 'hidden' }" />
+        <div class="box hidden">Content</div>
     </div>    
 </template>
 
@@ -208,12 +208,12 @@ export default {
     <div>
         <h5>Toggle Class</h5>
         <Button label="Toggle p-disabled" v-styleclass="{ selector: '@next', toggleClass: 'p-disabled' }" />
-        <InputText class="p-d-block p-mt-3" />
+        <InputText class="block mt-3" />
 
         <h5>Animations</h5>
-        <Button label="Show" class="p-mr-2" v-styleclass="{ selector: '.box', enterClass: 'p-d-none', enterActiveClass: 'my-fadein' }" />
-        <Button label="Hide" v-styleclass="{ selector: '.box', leaveActiveClass: 'my-fadeout', leaveToClass: 'p-d-none' }" />
-        <div class="box p-d-none">Content</div>
+        <Button label="Show" class="mr-2" v-styleclass="{ selector: '.box', enterClass: 'hidden', enterActiveClass: 'my-fadein' }" />
+        <Button label="Hide" v-styleclass="{ selector: '.box', leaveActiveClass: 'my-fadeout', leaveToClass: 'hidden' }" />
+        <div class="box hidden">Content</div>
     </div>
 </template>
 
@@ -261,12 +261,12 @@ export default {
                     content: `<div id="app">
             <h5>Toggle Class</h5>
             <p-button label="Toggle p-disabled" v-styleclass="{ selector: '@next', toggleClass: 'p-disabled' }"></p-button>
-            <p-inputtext class="p-d-block p-mt-3"></p-inputtext>
+            <p-inputtext class="block mt-3"></p-inputtext>
 
             <h5>Animations</h5>
-            <p-button label="Show" class="p-mr-2" v-styleclass="{ selector: '.box', enterClass: 'p-d-none', enterActiveClass: 'my-fadein' }"></p-button>
-            <p-button label="Hide" v-styleclass="{ selector: '.box', leaveActiveClass: 'my-fadeout', leaveToClass: 'p-d-none' }"></p-button>
-            <div class="box p-d-none">Content</div>
+            <p-button label="Show" class="mr-2" v-styleclass="{ selector: '.box', enterClass: 'hidden', enterActiveClass: 'my-fadein' }"></p-button>
+            <p-button label="Hide" v-styleclass="{ selector: '.box', leaveActiveClass: 'my-fadeout', leaveToClass: 'hidden' }"></p-button>
+            <div class="box hidden">Content</div>
         </div>
 
         <script>
diff --git a/src/views/support/Support.vue b/src/views/support/Support.vue
index 41454a89b..58f10d978 100755
--- a/src/views/support/Support.vue
+++ b/src/views/support/Support.vue
@@ -7,8 +7,8 @@
             </div>
         </div>
 
-        <div class="content-section options p-grid">
-            <div class="p-col-12 p-md-6 p-lg-6">
+        <div class="content-section options grid">
+            <div class="col-12 md:col-6 lg:col-6">
                 <div class="card support-box">
                     <h5>Community Support</h5>
                     <p><a href="https://forum.primefaces.org/viewforum.php?f=35">Forum</a> and <a href="https://discord.gg/gzKFYnpmCY">Discord</a> are where the community users gather to seek support, post topics and discuss the technology. PrimeTek does not
@@ -16,8 +16,8 @@
                 </div>
             </div>
 
-            <div class="p-col-12 p-md-6 p-lg-6">
-                <div class="p-d-flex p-flex-column p-jc-between card support-box pro">
+            <div class="col-12 md:col-6 lg:col-6">
+                <div class="flex flex-column justify-content-center card support-box pro">
                     <div>
                         <h5>PrimeVue PRO Support</h5>
                         <p>PrimeVue PRO is a term based commercial support service. With the exclusive services of Pro account,
@@ -31,102 +31,102 @@
 
         <div class="content-section section-moreaboutpro">
             <h5 class="section-header">Included in PRO</h5> 
-            <div class="p-grid">
-                <div class="p-col-6 p-lg-3">
-                    <div class="p-d-flex">
+            <div class="grid">
+                <div class="col-6 lg:col-3">
+                    <div class="flex">
                         <div class="dot">&nbsp;</div>
-                        <div class="p-d-flex p-flex-column p-pl-3">
+                        <div class="flex flex-column pl-3">
                             <h6>Access to pro.primefaces.org</h6>
                             <p>PRO means high-touch support. Contact us directly from a private JIRA with unlimited support tickets!
                             </p>
                         </div>
                     </div>     
                 </div>
-                <div class="p-col-6 p-lg-3">
-                    <div class="p-d-flex">
+                <div class="col-6 lg:col-3">
+                    <div class="flex">
                         <div class="dot color-1">&nbsp;</div>
-                        <div class="p-d-flex p-flex-column p-pl-3">
+                        <div class="flex flex-column pl-3">
                             <h6>Response within 1 Business Day</h6>
                             <p>Once you create a case, your request will be routed to our PRO team and they will get in touch within 1 business day.</p>
                         </div>
                     </div>     
                 </div>
-                <div class="p-col-6 p-lg-3">
-                    <div class="p-d-flex">
+                <div class="col-6 lg:col-3">
+                    <div class="flex">
                         <div class="dot color-7">&nbsp;</div>
-                        <div class="p-d-flex p-flex-column p-pl-3">
+                        <div class="flex flex-column pl-3">
                             <h6>Unlimited Number of Cases</h6>
                             <p>Take advantage of the unlimited number of cases. Our PRO team is at your side to solve all the problems you are experiencing. </p>
                         </div>
                     </div>     
                 </div>
-                <div class="p-col-6 p-lg-3">
-                    <div class="p-d-flex">
+                <div class="col-6 lg:col-3">
+                    <div class="flex">
                         <div class="dot color-4">&nbsp;</div>
-                        <div class="p-d-flex p-flex-column p-pl-3">
+                        <div class="flex flex-column pl-3">
                             <h6>Defect patches</h6>
                             <p>We identify, prioritize, fix your defects and provide fix patches.</p>
                         </div>
                     </div>     
                 </div>
-                <div class="p-col-6 p-lg-3">
-                    <div class="p-d-flex">
+                <div class="col-6 lg:col-3">
+                    <div class="flex">
                         <div class="dot color-3">&nbsp;</div>
-                        <div class="p-d-flex p-flex-column p-pl-3">
+                        <div class="flex flex-column pl-3">
                             <h6>Theme Designer</h6>
                             <p><a href="https://www.primefaces.org/designer-vue">Designer</a> is the ultimate tool to create your own PrimeVue experience powered by a SASS based theme engine with 500+ variables and a Visual Designer. </p>
                         </div>
                     </div>     
                 </div>
-                <div class="p-col-6 p-lg-3">
-                    <div class="p-d-flex">
+                <div class="col-6 lg:col-3">
+                    <div class="flex">
                         <div class="dot color-5">&nbsp;</div>
-                        <div class="p-d-flex p-flex-column p-pl-3">
+                        <div class="flex flex-column pl-3">
                             <h6>Premium Template</h6>
                             <p>Choose one premium template of your choice with an extended license.</p>
                         </div>
                     </div>     
                 </div>
-                <div class="p-col-6 p-lg-3">
-                    <div class="p-d-flex">
+                <div class="col-6 lg:col-3">
+                    <div class="flex">
                         <div class="dot color-6">&nbsp;</div>
-                        <div class="p-d-flex p-flex-column p-pl-3">
+                        <div class="flex flex-column pl-3">
                             <h6>PrimeBlocks</h6>
                             <p>An enterprise license for all of the ready to use <a href="https://www.primefaces.org/primeblocks-vue">UI blocks</a> to build spectacular applications in no time.</p>
                         </div>
                     </div>     
                 </div>
-                <div class="p-col-6 p-lg-3">
-                    <div class="p-d-flex">
+                <div class="col-6 lg:col-3">
+                    <div class="flex">
                         <div class="dot color-8">&nbsp;</div>
-                        <div class="p-d-flex p-flex-column p-pl-3">
+                        <div class="flex flex-column pl-3">
                             <h6>Remote Desktop Connection</h6>
                             <p>Direct Access to your issues! Your problems are resolved faster with our instant remote connection.</p>
                         </div>
                     </div>     
                 </div>
-                <div class="p-col-6 p-lg-3">
-                    <div class="p-d-flex">
+                <div class="col-6 lg:col-3">
+                    <div class="flex">
                         <div class="dot color-9">&nbsp;</div>
-                        <div class="p-d-flex p-flex-column p-pl-3">
+                        <div class="flex flex-column pl-3">
                             <h6>Conference Calls</h6>
                             <p>Our PRO Team helps resolve critical issues in conference calls and ensure high-value collaboration with your team.</p>
                         </div>
                     </div>     
                 </div>
-                <div class="p-col-6 p-lg-3">
-                    <div class="p-d-flex">
+                <div class="col-6 lg:col-3">
+                    <div class="flex">
                         <div class="dot color-10">&nbsp;</div>
-                        <div class="p-d-flex p-flex-column p-pl-3">
+                        <div class="flex flex-column pl-3">
                             <h6>High Priority to Your Issues</h6>
                             <p>PRO delivers the premium support and expertise you need. Resources are prioritized for an optimized response to critical issues.</p>
                         </div>
                     </div>     
                 </div>
-                <div class="p-col-6 p-lg-3">
-                    <div class="p-d-flex">
+                <div class="col-6 lg:col-3">
+                    <div class="flex">
                         <div class="dot">&nbsp;</div>
-                        <div class="p-d-flex p-flex-column p-pl-3">
+                        <div class="flex flex-column pl-3">
                             <h6>Notifications About Security Updates</h6>
                             <p>Be the first to be informed about critical security updates.</p>
                         </div>
@@ -137,66 +137,66 @@
 
         <div class="content-section section-newfeatures">
             <h5>Enhancement Credits</h5> 
-            <div class="p-d-flex p-mb-4">
+            <div class="flex mb-4">
                 <p>New feature and enhancement requests are not available in core services and provided via a credit model instead. When you have a feature request we provide an estimate, if you confirm we deliver your request within an estimated timeframe and deduct the amount of work from your credits.</p>
             </div>
-            <div class="p-grid">
-                <div class="p-col-6 p-lg-3">
-                    <div class="p-d-flex">
+            <div class="grid">
+                <div class="col-6 lg:col-3">
+                    <div class="flex">
                         <div class="dot color-1">&nbsp;</div>
-                        <div class="p-d-flex p-flex-column p-pl-3">
+                        <div class="flex flex-column pl-3">
                             <h6>New Components</h6>
                             <p>User needs are frequently changing. To meet your needs, we create new components.</p>
                         </div>
                     </div>     
                 </div>
-                <div class="p-col-6 p-lg-3">
-                    <div class="p-d-flex">
+                <div class="col-6 lg:col-3">
+                    <div class="flex">
                         <div class="dot color-5">&nbsp;</div>
-                        <div class="p-d-flex p-flex-column p-pl-3">
+                        <div class="flex flex-column pl-3">
                             <h6>New Functionality to Existing Components</h6>
                             <p>We add and configure new features to existing components to enhance the capabilities of your application.</p>
                         </div>
                     </div>     
                 </div>
-                <div class="p-col-6 p-lg-3">
-                    <div class="p-d-flex">
+                <div class="col-6 lg:col-3">
+                    <div class="flex">
                         <div class="dot color-2">&nbsp;</div>
-                        <div class="p-d-flex p-flex-column p-pl-3">
+                        <div class="flex flex-column pl-3">
                             <h6>Changing the Way a Certain Functionality is Implemented</h6>
                             <p>A problem might have several different solutions. We offer alternative ways for existing implementations.</p>
                         </div>
                     </div>     
                 </div>
-                <div class="p-col-6 p-lg-3">
-                    <div class="p-d-flex">
+                <div class="col-6 lg:col-3">
+                    <div class="flex">
                         <div class="dot color-7">&nbsp;</div>
-                        <div class="p-d-flex p-flex-column p-pl-3">
+                        <div class="flex flex-column pl-3">
                             <h6>Accessibility Improvements</h6>
                             <p>Our team makes accessibility improvements that allow your developers to create more accessible applications.</p>
                         </div>
                     </div>     
                 </div>
-                <div class="p-col-6 p-lg-3">
-                    <div class="p-d-flex">
+                <div class="col-6 lg:col-3">
+                    <div class="flex">
                         <div class="dot color-4">&nbsp;</div>
-                        <div class="p-d-flex p-flex-column p-pl-3">
+                        <div class="flex flex-column pl-3">
                             <h6>Proof of Concept Implementations of a Use Case</h6>
                             <p>Your projects can move forward faster with our effort to create PoC.</p>
                         </div>
                     </div>     
                 </div>
-                <div class="p-col-6 p-lg-3">
-                    <div class="p-d-flex">
+                <div class="col-6 lg:col-3">
+                    <div class="flex">
                         <div class="dot color-6">&nbsp;</div>
-                        <div class="p-d-flex p-flex-column p-pl-3">
+                        <div class="flex flex-column pl-3">
                             <h6>Code Reviews to Offer Best Practices</h6>
                             <p>Our experienced team reviews your entire project and improves your code quality.</p>
                         </div>
                     </div>     
                 </div>
             </div>
-            <div class="p-d-flex p-mt-4">
+            <div class="flex mt-4">
                 <p>You can purchase additional credits along with the subscription and also anytime during your subscription period. If your subscription term ends with unused credits, they will be added to your new subscription term in case you extend.</p>
             </div>
         </div>
diff --git a/src/views/tabmenu/TabMenuDemo.vue b/src/views/tabmenu/TabMenuDemo.vue
index 76032cfbf..e027c9a48 100755
--- a/src/views/tabmenu/TabMenuDemo.vue
+++ b/src/views/tabmenu/TabMenuDemo.vue
@@ -17,10 +17,10 @@
             
             <div class="card">
                 <h5>Programmatic</h5>
-                <div class="p-py-2">
+                <div class="py-2">
                     <Button @click="active = 0" class="p-button-text" label="Activate 1st" />
-                    <Button @click="active = 1" class="p-button-text p-mr-2" label="Activate 2nd" />
-                    <Button @click="active = 2" class="p-button-text p-mr-2" label="Activate 3rd" />
+                    <Button @click="active = 1" class="p-button-text mr-2" label="Activate 2nd" />
+                    <Button @click="active = 2" class="p-button-text mr-2" label="Activate 3rd" />
                 </div>
 
                 <TabMenu :model="items2" v-model:activeIndex="active" />
diff --git a/src/views/tabmenu/TabMenuDoc.vue b/src/views/tabmenu/TabMenuDoc.vue
index 6c1ec5ec7..c8f4c5fc7 100755
--- a/src/views/tabmenu/TabMenuDoc.vue
+++ b/src/views/tabmenu/TabMenuDoc.vue
@@ -226,10 +226,10 @@ export default {
             
         <div class="card">
             <h5>Programmatic</h5>
-            <div class="p-py-2">
+            <div class="py-2">
                 <Button @click="active = 0" class="p-button-text" label="Activate 1st" />
-                <Button @click="active = 1" class="p-button-text p-mr-2" label="Activate 2nd" />
-                <Button @click="active = 2" class="p-button-text p-mr-2" label="Activate 3rd" />
+                <Button @click="active = 1" class="p-button-text mr-2" label="Activate 2nd" />
+                <Button @click="active = 2" class="p-button-text mr-2" label="Activate 3rd" />
             </div>
 
             <TabMenu :model="items2" v-model:activeIndex="active" />
@@ -315,10 +315,10 @@ export default {
             
         <div class="card">
             <h5>Programmatic</h5>
-            <div class="p-py-2">
+            <div class="py-2">
                 <Button @click="active = 0" class="p-button-text" label="Activate 1st" />
-                <Button @click="active = 1" class="p-button-text p-mr-2" label="Activate 2nd" />
-                <Button @click="active = 2" class="p-button-text p-mr-2" label="Activate 3rd" />
+                <Button @click="active = 1" class="p-button-text mr-2" label="Activate 2nd" />
+                <Button @click="active = 2" class="p-button-text mr-2" label="Activate 3rd" />
             </div>
 
             <TabMenu :model="items2" v-model:activeIndex="active" />
@@ -406,10 +406,10 @@ export default {
                 
             <div class="card">
                 <h5>Programmatic</h5>
-                <div class="p-py-2">
+                <div class="py-2">
                     <p-button @click="active = 0" class="p-button-text" label="Activate 1st"></p-button>
-                    <p-button @click="active = 1" class="p-button-text p-mr-2" label="Activate 2nd"></p-button>
-                    <p-button @click="active = 2" class="p-button-text p-mr-2" label="Activate 3rd"></p-button>
+                    <p-button @click="active = 1" class="p-button-text mr-2" label="Activate 2nd"></p-button>
+                    <p-button @click="active = 2" class="p-button-text mr-2" label="Activate 3rd"></p-button>
                 </div>
 
                 <p-tabmenu :model="items2" v-model:active-index="active"></p-tabmenu>
diff --git a/src/views/tabview/TabViewDemo.vue b/src/views/tabview/TabViewDemo.vue
index f2b575f3a..cb33ba1e9 100755
--- a/src/views/tabview/TabViewDemo.vue
+++ b/src/views/tabview/TabViewDemo.vue
@@ -32,10 +32,10 @@
 
             <div class="card">
                 <h5>Programmatic</h5>
-                <div class="p-py-2">
+                <div class="py-2">
                     <Button @click="active1 = 0" class="p-button-text" label="Activate 1st" />
-                    <Button @click="active1 = 1" class="p-button-text p-mr-2" label="Activate 2nd" />
-                    <Button @click="active1 = 2" class="p-button-text p-mr-2" label="Activate 3rd" />
+                    <Button @click="active1 = 1" class="p-button-text mr-2" label="Activate 2nd" />
+                    <Button @click="active1 = 2" class="p-button-text mr-2" label="Activate 3rd" />
                 </div>
 
                 <TabView ref="tabview2" v-model:activeIndex="active1">
@@ -106,7 +106,7 @@
                             <span>Header III</span>
                             <i class="pi pi-cog"></i>
                         </template>
-                       <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati
+                        <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati
                             cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
                             Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.</p>
                     </TabPanel>
@@ -124,10 +124,10 @@
 
             <div class="card">
                 <h5>Scrollable</h5>
-                <div class="p-py-2">
+                <div class="py-2">
                     <Button @click="active2 = 0" class="p-button-text" label="Activate 1st" />
-                    <Button @click="active2 = 29" class="p-button-text p-mr-2" label="Activate 30th" />
-                    <Button @click="active2 = 49" class="p-button-text p-mr-2" label="Activate 50th" />
+                    <Button @click="active2 = 29" class="p-button-text mr-2" label="Activate 30th" />
+                    <Button @click="active2 = 49" class="p-button-text mr-2" label="Activate 50th" />
                 </div>
 
                 <TabView v-model:activeIndex="active2" :scrollable="true">
diff --git a/src/views/tabview/TabViewDoc.vue b/src/views/tabview/TabViewDoc.vue
index 10edc7a25..7feae863b 100755
--- a/src/views/tabview/TabViewDoc.vue
+++ b/src/views/tabview/TabViewDoc.vue
@@ -279,7 +279,7 @@ export default {
                         </td>
                         <td>Callback to invoke when an active tab is changed.</td>
                     </tr>
-                     <tr>
+                    <tr>
                         <td>tab-click</td>
                         <td>event.originalEvent: Browser event  <br/>
                             event.index: Index of the clicked tab
@@ -357,10 +357,10 @@ export default {
 
         <div class="card">
             <h5>Programmatic</h5>
-            <div class="p-py-2">
+            <div class="py-2">
                 <Button @click="active1 = 0" class="p-button-text" label="Activate 1st" />
-                <Button @click="active1 = 1" class="p-button-text p-mr-2" label="Activate 2nd" />
-                <Button @click="active1 = 2" class="p-button-text p-mr-2" label="Activate 3rd" />
+                <Button @click="active1 = 1" class="p-button-text mr-2" label="Activate 2nd" />
+                <Button @click="active1 = 2" class="p-button-text mr-2" label="Activate 3rd" />
             </div>
 
             <TabView ref="tabview2" v-model:activeIndex="active1">
@@ -419,7 +419,7 @@ export default {
                         <span>Header III</span>
                         <i class="pi pi-cog"></i>
                     </template>
-                   <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati
+                    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati
                         cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
                         Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.</p>
                 </TabPanel>
@@ -437,10 +437,10 @@ export default {
 
         <div class="card">
             <h5>Scrollable</h5>
-            <div class="p-py-2">
+            <div class="py-2">
                 <Button @click="active2 = 0" class="p-button-text" label="Activate 1st" />
-                <Button @click="active2 = 29" class="p-button-text p-mr-2" label="Activate 30th" />
-                <Button @click="active2 = 49" class="p-button-text p-mr-2" label="Activate 50th" />
+                <Button @click="active2 = 29" class="p-button-text mr-2" label="Activate 30th" />
+                <Button @click="active2 = 49" class="p-button-text mr-2" label="Activate 50th" />
             </div>
 
             <TabView v-model:activeIndex="active2" :scrollable="true">
@@ -517,10 +517,10 @@ export default {
 
         <div class="card">
             <h5>Programmatic</h5>
-            <div class="p-py-2">
+            <div class="py-2">
                 <Button @click="active1 = 0" class="p-button-text" label="Activate 1st" />
-                <Button @click="active1 = 1" class="p-button-text p-mr-2" label="Activate 2nd" />
-                <Button @click="active1 = 2" class="p-button-text p-mr-2" label="Activate 3rd" />
+                <Button @click="active1 = 1" class="p-button-text mr-2" label="Activate 2nd" />
+                <Button @click="active1 = 2" class="p-button-text mr-2" label="Activate 3rd" />
             </div>
 
             <TabView ref="tabview2" v-model:activeIndex="active1">
@@ -579,7 +579,7 @@ export default {
                         <span>Header III</span>
                         <i class="pi pi-cog"></i>
                     </template>
-                   <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati
+                    <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati
                         cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio.
                         Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus.</p>
                 </TabPanel>
@@ -597,10 +597,10 @@ export default {
 
         <div class="card">
             <h5>Scrollable</h5>
-            <div class="p-py-2">
+            <div class="py-2">
                 <Button @click="active2 = 0" class="p-button-text" label="Activate 1st" />
-                <Button @click="active2 = 29" class="p-button-text p-mr-2" label="Activate 30th" />
-                <Button @click="active2 = 49" class="p-button-text p-mr-2" label="Activate 50th" />
+                <Button @click="active2 = 29" class="p-button-text mr-2" label="Activate 30th" />
+                <Button @click="active2 = 49" class="p-button-text mr-2" label="Activate 50th" />
             </div>
 
             <TabView v-model:activeIndex="active2" :scrollable="true">
@@ -679,10 +679,10 @@ export default {
 
             <div class="card">
                 <h5>Programmatic</h5>
-                <div class="p-py-2">
+                <div class="py-2">
                     <p-button @click="active1 = 0" class="p-button-text" label="Activate 1st"></p-button>
-                    <p-button @click="active1 = 1" class="p-button-text p-mr-2" label="Activate 2nd"></p-button>
-                    <p-button @click="active1 = 2" class="p-button-text p-mr-2" label="Activate 3rd"></p-button>
+                    <p-button @click="active1 = 1" class="p-button-text mr-2" label="Activate 2nd"></p-button>
+                    <p-button @click="active1 = 2" class="p-button-text mr-2" label="Activate 3rd"></p-button>
                 </div>
 
                 <p-tabview ref="tabview2" v-model:active-index="active1">
@@ -759,10 +759,10 @@ export default {
 
             <div class="card">
                 <h5>Scrollable</h5>
-                <div class="p-py-2">
+                <div class="py-2">
                     <p-button @click="active2 = 0" class="p-button-text" label="Activate 1st"></p-button>
-                    <p-button @click="active2 = 29" class="p-button-text p-mr-2" label="Activate 30th"></p-button>
-                    <p-button @click="active2 = 49" class="p-button-text p-mr-2" label="Activate 50th"></p-button>
+                    <p-button @click="active2 = 29" class="p-button-text mr-2" label="Activate 30th"></p-button>
+                    <p-button @click="active2 = 49" class="p-button-text mr-2" label="Activate 50th"></p-button>
                 </div>
 
                 <p-tabview v-model:active-index="active2" :scrollable="true">
diff --git a/src/views/tag/TagDemo.vue b/src/views/tag/TagDemo.vue
index 583579ef3..f28b1c593 100644
--- a/src/views/tag/TagDemo.vue
+++ b/src/views/tag/TagDemo.vue
@@ -11,24 +11,24 @@
         <div class="content-section implementation">
             <div class="card">
                 <h5>Tags</h5>
-                <Tag class="p-mr-2" value="Primary"></Tag>
-                <Tag class="p-mr-2" severity="success" value="Success"></Tag>
-                <Tag class="p-mr-2" severity="info" value="Info"></Tag>
-                <Tag class="p-mr-2" severity="warning" value="Warning"></Tag>
+                <Tag class="mr-2" value="Primary"></Tag>
+                <Tag class="mr-2" severity="success" value="Success"></Tag>
+                <Tag class="mr-2" severity="info" value="Info"></Tag>
+                <Tag class="mr-2" severity="warning" value="Warning"></Tag>
                 <Tag severity="danger" value="Danger"></Tag>
 
                 <h5>Pills</h5>
-                <Tag class="p-mr-2" value="Primary" rounded></Tag>
-                <Tag class="p-mr-2" severity="success" value="Success" rounded></Tag>
-                <Tag class="p-mr-2" severity="info" value="Info" rounded></Tag>
-                <Tag class="p-mr-2" severity="warning" value="Warning" rounded></Tag>
+                <Tag class="mr-2" value="Primary" rounded></Tag>
+                <Tag class="mr-2" severity="success" value="Success" rounded></Tag>
+                <Tag class="mr-2" severity="info" value="Info" rounded></Tag>
+                <Tag class="mr-2" severity="warning" value="Warning" rounded></Tag>
                 <Tag severity="danger" value="Danger" rounded></Tag>
 
                 <h5>Icons</h5>
-                <Tag class="p-mr-2" icon="pi pi-user" value="Primary"></Tag>
-                <Tag class="p-mr-2" icon="pi pi-check" severity="success" value="Success"></Tag>
-                <Tag class="p-mr-2" icon="pi pi-info-circle" severity="info" value="Info"></Tag>
-                <Tag class="p-mr-2" icon="pi pi-exclamation-triangle" severity="warning" value="Warning"></Tag>
+                <Tag class="mr-2" icon="pi pi-user" value="Primary"></Tag>
+                <Tag class="mr-2" icon="pi pi-check" severity="success" value="Success"></Tag>
+                <Tag class="mr-2" icon="pi pi-info-circle" severity="info" value="Info"></Tag>
+                <Tag class="mr-2" icon="pi pi-exclamation-triangle" severity="warning" value="Warning"></Tag>
                 <Tag icon="pi pi-times" severity="danger" value="Danger"></Tag>
             </div>
         </div>
diff --git a/src/views/tag/TagDoc.vue b/src/views/tag/TagDoc.vue
index 2d100e13b..9063b813d 100644
--- a/src/views/tag/TagDoc.vue
+++ b/src/views/tag/TagDoc.vue
@@ -134,24 +134,24 @@ export default {
 <template>
     <div>
         <h5>Tags</h5>
-        <Tag class="p-mr-2" value="Primary"></Tag>
-        <Tag class="p-mr-2" severity="success" value="Success"></Tag>
-        <Tag class="p-mr-2" severity="info" value="Info"></Tag>
-        <Tag class="p-mr-2" severity="warning" value="Warning"></Tag>
+        <Tag class="mr-2" value="Primary"></Tag>
+        <Tag class="mr-2" severity="success" value="Success"></Tag>
+        <Tag class="mr-2" severity="info" value="Info"></Tag>
+        <Tag class="mr-2" severity="warning" value="Warning"></Tag>
         <Tag severity="danger" value="Danger"></Tag>
 
         <h5>Pills</h5>
-        <Tag class="p-mr-2" value="Primary" rounded></Tag>
-        <Tag class="p-mr-2" severity="success" value="Success" rounded></Tag>
-        <Tag class="p-mr-2" severity="info" value="Info" rounded></Tag>
-        <Tag class="p-mr-2" severity="warning" value="Warning" rounded></Tag>
+        <Tag class="mr-2" value="Primary" rounded></Tag>
+        <Tag class="mr-2" severity="success" value="Success" rounded></Tag>
+        <Tag class="mr-2" severity="info" value="Info" rounded></Tag>
+        <Tag class="mr-2" severity="warning" value="Warning" rounded></Tag>
         <Tag severity="danger" value="Danger" rounded></Tag>
 
         <h5>Icons</h5>
-        <Tag class="p-mr-2" icon="pi pi-user" value="Primary"></Tag>
-        <Tag class="p-mr-2" icon="pi pi-check" severity="success" value="Success"></Tag>
-        <Tag class="p-mr-2" icon="pi pi-info-circle" severity="info" value="Info"></Tag>
-        <Tag class="p-mr-2" icon="pi pi-exclamation-triangle" severity="warning" value="Warning"></Tag>
+        <Tag class="mr-2" icon="pi pi-user" value="Primary"></Tag>
+        <Tag class="mr-2" icon="pi pi-check" severity="success" value="Success"></Tag>
+        <Tag class="mr-2" icon="pi pi-info-circle" severity="info" value="Info"></Tag>
+        <Tag class="mr-2" icon="pi pi-exclamation-triangle" severity="warning" value="Warning"></Tag>
         <Tag icon="pi pi-times" severity="danger" value="Danger"></Tag>
     </div>
 </template>
@@ -168,24 +168,24 @@ export default {
 <template>
     <div>
         <h5>Tags</h5>
-        <Tag class="p-mr-2" value="Primary"></Tag>
-        <Tag class="p-mr-2" severity="success" value="Success"></Tag>
-        <Tag class="p-mr-2" severity="info" value="Info"></Tag>
-        <Tag class="p-mr-2" severity="warning" value="Warning"></Tag>
+        <Tag class="mr-2" value="Primary"></Tag>
+        <Tag class="mr-2" severity="success" value="Success"></Tag>
+        <Tag class="mr-2" severity="info" value="Info"></Tag>
+        <Tag class="mr-2" severity="warning" value="Warning"></Tag>
         <Tag severity="danger" value="Danger"></Tag>
 
         <h5>Pills</h5>
-        <Tag class="p-mr-2" value="Primary" rounded></Tag>
-        <Tag class="p-mr-2" severity="success" value="Success" rounded></Tag>
-        <Tag class="p-mr-2" severity="info" value="Info" rounded></Tag>
-        <Tag class="p-mr-2" severity="warning" value="Warning" rounded></Tag>
+        <Tag class="mr-2" value="Primary" rounded></Tag>
+        <Tag class="mr-2" severity="success" value="Success" rounded></Tag>
+        <Tag class="mr-2" severity="info" value="Info" rounded></Tag>
+        <Tag class="mr-2" severity="warning" value="Warning" rounded></Tag>
         <Tag severity="danger" value="Danger" rounded></Tag>
 
         <h5>Icons</h5>
-        <Tag class="p-mr-2" icon="pi pi-user" value="Primary"></Tag>
-        <Tag class="p-mr-2" icon="pi pi-check" severity="success" value="Success"></Tag>
-        <Tag class="p-mr-2" icon="pi pi-info-circle" severity="info" value="Info"></Tag>
-        <Tag class="p-mr-2" icon="pi pi-exclamation-triangle" severity="warning" value="Warning"></Tag>
+        <Tag class="mr-2" icon="pi pi-user" value="Primary"></Tag>
+        <Tag class="mr-2" icon="pi pi-check" severity="success" value="Success"></Tag>
+        <Tag class="mr-2" icon="pi pi-info-circle" severity="info" value="Info"></Tag>
+        <Tag class="mr-2" icon="pi pi-exclamation-triangle" severity="warning" value="Warning"></Tag>
         <Tag icon="pi pi-times" severity="danger" value="Danger"></Tag>
     </div>
 </template>
@@ -201,24 +201,24 @@ export default {
                     imports: `<script src="https://unpkg.com/primevue@^3/tag/tag.min.js"><\\/script>`,
 					content: `<div id="app">
             <h5>Tags</h5>
-            <p-tag class="p-mr-2" value="Primary"></p-tag>
-            <p-tag class="p-mr-2" severity="success" value="Success"></p-tag>
-            <p-tag class="p-mr-2" severity="info" value="Info"></p-tag>
-            <p-tag class="p-mr-2" severity="warning" value="Warning"></p-tag>
+            <p-tag class="mr-2" value="Primary"></p-tag>
+            <p-tag class="mr-2" severity="success" value="Success"></p-tag>
+            <p-tag class="mr-2" severity="info" value="Info"></p-tag>
+            <p-tag class="mr-2" severity="warning" value="Warning"></p-tag>
             <p-tag severity="danger" value="Danger"></p-tag>
 
             <h5>Pills</h5>
-            <p-tag class="p-mr-2" value="Primary" rounded></p-tag>
-            <p-tag class="p-mr-2" severity="success" value="Success" rounded></p-tag>
-            <p-tag class="p-mr-2" severity="info" value="Info" rounded></p-tag>
-            <p-tag class="p-mr-2" severity="warning" value="Warning" rounded></p-tag>
+            <p-tag class="mr-2" value="Primary" rounded></p-tag>
+            <p-tag class="mr-2" severity="success" value="Success" rounded></p-tag>
+            <p-tag class="mr-2" severity="info" value="Info" rounded></p-tag>
+            <p-tag class="mr-2" severity="warning" value="Warning" rounded></p-tag>
             <p-tag severity="danger" value="Danger" rounded></p-tag>
 
             <h5>Icons</h5>
-            <p-tag class="p-mr-2" icon="pi pi-user" value="Primary"></p-tag>
-            <p-tag class="p-mr-2" icon="pi pi-check" severity="success" value="Success"></p-tag>
-            <p-tag class="p-mr-2" icon="pi pi-info-circle" severity="info" value="Info"></p-tag>
-            <p-tag class="p-mr-2" icon="pi pi-exclamation-triangle" severity="warning" value="Warning"></p-tag>
+            <p-tag class="mr-2" icon="pi pi-user" value="Primary"></p-tag>
+            <p-tag class="mr-2" icon="pi pi-check" severity="success" value="Success"></p-tag>
+            <p-tag class="mr-2" icon="pi pi-info-circle" severity="info" value="Info"></p-tag>
+            <p-tag class="mr-2" icon="pi pi-exclamation-triangle" severity="warning" value="Warning"></p-tag>
             <p-tag icon="pi pi-times" severity="danger" value="Danger"></p-tag>
         </div>
 
diff --git a/src/views/text/TextDemo.vue b/src/views/text/TextDemo.vue
index afbf77258..4d99902b0 100644
--- a/src/views/text/TextDemo.vue
+++ b/src/views/text/TextDemo.vue
@@ -11,25 +11,25 @@
         <div class="content-section implementation">
             <div class="card">
                 <h5>Alignment</h5>
-                <div class="p-mb-3 p-text-left">Left</div>
-                <div class="p-mb-3 p-text-center">Center</div>
-                <div class="p-text-right">Right</div>
+                <div class="mb-3 text-left">Left</div>
+                <div class="mb-3 text-center">Center</div>
+                <div class="text-right">Right</div>
 
                 <h5>Wrap</h5>
-                <div class="p-mb-3 demo-container" style="width: 10rem">Long text wraps and does not overlow.</div>
-                <div class="p-mb-3 demo-container p-text-nowrap" style="width: 10rem">Long text does not wrap and overflows the parent.</div>
-                <div class="p-mb-3 demo-container p-text-nowrap p-text-truncate" style="width: 10rem">Long text does not wrap and overflows the parent.</div>
+                <div class="mb-3 demo-container" style="width: 10rem">Long text wraps and does not overlow.</div>
+                <div class="mb-3 demo-container white-space-nowrap" style="width: 10rem">Long text does not wrap and overflows the parent.</div>
+                <div class="mb-3 demo-container white-space-nowrap text-overflow-ellipsis" style="width: 10rem">Long text does not wrap and overflows the parent.</div>
 
                 <h5>Transform</h5>
-                <div class="p-mb-3 p-text-lowercase">LOWERCASE</div>
-                <div class="p-mb-3 p-text-uppercase">uppercase</div>
-                <div class="p-text-capitalize">capitalize</div>
+                <div class="mb-3 text-lowercase">LOWERCASE</div>
+                <div class="mb-3 text-uppercase">uppercase</div>
+                <div class="text-capitalize">capitalize</div>
 
                 <h5>Style</h5>
-                <div class="p-mb-3 p-text-bold">Bold</div>
-                <div class="p-mb-3 p-text-normal">Normal</div>
-                <div class="p-mb-3 p-text-light">Light</div>
-                <div class="p-mb-3 p-text-italic">Italic</div>
+                <div class="mb-3 font-bold">Bold</div>
+                <div class="mb-3 font-norrmal">Normal</div>
+                <div class="mb-3 font-light">Light</div>
+                <div class="mb-3 font-italic">Italic</div>
             </div>
         </div>
 
diff --git a/src/views/text/TextDoc.vue b/src/views/text/TextDoc.vue
index f53365264..b96ce7e6f 100644
--- a/src/views/text/TextDoc.vue
+++ b/src/views/text/TextDoc.vue
@@ -1,7 +1,7 @@
 <template>
 	<AppDoc name="TextDemo" :sources="sources" github="text/TextDemo.vue">
         <h5>Getting Started</h5>
-        <p>The text classes use the <i>p-text-{value}</i> syntax.</p>
+        <p>The text classes use the <i>text-{value}</i> syntax.</p>
 
         <h5>Alignment</h5>
         <p>Four options are available for alignment.</p>
@@ -12,10 +12,10 @@
             <li>justify</li>
         </ul>
 <pre v-code><code><template v-pre>
-&lt;div class="p-text-left"&gt;Left&lt;/div&gt;
-&lt;div class="p-text-center"&gt;Center&lt;/div&gt;
-&lt;div class="p-text-right"&gt;Right&lt;/div&gt;
-&lt;div class="p-text-justify"&gt;Justify&lt;/div&gt;
+&lt;div class="text-left"&gt;Left&lt;/div&gt;
+&lt;div class="text-center"&gt;Center&lt;/div&gt;
+&lt;div class="text-right"&gt;Right&lt;/div&gt;
+&lt;div class="text-justify"&gt;Justify&lt;/div&gt;
 </template>
 </code></pre>
 
@@ -28,8 +28,8 @@
         </ul>
 <pre v-code><code><template v-pre>
 &lt;div style="width: 10rem"&gt;Long text wraps and does not overlow.&lt;/div&gt;
-&lt;div class="p-text-nowrap" style="width: 10rem"&gt;Long text does not wrap and overflows the parent.&lt;/div&gt;
-&lt;div class="p-text-nowrap p-text-truncate" style="width: 10rem"&gt;Long text does not wrap and overflows the parent.&lt;/div&gt;
+&lt;div class="white-space-nowrap" style="width: 10rem"&gt;Long text does not wrap and overflows the parent.&lt;/div&gt;
+&lt;div class="white-space-nowrap text-overflow-ellipsis" style="width: 10rem"&gt;Long text does not wrap and overflows the parent.&lt;/div&gt;
 </template>
 </code></pre>
 
@@ -41,9 +41,9 @@
             <li>capitalize</li>
         </ul>
 <pre v-code><code><template v-pre>
-&lt;div class="p-text-lowercase"&gt;LOWERCASE&lt;/div&gt;
-&lt;div class="p-text-uppercase"&gt;uppercase&lt;/div&gt;
-&lt;div class="p-text-capitalize"&gt;capitalize&lt;/div&gt;
+&lt;div class="text-lowercase"&gt;LOWERCASE&lt;/div&gt;
+&lt;div class="text-uppercase"&gt;uppercase&lt;/div&gt;
+&lt;div class="text-capitalize"&gt;capitalize&lt;/div&gt;
 </template>
 </code></pre>
 
@@ -56,10 +56,10 @@
             <li>italic</li>
         </ul>
 <pre v-code><code><template v-pre>
-&lt;div class="p-text-bold"&gt;Bold&lt;/div&gt;
-&lt;div class="p-text-normal"&gt;Normal&lt;/div&gt;
-&lt;div class="p-text-light"&gt;Light&lt;/div&gt;
-&lt;div class="p-text-italic"&gt;Italic&lt;/div&gt;
+&lt;div class="font-bold"&gt;Bold&lt;/div&gt;
+&lt;div class="font-norrmal"&gt;Normal&lt;/div&gt;
+&lt;div class="font-light"&gt;Light&lt;/div&gt;
+&lt;div class="font-italic"&gt;Italic&lt;/div&gt;
 </template>
 </code></pre>
 
@@ -67,7 +67,7 @@
         <p>A custom build with different values can be obtained from <a href="https://github.com/primefaces/primeflex">PrimeFlex</a> using the _variables.scss file.</p>
         
         <h5>Dependencies</h5>
-        <p>PrimeFlex 2.0.0.</p>
+        <p>PrimeFlex 3.1.2.</p>
     </AppDoc>
 </template>
 
@@ -82,25 +82,25 @@ export default {
 <template>
     <div>
         <h5>Alignment</h5>
-        <div class="p-mb-3 p-text-left">Left</div>
-        <div class="p-mb-3 p-text-center">Center</div>
-        <div class="p-text-right">Right</div>
+        <div class="mb-3 text-left">Left</div>
+        <div class="mb-3 text-center">Center</div>
+        <div class="text-right">Right</div>
 
         <h5>Wrap</h5>
-        <div class="p-mb-3 demo-container" style="width: 10rem">Long text wraps and does not overlow.</div>
-        <div class="p-mb-3 demo-container p-text-nowrap" style="width: 10rem">Long text does not wrap and overflows the parent.</div>
-        <div class="p-mb-3 demo-container p-text-nowrap p-text-truncate" style="width: 10rem">Long text does not wrap and overflows the parent.</div>
+        <div class="mb-3 demo-container" style="width: 10rem">Long text wraps and does not overlow.</div>
+        <div class="mb-3 demo-container white-space-nowrap" style="width: 10rem">Long text does not wrap and overflows the parent.</div>
+        <div class="mb-3 demo-container white-space-nowrap text-overflow-ellipsis" style="width: 10rem">Long text does not wrap and overflows the parent.</div>
 
         <h5>Transform</h5>
-        <div class="p-mb-3 p-text-lowercase">LOWERCASE</div>
-        <div class="p-mb-3 p-text-uppercase">uppercase</div>
-        <div class="p-text-capitalize">capitalize</div>
+        <div class="mb-3 text-lowercase">LOWERCASE</div>
+        <div class="mb-3 text-uppercase">uppercase</div>
+        <div class="text-capitalize">capitalize</div>
 
         <h5>Style</h5>
-        <div class="p-mb-3 p-text-bold">Bold</div>
-        <div class="p-mb-3 p-text-normal">Normal</div>
-        <div class="p-mb-3 p-text-light">Light</div>
-        <div class="p-mb-3 p-text-italic">Italic</div>
+        <div class="mb-3 font-bold">Bold</div>
+        <div class="mb-3 font-norrmal">Normal</div>
+        <div class="mb-3 font-light">Light</div>
+        <div class="mb-3 font-italic">Italic</div>
     </div>
 </template>
 
@@ -122,25 +122,25 @@ export default {
 <template>
     <div>
         <h5>Alignment</h5>
-        <div class="p-mb-3 p-text-left">Left</div>
-        <div class="p-mb-3 p-text-center">Center</div>
-        <div class="p-text-right">Right</div>
+        <div class="mb-3 text-left">Left</div>
+        <div class="mb-3 text-center">Center</div>
+        <div class="text-right">Right</div>
 
         <h5>Wrap</h5>
-        <div class="p-mb-3 demo-container" style="width: 10rem">Long text wraps and does not overlow.</div>
-        <div class="p-mb-3 demo-container p-text-nowrap" style="width: 10rem">Long text does not wrap and overflows the parent.</div>
-        <div class="p-mb-3 demo-container p-text-nowrap p-text-truncate" style="width: 10rem">Long text does not wrap and overflows the parent.</div>
+        <div class="mb-3 demo-container" style="width: 10rem">Long text wraps and does not overlow.</div>
+        <div class="mb-3 demo-container white-space-nowrap" style="width: 10rem">Long text does not wrap and overflows the parent.</div>
+        <div class="mb-3 demo-container white-space-nowrap text-overflow-ellipsis" style="width: 10rem">Long text does not wrap and overflows the parent.</div>
 
         <h5>Transform</h5>
-        <div class="p-mb-3 p-text-lowercase">LOWERCASE</div>
-        <div class="p-mb-3 p-text-uppercase">uppercase</div>
-        <div class="p-text-capitalize">capitalize</div>
+        <div class="mb-3 text-lowercase">LOWERCASE</div>
+        <div class="mb-3 text-uppercase">uppercase</div>
+        <div class="text-capitalize">capitalize</div>
 
         <h5>Style</h5>
-        <div class="p-mb-3 p-text-bold">Bold</div>
-        <div class="p-mb-3 p-text-normal">Normal</div>
-        <div class="p-mb-3 p-text-light">Light</div>
-        <div class="p-mb-3 p-text-italic">Italic</div>
+        <div class="mb-3 font-bold">Bold</div>
+        <div class="mb-3 font-norrmal">Normal</div>
+        <div class="mb-3 font-light">Light</div>
+        <div class="mb-3 font-italic">Italic</div>
     </div>
 </template>
 
@@ -160,25 +160,25 @@ export default {
                     tabName: 'Browser Source',
                     content: `<div id="app">
             <h5>Alignment</h5>
-            <div class="p-mb-3 p-text-left">Left</div>
-            <div class="p-mb-3 p-text-center">Center</div>
-            <div class="p-text-right">Right</div>
+            <div class="mb-3 text-left">Left</div>
+            <div class="mb-3 text-center">Center</div>
+            <div class="text-right">Right</div>
 
             <h5>Wrap</h5>
-            <div class="p-mb-3 demo-container" style="width: 10rem">Long text wraps and does not overlow.</div>
-            <div class="p-mb-3 demo-container p-text-nowrap" style="width: 10rem">Long text does not wrap and overflows the parent.</div>
-            <div class="p-mb-3 demo-container p-text-nowrap p-text-truncate" style="width: 10rem">Long text does not wrap and overflows the parent.</div>
+            <div class="mb-3 demo-container" style="width: 10rem">Long text wraps and does not overlow.</div>
+            <div class="mb-3 demo-container white-space-nowrap" style="width: 10rem">Long text does not wrap and overflows the parent.</div>
+            <div class="mb-3 demo-container white-space-nowrap text-overflow-ellipsis" style="width: 10rem">Long text does not wrap and overflows the parent.</div>
 
             <h5>Transform</h5>
-            <div class="p-mb-3 p-text-lowercase">LOWERCASE</div>
-            <div class="p-mb-3 p-text-uppercase">uppercase</div>
-            <div class="p-text-capitalize">capitalize</div>
+            <div class="mb-3 text-lowercase">LOWERCASE</div>
+            <div class="mb-3 text-uppercase">uppercase</div>
+            <div class="text-capitalize">capitalize</div>
 
             <h5>Style</h5>
-            <div class="p-mb-3 p-text-bold">Bold</div>
-            <div class="p-mb-3 p-text-normal">Normal</div>
-            <div class="p-mb-3 p-text-light">Light</div>
-            <div class="p-mb-3 p-text-italic">Italic</div>
+            <div class="mb-3 font-bold">Bold</div>
+            <div class="mb-3 font-norrmal">Normal</div>
+            <div class="mb-3 font-light">Light</div>
+            <div class="mb-3 font-italic">Italic</div>
         </div>
 
         <script type="module">
diff --git a/src/views/theming/Theming.vue b/src/views/theming/Theming.vue
index 65c6507c5..dc4a793b4 100755
--- a/src/views/theming/Theming.vue
+++ b/src/views/theming/Theming.vue
@@ -28,7 +28,7 @@
 
             <p>Visit <a href="https://www.primefaces.org/designer/primevue">Designer API HomePage</a> for more information and live demos.</p>
 
-            <div class="video-container p-text-center">
+            <div class="video-container text-center">
                 <iframe width="560" height="315" src="https://www.youtube.com/embed/7SqoSutntcE" frameborder="0" allowfullscreen></iframe>
             </div>
 
@@ -108,7 +108,7 @@ html {
                                 <td>p-link</td>
                                 <td>Renders a button as a link.</td>
                             </tr>
-                             <tr>
+                            <tr>
                                 <td>p-error</td>
                                 <td>Indicates an error text.</td>
                             </tr>
diff --git a/src/views/tieredmenu/TieredMenuDemo.vue b/src/views/tieredmenu/TieredMenuDemo.vue
index 85c6663c7..ca905e3d4 100755
--- a/src/views/tieredmenu/TieredMenuDemo.vue
+++ b/src/views/tieredmenu/TieredMenuDemo.vue
@@ -31,135 +31,132 @@ export default {
         return {
             items: [
                 {
-                   label:'File',
-                   icon:'pi pi-fw pi-file',
-                   items:[
-                      {
-                         label:'New',
-                         icon:'pi pi-fw pi-plus',
-                         items:[
-                            {
-                               label:'Bookmark',
-                               icon:'pi pi-fw pi-bookmark'
-                            },
-                            {
-                               label:'Video',
-                               icon:'pi pi-fw pi-video'
-                            },
-
-                         ]
-                      },
-                      {
-                         label:'Delete',
-                         icon:'pi pi-fw pi-trash'
-                      },
-                      {
-                         separator:true
-                      },
-                      {
-                         label:'Export',
-                         icon:'pi pi-fw pi-external-link'
-                      }
-                   ]
+                    label:'File',
+                    icon:'pi pi-fw pi-file',
+                    items:[
+                        {
+                            label:'New',
+                            icon:'pi pi-fw pi-plus',
+                            items:[
+                                {
+                                    label:'Bookmark',
+                                    icon:'pi pi-fw pi-bookmark'
+                                },
+                                {
+                                    label:'Video',
+                                    icon:'pi pi-fw pi-video'
+                                }
+                            ]
+                        },
+                        {
+                            label:'Delete',
+                            icon:'pi pi-fw pi-trash'
+                        },
+                        {
+                            separator:true
+                        },
+                        {
+                            label:'Export',
+                            icon:'pi pi-fw pi-external-link'
+                        }
+                    ]
                 },
                 {
-                   label:'Edit',
-                   icon:'pi pi-fw pi-pencil',
-                   items:[
-                      {
-                         label:'Left',
-                         icon:'pi pi-fw pi-align-left'
-                      },
-                      {
-                         label:'Right',
-                         icon:'pi pi-fw pi-align-right'
-                      },
-                      {
-                         label:'Center',
-                         icon:'pi pi-fw pi-align-center'
-                      },
-                      {
-                         label:'Justify',
-                         icon:'pi pi-fw pi-align-justify'
-                      },
-
-                   ]
+                    label:'Edit',
+                    icon:'pi pi-fw pi-pencil',
+                    items:[
+                        {
+                            label:'Left',
+                            icon:'pi pi-fw pi-align-left'
+                        },
+                        {
+                            label:'Right',
+                            icon:'pi pi-fw pi-align-right'
+                        },
+                        {
+                            label:'Center',
+                            icon:'pi pi-fw pi-align-center'
+                        },
+                        {
+                            label:'Justify',
+                            icon:'pi pi-fw pi-align-justify'
+                        }
+                    ]
                 },
                 {
-                   label:'Users',
-                   icon:'pi pi-fw pi-user',
-                   items:[
-                      {
-                         label:'New',
-                         icon:'pi pi-fw pi-user-plus',
+                    label:'Users',
+                    icon:'pi pi-fw pi-user',
+                    items:[
+                        {
+                            label:'New',
+                            icon:'pi pi-fw pi-user-plus',
 
-                      },
-                      {
-                         label:'Delete',
-                         icon:'pi pi-fw pi-user-minus',
+                        },
+                        {
+                            label:'Delete',
+                            icon:'pi pi-fw pi-user-minus',
 
-                      },
-                      {
-                         label:'Search',
-                         icon:'pi pi-fw pi-users',
-                         items:[
-                            {
-                               label:'Filter',
-                               icon:'pi pi-fw pi-filter',
-                               items:[
-                                  {
-                                     label:'Print',
-                                     icon:'pi pi-fw pi-print'
-                                  }
-                               ]
-                            },
-                            {
-                               icon:'pi pi-fw pi-bars',
-                               label:'List'
-                            }
-                         ]
-                      }
-                   ]
+                        },
+                        {
+                            label:'Search',
+                            icon:'pi pi-fw pi-users',
+                            items:[
+                                {
+                                    label:'Filter',
+                                    icon:'pi pi-fw pi-filter',
+                                    items:[
+                                        {
+                                            label:'Print',
+                                            icon:'pi pi-fw pi-print'
+                                        }
+                                    ]
+                                },
+                                {
+                                    icon:'pi pi-fw pi-bars',
+                                    label:'List'
+                                }
+                            ]
+                        }
+                    ]
                 },
                 {
-                   label:'Events',
-                   icon:'pi pi-fw pi-calendar',
-                   items:[
-                      {
-                         label:'Edit',
-                         icon:'pi pi-fw pi-pencil',
-                         items:[
-                            {
-                               label:'Save',
-                               icon:'pi pi-fw pi-calendar-plus'
-                            },
-                            {
-                               label:'Delete',
-                               icon:'pi pi-fw pi-calendar-minus'
-                            },
-
-                         ]
-                      },
-                      {
-                         label:'Archieve',
-                         icon:'pi pi-fw pi-calendar-times',
-                         items:[
-                            {
-                               label:'Remove',
-                               icon:'pi pi-fw pi-calendar-minus'
-                            }
-                         ]
-                      }
-                   ]
+                    label:'Events',
+                    icon:'pi pi-fw pi-calendar',
+                    items:[
+                        {
+                            label:'Edit',
+                            icon:'pi pi-fw pi-pencil',
+                            items:[
+                                {
+                                    label:'Save',
+                                    icon:'pi pi-fw pi-calendar-plus'
+                                },
+                                {
+                                    label:'Delete',
+                                    icon:'pi pi-fw pi-calendar-minus'
+                                }
+                            ]
+                        },
+                        {
+                            label:'Archieve',
+                            icon:'pi pi-fw pi-calendar-times',
+                            items:[
+                                {
+                                    label:'Remove',
+                                    icon:'pi pi-fw pi-calendar-minus'
+                                }
+                            ]
+                        }
+                    ]
                 },
                 {
-                   separator:true
+                    separator:true
                 },
                 {
-                   label:'Quit',
-                   icon:'pi pi-fw pi-power-off'
+                    label:'Quit',
+                    icon:'pi pi-fw pi-power-off'
                 }
-             ]
+            ]
         }
     },
     methods: {
diff --git a/src/views/tieredmenu/TieredMenuDoc.vue b/src/views/tieredmenu/TieredMenuDoc.vue
index 50850580b..d6b81445e 100755
--- a/src/views/tieredmenu/TieredMenuDoc.vue
+++ b/src/views/tieredmenu/TieredMenuDoc.vue
@@ -28,142 +28,139 @@ export default {
         return {
             items: [
                 {
-                   label:'File',
-                   icon:'pi pi-fw pi-file',
-                   items:[
-                      {
-                         label:'New',
-                         icon:'pi pi-fw pi-plus',
-                         items:[
-                            {
-                               label:'Bookmark',
-                               icon:'pi pi-fw pi-bookmark'
-                            },
-                            {
-                               label:'Video',
-                               icon:'pi pi-fw pi-video'
-                            },
-
-                         ]
-                      },
-                      {
-                         label:'Delete',
-                         icon:'pi pi-fw pi-trash'
-                      },
-                      {
-                         separator:true
-                      },
-                      {
-                         label:'Export',
-                         icon:'pi pi-fw pi-external-link'
-                      }
-                   ]
+                    label:'File',
+                    icon:'pi pi-fw pi-file',
+                    items:[
+                        {
+                            label:'New',
+                            icon:'pi pi-fw pi-plus',
+                            items:[
+                                {
+                                    label:'Bookmark',
+                                    icon:'pi pi-fw pi-bookmark'
+                                },
+                                {
+                                    label:'Video',
+                                    icon:'pi pi-fw pi-video'
+                                }
+                            ]
+                        },
+                        {
+                            label:'Delete',
+                            icon:'pi pi-fw pi-trash'
+                        },
+                        {
+                            separator:true
+                        },
+                        {
+                            label:'Export',
+                            icon:'pi pi-fw pi-external-link'
+                        }
+                    ]
                 },
                 {
-                   label:'Edit',
-                   icon:'pi pi-fw pi-pencil',
-                   items:[
-                      {
-                         label:'Left',
-                         icon:'pi pi-fw pi-align-left'
-                      },
-                      {
-                         label:'Right',
-                         icon:'pi pi-fw pi-align-right'
-                      },
-                      {
-                         label:'Center',
-                         icon:'pi pi-fw pi-align-center'
-                      },
-                      {
-                         label:'Justify',
-                         icon:'pi pi-fw pi-align-justify'
-                      },
-
-                   ]
+                    label:'Edit',
+                    icon:'pi pi-fw pi-pencil',
+                    items:[
+                        {
+                            label:'Left',
+                            icon:'pi pi-fw pi-align-left'
+                        },
+                        {
+                            label:'Right',
+                            icon:'pi pi-fw pi-align-right'
+                        },
+                        {
+                            label:'Center',
+                            icon:'pi pi-fw pi-align-center'
+                        },
+                        {
+                            label:'Justify',
+                            icon:'pi pi-fw pi-align-justify'
+                        }
+                    ]
                 },
                 {
-                   label:'Users',
-                   icon:'pi pi-fw pi-user',
-                   items:[
-                      {
-                         label:'New',
-                         icon:'pi pi-fw pi-user-plus',
+                    label:'Users',
+                    icon:'pi pi-fw pi-user',
+                    items:[
+                        {
+                            label:'New',
+                            icon:'pi pi-fw pi-user-plus',
 
-                      },
-                      {
-                         label:'Delete',
-                         icon:'pi pi-fw pi-user-minus',
+                        },
+                        {
+                            label:'Delete',
+                            icon:'pi pi-fw pi-user-minus',
 
-                      },
-                      {
-                         label:'Search',
-                         icon:'pi pi-fw pi-users',
-                         items:[
-                            {
-                               label:'Filter',
-                               icon:'pi pi-fw pi-filter',
-                               items:[
-                                  {
-                                     label:'Print',
-                                     icon:'pi pi-fw pi-print'
-                                  }
-                               ]
-                            },
-                            {
-                               icon:'pi pi-fw pi-bars',
-                               label:'List'
-                            }
-                         ]
-                      }
-                   ]
+                        },
+                        {
+                            label:'Search',
+                            icon:'pi pi-fw pi-users',
+                            items:[
+                                {
+                                    label:'Filter',
+                                    icon:'pi pi-fw pi-filter',
+                                    items:[
+                                        {
+                                            label:'Print',
+                                            icon:'pi pi-fw pi-print'
+                                        }
+                                    ]
+                                },
+                                {
+                                    icon:'pi pi-fw pi-bars',
+                                    label:'List'
+                                }
+                            ]
+                        }
+                    ]
                 },
                 {
-                   label:'Events',
-                   icon:'pi pi-fw pi-calendar',
-                   items:[
-                      {
-                         label:'Edit',
-                         icon:'pi pi-fw pi-pencil',
-                         items:[
-                            {
-                               label:'Save',
-                               icon:'pi pi-fw pi-calendar-plus'
-                            },
-                            {
-                               label:'Delete',
-                               icon:'pi pi-fw pi-calendar-minus'
-                            },
-
-                         ]
-                      },
-                      {
-                         label:'Archieve',
-                         icon:'pi pi-fw pi-calendar-times',
-                         items:[
-                            {
-                               label:'Remove',
-                               icon:'pi pi-fw pi-calendar-minus'
-                            }
-                         ]
-                      }
-                   ]
+                    label:'Events',
+                    icon:'pi pi-fw pi-calendar',
+                    items:[
+                        {
+                            label:'Edit',
+                            icon:'pi pi-fw pi-pencil',
+                            items:[
+                                {
+                                    label:'Save',
+                                    icon:'pi pi-fw pi-calendar-plus'
+                                },
+                                {
+                                    label:'Delete',
+                                    icon:'pi pi-fw pi-calendar-minus'
+                                },
+                            ]
+                        },
+                        {
+                            label:'Archieve',
+                            icon:'pi pi-fw pi-calendar-times',
+                            items:[
+                                {
+                                label:'Remove',
+                                icon:'pi pi-fw pi-calendar-minus'
+                                }
+                            ]
+                        }
+                    ]
                 },
                 {
-                   separator:true
+                    separator:true
                 },
                 {
-                   label:'Quit',
-                   icon:'pi pi-fw pi-power-off'
+                    label:'Quit',
+                    icon:'pi pi-fw pi-power-off'
                 }
-             ]
+            ]
         }
     }
 }
 
 </code></pre>
 
-         <h5>Popup Mode</h5>
+        <h5>Popup Mode</h5>
         <p>TieredMenu is inline by default whereas popup mode is supported by enabling popup property and calling toggle method with an event of the target.</p>
 
 <pre v-code><code>
@@ -179,8 +176,8 @@ toggle(event) {
 
 </code></pre>
 
-         <h5>Templating</h5>
-         <p>TieredMenu offers content customization with the <i>item</i> template that receives the menuitem instance from the model as a parameter.</p>
+        <h5>Templating</h5>
+        <p>TieredMenu offers content customization with the <i>item</i> template that receives the menuitem instance from the model as a parameter.</p>
 <pre v-code><code><template v-pre>
 &lt;TieredMenu :model="items"&gt;
     &lt;template #item="{item}"&gt;
@@ -286,23 +283,23 @@ toggle(event) {
 			</table>
 		</div>
 
-      <h5>Slots</h5>
-		<div class="doc-tablewrapper">
+        <h5>Slots</h5>
+        <div class="doc-tablewrapper">
             <table class="doc-table">
-				<thead>
-               <tr>
-                  <th>Name</th>
-                  <th>Parameters</th>
-               </tr>
-				</thead>
-				<tbody>
-               <tr>
-                  <td>item</td>
-                  <td>item: Menuitem instance</td>
-               </tr>
-				</tbody>
-			</table>
-      </div>
+                <thead>
+                    <tr>
+                        <th>Name</th>
+                        <th>Parameters</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>item</td>
+                        <td>item: Menuitem instance</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
 
 		<h5>Styling</h5>
 		<p>Following is the list of structural style classes, for theming classes visit <router-link to="/theming">theming</router-link> page.</p>
@@ -373,135 +370,132 @@ export default {
         return {
             items: [
                 {
-                   label:'File',
-                   icon:'pi pi-fw pi-file',
-                   items:[
-                      {
-                         label:'New',
-                         icon:'pi pi-fw pi-plus',
-                         items:[
-                            {
-                               label:'Bookmark',
-                               icon:'pi pi-fw pi-bookmark'
-                            },
-                            {
-                               label:'Video',
-                               icon:'pi pi-fw pi-video'
-                            },
-
-                         ]
-                      },
-                      {
-                         label:'Delete',
-                         icon:'pi pi-fw pi-trash'
-                      },
-                      {
-                         separator:true
-                      },
-                      {
-                         label:'Export',
-                         icon:'pi pi-fw pi-external-link'
-                      }
-                   ]
+                    label:'File',
+                    icon:'pi pi-fw pi-file',
+                    items:[
+                        {
+                            label:'New',
+                            icon:'pi pi-fw pi-plus',
+                            items:[
+                                {
+                                    label:'Bookmark',
+                                    icon:'pi pi-fw pi-bookmark'
+                                },
+                                {
+                                    label:'Video',
+                                    icon:'pi pi-fw pi-video'
+                                }
+                            ]
+                        },
+                        {
+                            label:'Delete',
+                            icon:'pi pi-fw pi-trash'
+                        },
+                        {
+                            separator:true
+                        },
+                        {
+                            label:'Export',
+                            icon:'pi pi-fw pi-external-link'
+                        }
+                    ]
                 },
                 {
-                   label:'Edit',
-                   icon:'pi pi-fw pi-pencil',
-                   items:[
-                      {
-                         label:'Left',
-                         icon:'pi pi-fw pi-align-left'
-                      },
-                      {
-                         label:'Right',
-                         icon:'pi pi-fw pi-align-right'
-                      },
-                      {
-                         label:'Center',
-                         icon:'pi pi-fw pi-align-center'
-                      },
-                      {
-                         label:'Justify',
-                         icon:'pi pi-fw pi-align-justify'
-                      },
-
-                   ]
+                    label:'Edit',
+                    icon:'pi pi-fw pi-pencil',
+                    items:[
+                        {
+                            label:'Left',
+                            icon:'pi pi-fw pi-align-left'
+                        },
+                        {
+                            label:'Right',
+                            icon:'pi pi-fw pi-align-right'
+                        },
+                        {
+                            label:'Center',
+                            icon:'pi pi-fw pi-align-center'
+                        },
+                        {
+                            label:'Justify',
+                            icon:'pi pi-fw pi-align-justify'
+                        }
+                    ]
                 },
                 {
-                   label:'Users',
-                   icon:'pi pi-fw pi-user',
-                   items:[
-                      {
-                         label:'New',
-                         icon:'pi pi-fw pi-user-plus',
+                    label:'Users',
+                    icon:'pi pi-fw pi-user',
+                    items:[
+                        {
+                            label:'New',
+                            icon:'pi pi-fw pi-user-plus',
 
-                      },
-                      {
-                         label:'Delete',
-                         icon:'pi pi-fw pi-user-minus',
+                        },
+                        {
+                            label:'Delete',
+                            icon:'pi pi-fw pi-user-minus',
 
-                      },
-                      {
-                         label:'Search',
-                         icon:'pi pi-fw pi-users',
-                         items:[
+                        },
+                        {
+                            label:'Search',
+                            icon:'pi pi-fw pi-users',
+                            items:[
+                                {
+                                    label:'Filter',
+                                    icon:'pi pi-fw pi-filter',
+                                    items:[
+                                        {
+                                            label:'Print',
+                                            icon:'pi pi-fw pi-print'
+                                        }
+                                    ]
+                                },
+                                {
+                                    icon:'pi pi-fw pi-bars',
+                                    label:'List'
+                                }
+                            ]
+                        }
+                    ]
+                },
+                {
+                    label:'Events',
+                    icon:'pi pi-fw pi-calendar',
+                    items:[
+                        {
+                            label:'Edit',
+                            icon:'pi pi-fw pi-pencil',
+                            items:[
+                                {
+                                    label:'Save',
+                                    icon:'pi pi-fw pi-calendar-plus'
+                                },
+                                {
+                                    label:'Delete',
+                                    icon:'pi pi-fw pi-calendar-minus'
+                                }
+                            ]
+                        },
+                        {
+                            label:'Archieve',
+                            icon:'pi pi-fw pi-calendar-times',
+                            items:[
                             {
-                               label:'Filter',
-                               icon:'pi pi-fw pi-filter',
-                               items:[
-                                  {
-                                     label:'Print',
-                                     icon:'pi pi-fw pi-print'
-                                  }
-                               ]
-                            },
-                            {
-                               icon:'pi pi-fw pi-bars',
-                               label:'List'
+                                label:'Remove',
+                                icon:'pi pi-fw pi-calendar-minus'
                             }
-                         ]
-                      }
-                   ]
+                            ]
+                        }
+                    ]
                 },
                 {
-                   label:'Events',
-                   icon:'pi pi-fw pi-calendar',
-                   items:[
-                      {
-                         label:'Edit',
-                         icon:'pi pi-fw pi-pencil',
-                         items:[
-                            {
-                               label:'Save',
-                               icon:'pi pi-fw pi-calendar-plus'
-                            },
-                            {
-                               label:'Delete',
-                               icon:'pi pi-fw pi-calendar-minus'
-                            },
-
-                         ]
-                      },
-                      {
-                         label:'Archieve',
-                         icon:'pi pi-fw pi-calendar-times',
-                         items:[
-                            {
-                               label:'Remove',
-                               icon:'pi pi-fw pi-calendar-minus'
-                            }
-                         ]
-                      }
-                   ]
+                    separator:true
                 },
                 {
-                   separator:true
-                },
-                {
-                   label:'Quit',
-                   icon:'pi pi-fw pi-power-off'
+                    label:'Quit',
+                    icon:'pi pi-fw pi-power-off'
                 }
-             ]
+            ]
         }
     },
     methods: {
@@ -535,128 +529,128 @@ export default {
         const menu = ref();
         const items = ref([
             {
-               label:'File',
-               icon:'pi pi-fw pi-file',
-               items:[
-                  {
-                     label:'New',
-                     icon:'pi pi-fw pi-plus',
-                     items:[
-                        {
-                           label:'Bookmark',
-                           icon:'pi pi-fw pi-bookmark'
-                        },
-                        {
-                           label:'Video',
-                           icon:'pi pi-fw pi-video'
-                        },
-                     ]
-                  },
-                  {
-                     label:'Delete',
-                     icon:'pi pi-fw pi-trash'
-                  },
-                  {
-                     separator:true
-                  },
-                  {
-                     label:'Export',
-                     icon:'pi pi-fw pi-external-link'
-                  }
-               ]
+                label:'File',
+                icon:'pi pi-fw pi-file',
+                items:[
+                    {
+                        label:'New',
+                        icon:'pi pi-fw pi-plus',
+                        items:[
+                            {
+                                label:'Bookmark',
+                                icon:'pi pi-fw pi-bookmark'
+                            },
+                            {
+                                label:'Video',
+                                icon:'pi pi-fw pi-video'
+                            }
+                        ]
+                    },
+                    {
+                        label:'Delete',
+                        icon:'pi pi-fw pi-trash'
+                    },
+                    {
+                        separator:true
+                    },
+                    {
+                        label:'Export',
+                        icon:'pi pi-fw pi-external-link'
+                    }
+                ]
             },
             {
-               label:'Edit',
-               icon:'pi pi-fw pi-pencil',
-               items:[
-                  {
-                     label:'Left',
-                     icon:'pi pi-fw pi-align-left'
-                  },
-                  {
-                     label:'Right',
-                     icon:'pi pi-fw pi-align-right'
-                  },
-                  {
-                     label:'Center',
-                     icon:'pi pi-fw pi-align-center'
-                  },
-                  {
-                     label:'Justify',
-                     icon:'pi pi-fw pi-align-justify'
-                  },
-               ]
+                label:'Edit',
+                icon:'pi pi-fw pi-pencil',
+                items:[
+                    {
+                        label:'Left',
+                        icon:'pi pi-fw pi-align-left'
+                    },
+                    {
+                        label:'Right',
+                        icon:'pi pi-fw pi-align-right'
+                    },
+                    {
+                        label:'Center',
+                        icon:'pi pi-fw pi-align-center'
+                    },
+                    {
+                        label:'Justify',
+                        icon:'pi pi-fw pi-align-justify'
+                    }
+                ]
             },
             {
-               label:'Users',
-               icon:'pi pi-fw pi-user',
-               items:[
-                  {
-                     label:'New',
-                     icon:'pi pi-fw pi-user-plus',
-                  },
-                  {
-                     label:'Delete',
-                     icon:'pi pi-fw pi-user-minus',
-                  },
-                  {
-                     label:'Search',
-                     icon:'pi pi-fw pi-users',
-                     items:[
-                        {
-                           label:'Filter',
-                           icon:'pi pi-fw pi-filter',
-                           items:[
-                              {
-                                 label:'Print',
-                                 icon:'pi pi-fw pi-print'
-                              }
-                           ]
-                        },
-                        {
-                           icon:'pi pi-fw pi-bars',
-                           label:'List'
-                        }
-                     ]
-                  }
-               ]
+                label:'Users',
+                icon:'pi pi-fw pi-user',
+                items:[
+                    {
+                        label:'New',
+                        icon:'pi pi-fw pi-user-plus',
+                    },
+                    {
+                        label:'Delete',
+                        icon:'pi pi-fw pi-user-minus',
+                    },
+                    {
+                        label:'Search',
+                        icon:'pi pi-fw pi-users',
+                        items:[
+                            {
+                                label:'Filter',
+                                icon:'pi pi-fw pi-filter',
+                                items:[
+                                    {
+                                        label:'Print',
+                                        icon:'pi pi-fw pi-print'
+                                    }
+                                ]
+                            },
+                            {
+                                icon:'pi pi-fw pi-bars',
+                                label:'List'
+                            }
+                        ]
+                    }
+                ]
             },
             {
-               label:'Events',
-               icon:'pi pi-fw pi-calendar',
-               items:[
-                  {
-                     label:'Edit',
-                     icon:'pi pi-fw pi-pencil',
-                     items:[
-                        {
-                           label:'Save',
-                           icon:'pi pi-fw pi-calendar-plus'
-                        },
-                        {
-                           label:'Delete',
-                           icon:'pi pi-fw pi-calendar-minus'
-                        },
-                     ]
-                  },
-                  {
-                     label:'Archieve',
-                     icon:'pi pi-fw pi-calendar-times',
-                     items:[
-                        {
-                           label:'Remove',
-                           icon:'pi pi-fw pi-calendar-minus'
-                        }
-                     ]
-                  }
-               ]
+                label:'Events',
+                icon:'pi pi-fw pi-calendar',
+                items:[
+                    {
+                        label:'Edit',
+                        icon:'pi pi-fw pi-pencil',
+                        items:[
+                            {
+                                label:'Save',
+                                icon:'pi pi-fw pi-calendar-plus'
+                            },
+                            {
+                                label:'Delete',
+                                icon:'pi pi-fw pi-calendar-minus'
+                            }
+                        ]
+                    },
+                    {
+                        label:'Archieve',
+                        icon:'pi pi-fw pi-calendar-times',
+                        items:[
+                            {
+                                label:'Remove',
+                                icon:'pi pi-fw pi-calendar-minus'
+                            }
+                        ]
+                    }
+                ]
             },
             {
-               separator:true
+                separator:true
             },
             {
-               label:'Quit',
-               icon:'pi pi-fw pi-power-off'
+                label:'Quit',
+                icon:'pi pi-fw pi-power-off'
             }
         ]);
 
@@ -689,128 +683,128 @@ export default {
                 const menu = ref();
                 const items = ref([
                     {
-                    label:'File',
-                    icon:'pi pi-fw pi-file',
-                    items:[
-                        {
-                            label:'New',
-                            icon:'pi pi-fw pi-plus',
-                            items:[
-                                {
-                                    label:'Bookmark',
-                                    icon:'pi pi-fw pi-bookmark'
-                                },
-                                {
-                                    label:'Video',
-                                    icon:'pi pi-fw pi-video'
-                                },
-                            ]
-                        },
-                        {
-                            label:'Delete',
-                            icon:'pi pi-fw pi-trash'
-                        },
-                        {
-                            separator:true
-                        },
-                        {
-                            label:'Export',
-                            icon:'pi pi-fw pi-external-link'
-                        }
-                    ]
-                    },
-                    {
-                    label:'Edit',
-                    icon:'pi pi-fw pi-pencil',
-                    items:[
-                        {
-                            label:'Left',
-                            icon:'pi pi-fw pi-align-left'
-                        },
-                        {
-                            label:'Right',
-                            icon:'pi pi-fw pi-align-right'
-                        },
-                        {
-                            label:'Center',
-                            icon:'pi pi-fw pi-align-center'
-                        },
-                        {
-                            label:'Justify',
-                            icon:'pi pi-fw pi-align-justify'
-                        },
-                    ]
-                    },
-                    {
-                    label:'Users',
-                    icon:'pi pi-fw pi-user',
-                    items:[
-                        {
-                            label:'New',
-                            icon:'pi pi-fw pi-user-plus',
-                        },
-                        {
-                            label:'Delete',
-                            icon:'pi pi-fw pi-user-minus',
-                        },
-                        {
-                            label:'Search',
-                            icon:'pi pi-fw pi-users',
-                            items:[
-                                {
-                                label:'Filter',
-                                icon:'pi pi-fw pi-filter',
+                        label:'File',
+                        icon:'pi pi-fw pi-file',
+                        items:[
+                            {
+                                label:'New',
+                                icon:'pi pi-fw pi-plus',
                                 items:[
                                     {
-                                        label:'Print',
-                                        icon:'pi pi-fw pi-print'
+                                        label:'Bookmark',
+                                        icon:'pi pi-fw pi-bookmark'
+                                    },
+                                    {
+                                        label:'Video',
+                                        icon:'pi pi-fw pi-video'
+                                    },
+                                ]
+                            },
+                            {
+                                label:'Delete',
+                                icon:'pi pi-fw pi-trash'
+                            },
+                            {
+                                separator:true
+                            },
+                            {
+                                label:'Export',
+                                icon:'pi pi-fw pi-external-link'
+                            }
+                        ]
+                    },
+                    {
+                        label:'Edit',
+                        icon:'pi pi-fw pi-pencil',
+                        items:[
+                            {
+                                label:'Left',
+                                icon:'pi pi-fw pi-align-left'
+                            },
+                            {
+                                label:'Right',
+                                icon:'pi pi-fw pi-align-right'
+                            },
+                            {
+                                label:'Center',
+                                icon:'pi pi-fw pi-align-center'
+                            },
+                            {
+                                label:'Justify',
+                                icon:'pi pi-fw pi-align-justify'
+                            },
+                        ]
+                    },
+                    {
+                        label:'Users',
+                        icon:'pi pi-fw pi-user',
+                        items:[
+                            {
+                                label:'New',
+                                icon:'pi pi-fw pi-user-plus',
+                            },
+                            {
+                                label:'Delete',
+                                icon:'pi pi-fw pi-user-minus',
+                            },
+                            {
+                                label:'Search',
+                                icon:'pi pi-fw pi-users',
+                                items:[
+                                    {
+                                    label:'Filter',
+                                    icon:'pi pi-fw pi-filter',
+                                    items:[
+                                        {
+                                            label:'Print',
+                                            icon:'pi pi-fw pi-print'
+                                        }
+                                    ]
+                                    },
+                                    {
+                                    icon:'pi pi-fw pi-bars',
+                                    label:'List'
                                     }
                                 ]
-                                },
-                                {
-                                icon:'pi pi-fw pi-bars',
-                                label:'List'
-                                }
-                            ]
-                        }
-                    ]
+                            }
+                        ]
                     },
                     {
-                    label:'Events',
-                    icon:'pi pi-fw pi-calendar',
-                    items:[
-                        {
-                            label:'Edit',
-                            icon:'pi pi-fw pi-pencil',
-                            items:[
-                                {
-                                label:'Save',
-                                icon:'pi pi-fw pi-calendar-plus'
-                                },
-                                {
-                                label:'Delete',
-                                icon:'pi pi-fw pi-calendar-minus'
-                                },
-                            ]
-                        },
-                        {
-                            label:'Archieve',
-                            icon:'pi pi-fw pi-calendar-times',
-                            items:[
-                                {
-                                label:'Remove',
-                                icon:'pi pi-fw pi-calendar-minus'
-                                }
-                            ]
-                        }
-                    ]
+                        label:'Events',
+                        icon:'pi pi-fw pi-calendar',
+                        items:[
+                            {
+                                label:'Edit',
+                                icon:'pi pi-fw pi-pencil',
+                                items:[
+                                    {
+                                    label:'Save',
+                                    icon:'pi pi-fw pi-calendar-plus'
+                                    },
+                                    {
+                                    label:'Delete',
+                                    icon:'pi pi-fw pi-calendar-minus'
+                                    },
+                                ]
+                            },
+                            {
+                                label:'Archieve',
+                                icon:'pi pi-fw pi-calendar-times',
+                                items:[
+                                    {
+                                    label:'Remove',
+                                    icon:'pi pi-fw pi-calendar-minus'
+                                    }
+                                ]
+                            }
+                        ]
                     },
                     {
-                    separator:true
+                        separator:true
                     },
                     {
-                    label:'Quit',
-                    icon:'pi pi-fw pi-power-off'
+                        label:'Quit',
+                        icon:'pi pi-fw pi-power-off'
                     }
                 ]);
 
diff --git a/src/views/timeline/TimelineDemo.vue b/src/views/timeline/TimelineDemo.vue
index 36529d686..95a6c204e 100644
--- a/src/views/timeline/TimelineDemo.vue
+++ b/src/views/timeline/TimelineDemo.vue
@@ -51,8 +51,8 @@
             <div class="card">
                 <h5>Customized</h5>
                 <Timeline :value="events1" align="alternate" class="customized-timeline">
-                     <template #marker="slotProps">
-                        <span class="custom-marker p-shadow-2" :style="{backgroundColor: slotProps.item.color}">
+                    <template #marker="slotProps">
+                        <span class="custom-marker shadow-2" :style="{backgroundColor: slotProps.item.color}">
                             <i :class="slotProps.item.icon"></i>
                         </span>
                     </template>
@@ -65,7 +65,7 @@
                                 {{slotProps.item.date}}
                             </template>
                             <template #content>
-                                <img v-if="slotProps.item.image" :src="'demo/images/product/' + slotProps.item.image" :alt="slotProps.item.name" width="200" class="p-shadow-2" />
+                                <img v-if="slotProps.item.image" :src="'demo/images/product/' + slotProps.item.image" :alt="slotProps.item.name" width="200" class="shadow-2" />
                                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt
                                     quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!</p>
                                 <Button label="Read more" class="p-button-text"></Button>
diff --git a/src/views/timeline/TimelineDoc.vue b/src/views/timeline/TimelineDoc.vue
index 1ecce437e..c620dc42c 100644
--- a/src/views/timeline/TimelineDoc.vue
+++ b/src/views/timeline/TimelineDoc.vue
@@ -95,7 +95,7 @@ export default {
 <pre v-code><code><template v-pre>
 &lt;Timeline :value="events" align="alternate" class="customized-timeline"&gt;
 	&lt;template #marker="slotProps"&gt;
-		&lt;span class="custom-marker p-shadow-2" :style="&#123;backgroundColor: slotProps.item.color&#125;"&gt;
+		&lt;span class="custom-marker shadow-2" :style="&#123;backgroundColor: slotProps.item.color&#125;"&gt;
 			&lt;i :class="slotProps.item.icon"&gt;&lt;/i&gt;
 		&lt;/span&gt;
 	&lt;/template&gt;
@@ -108,7 +108,7 @@ export default {
 				&#123;&#123;slotProps.item.date&#125;&#125;
 			&lt;/template&gt;
 			&lt;template #content&gt;
-				&lt;img v-if="slotProps.item.image" :src="'demo/images/product/' + slotProps.item.image" :alt="slotProps.item.name" width="200" class="p-shadow-2" /&gt;
+				&lt;img v-if="slotProps.item.image" :src="'demo/images/product/' + slotProps.item.image" :alt="slotProps.item.name" width="200" class="shadow-2" /&gt;
 				&lt;p&gt;Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt
 					quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!&lt;/p&gt;
 				&lt;Button label="Read more" class="p-button-text"&gt;&lt;/Button&gt;
@@ -335,8 +335,8 @@ export default {
 		<div class="card">
             <h5>Customized</h5>
             <Timeline :value="events1" align="alternate" class="customized-timeline">
-                 <template #marker="slotProps">
-                    <span class="custom-marker p-shadow-2" :style="{backgroundColor: slotProps.item.color}">
+                <template #marker="slotProps">
+                    <span class="custom-marker shadow-2" :style="{backgroundColor: slotProps.item.color}">
                         <i :class="slotProps.item.icon"></i>
                     </span>
                 </template>
@@ -349,7 +349,7 @@ export default {
                             {{slotProps.item.date}}
                         </template>
                         <template #content>
-                            <img v-if="slotProps.item.image" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="slotProps.item.name" width="200" class="p-shadow-2" />
+                            <img v-if="slotProps.item.image" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="slotProps.item.name" width="200" class="shadow-2" />
                             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt
                                 quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!</p>
                             <Button label="Read more" class="p-button-text"></Button>
@@ -491,8 +491,8 @@ export default {
 		<div class="card">
             <h5>Customized</h5>
             <Timeline :value="events1" align="alternate" class="customized-timeline">
-                 <template #marker="slotProps">
-                    <span class="custom-marker p-shadow-2" :style="{backgroundColor: slotProps.item.color}">
+                <template #marker="slotProps">
+                    <span class="custom-marker shadow-2" :style="{backgroundColor: slotProps.item.color}">
                         <i :class="slotProps.item.icon"></i>
                     </span>
                 </template>
@@ -505,7 +505,7 @@ export default {
                             {{slotProps.item.date}}
                         </template>
                         <template #content>
-                            <img v-if="slotProps.item.image" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="slotProps.item.name" width="200" class="p-shadow-2" />
+                            <img v-if="slotProps.item.image" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="slotProps.item.name" width="200" class="shadow-2" />
                             <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt
                                 quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!</p>
                             <Button label="Read more" class="p-button-text"></Button>
@@ -650,7 +650,7 @@ export default {
                 <h5>Customized</h5>
                 <p-timeline :value="events1" align="alternate" class="customized-timeline">
                     <template #marker="slotProps">
-                        <span class="custom-marker p-shadow-2" :style="{backgroundColor: slotProps.item.color}">
+                        <span class="custom-marker shadow-2" :style="{backgroundColor: slotProps.item.color}">
                             <i :class="slotProps.item.icon"></i>
                         </span>
                     </template>
@@ -663,7 +663,7 @@ export default {
                                 {{slotProps.item.date}}
                             </template>
                             <template #content>
-                                <img v-if="slotProps.item.image" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="slotProps.item.name" width="200" class="p-shadow-2" />
+                                <img v-if="slotProps.item.image" src="https://www.primefaces.org/wp-content/uploads/2020/05/placeholder.png" :alt="slotProps.item.name" width="200" class="shadow-2" />
                                 <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt
                                     quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!</p>
                                 <p-button label="Read more" class="p-button-text"></p-button>
diff --git a/src/views/toast/ToastDemo.vue b/src/views/toast/ToastDemo.vue
index 22cf32bc4..95aaf4603 100755
--- a/src/views/toast/ToastDemo.vue
+++ b/src/views/toast/ToastDemo.vue
@@ -11,17 +11,17 @@
         <div class="content-section implementation">
             <Toast position="bottom-center" group="bc">
                 <template #message="slotProps">
-                    <div class="p-d-flex p-flex-column">
-                        <div class="p-text-center">
+                    <div class="flex flex-column">
+                        <div class="text-center">
                             <i class="pi pi-exclamation-triangle" style="font-size: 3rem"></i>
                             <h4>{{slotProps.message.summary}}</h4>
                             <p>{{slotProps.message.detail}}</p>
                         </div>
-                        <div class="p-grid p-fluid">
-                            <div class="p-col-6">
+                        <div class="grid p-fluid">
+                            <div class="col-6">
                                 <Button class="p-button-success" label="Yes" @click="onConfirm"></Button>
                             </div>
-                            <div class="p-col-6">
+                            <div class="col-6">
                                 <Button class="p-button-secondary" label="No" @click="onReject"></Button>
                             </div>
                         </div>
@@ -37,7 +37,7 @@
                 <Button label="Error" class="p-button-danger" @click="showError" />
 
                 <h5>Positions</h5>
-                <Button label="Top Left" class="p-mr-2" @click="showTopLeft" />
+                <Button label="Top Left" class="mr-2" @click="showTopLeft" />
                 <Button label="Bottom Left" class="p-button-warning" @click="showBottomLeft" />
                 <Button label="Bottom Right" class="p-button-success" @click="showBottomRight" />
 
diff --git a/src/views/toast/ToastDoc.vue b/src/views/toast/ToastDoc.vue
index 1ae0ee603..e26a7b3c6 100755
--- a/src/views/toast/ToastDoc.vue
+++ b/src/views/toast/ToastDoc.vue
@@ -200,17 +200,17 @@ this.$toast.add({severity:'success', summary: 'Specific Message', group: 'mykey'
 <pre v-code><code><template v-pre>
 &lt;Toast position="bottom-center" group="bc"&gt;
     &lt;template #message="slotProps"&gt;
-        &lt;div class="p-d-flex p-flex-column"&gt;
-            &lt;div class="p-text-center"&gt;
+        &lt;div class="flex flex-column"&gt;
+            &lt;div class="text-center"&gt;
                 &lt;i class="pi pi-exclamation-triangle" style="font-size: 3rem"&gt;&lt;/i&gt;
                 &lt;h4&gt;{{slotProps.message.summary}}&lt;/h4&gt;
                 &lt;p&gt;{{slotProps.message.detail}}&lt;/p&gt;
             &lt;/div&gt;
-            &lt;div class="p-grid p-fluid"&gt;
-                &lt;div class="p-col-6"&gt;
+            &lt;div class="grid p-fluid"&gt;
+                &lt;div class="col-6"&gt;
                     &lt;Button class="p-button-success" label="Yes" @click="onConfirm" /&gt;
                 &lt;/div&gt;
-                &lt;div class="p-col-6"&gt;
+                &lt;div class="col-6"&gt;
                     &lt;Button class="p-button-secondary" label="No" @click="onReject" /&gt;
                 &lt;/div&gt;
             &lt;/div&gt;
@@ -372,17 +372,17 @@ export default {
 
         <Toast position="bottom-center" group="bc">
             <template #message="slotProps">
-                <div class="p-d-flex p-flex-column">
-                    <div class="p-text-center">
+                <div class="flex flex-column">
+                    <div class="text-center">
                         <i class="pi pi-exclamation-triangle" style="font-size: 3rem"></i>
                         <h4>{{slotProps.message.summary}}</h4>
                         <p>{{slotProps.message.detail}}</p>
                     </div>
-                    <div class="p-grid p-fluid">
-                        <div class="p-col-6">
+                    <div class="grid p-fluid">
+                        <div class="col-6">
                             <Button class="p-button-success" label="Yes" @click="onConfirm"></Button>
                         </div>
-                        <div class="p-col-6">
+                        <div class="col-6">
                             <Button class="p-button-secondary" label="No" @click="onReject"></Button>
                         </div>
                     </div>
@@ -398,7 +398,7 @@ export default {
             <Button label="Error" class="p-button-danger" @click="showError" />
 
             <h5>Positions</h5>
-            <Button label="Top Left" class="p-mr-2" @click="showTopLeft" />
+            <Button label="Top Left" class="mr-2" @click="showTopLeft" />
             <Button label="Bottom Left" class="p-button-warning" @click="showBottomLeft" />
             <Button label="Bottom Right" class="p-button-success" @click="showBottomRight" />
 
@@ -494,17 +494,17 @@ button {
 
         <Toast position="bottom-center" group="bc">
             <template #message="slotProps">
-                <div class="p-d-flex p-flex-column">
-                    <div class="p-text-center">
+                <div class="flex flex-column">
+                    <div class="text-center">
                         <i class="pi pi-exclamation-triangle" style="font-size: 3rem"></i>
                         <h4>{{slotProps.message.summary}}</h4>
                         <p>{{slotProps.message.detail}}</p>
                     </div>
-                    <div class="p-grid p-fluid">
-                        <div class="p-col-6">
+                    <div class="grid p-fluid">
+                        <div class="col-6">
                             <Button class="p-button-success" label="Yes" @click="onConfirm"></Button>
                         </div>
-                        <div class="p-col-6">
+                        <div class="col-6">
                             <Button class="p-button-secondary" label="No" @click="onReject"></Button>
                         </div>
                     </div>
@@ -520,7 +520,7 @@ button {
             <Button label="Error" class="p-button-danger" @click="showError" />
 
             <h5>Positions</h5>
-            <Button label="Top Left" class="p-mr-2" @click="showTopLeft" />
+            <Button label="Top Left" class="mr-2" @click="showTopLeft" />
             <Button label="Bottom Left" class="p-button-warning" @click="showBottomLeft" />
             <Button label="Bottom Right" class="p-button-success" @click="showBottomRight" />
 
@@ -619,17 +619,17 @@ button {
 
             <p-toast position="bottom-center" group="bc">
                 <template #message="slotProps">
-                    <div class="p-d-flex p-flex-column">
-                        <div class="p-text-center">
+                    <div class="flex flex-column">
+                        <div class="text-center">
                             <i class="pi pi-exclamation-triangle" style="font-size: 3rem"></i>
                             <h4>{{slotProps.message.summary}}</h4>
                             <p>{{slotProps.message.detail}}</p>
                         </div>
-                        <div class="p-grid p-fluid">
-                            <div class="p-col-6">
+                        <div class="grid p-fluid">
+                            <div class="col-6">
                                 <p-button class="p-button-success" label="Yes" @click="onConfirm"></p-button>
                             </div>
-                            <div class="p-col-6">
+                            <div class="col-6">
                                 <p-button class="p-button-secondary" label="No" @click="onReject"></p-button>
                             </div>
                         </div>
@@ -645,7 +645,7 @@ button {
                 <p-button label="Error" class="p-button-danger" @click="showError"></p-button>
 
                 <h5>Positions</h5>
-                <p-button label="Top Left" class="p-mr-2" @click="showTopLeft"></p-button>
+                <p-button label="Top Left" class="mr-2" @click="showTopLeft"></p-button>
                 <p-button label="Bottom Left" class="p-button-warning" @click="showBottomLeft"></p-button>
                 <p-button label="Bottom Right" class="p-button-success" @click="showBottomRight"></p-button>
 
diff --git a/src/views/toolbar/ToolbarDemo.vue b/src/views/toolbar/ToolbarDemo.vue
index b3e0c2d66..479f3c163 100755
--- a/src/views/toolbar/ToolbarDemo.vue
+++ b/src/views/toolbar/ToolbarDemo.vue
@@ -11,15 +11,15 @@
         <div class="content-section implementation">
             <Toolbar>
                 <template #start>
-                    <Button label="New" icon="pi pi-plus" class="p-mr-2" />
+                    <Button label="New" icon="pi pi-plus" class="mr-2" />
                     <Button label="Upload" icon="pi pi-upload" class="p-button-success" />
-                    <i class="pi pi-bars p-toolbar-separator p-mr-2" />
+                    <i class="pi pi-bars p-toolbar-separator mr-2" />
                     <SplitButton label="Save" icon="pi pi-check" :model="items" class="p-button-warning"></SplitButton>
                 </template>
 
                 <template #end>
-                    <Button icon="pi pi-search" class="p-mr-2" />
-                    <Button icon="pi pi-calendar" class="p-button-success p-mr-2" />
+                    <Button icon="pi pi-search" class="mr-2" />
+                    <Button icon="pi pi-calendar" class="p-button-success mr-2" />
                     <Button icon="pi pi-times" class="p-button-danger" />
                 </template>
             </Toolbar>
diff --git a/src/views/toolbar/ToolbarDoc.vue b/src/views/toolbar/ToolbarDoc.vue
index a56384bd6..8e04a494a 100755
--- a/src/views/toolbar/ToolbarDoc.vue
+++ b/src/views/toolbar/ToolbarDoc.vue
@@ -18,15 +18,15 @@ import Toolbar from 'primevue/toolbar';
 <pre v-code><code>
 &lt;Toolbar&gt;
     &lt;template #start&gt;
-        &lt;Button label="New" icon="pi pi-plus" class="p-mr-2" /&gt;
+        &lt;Button label="New" icon="pi pi-plus" class="mr-2" /&gt;
         &lt;Button label="Upload" icon="pi pi-upload" class="p-button-success" /&gt;
-        &lt;i class="pi pi-bars p-toolbar-separator p-mr-2" /&gt;
+        &lt;i class="pi pi-bars p-toolbar-separator mr-2" /&gt;
         &lt;SplitButton label="Save" icon="pi pi-check" :model="items" class="p-button-warning"&gt;&lt;/SplitButton&gt;
     &lt;/template&gt;
 
     &lt;template #end&gt;
-        &lt;Button icon="pi pi-search" class="p-mr-2" /&gt;
-        &lt;Button icon="pi pi-calendar" class="p-button-success p-mr-2" /&gt;
+        &lt;Button icon="pi pi-search" class="mr-2" /&gt;
+        &lt;Button icon="pi pi-calendar" class="p-button-success mr-2" /&gt;
         &lt;Button icon="pi pi-times" class="p-button-danger" /&gt;
     &lt;/template&gt;
 &lt;/Toolbar&gt;
@@ -99,15 +99,15 @@ export default {
     <div>
         <Toolbar>
             <template #start>
-                <Button label="New" icon="pi pi-plus" class="p-mr-2" />
+                <Button label="New" icon="pi pi-plus" class="mr-2" />
                 <Button label="Upload" icon="pi pi-upload" class="p-button-success" />
-                <i class="pi pi-bars p-toolbar-separator p-mr-2" />
+                <i class="pi pi-bars p-toolbar-separator mr-2" />
                 <SplitButton label="Save" icon="pi pi-check" :model="items" class="p-button-warning"></SplitButton>
             </template>
 
             <template #end>
-                <Button icon="pi pi-search" class="p-mr-2" />
-                <Button icon="pi pi-calendar" class="p-button-success p-mr-2" />
+                <Button icon="pi pi-search" class="mr-2" />
+                <Button icon="pi pi-calendar" class="p-button-success mr-2" />
                 <Button icon="pi pi-times" class="p-button-danger" />
             </template>
         </Toolbar>
@@ -160,15 +160,15 @@ export default {
     <div>
         <Toolbar>
             <template #start>
-                <Button label="New" icon="pi pi-plus" class="p-mr-2" />
+                <Button label="New" icon="pi pi-plus" class="mr-2" />
                 <Button label="Upload" icon="pi pi-upload" class="p-button-success" />
-                <i class="pi pi-bars p-toolbar-separator p-mr-2" />
+                <i class="pi pi-bars p-toolbar-separator mr-2" />
                 <SplitButton label="Save" icon="pi pi-check" :model="items" class="p-button-warning"></SplitButton>
             </template>
 
             <template #end>
-                <Button icon="pi pi-search" class="p-mr-2" />
-                <Button icon="pi pi-calendar" class="p-button-success p-mr-2" />
+                <Button icon="pi pi-search" class="mr-2" />
+                <Button icon="pi pi-calendar" class="p-button-success mr-2" />
                 <Button icon="pi pi-times" class="p-button-danger" />
             </template>
         </Toolbar>
@@ -223,15 +223,15 @@ export default {
                     content: `<div id="app">
             <p-toolbar>
                 <template #start>
-                    <p-button label="New" icon="pi pi-plus" class="p-mr-2"></p-button>
+                    <p-button label="New" icon="pi pi-plus" class="mr-2"></p-button>
                     <p-button label="Upload" icon="pi pi-upload" class="p-button-success"></p-button>
-                    <i class="pi pi-bars p-toolbar-separator p-mr-2"></i>
+                    <i class="pi pi-bars p-toolbar-separator mr-2"></i>
                     <p-splitbutton label="Save" icon="pi pi-check" :model="items" class="p-button-warning"></p-splitbutton>
                 </template>
 
                 <template #end>
-                    <p-button icon="pi pi-search" class="p-mr-2"></p-button>
-                    <p-button icon="pi pi-calendar" class="p-button-success p-mr-2"></p-button>
+                    <p-button icon="pi pi-search" class="mr-2"></p-button>
+                    <p-button icon="pi pi-calendar" class="p-button-success mr-2"></p-button>
                     <p-button icon="pi pi-times" class="p-button-danger"></p-button>
                 </template>
             </p-toolbar>
diff --git a/src/views/tooltip/TooltipDemo.vue b/src/views/tooltip/TooltipDemo.vue
index 0acd2931e..ab6ff0051 100755
--- a/src/views/tooltip/TooltipDemo.vue
+++ b/src/views/tooltip/TooltipDemo.vue
@@ -11,17 +11,17 @@
         <div class="content-section implementation">
             <div class="card">
                 <h5>Positions</h5>
-                <div class="p-grid p-fluid">
-                    <div class="p-col-12 p-md-3">
+                <div class="grid p-fluid">
+                    <div class="col-12 md:col-3">
                         <InputText type="text" placeholder="Right" v-tooltip.right="'Enter your username'" />
                     </div>
-                    <div class="p-col-12 p-md-3">
+                    <div class="col-12 md:col-3">
                         <InputText type="text" placeholder="Top" v-tooltip.top="'Enter your username'" />
                     </div>
-                    <div class="p-col-12 p-md-3">
+                    <div class="col-12 md:col-3">
                         <InputText type="text" placeholder="Bottom" v-tooltip.bottom="'Enter your username'" />
                     </div>
-                    <div class="p-col-12 p-md-3">
+                    <div class="col-12 md:col-3">
                         <InputText type="text" placeholder="Left" v-tooltip.left="'Enter your username'" />
                     </div>
                 </div>
diff --git a/src/views/tooltip/TooltipDoc.vue b/src/views/tooltip/TooltipDoc.vue
index 673849422..7649108dd 100755
--- a/src/views/tooltip/TooltipDoc.vue
+++ b/src/views/tooltip/TooltipDoc.vue
@@ -139,17 +139,17 @@ export default {
 <template>
     <div>
         <h5>Positions</h5>
-        <div class="p-grid p-fluid">
-            <div class="p-col-12 p-md-3">
+        <div class="grid p-fluid">
+            <div class="col-12 md:col-3">
                 <InputText type="text" placeholder="Right" v-tooltip.right="'Enter your username'" />
             </div>
-            <div class="p-col-12 p-md-3">
+            <div class="col-12 md:col-3">
                 <InputText type="text" placeholder="Top" v-tooltip.top="'Enter your username'" />
             </div>
-            <div class="p-col-12 p-md-3">
+            <div class="col-12 md:col-3">
                 <InputText type="text" placeholder="Bottom" v-tooltip.bottom="'Enter your username'" />
             </div>
-            <div class="p-col-12 p-md-3">
+            <div class="col-12 md:col-3">
                 <InputText type="text" placeholder="Left" v-tooltip.left="'Enter your username'" />
             </div>
         </div>
@@ -186,17 +186,17 @@ export default {
 <template>
     <div>
         <h5>Positions</h5>
-        <div class="p-grid p-fluid">
-            <div class="p-col-12 p-md-3">
+        <div class="grid p-fluid">
+            <div class="col-12 md:col-3">
                 <InputText type="text" placeholder="Right" v-tooltip.right="'Enter your username'" />
             </div>
-            <div class="p-col-12 p-md-3">
+            <div class="col-12 md:col-3">
                 <InputText type="text" placeholder="Top" v-tooltip.top="'Enter your username'" />
             </div>
-            <div class="p-col-12 p-md-3">
+            <div class="col-12 md:col-3">
                 <InputText type="text" placeholder="Bottom" v-tooltip.bottom="'Enter your username'" />
             </div>
-            <div class="p-col-12 p-md-3">
+            <div class="col-12 md:col-3">
                 <InputText type="text" placeholder="Left" v-tooltip.left="'Enter your username'" />
             </div>
         </div>
@@ -232,17 +232,17 @@ export default {
                     imports: `<script src="https://unpkg.com/primevue@^3/tooltip/tooltip.min.js"><\\/script>`,
                     content: `<div id="app">
             <h5>Positions</h5>
-            <div class="p-grid p-fluid">
-                <div class="p-col-12 p-md-3">
+            <div class="grid p-fluid">
+                <div class="col-12 md:col-3">
                     <p-inputtext type="text" placeholder="Right" v-tooltip.right="'Enter your username'"></p-inputtext>
                 </div>
-                <div class="p-col-12 p-md-3">
+                <div class="col-12 md:col-3">
                     <p-inputtext type="text" placeholder="Top" v-tooltip.top="'Enter your username'"></p-inputtext>
                 </div>
-                <div class="p-col-12 p-md-3">
+                <div class="col-12 md:col-3">
                     <p-inputtext type="text" placeholder="Bottom" v-tooltip.bottom="'Enter your username'"></p-inputtext>
                 </div>
-                <div class="p-col-12 p-md-3">
+                <div class="col-12 md:col-3">
                     <p-inputtext type="text" placeholder="Left" v-tooltip.left="'Enter your username'"></p-inputtext>
                 </div>
             </div>
diff --git a/src/views/tree/TreeDoc.vue b/src/views/tree/TreeDoc.vue
index 223dc6992..1583b1081 100755
--- a/src/views/tree/TreeDoc.vue
+++ b/src/views/tree/TreeDoc.vue
@@ -121,7 +121,7 @@ export default {
 export default class NodeService {
 
     getTreeNodes() {
-       return fetch('demo/data/treenodes.json').then(res => res.json())
+        return fetch('demo/data/treenodes.json').then(res => res.json())
                 .then(d => d.root);
     }
 
@@ -522,7 +522,7 @@ export default {
         is used to compare against the value in the text field, in order to customize which field(s) should be used during search, define the <i>filterBy</i> property as a comma separated list.</p>
 
         <p>In addition <i>filterMode</i> specifies the filtering strategy. In <b>lenient</b> mode when the query matches a node, children of the node are not searched further as all descendants of the node are included. On the other hand,
-         in <b>strict</b> mode when the query matches a node, filtering continues on all descendants.</p>
+        in <b>strict</b> mode when the query matches a node, filtering continues on all descendants.</p>
 
 <pre v-code><code><template v-pre>
 &lt;h3&gt;Lenient Filter&lt;/h3&gt;
diff --git a/src/views/treetable/TreeTableFilterDemo.vue b/src/views/treetable/TreeTableFilterDemo.vue
index edda9d4ab..24ef86e37 100755
--- a/src/views/treetable/TreeTableFilterDemo.vue
+++ b/src/views/treetable/TreeTableFilterDemo.vue
@@ -13,7 +13,7 @@
                 <h5>Lenient Filter</h5>
                 <TreeTable :value="nodes" :filters="filters1" filterMode="lenient">
                     <template #header>
-                        <div class="p-text-right">
+                        <div class="text-right">
                             <div class="p-input-icon-left">
                                 <i class="pi pi-search"></i>
                                 <InputText v-model="filters1['global']" placeholder="Global Search" size="50" />
@@ -42,7 +42,7 @@
                 <h5>Strict Filter</h5>
                 <TreeTable :value="nodes" :filters="filters2" filterMode="strict">
                     <template #header>
-                        <div class="p-text-right">
+                        <div class="text-right">
                             <div class="p-input-icon-left">
                                 <i class="pi pi-search"></i>
                                 <InputText v-model="filters2['global']" placeholder="Global Search" size="50" />
@@ -91,7 +91,7 @@ export default {
             <h5>Lenient Filter</h5>
             <TreeTable :value="nodes" :filters="filters1" filterMode="lenient">
                 <template #header>
-                    <div class="p-text-right">
+                    <div class="text-right">
                         <div class="p-input-icon-left">
                             <i class="pi pi-search"></i>
                             <InputText v-model="filters1['global']" placeholder="Global Search" size="50" />
@@ -120,7 +120,7 @@ export default {
             <h5>Strict Filter</h5>
             <TreeTable :value="nodes" :filters="filters2" filterMode="strict">
                 <template #header>
-                    <div class="p-text-right">
+                    <div class="text-right">
                         <div class="p-input-icon-left">
                             <i class="pi pi-search"></i>
                             <InputText v-model="filters2['global']" placeholder="Global Search" size="50" />
@@ -185,7 +185,7 @@ export default {
             <h5>Lenient Filter</h5>
             <TreeTable :value="nodes" :filters="filters1" filterMode="lenient">
                 <template #header>
-                    <div class="p-text-right">
+                    <div class="text-right">
                         <div class="p-input-icon-left">
                             <i class="pi pi-search"></i>
                             <InputText v-model="filters1['global']" placeholder="Global Search" size="50" />
@@ -214,7 +214,7 @@ export default {
             <h5>Strict Filter</h5>
             <TreeTable :value="nodes" :filters="filters2" filterMode="strict">
                 <template #header>
-                    <div class="p-text-right">
+                    <div class="text-right">
                         <div class="p-input-icon-left">
                             <i class="pi pi-search"></i>
                             <InputText v-model="filters2['global']" placeholder="Global Search" size="50" />
@@ -279,7 +279,7 @@ export default {
                 <h5>Lenient Filter</h5>
                 <p-treetable :value="nodes" :filters="filters1" filter-mode="lenient">
                     <template #header>
-                        <div class="p-text-right">
+                        <div class="text-right">
                             <div class="p-input-icon-left">
                                 <i class="pi pi-search"></i>
                                 <p-inputtext v-model="filters1['global']" placeholder="Global Search" size="50"></p-inputtext>
@@ -308,7 +308,7 @@ export default {
                 <h5>Strict Filter</h5>
                 <p-treetable :value="nodes" :filters="filters2" filter-mode="strict">
                     <template #header>
-                        <div class="p-text-right">
+                        <div class="text-right">
                             <div class="p-input-icon-left">
                                 <i class="pi pi-search"></i>
                                 <p-inputtext v-model="filters2['global']" placeholder="Global Search" size="50"></p-inputtext>
diff --git a/src/views/treetable/TreeTablePaginatorDemo.vue b/src/views/treetable/TreeTablePaginatorDemo.vue
index 77e504916..01aee6ec3 100755
--- a/src/views/treetable/TreeTablePaginatorDemo.vue
+++ b/src/views/treetable/TreeTablePaginatorDemo.vue
@@ -3,7 +3,7 @@
         <div class="content-section introduction">
             <div class="feature-intro">
                 <h1>TreeTable <span>Paginator</span></h1>
-               <p>Pagination is enabled by setting paginator property to true and defining the rows attribute as the number of root level nodes per page.</p>
+                <p>Pagination is enabled by setting paginator property to true and defining the rows attribute as the number of root level nodes per page.</p>
             </div>
             <AppDemoActions />
         </div>
diff --git a/src/views/treetable/TreeTableScrollDemo.vue b/src/views/treetable/TreeTableScrollDemo.vue
index e0071992f..6059a0765 100644
--- a/src/views/treetable/TreeTableScrollDemo.vue
+++ b/src/views/treetable/TreeTableScrollDemo.vue
@@ -21,13 +21,13 @@
             <div class="card">
                 <h5>Flexible Scroll</h5>
                 <p>Flex scroll feature makes the scrollable viewport section dynamic insteaf of a fixed value so that it can grow or shrink relative to the parent size of the table.
-                   Click the button below to display a maximizable Dialog where data viewport adjusts itself according to the size changes.</p>
+                    Click the button below to display a maximizable Dialog where data viewport adjusts itself according to the size changes.</p>
 
                 <Button label="Show" icon="pi pi-external-link" @click="openDialog" />
             </div>
 
             <Dialog header="Flex Scroll" v-model:visible="dialogVisible" :style="{width: '75vw'}" :maximizable="true" :modal="true" :contentStyle="{height: '300px'}">
-                 <TreeTable :value="nodes" :scrollable="true" scrollHeight="flex">
+                <TreeTable :value="nodes" :scrollable="true" scrollHeight="flex">
                     <Column field="name" header="Name" :expander="true" style="min-width:200px"></Column>
                     <Column field="size" header="Size" style="min-width:200px"></Column>
                     <Column field="type" header="Type" style="min-width:200px"></Column>
@@ -55,7 +55,7 @@
                     </Column>
                     <Column header="Options" footer="Options" style="width:300px">
                         <template #body>
-                            <Button type="Button" icon="pi pi-check" label="Edit" class="p-mr-2"></Button>
+                            <Button type="Button" icon="pi pi-check" label="Edit" class="mr-2"></Button>
                             <Button type="Button" icon="pi pi-check" label="Delete" class="p-button-warning"></Button>
                         </template>
                     </Column>
@@ -66,7 +66,7 @@
                 <h5>Frozen Columns</h5>
                 <ToggleButton v-model="optionsFrozen" onIcon="pi pi-lock" offIcon="pi pi-lock-open" onLabel="Unfreeze Options" offLabel="Freeze Options" style="width: 12rem" />
 
-                <TreeTable :value="nodes" :scrollable="true" scrollHeight="400px" scrollDirection="both" class="p-mt-3">
+                <TreeTable :value="nodes" :scrollable="true" scrollHeight="400px" scrollDirection="both" class="mt-3">
                     <Column field="name" header="Name" :expander="true" style="width:300px" frozen></Column>
                     <Column header="Key" style="width:300px">
                         <template #body="{node}">
@@ -82,7 +82,7 @@
                     </Column>
                     <Column header="Options" style="width:200px" alignFrozen="right" :frozen="optionsFrozen">
                         <template #body>
-                            <Button type="Button" icon="pi pi-check" label="Edit Item" class="p-mr-2" style="width:100%"></Button>
+                            <Button type="Button" icon="pi pi-check" label="Edit Item" class="mr-2" style="width:100%"></Button>
                         </template>
                     </Column>
                 </TreeTable>
@@ -154,7 +154,7 @@ export default {
                 </Column>
                 <Column header="Options" footer="Options" style="width:300px">
                     <template #body>
-                        <Button type="Button" icon="pi pi-check" label="Edit" class="p-mr-2"></Button>
+                        <Button type="Button" icon="pi pi-check" label="Edit" class="mr-2"></Button>
                         <Button type="Button" icon="pi pi-check" label="Delete" class="p-button-warning"></Button>
                     </template>
                 </Column>
@@ -165,7 +165,7 @@ export default {
             <h5>Frozen Columns</h5>
             <ToggleButton v-model="optionsFrozen" onIcon="pi pi-lock" offIcon="pi pi-lock-open" onLabel="Unfreeze Options" offLabel="Freeze Options" style="width: 12rem" />
 
-            <TreeTable :value="nodes" :scrollable="true" scrollHeight="400px" scrollDirection="both" class="p-mt-3">
+            <TreeTable :value="nodes" :scrollable="true" scrollHeight="400px" scrollDirection="both" class="mt-3">
                 <Column field="name" header="Name" :expander="true" style="width:300px" frozen></Column>
                 <Column header="Key" style="width:300px">
                     <template #body="{node}">
@@ -181,7 +181,7 @@ export default {
                 </Column>
                 <Column header="Options" style="width:200px" alignFrozen="right" :frozen="optionsFrozen">
                     <template #body>
-                        <Button type="Button" icon="pi pi-check" label="Edit Item" class="p-mr-2" style="width:100%"></Button>
+                        <Button type="Button" icon="pi pi-check" label="Edit Item" class="mr-2" style="width:100%"></Button>
                     </template>
                 </Column>
             </TreeTable>
@@ -270,7 +270,7 @@ export default {
                 </Column>
                 <Column header="Options" footer="Options" style="width:300px">
                     <template #body>
-                        <Button type="Button" icon="pi pi-check" label="Edit" class="p-mr-2"></Button>
+                        <Button type="Button" icon="pi pi-check" label="Edit" class="mr-2"></Button>
                         <Button type="Button" icon="pi pi-check" label="Delete" class="p-button-warning"></Button>
                     </template>
                 </Column>
@@ -281,7 +281,7 @@ export default {
             <h5>Frozen Columns</h5>
             <ToggleButton v-model="optionsFrozen" onIcon="pi pi-lock" offIcon="pi pi-lock-open" onLabel="Unfreeze Options" offLabel="Freeze Options" style="width: 12rem" />
 
-            <TreeTable :value="nodes" :scrollable="true" scrollHeight="400px" scrollDirection="both" class="p-mt-3">
+            <TreeTable :value="nodes" :scrollable="true" scrollHeight="400px" scrollDirection="both" class="mt-3">
                 <Column field="name" header="Name" :expander="true" style="width:300px" frozen></Column>
                 <Column header="Key" style="width:300px">
                     <template #body="{node}">
@@ -297,7 +297,7 @@ export default {
                 </Column>
                 <Column header="Options" style="width:200px" alignFrozen="right" :frozen="optionsFrozen">
                     <template #body>
-                        <Button type="Button" icon="pi pi-check" label="Edit Item" class="p-mr-2" style="width:100%"></Button>
+                        <Button type="Button" icon="pi pi-check" label="Edit Item" class="mr-2" style="width:100%"></Button>
                     </template>
                 </Column>
             </TreeTable>
@@ -386,7 +386,7 @@ export default {
                     </p-column>
                     <p-column header="Options" footer="Options" style="width:300px">
                         <template #body>
-                            <p-button type="Button" icon="pi pi-check" label="Edit" class="p-mr-2"></p-button>
+                            <p-button type="Button" icon="pi pi-check" label="Edit" class="mr-2"></p-button>
                             <p-button type="Button" icon="pi pi-check" label="Delete" class="p-button-warning"></p-button>
                         </template>
                     </p-column>
@@ -397,7 +397,7 @@ export default {
                 <h5>Frozen Columns</h5>
                 <p-togglebutton v-model="optionsFrozen" on-icon="pi pi-lock" off-icon="pi pi-lock-open" on-label="Unfreeze Options" off-label="Freeze Options" style="width: 12rem"></p-togglebutton>
 
-                <p-treetable :value="nodes" :scrollable="true" scroll-height="400px" scroll-direction="both" class="p-mt-3">
+                <p-treetable :value="nodes" :scrollable="true" scroll-height="400px" scroll-direction="both" class="mt-3">
                     <p-column field="name" header="Name" :expander="true" style="width:300px" frozen></p-column>
                     <p-column header="Key" style="width:300px">
                         <template #body="{node}">
@@ -413,7 +413,7 @@ export default {
                     </p-column>
                     <p-column header="Options" style="width:200px" alignFrozen="right" :frozen="optionsFrozen">
                         <template #body>
-                            <p-button type="Button" icon="pi pi-check" label="Edit Item" class="p-mr-2" style="width:100%"></p-button>
+                            <p-button type="Button" icon="pi pi-check" label="Edit Item" class="mr-2" style="width:100%"></p-button>
                         </template>
                     </p-column>
                 </p-treetable>
diff --git a/src/views/treetable/TreeTableSortDemo.vue b/src/views/treetable/TreeTableSortDemo.vue
index d41faa1a6..07eb836cf 100755
--- a/src/views/treetable/TreeTableSortDemo.vue
+++ b/src/views/treetable/TreeTableSortDemo.vue
@@ -3,7 +3,7 @@
         <div class="content-section introduction">
             <div class="feature-intro">
                 <h1>TreeTable <span>Sort</span></h1>
-               <p>TreeTable supports both single column and multiple column sorting..</p>
+                <p>TreeTable supports both single column and multiple column sorting..</p>
             </div>
             <AppDemoActions />
         </div>
diff --git a/src/views/treetable/TreeTableTemplatingDemo.vue b/src/views/treetable/TreeTableTemplatingDemo.vue
index 25406eca1..c76587ff2 100755
--- a/src/views/treetable/TreeTableTemplatingDemo.vue
+++ b/src/views/treetable/TreeTableTemplatingDemo.vue
@@ -17,7 +17,7 @@
                     <Column field="name" header="Name" :expander="true"></Column>
                     <Column field="size" header="Size"></Column>
                     <Column field="type" header="Type"></Column>
-                    <Column headerStyle="width: 10rem" headerClass="p-text-center" bodyClass="p-text-center">
+                    <Column headerStyle="width: 10rem" headerClass="text-center" bodyClass="text-center">
                         <template #header>
                             <Button type="button" icon="pi pi-cog"></Button>
                         </template>
@@ -60,7 +60,7 @@ export default {
             <Column field="name" header="Name" :expander="true"></Column>
             <Column field="size" header="Size"></Column>
             <Column field="type" header="Type"></Column>
-            <Column headerStyle="width: 10rem" headerClass="p-text-center" bodyClass="p-text-center">
+            <Column headerStyle="width: 10rem" headerClass="text-center" bodyClass="text-center">
                 <template #header>
                     <Button type="button" icon="pi pi-cog"></Button>
                 </template>
@@ -110,7 +110,7 @@ export default {
             <Column field="name" header="Name" :expander="true"></Column>
             <Column field="size" header="Size"></Column>
             <Column field="type" header="Type"></Column>
-            <Column headerStyle="width: 10rem" headerClass="p-text-center" bodyClass="p-text-center">
+            <Column headerStyle="width: 10rem" headerClass="text-center" bodyClass="text-center">
                 <template #header>
                     <Button type="button" icon="pi pi-cog"></Button>
                 </template>
@@ -160,7 +160,7 @@ export default {
                 <p-column field="name" header="Name" :expander="true"></p-column>
                 <p-column field="size" header="Size"></p-column>
                 <p-column field="type" header="Type"></p-column>
-                <p-column header-style="width: 10rem" header-class="p-text-center" body-class="p-text-center">
+                <p-column header-style="width: 10rem" header-class="text-center" body-class="text-center">
                     <template #header>
                         <p-button type="button" icon="pi pi-cog"></p-button>
                     </template>
diff --git a/src/views/tristatecheckbox/TriStateCheckboxDemo.vue b/src/views/tristatecheckbox/TriStateCheckboxDemo.vue
index c76198b12..7dbd27c74 100755
--- a/src/views/tristatecheckbox/TriStateCheckboxDemo.vue
+++ b/src/views/tristatecheckbox/TriStateCheckboxDemo.vue
@@ -10,7 +10,7 @@
 
         <div class="content-section implementation">
             <div class="card">
-                <div class="p-field-checkbox p-m-0">
+                <div class="field-checkbox m-0">
                     <TriStateCheckbox v-model="value" />
                     <label>{{value == null ? 'null' : value}}</label>
                 </div>
diff --git a/src/views/tristatecheckbox/TriStateCheckboxDoc.vue b/src/views/tristatecheckbox/TriStateCheckboxDoc.vue
index faab0b5df..d8db28d82 100755
--- a/src/views/tristatecheckbox/TriStateCheckboxDoc.vue
+++ b/src/views/tristatecheckbox/TriStateCheckboxDoc.vue
@@ -104,7 +104,7 @@ export default {
 					content: `
 <template>
     <div>
-        <div class="p-field-checkbox p-m-0">
+        <div class="field-checkbox m-0">
             <TriStateCheckbox v-model="value" />
             <label>{{value == null ? 'null' : value}}</label>
         </div>
@@ -127,7 +127,7 @@ export default {
 					content: `
 <template>
     <div>
-        <div class="p-field-checkbox p-m-0">
+        <div class="field-checkbox m-0">
             <TriStateCheckbox v-model="value" />
             <label>{{value == null ? 'null' : value}}</label>
         </div>
@@ -151,7 +151,7 @@ export default {
                     tabName: 'Browser Source',
                     imports: `<script src="https://unpkg.com/primevue@^3/tristatecheckbox/tristatecheckbox.min.js"><\\/script>`,
 					content: `<div id="app">
-            <div class="p-field-checkbox p-m-0">
+            <div class="field-checkbox m-0">
                 <p-tristatecheckbox v-model="value"></p-tristatecheckbox>
                 <label>{{value == null ? 'null' : value}}</label>
             </div>
diff --git a/src/views/validation/VuelidateFormDemo.vue b/src/views/validation/VuelidateFormDemo.vue
index a3253c673..34d7a0466 100644
--- a/src/views/validation/VuelidateFormDemo.vue
+++ b/src/views/validation/VuelidateFormDemo.vue
@@ -10,7 +10,7 @@
 
         <div class="content-section implementation form-demo">
             <Dialog v-model:visible="showMessage" :breakpoints="{ '960px': '80vw' }" :style="{ width: '30vw' }" position="top">
-                <div class="p-d-flex p-ai-center p-dir-col p-pt-6 p-px-3">
+                <div class="flex align-items-center flex-column pt-6 px-3">
                     <i class="pi pi-check-circle" :style="{fontSize: '5rem', color: 'var(--green-500)' }"></i>
                     <h5>Registration Successful!</h5>
                     <p :style="{lineHeight: 1.5, textIndent: '1rem'}">
@@ -18,24 +18,24 @@
                     </p>
                 </div>
                 <template #footer>
-                    <div class="p-d-flex p-jc-center">
+                    <div class="flex justify-content-center">
                         <Button label="OK" @click="toggleDialog" class="p-button-text" />
                     </div>
                 </template>
             </Dialog>
 
-            <div class="p-d-flex p-jc-center">
+            <div class="flex justify-content-center">
                 <div class="card">
-                    <h5 class="p-text-center">Register</h5>
+                    <h5 class="text-center">Register</h5>
                     <form @submit.prevent="handleSubmit(!v$.$invalid)" class="p-fluid">
-                        <div class="p-field">
+                        <div class="field">
                             <div class="p-float-label">
                                 <InputText id="name" v-model="v$.name.$model" :class="{'p-invalid':v$.name.$invalid && submitted}" />
                                 <label for="name" :class="{'p-error':v$.name.$invalid && submitted}">Name*</label>
                             </div>
                             <small v-if="(v$.name.$invalid && submitted) || v$.name.$pending.$response" class="p-error">{{v$.name.required.$message.replace('Value', 'Name')}}</small>
                         </div>
-                        <div class="p-field">
+                        <div class="field">
                             <div class="p-float-label p-input-icon-right">
                                 <i class="pi pi-envelope" />
                                 <InputText id="email" v-model="v$.email.$model" :class="{'p-invalid':v$.email.$invalid && submitted}" aria-describedby="email-error"/>
@@ -48,7 +48,7 @@
                             </span>
                             <small v-else-if="(v$.email.$invalid && submitted) || v$.email.$pending.$response" class="p-error">{{v$.email.required.$message.replace('Value', 'Email')}}</small>
                         </div>
-                        <div class="p-field">
+                        <div class="field">
                             <div class="p-float-label">
                                 <Password id="password" v-model="v$.password.$model" :class="{'p-invalid':v$.password.$invalid && submitted}" toggleMask>
                                     <template #header>
@@ -57,8 +57,8 @@
                                     <template #footer="sp">
                                         {{sp.level}}
                                         <Divider />
-                                        <p class="p-mt-2">Suggestions</p>
-                                        <ul class="p-pl-2 p-ml-2 p-mt-0" style="line-height: 1.5">
+                                        <p class="mt-2">Suggestions</p>
+                                        <ul class="pl-2 ml-2 mt-0" style="line-height: 1.5">
                                             <li>At least one lowercase</li>
                                             <li>At least one uppercase</li>
                                             <li>At least one numeric</li>
@@ -70,23 +70,23 @@
                             </div>
                             <small v-if="(v$.password.$invalid && submitted) || v$.password.$pending.$response" class="p-error">{{v$.password.required.$message.replace('Value', 'Password')}}</small>
                         </div>
-                        <div class="p-field">
+                        <div class="field">
                             <div class="p-float-label">
                                 <Calendar id="date" v-model="date" :showIcon="true" />
                                 <label for="date">Birthday</label>
                             </div>
                         </div>
-                        <div class="p-field">
+                        <div class="field">
                             <div class="p-float-label">
                                 <Dropdown id="country" v-model="country" :options="countries" optionLabel="name" />
                                 <label for="country">Country</label>
                             </div>
                         </div>
-                        <div class="p-field-checkbox">
+                        <div class="field-checkbox">
                             <Checkbox id="accept" name="accept" value="Accept" v-model="v$.accept.$model" :class="{'p-invalid':v$.accept.$invalid && submitted}" />
                             <label for="accept" :class="{'p-error': v$.accept.$invalid && submitted}">I agree to the terms and conditions*</label>
                         </div>
-                        <Button type="submit" label="Submit" class="p-mt-2" />
+                        <Button type="submit" label="Submit" class="mt-2" />
                     </form>
                 </div>
             </div>
@@ -123,7 +123,7 @@ export default {
 <template>
     <div class="form-demo">
         <Dialog v-model:visible="showMessage" :breakpoints="{ '960px': '80vw' }" :style="{ width: '30vw' }" position="top">
-            <div class="p-d-flex p-ai-center p-dir-col p-pt-6 p-px-3">
+            <div class="flex align-items-center flex-column pt-6 px-3">
                 <i class="pi pi-check-circle" :style="{fontSize: '5rem', color: 'var(--green-500)' }"></i>
                 <h5>Registration Successful!</h5>
                 <p :style="{lineHeight: 1.5, textIndent: '1rem'}">
@@ -131,24 +131,24 @@ export default {
                 </p>
             </div>
             <template #footer>
-                <div class="p-d-flex p-jc-center">
+                <div class="flex justify-content-center">
                     <Button label="OK" @click="toggleDialog" class="p-button-text" />
                 </div>
             </template>
         </Dialog>
 
-        <div class="p-d-flex p-jc-center">
+        <div class="flex justify-content-center">
             <div class="card">
-                <h5 class="p-text-center">Register</h5>
+                <h5 class="text-center">Register</h5>
                 <form @submit.prevent="handleSubmit(!v$.$invalid)" class="p-fluid">
-                    <div class="p-field">
+                    <div class="field">
                         <div class="p-float-label">
                             <InputText id="name" v-model="v$.name.$model" :class="{'p-invalid':v$.name.$invalid && submitted}" />
                             <label for="name" :class="{'p-error':v$.name.$invalid && submitted}">Name*</label>
                         </div>
                         <small v-if="(v$.name.$invalid && submitted) || v$.name.$pending.$response" class="p-error">{{v$.name.required.$message.replace('Value', 'Name')}}</small>
                     </div>
-                    <div class="p-field">
+                    <div class="field">
                         <div class="p-float-label p-input-icon-right">
                             <i class="pi pi-envelope" />
                             <InputText id="email" v-model="v$.email.$model" :class="{'p-invalid':v$.email.$invalid && submitted}" aria-describedby="email-error"/>
@@ -161,7 +161,7 @@ export default {
                         </span>
                         <small v-else-if="(v$.email.$invalid && submitted) || v$.email.$pending.$response" class="p-error">{{v$.email.required.$message.replace('Value', 'Email')}}</small>
                     </div>
-                    <div class="p-field">
+                    <div class="field">
                         <div class="p-float-label">
                             <Password id="password" v-model="v$.password.$model" :class="{'p-invalid':v$.password.$invalid && submitted}" toggleMask>
                                 <template #header>
@@ -170,8 +170,8 @@ export default {
                                 <template #footer="sp">
                                     {{sp.level}}
                                     <Divider />
-                                    <p class="p-mt-2">Suggestions</p>
-                                    <ul class="p-pl-2 p-ml-2 p-mt-0" style="line-height: 1.5">
+                                    <p class="mt-2">Suggestions</p>
+                                    <ul class="pl-2 ml-2 mt-0" style="line-height: 1.5">
                                         <li>At least one lowercase</li>
                                         <li>At least one uppercase</li>
                                         <li>At least one numeric</li>
@@ -183,23 +183,23 @@ export default {
                         </div>
                         <small v-if="(v$.password.$invalid && submitted) || v$.password.$pending.$response" class="p-error">{{v$.password.required.$message.replace('Value', 'Password')}}</small>
                     </div>
-                    <div class="p-field">
+                    <div class="field">
                         <div class="p-float-label">
                             <Calendar id="date" v-model="date" :showIcon="true" />
                             <label for="date">Birthday</label>
                         </div>
                     </div>
-                    <div class="p-field">
+                    <div class="field">
                         <div class="p-float-label">
                             <Dropdown id="country" v-model="country" :options="countries" optionLabel="name" />
                             <label for="country">Country</label>
                         </div>
                     </div>
-                    <div class="p-field-checkbox">
+                    <div class="field-checkbox">
                         <Checkbox id="accept" name="accept" value="Accept" v-model="v$.accept.$model" :class="{'p-invalid':v$.accept.$invalid && submitted}" />
                         <label for="accept" :class="{'p-error': v$.accept.$invalid && submitted}">I agree to the terms and conditions*</label>
                     </div>
-                    <Button type="submit" label="Submit" class="p-mt-2" />
+                    <Button type="submit" label="Submit" class="mt-2" />
                 </form>
             </div>
         </div>
@@ -289,7 +289,7 @@ export default {
             margin-top: 2rem;
         }
 
-        .p-field {
+        .field {
             margin-bottom: 1.5rem;
         }
     }
@@ -310,7 +310,7 @@ export default {
 <template>
     <div class="form-demo">
         <Dialog v-model:visible="showMessage" :breakpoints="{ '960px': '80vw' }" :style="{ width: '30vw' }" position="top">
-            <div class="p-d-flex p-ai-center p-dir-col p-pt-6 p-px-3">
+            <div class="flex align-items-center flex-column pt-6 px-3">
                 <i class="pi pi-check-circle" :style="{fontSize: '5rem', color: 'var(--green-500)' }"></i>
                 <h5>Registration Successful!</h5>
                 <p :style="{lineHeight: 1.5, textIndent: '1rem'}">
@@ -318,24 +318,24 @@ export default {
                 </p>
             </div>
             <template #footer>
-                <div class="p-d-flex p-jc-center">
+                <div class="flex justify-content-center">
                     <Button label="OK" @click="toggleDialog" class="p-button-text" />
                 </div>
             </template>
         </Dialog>
 
-        <div class="p-d-flex p-jc-center">
+        <div class="flex justify-content-center">
             <div class="card">
-                <h5 class="p-text-center">Register</h5>
+                <h5 class="text-center">Register</h5>
                 <form @submit.prevent="handleSubmit(!v$.$invalid)" class="p-fluid">
-                    <div class="p-field">
+                    <div class="field">
                         <div class="p-float-label">
                             <InputText id="name" v-model="v$.name.$model" :class="{'p-invalid':v$.name.$invalid && submitted}" />
                             <label for="name" :class="{'p-error':v$.name.$invalid && submitted}">Name*</label>
                         </div>
                         <small v-if="(v$.name.$invalid && submitted) || v$.name.$pending.$response" class="p-error">{{v$.name.required.$message.replace('Value', 'Name')}}</small>
                     </div>
-                    <div class="p-field">
+                    <div class="field">
                         <div class="p-float-label p-input-icon-right">
                             <i class="pi pi-envelope" />
                             <InputText id="email" v-model="v$.email.$model" :class="{'p-invalid':v$.email.$invalid && submitted}" aria-describedby="email-error"/>
@@ -348,7 +348,7 @@ export default {
                         </span>
                         <small v-else-if="(v$.email.$invalid && submitted) || v$.email.$pending.$response" class="p-error">{{v$.email.required.$message.replace('Value', 'Email')}}</small>
                     </div>
-                    <div class="p-field">
+                    <div class="field">
                         <div class="p-float-label">
                             <Password id="password" v-model="v$.password.$model" :class="{'p-invalid':v$.password.$invalid && submitted}" toggleMask>
                                 <template #header>
@@ -357,8 +357,8 @@ export default {
                                 <template #footer="sp">
                                     {{sp.level}}
                                     <Divider />
-                                    <p class="p-mt-2">Suggestions</p>
-                                    <ul class="p-pl-2 p-ml-2 p-mt-0" style="line-height: 1.5">
+                                    <p class="mt-2">Suggestions</p>
+                                    <ul class="pl-2 ml-2 mt-0" style="line-height: 1.5">
                                         <li>At least one lowercase</li>
                                         <li>At least one uppercase</li>
                                         <li>At least one numeric</li>
@@ -370,23 +370,23 @@ export default {
                         </div>
                         <small v-if="(v$.password.$invalid && submitted) || v$.password.$pending.$response" class="p-error">{{v$.password.required.$message.replace('Value', 'Password')}}</small>
                     </div>
-                    <div class="p-field">
+                    <div class="field">
                         <div class="p-float-label">
                             <Calendar id="date" v-model="date" :showIcon="true" />
                             <label for="date">Birthday</label>
                         </div>
                     </div>
-                    <div class="p-field">
+                    <div class="field">
                         <div class="p-float-label">
                             <Dropdown id="country" v-model="country" :options="countries" optionLabel="name" />
                             <label for="country">Country</label>
                         </div>
                     </div>
-                    <div class="p-field-checkbox">
+                    <div class="field-checkbox">
                         <Checkbox id="accept" name="accept" value="Accept" v-model="v$.accept.$model" :class="{'p-invalid':v$.accept.$invalid && submitted}" />
                         <label for="accept" :class="{'p-error': v$.accept.$invalid && submitted}">I agree to the terms and conditions*</label>
                     </div>
-                    <Button type="submit" label="Submit" class="p-mt-2" />
+                    <Button type="submit" label="Submit" class="mt-2" />
                 </form>
             </div>
         </div>
@@ -468,7 +468,7 @@ export default {
             margin-top: 2rem;
         }
 
-        .p-field {
+        .field {
             margin-bottom: 1.5rem;
         }
     }
@@ -549,7 +549,7 @@ export default {
             margin-top: 2rem;
         }
 
-        .p-field {
+        .field {
             margin-bottom: 1.5rem;
         }
     }
diff --git a/src/views/virtualscroller/VirtualScrollerDemo.vue b/src/views/virtualscroller/VirtualScrollerDemo.vue
index 9681a2252..fcdd7d33a 100644
--- a/src/views/virtualscroller/VirtualScrollerDemo.vue
+++ b/src/views/virtualscroller/VirtualScrollerDemo.vue
@@ -10,31 +10,31 @@
 
         <div class="content-section implementation virtualscroller-demo">
             <div class="card">
-                <h5 class="p-mb-0">Basic</h5>
-                <div class="p-d-flex p-ai-center p-flex-wrap">
-                    <div class="p-d-flex p-dir-col p-mr-3 p-mt-3">
+                <h5 class="mb-0">Basic</h5>
+                <div class="flex align-items-center flex-wrap">
+                    <div class="flex flex-column mr-3 mt-3">
                         <h6>Vertical</h6>
                         <VirtualScroller :items="basicItems" :itemSize="50">
                             <template v-slot:item="{ item, options }">
-                                <div :class="['scroll-item p-p-2', {'odd': options.odd}]" style="height: 50px">{{ item }}</div>
+                                <div :class="['scroll-item p-2', {'odd': options.odd}]" style="height: 50px">{{ item }}</div>
                             </template>
                         </VirtualScroller>
                     </div>
 
-                    <div class="p-d-flex p-dir-col p-mr-3 p-mt-3">
+                    <div class="flex flex-column mr-3 mt-3">
                         <h6>Horizontal</h6>
                         <VirtualScroller :items="basicItems" :itemSize="50" orientation="horizontal">
                             <template v-slot:item="{ item, options }">
-                                <div :class="['scroll-item p-p-2', {'odd': options.odd}]" style="width: 50px">{{ item }}</div>
+                                <div :class="['scroll-item p-2', {'odd': options.odd}]" style="width: 50px">{{ item }}</div>
                             </template>
                         </VirtualScroller>
                     </div>
 
-                    <div class="p-d-flex p-dir-col p-mr-3 p-mt-3">
+                    <div class="flex flex-column mr-3 mt-3">
                         <h6>Both</h6>
                         <VirtualScroller :items="multiItems" :itemSize="[50, 100]" orientation="both">
                             <template v-slot:item="{ item, options }">
-                                <div :class="['scroll-item p-p-2', {'odd': options.odd}]" style="height: 50px" >
+                                <div :class="['scroll-item p-2', {'odd': options.odd}]" style="height: 50px" >
                                     <template v-for="(el, index) of item" :key="index">
                                         <div style="width: 100px">{{ el }}</div>
                                     </template>
@@ -46,31 +46,31 @@
             </div>
 
             <div class="card">
-                <h5 class="p-mb-0">Scroll Delay</h5>
-                <div class="p-d-flex p-ai-center p-flex-wrap">
-                    <div class="p-d-flex p-dir-col p-mr-3 p-mt-3">
+                <h5 class="mb-0">Scroll Delay</h5>
+                <div class="flex align-items-center flex-wrap">
+                    <div class="flex flex-column mr-3 mt-3">
                         <h6>0ms Delay</h6>
                         <VirtualScroller :items="basicItems" :itemSize="50">
                             <template v-slot:item="{ item, options }">
-                                <div :class="['scroll-item p-p-2', {'odd': options.odd}]" style="height: 50px">{{ item }}</div>
+                                <div :class="['scroll-item p-2', {'odd': options.odd}]" style="height: 50px">{{ item }}</div>
                             </template>
                         </VirtualScroller>
                     </div>
 
-                    <div class="p-d-flex p-dir-col p-mr-3 p-mt-3">
+                    <div class="flex flex-column mr-3 mt-3">
                         <h6>150ms Delay</h6>
                         <VirtualScroller :items="basicItems" :itemSize="50" :delay="150">
                             <template v-slot:item="{ item, options }">
-                                <div :class="['scroll-item p-p-2', {'odd': options.odd}]" style="height: 50px">{{ item }}</div>
+                                <div :class="['scroll-item p-2', {'odd': options.odd}]" style="height: 50px">{{ item }}</div>
                             </template>
                         </VirtualScroller>
                     </div>
 
-                    <div class="p-d-flex p-dir-col p-mr-3 p-mt-3">
+                    <div class="flex flex-column mr-3 mt-3">
                         <h6>250ms Delay</h6>
                         <VirtualScroller :items="basicItems" :itemSize="50" :delay="250">
                             <template v-slot:item="{ item, options }">
-                                <div :class="['scroll-item p-p-2', {'odd': options.odd}]" style="height: 50px">{{ item }}</div>
+                                <div :class="['scroll-item p-2', {'odd': options.odd}]" style="height: 50px">{{ item }}</div>
                             </template>
                         </VirtualScroller>
                     </div>
@@ -78,25 +78,25 @@
             </div>
 
             <div class="card">
-                <h5 class="p-mb-0">Loading</h5>
-                <div class="p-d-flex p-ai-center p-flex-wrap">
-                    <div class="p-d-flex p-dir-col p-mr-3 p-mt-3">
+                <h5 class="mb-0">Loading</h5>
+                <div class="flex align-items-center flex-wrap">
+                    <div class="flex flex-column mr-3 mt-3">
                         <h6>Basic</h6>
                         <VirtualScroller :items="basicItems" :itemSize="50" showLoader :delay="250">
                             <template v-slot:item="{ item, options }">
-                                <div :class="['scroll-item p-p-2', {'odd': options.odd}]" style="height: 50px">{{ item }}</div>
+                                <div :class="['scroll-item p-2', {'odd': options.odd}]" style="height: 50px">{{ item }}</div>
                             </template>
                         </VirtualScroller>
                     </div>
 
-                    <div class="p-d-flex p-dir-col p-mr-3 p-mt-3">
+                    <div class="flex flex-column mr-3 mt-3">
                         <h6>Templating</h6>
                         <VirtualScroller class="custom-loading" :items="basicItems" :itemSize="50" showLoader :delay="250">
                             <template v-slot:item="{ item, options }">
-                                <div :class="['scroll-item p-p-2', {'odd': options.odd}]" style="height: 50px">{{ item }}</div>
+                                <div :class="['scroll-item p-2', {'odd': options.odd}]" style="height: 50px">{{ item }}</div>
                             </template>
                             <template v-slot:loader="{ options }">
-                                <div :class="['scroll-item p-p-2', {'odd': options.odd}]" style="height: 50px" >
+                                <div :class="['scroll-item p-2', {'odd': options.odd}]" style="height: 50px" >
                                     <Skeleton :width="options.even ? '60%' : '50%'" height="1.3rem" />
                                 </div>
                             </template>
@@ -106,12 +106,12 @@
             </div>
 
             <div class="card">
-                <h5 class="p-mb-0">Lazy</h5>
-                <div class="p-d-flex p-ai-center p-flex-wrap">
-                    <div class="p-d-flex p-dir-col p-mr-3 p-mt-3">
+                <h5 class="mb-0">Lazy</h5>
+                <div class="flex align-items-center flex-wrap">
+                    <div class="flex flex-column mr-3 mt-3">
                         <VirtualScroller :items="lazyItems" :itemSize="50" showLoader :delay="250" :loading="lazyLoading" lazy @lazy-load="onLazyLoad">
                             <template v-slot:item="{ item, options }">
-                                <div :class="['scroll-item p-p-2', {'odd': options.odd}]" style="height: 50px">{{ item }}</div>
+                                <div :class="['scroll-item p-2', {'odd': options.odd}]" style="height: 50px">{{ item }}</div>
                             </template>
                         </VirtualScroller>
                     </div>
@@ -119,30 +119,30 @@
             </div>
 
             <div class="card">
-                <h5 class="p-mb-0">Template</h5>
-                <div class="p-d-flex p-ai-center p-flex-wrap">
-                    <div class="p-d-flex p-dir-col p-mr-3 p-mt-3">
+                <h5 class="mb-0">Template</h5>
+                <div class="flex align-items-center flex-wrap">
+                    <div class="flex flex-column mr-3 mt-3">
                         <VirtualScroller class="custom-loading" :items="basicItems" :itemSize="25 * 7" showLoader :delay="250">
                             <template v-slot:item="{ item, options }">
                                 <div :class="['custom-scroll-item scroll-item', {'odd': options.odd}]">
-                                    <div class="p-d-flex p-ai-center p-px-2" style="height: 25px">{{`Item: ${item}`}}</div>
-                                    <div class="p-d-flex p-ai-center p-px-2" style="height: 25px">{{`Index: ${options.index}`}}</div>
-                                    <div class="p-d-flex p-ai-center p-px-2" style="height: 25px">{{`Count: ${options.count}`}}</div>
-                                    <div class="p-d-flex p-ai-center p-px-2" style="height: 25px">{{`First: ${options.first}`}}</div>
-                                    <div class="p-d-flex p-ai-center p-px-2" style="height: 25px">{{`Last: ${options.last}`}}</div>
-                                    <div class="p-d-flex p-ai-center p-px-2" style="height: 25px">{{`Even: ${options.even}`}}</div>
-                                    <div class="p-d-flex p-ai-center p-px-2" style="height: 25px">{{`Odd: ${options.odd}`}}</div>
+                                    <div class="flex align-items-center px-2" style="height: 25px">{{`Item: ${item}`}}</div>
+                                    <div class="flex align-items-center px-2" style="height: 25px">{{`Index: ${options.index}`}}</div>
+                                    <div class="flex align-items-center px-2" style="height: 25px">{{`Count: ${options.count}`}}</div>
+                                    <div class="flex align-items-center px-2" style="height: 25px">{{`First: ${options.first}`}}</div>
+                                    <div class="flex align-items-center px-2" style="height: 25px">{{`Last: ${options.last}`}}</div>
+                                    <div class="flex align-items-center px-2" style="height: 25px">{{`Even: ${options.even}`}}</div>
+                                    <div class="flex align-items-center px-2" style="height: 25px">{{`Odd: ${options.odd}`}}</div>
                                 </div>
                             </template>
                             <template v-slot:loader="{ options }">
                                 <div :class="['custom-scroll-item scroll-item', {'odd': options.odd}]">
-                                    <div class="p-d-flex p-ai-center p-px-2" style="height: 25px"><Skeleton width="60%" height="1.2rem" /></div>
-                                    <div class="p-d-flex p-ai-center p-px-2" style="height: 25px"><Skeleton width="50%" height="1.2rem" /></div>
-                                    <div class="p-d-flex p-ai-center p-px-2" style="height: 25px"><Skeleton width="60%" height="1.2rem" /></div>
-                                    <div class="p-d-flex p-ai-center p-px-2" style="height: 25px"><Skeleton width="50%" height="1.2rem" /></div>
-                                    <div class="p-d-flex p-ai-center p-px-2" style="height: 25px"><Skeleton width="60%" height="1.2rem" /></div>
-                                    <div class="p-d-flex p-ai-center p-px-2" style="height: 25px"><Skeleton width="50%" height="1.2rem" /></div>
-                                    <div class="p-d-flex p-ai-center p-px-2" style="height: 25px"><Skeleton width="60%" height="1.2rem" /></div>
+                                    <div class="flex align-items-center px-2" style="height: 25px"><Skeleton width="60%" height="1.2rem" /></div>
+                                    <div class="flex align-items-center px-2" style="height: 25px"><Skeleton width="50%" height="1.2rem" /></div>
+                                    <div class="flex align-items-center px-2" style="height: 25px"><Skeleton width="60%" height="1.2rem" /></div>
+                                    <div class="flex align-items-center px-2" style="height: 25px"><Skeleton width="50%" height="1.2rem" /></div>
+                                    <div class="flex align-items-center px-2" style="height: 25px"><Skeleton width="60%" height="1.2rem" /></div>
+                                    <div class="flex align-items-center px-2" style="height: 25px"><Skeleton width="50%" height="1.2rem" /></div>
+                                    <div class="flex align-items-center px-2" style="height: 25px"><Skeleton width="60%" height="1.2rem" /></div>
                                 </div>
                             </template>
                         </VirtualScroller>
diff --git a/src/views/virtualscroller/VirtualScrollerDoc.vue b/src/views/virtualscroller/VirtualScrollerDoc.vue
index 75c7c0b6b..0d0c41404 100644
--- a/src/views/virtualscroller/VirtualScrollerDoc.vue
+++ b/src/views/virtualscroller/VirtualScrollerDoc.vue
@@ -21,7 +21,7 @@ import VirtualScroller from 'primevue/virtualscroller';
 <pre v-code><code><template v-pre>
 &lt;VirtualScroller :items="basicItems" :itemSize="50"&gt;
     &lt;template v-slot:item="{ item, options }"&gt;
-        &lt;div :class="['scroll-item p-p-2', {'odd': options.odd}]" style="height: 50px"&gt;{{ item }}&lt;/div&gt;
+        &lt;div :class="['scroll-item p-2', {'odd': options.odd}]" style="height: 50px"&gt;{{ item }}&lt;/div&gt;
     &lt;/template&gt;
 &lt;/VirtualScroller&gt;
 </template>
@@ -48,10 +48,10 @@ export default {
 <pre v-code><code><template v-pre>
 &lt;VirtualScroller :items="basicItems" :itemSize="50" showLoader :delay="250"&gt;
     &lt;template v-slot:item="{ item, options }"&gt;
-        &lt;div :class="['scroll-item p-p-2', {'odd': options.odd}]" style="height: 50px"&gt;{{ item }}&lt;/div&gt;
+        &lt;div :class="['scroll-item p-2', {'odd': options.odd}]" style="height: 50px"&gt;{{ item }}&lt;/div&gt;
     &lt;/template&gt;
     &lt;template v-slot:loader="{ options }"&gt;
-        &lt;div :class="['scroll-item p-p-2', {'odd': options.odd}]" style="height: 50px" &gt;
+        &lt;div :class="['scroll-item p-2', {'odd': options.odd}]" style="height: 50px" &gt;
             &lt;Skeleton :width="options.even ? '60%' : '50%'" height="1.3rem" /&gt;
         &lt;/div&gt;
     &lt;/template&gt;
@@ -65,7 +65,7 @@ export default {
 <pre v-code><code><template v-pre>
 &lt;VirtualScroller :items="lazyItems" :itemSize="50" showLoader :delay="250" :loading="lazyLoading" :lazy=true @lazy-load="onLazyLoad"&gt;
     &lt;template v-slot:item="{ item, options }"&gt;
-        &lt;div :class="['scroll-item p-p-2', {'odd': options.odd}]" style="height: 50px"&gt;{{ item }}&lt;/div&gt;
+        &lt;div :class="['scroll-item p-2', {'odd': options.odd}]" style="height: 50px"&gt;{{ item }}&lt;/div&gt;
     &lt;/template&gt;
 &lt;/VirtualScroller&gt;
 </template>
@@ -389,31 +389,31 @@ export default {
 <template>
     <div class="virtualscroller-demo">
         <div class="card">
-            <h5 class="p-mb-0">Basic</h5>
-            <div class="p-d-flex p-ai-center p-flex-wrap">
-                <div class="p-d-flex p-dir-col p-mr-3 p-mt-3">
+            <h5 class="mb-0">Basic</h5>
+            <div class="flex align-items-center flex-wrap">
+                <div class="flex flex-column mr-3 mt-3">
                     <h6>Vertical</h6>
                     <VirtualScroller :items="basicItems" :itemSize="50">
                         <template v-slot:item="{ item, options }">
-                            <div :class="['scroll-item p-p-2', {'odd': options.odd}]" style="height: 50px">{{ item }}</div>
+                            <div :class="['scroll-item p-2', {'odd': options.odd}]" style="height: 50px">{{ item }}</div>
                         </template>
                     </VirtualScroller>
                 </div>
 
-                <div class="p-d-flex p-dir-col p-mr-3 p-mt-3">
+                <div class="flex flex-column mr-3 mt-3">
                     <h6>Horizontal</h6>
                     <VirtualScroller :items="basicItems" :itemSize="50" orientation="horizontal">
                         <template v-slot:item="{ item, options }">
-                            <div :class="['scroll-item p-p-2', {'odd': options.odd}]" style="width: 50px">{{ item }}</div>
+                            <div :class="['scroll-item p-2', {'odd': options.odd}]" style="width: 50px">{{ item }}</div>
                         </template>
                     </VirtualScroller>
                 </div>
 
-                <div class="p-d-flex p-dir-col p-mr-3 p-mt-3">
+                <div class="flex flex-column mr-3 mt-3">
                     <h6>Both</h6>
                     <VirtualScroller :items="multiItems" :itemSize="[50, 100]" orientation="both">
                         <template v-slot:item="{ item, options }">
-                            <div :class="['scroll-item p-p-2', {'odd': options.odd}]" style="height: 50px" >
+                            <div :class="['scroll-item p-2', {'odd': options.odd}]" style="height: 50px" >
                                 <template v-for="(el, index) of item" :key="index">
                                     <div style="width: 100px">{{ el }}</div>
                                 </template>
@@ -425,31 +425,31 @@ export default {
         </div>
 
         <div class="card">
-            <h5 class="p-mb-0">Scroll Delay</h5>
-            <div class="p-d-flex p-ai-center p-flex-wrap">
-                <div class="p-d-flex p-dir-col p-mr-3 p-mt-3">
+            <h5 class="mb-0">Scroll Delay</h5>
+            <div class="flex align-items-center flex-wrap">
+                <div class="flex flex-column mr-3 mt-3">
                     <h6>0ms Delay</h6>
                     <VirtualScroller :items="basicItems" :itemSize="50">
                         <template v-slot:item="{ item, options }">
-                            <div :class="['scroll-item p-p-2', {'odd': options.odd}]" style="height: 50px">{{ item }}</div>
+                            <div :class="['scroll-item p-2', {'odd': options.odd}]" style="height: 50px">{{ item }}</div>
                         </template>
                     </VirtualScroller>
                 </div>
 
-                <div class="p-d-flex p-dir-col p-mr-3 p-mt-3">
+                <div class="flex flex-column mr-3 mt-3">
                     <h6>150ms Delay</h6>
                     <VirtualScroller :items="basicItems" :itemSize="50" :delay="150">
                         <template v-slot:item="{ item, options }">
-                            <div :class="['scroll-item p-p-2', {'odd': options.odd}]" style="height: 50px">{{ item }}</div>
+                            <div :class="['scroll-item p-2', {'odd': options.odd}]" style="height: 50px">{{ item }}</div>
                         </template>
                     </VirtualScroller>
                 </div>
 
-                <div class="p-d-flex p-dir-col p-mr-3 p-mt-3">
+                <div class="flex flex-column mr-3 mt-3">
                     <h6>250ms Delay</h6>
                     <VirtualScroller :items="basicItems" :itemSize="50" :delay="250">
                         <template v-slot:item="{ item, options }">
-                            <div :class="['scroll-item p-p-2', {'odd': options.odd}]" style="height: 50px">{{ item }}</div>
+                            <div :class="['scroll-item p-2', {'odd': options.odd}]" style="height: 50px">{{ item }}</div>
                         </template>
                     </VirtualScroller>
                 </div>
@@ -457,25 +457,25 @@ export default {
         </div>
 
         <div class="card">
-            <h5 class="p-mb-0">Loading</h5>
-            <div class="p-d-flex p-ai-center p-flex-wrap">
-                <div class="p-d-flex p-dir-col p-mr-3 p-mt-3">
+            <h5 class="mb-0">Loading</h5>
+            <div class="flex align-items-center flex-wrap">
+                <div class="flex flex-column mr-3 mt-3">
                     <h6>Basic</h6>
                     <VirtualScroller :items="basicItems" :itemSize="50" showLoader :delay="250">
                         <template v-slot:item="{ item, options }">
-                            <div :class="['scroll-item p-p-2', {'odd': options.odd}]" style="height: 50px">{{ item }}</div>
+                            <div :class="['scroll-item p-2', {'odd': options.odd}]" style="height: 50px">{{ item }}</div>
                         </template>
                     </VirtualScroller>
                 </div>
 
-                <div class="p-d-flex p-dir-col p-mr-3 p-mt-3">
+                <div class="flex flex-column mr-3 mt-3">
                     <h6>Templating</h6>
                     <VirtualScroller class="custom-loading" :items="basicItems" :itemSize="50" showLoader :delay="250">
                         <template v-slot:item="{ item, options }">
-                            <div :class="['scroll-item p-p-2', {'odd': options.odd}]" style="height: 50px">{{ item }}</div>
+                            <div :class="['scroll-item p-2', {'odd': options.odd}]" style="height: 50px">{{ item }}</div>
                         </template>
                         <template v-slot:loader="{ options }">
-                            <div :class="['scroll-item p-p-2', {'odd': options.odd}]" style="height: 50px" >
+                            <div :class="['scroll-item p-2', {'odd': options.odd}]" style="height: 50px" >
                                 <Skeleton :width="options.even ? '60%' : '50%'" height="1.3rem" />
                             </div>
                         </template>
@@ -485,12 +485,12 @@ export default {
         </div>
 
         <div class="card">
-            <h5 class="p-mb-0">Lazy</h5>
-            <div class="p-d-flex p-ai-center p-flex-wrap">
-                <div class="p-d-flex p-dir-col p-mr-3 p-mt-3">
+            <h5 class="mb-0">Lazy</h5>
+            <div class="flex align-items-center flex-wrap">
+                <div class="flex flex-column mr-3 mt-3">
                     <VirtualScroller :items="lazyItems" :itemSize="50" showLoader :delay="250" :loading="lazyLoading" :lazy=true @lazy-load="onLazyLoad">
                         <template v-slot:item="{ item, options }">
-                            <div :class="['scroll-item p-p-2', {'odd': options.odd}]" style="height: 50px">{{ item }}</div>
+                            <div :class="['scroll-item p-2', {'odd': options.odd}]" style="height: 50px">{{ item }}</div>
                         </template>
                     </VirtualScroller>
                 </div>
@@ -498,30 +498,30 @@ export default {
         </div>
 
         <div class="card">
-            <h5 class="p-mb-0">Template</h5>
-            <div class="p-d-flex p-ai-center p-flex-wrap">
-                <div class="p-d-flex p-dir-col p-mr-3 p-mt-3">
+            <h5 class="mb-0">Template</h5>
+            <div class="flex align-items-center flex-wrap">
+                <div class="flex flex-column mr-3 mt-3">
                     <VirtualScroller class="custom-loading" :items="basicItems" :itemSize="25 * 7" showLoader :delay="250">
                         <template v-slot:item="{ item, options }">
                             <div :class="['custom-scroll-item scroll-item', {'odd': options.odd}]">
-                                <div class="p-d-flex p-ai-center p-px-2" style="height: 25px">{{\`Item: \${item}\`}}</div>
-                                <div class="p-d-flex p-ai-center p-px-2" style="height: 25px">{{\`Index: \${options.index}\`}}</div>
-                                <div class="p-d-flex p-ai-center p-px-2" style="height: 25px">{{\`Count: \${options.count}\`}}</div>
-                                <div class="p-d-flex p-ai-center p-px-2" style="height: 25px">{{\`First: \${options.first}\`}}</div>
-                                <div class="p-d-flex p-ai-center p-px-2" style="height: 25px">{{\`Last: \${options.last}\`}}</div>
-                                <div class="p-d-flex p-ai-center p-px-2" style="height: 25px">{{\`Even: \${options.even}\`}}</div>
-                                <div class="p-d-flex p-ai-center p-px-2" style="height: 25px">{{\`Odd: \${options.odd}\`}}</div>
+                                <div class="flex align-items-center px-2" style="height: 25px">{{\`Item: \${item}\`}}</div>
+                                <div class="flex align-items-center px-2" style="height: 25px">{{\`Index: \${options.index}\`}}</div>
+                                <div class="flex align-items-center px-2" style="height: 25px">{{\`Count: \${options.count}\`}}</div>
+                                <div class="flex align-items-center px-2" style="height: 25px">{{\`First: \${options.first}\`}}</div>
+                                <div class="flex align-items-center px-2" style="height: 25px">{{\`Last: \${options.last}\`}}</div>
+                                <div class="flex align-items-center px-2" style="height: 25px">{{\`Even: \${options.even}\`}}</div>
+                                <div class="flex align-items-center px-2" style="height: 25px">{{\`Odd: \${options.odd}\`}}</div>
                             </div>
                         </template>
                         <template v-slot:loader="{ options }">
                             <div :class="['custom-scroll-item scroll-item', {'odd': options.odd}]">
-                                <div class="p-d-flex p-ai-center p-px-2" style="height: 25px"><Skeleton width="60%" height="1.2rem" /></div>
-                                <div class="p-d-flex p-ai-center p-px-2" style="height: 25px"><Skeleton width="50%" height="1.2rem" /></div>
-                                <div class="p-d-flex p-ai-center p-px-2" style="height: 25px"><Skeleton width="60%" height="1.2rem" /></div>
-                                <div class="p-d-flex p-ai-center p-px-2" style="height: 25px"><Skeleton width="50%" height="1.2rem" /></div>
-                                <div class="p-d-flex p-ai-center p-px-2" style="height: 25px"><Skeleton width="60%" height="1.2rem" /></div>
-                                <div class="p-d-flex p-ai-center p-px-2" style="height: 25px"><Skeleton width="50%" height="1.2rem" /></div>
-                                <div class="p-d-flex p-ai-center p-px-2" style="height: 25px"><Skeleton width="60%" height="1.2rem" /></div>
+                                <div class="flex align-items-center px-2" style="height: 25px"><Skeleton width="60%" height="1.2rem" /></div>
+                                <div class="flex align-items-center px-2" style="height: 25px"><Skeleton width="50%" height="1.2rem" /></div>
+                                <div class="flex align-items-center px-2" style="height: 25px"><Skeleton width="60%" height="1.2rem" /></div>
+                                <div class="flex align-items-center px-2" style="height: 25px"><Skeleton width="50%" height="1.2rem" /></div>
+                                <div class="flex align-items-center px-2" style="height: 25px"><Skeleton width="60%" height="1.2rem" /></div>
+                                <div class="flex align-items-center px-2" style="height: 25px"><Skeleton width="50%" height="1.2rem" /></div>
+                                <div class="flex align-items-center px-2" style="height: 25px"><Skeleton width="60%" height="1.2rem" /></div>
                             </div>
                         </template>
                     </VirtualScroller>
@@ -621,31 +621,31 @@ export default {
 <template>
     <div class="virtualscroller-demo">
         <div class="card">
-            <h5 class="p-mb-0">Basic</h5>
-            <div class="p-d-flex p-ai-center p-flex-wrap">
-                <div class="p-d-flex p-dir-col p-mr-3 p-mt-3">
+            <h5 class="mb-0">Basic</h5>
+            <div class="flex align-items-center flex-wrap">
+                <div class="flex flex-column mr-3 mt-3">
                     <h6>Vertical</h6>
                     <VirtualScroller :items="basicItems" :itemSize="50">
                         <template v-slot:item="{ item, options }">
-                            <div :class="['scroll-item p-p-2', {'odd': options.odd}]" style="height: 50px">{{ item }}</div>
+                            <div :class="['scroll-item p-2', {'odd': options.odd}]" style="height: 50px">{{ item }}</div>
                         </template>
                     </VirtualScroller>
                 </div>
 
-                <div class="p-d-flex p-dir-col p-mr-3 p-mt-3">
+                <div class="flex flex-column mr-3 mt-3">
                     <h6>Horizontal</h6>
                     <VirtualScroller :items="basicItems" :itemSize="50" orientation="horizontal">
                         <template v-slot:item="{ item, options }">
-                            <div :class="['scroll-item p-p-2', {'odd': options.odd}]" style="width: 50px">{{ item }}</div>
+                            <div :class="['scroll-item p-2', {'odd': options.odd}]" style="width: 50px">{{ item }}</div>
                         </template>
                     </VirtualScroller>
                 </div>
 
-                <div class="p-d-flex p-dir-col p-mr-3 p-mt-3">
+                <div class="flex flex-column mr-3 mt-3">
                     <h6>Both</h6>
                     <VirtualScroller :items="multiItems" :itemSize="[50, 100]" orientation="both">
                         <template v-slot:item="{ item, options }">
-                            <div :class="['scroll-item p-p-2', {'odd': options.odd}]" style="height: 50px" >
+                            <div :class="['scroll-item p-2', {'odd': options.odd}]" style="height: 50px" >
                                 <template v-for="(el, index) of item" :key="index">
                                     <div style="width: 100px">{{ el }}</div>
                                 </template>
@@ -657,31 +657,31 @@ export default {
         </div>
 
         <div class="card">
-            <h5 class="p-mb-0">Scroll Delay</h5>
-            <div class="p-d-flex p-ai-center p-flex-wrap">
-                <div class="p-d-flex p-dir-col p-mr-3 p-mt-3">
+            <h5 class="mb-0">Scroll Delay</h5>
+            <div class="flex align-items-center flex-wrap">
+                <div class="flex flex-column mr-3 mt-3">
                     <h6>0ms Delay</h6>
                     <VirtualScroller :items="basicItems" :itemSize="50">
                         <template v-slot:item="{ item, options }">
-                            <div :class="['scroll-item p-p-2', {'odd': options.odd}]" style="height: 50px">{{ item }}</div>
+                            <div :class="['scroll-item p-2', {'odd': options.odd}]" style="height: 50px">{{ item }}</div>
                         </template>
                     </VirtualScroller>
                 </div>
 
-                <div class="p-d-flex p-dir-col p-mr-3 p-mt-3">
+                <div class="flex flex-column mr-3 mt-3">
                     <h6>150ms Delay</h6>
                     <VirtualScroller :items="basicItems" :itemSize="50" :delay="150">
                         <template v-slot:item="{ item, options }">
-                            <div :class="['scroll-item p-p-2', {'odd': options.odd}]" style="height: 50px">{{ item }}</div>
+                            <div :class="['scroll-item p-2', {'odd': options.odd}]" style="height: 50px">{{ item }}</div>
                         </template>
                     </VirtualScroller>
                 </div>
 
-                <div class="p-d-flex p-dir-col p-mr-3 p-mt-3">
+                <div class="flex flex-column mr-3 mt-3">
                     <h6>250ms Delay</h6>
                     <VirtualScroller :items="basicItems" :itemSize="50" :delay="250">
                         <template v-slot:item="{ item, options }">
-                            <div :class="['scroll-item p-p-2', {'odd': options.odd}]" style="height: 50px">{{ item }}</div>
+                            <div :class="['scroll-item p-2', {'odd': options.odd}]" style="height: 50px">{{ item }}</div>
                         </template>
                     </VirtualScroller>
                 </div>
@@ -689,25 +689,25 @@ export default {
         </div>
 
         <div class="card">
-            <h5 class="p-mb-0">Loading</h5>
-            <div class="p-d-flex p-ai-center p-flex-wrap">
-                <div class="p-d-flex p-dir-col p-mr-3 p-mt-3">
+            <h5 class="mb-0">Loading</h5>
+            <div class="flex align-items-center flex-wrap">
+                <div class="flex flex-column mr-3 mt-3">
                     <h6>Basic</h6>
                     <VirtualScroller :items="basicItems" :itemSize="50" showLoader :delay="250">
                         <template v-slot:item="{ item, options }">
-                            <div :class="['scroll-item p-p-2', {'odd': options.odd}]" style="height: 50px">{{ item }}</div>
+                            <div :class="['scroll-item p-2', {'odd': options.odd}]" style="height: 50px">{{ item }}</div>
                         </template>
                     </VirtualScroller>
                 </div>
 
-                <div class="p-d-flex p-dir-col p-mr-3 p-mt-3">
+                <div class="flex flex-column mr-3 mt-3">
                     <h6>Templating</h6>
                     <VirtualScroller class="custom-loading" :items="basicItems" :itemSize="50" showLoader :delay="250">
                         <template v-slot:item="{ item, options }">
-                            <div :class="['scroll-item p-p-2', {'odd': options.odd}]" style="height: 50px">{{ item }}</div>
+                            <div :class="['scroll-item p-2', {'odd': options.odd}]" style="height: 50px">{{ item }}</div>
                         </template>
                         <template v-slot:loader="{ options }">
-                            <div :class="['scroll-item p-p-2', {'odd': options.odd}]" style="height: 50px" >
+                            <div :class="['scroll-item p-2', {'odd': options.odd}]" style="height: 50px" >
                                 <Skeleton :width="options.even ? '60%' : '50%'" height="1.3rem" />
                             </div>
                         </template>
@@ -717,12 +717,12 @@ export default {
         </div>
 
         <div class="card">
-            <h5 class="p-mb-0">Lazy</h5>
-            <div class="p-d-flex p-ai-center p-flex-wrap">
-                <div class="p-d-flex p-dir-col p-mr-3 p-mt-3">
+            <h5 class="mb-0">Lazy</h5>
+            <div class="flex align-items-center flex-wrap">
+                <div class="flex flex-column mr-3 mt-3">
                     <VirtualScroller :items="lazyItems" :itemSize="50" showLoader :delay="250" :loading="lazyLoading" :lazy=true @lazy-load="onLazyLoad">
                         <template v-slot:item="{ item, options }">
-                            <div :class="['scroll-item p-p-2', {'odd': options.odd}]" style="height: 50px">{{ item }}</div>
+                            <div :class="['scroll-item p-2', {'odd': options.odd}]" style="height: 50px">{{ item }}</div>
                         </template>
                     </VirtualScroller>
                 </div>
@@ -730,30 +730,30 @@ export default {
         </div>
 
         <div class="card">
-            <h5 class="p-mb-0">Template</h5>
-            <div class="p-d-flex p-ai-center p-flex-wrap">
-                <div class="p-d-flex p-dir-col p-mr-3 p-mt-3">
+            <h5 class="mb-0">Template</h5>
+            <div class="flex align-items-center flex-wrap">
+                <div class="flex flex-column mr-3 mt-3">
                     <VirtualScroller class="custom-loading" :items="basicItems" :itemSize="25 * 7" showLoader :delay="250">
                         <template v-slot:item="{ item, options }">
                             <div :class="['custom-scroll-item scroll-item', {'odd': options.odd}]">
-                                <div class="p-d-flex p-ai-center p-px-2" style="height: 25px">{{\`Item: \${item}\`}}</div>
-                                <div class="p-d-flex p-ai-center p-px-2" style="height: 25px">{{\`Index: \${options.index}\`}}</div>
-                                <div class="p-d-flex p-ai-center p-px-2" style="height: 25px">{{\`Count: \${options.count}\`}}</div>
-                                <div class="p-d-flex p-ai-center p-px-2" style="height: 25px">{{\`First: \${options.first}\`}}</div>
-                                <div class="p-d-flex p-ai-center p-px-2" style="height: 25px">{{\`Last: \${options.last}\`}}</div>
-                                <div class="p-d-flex p-ai-center p-px-2" style="height: 25px">{{\`Even: \${options.even}\`}}</div>
-                                <div class="p-d-flex p-ai-center p-px-2" style="height: 25px">{{\`Odd: \${options.odd}\`}}</div>
+                                <div class="flex align-items-center px-2" style="height: 25px">{{\`Item: \${item}\`}}</div>
+                                <div class="flex align-items-center px-2" style="height: 25px">{{\`Index: \${options.index}\`}}</div>
+                                <div class="flex align-items-center px-2" style="height: 25px">{{\`Count: \${options.count}\`}}</div>
+                                <div class="flex align-items-center px-2" style="height: 25px">{{\`First: \${options.first}\`}}</div>
+                                <div class="flex align-items-center px-2" style="height: 25px">{{\`Last: \${options.last}\`}}</div>
+                                <div class="flex align-items-center px-2" style="height: 25px">{{\`Even: \${options.even}\`}}</div>
+                                <div class="flex align-items-center px-2" style="height: 25px">{{\`Odd: \${options.odd}\`}}</div>
                             </div>
                         </template>
                         <template v-slot:loader="{ options }">
                             <div :class="['custom-scroll-item scroll-item', {'odd': options.odd}]">
-                                <div class="p-d-flex p-ai-center p-px-2" style="height: 25px"><Skeleton width="60%" height="1.2rem" /></div>
-                                <div class="p-d-flex p-ai-center p-px-2" style="height: 25px"><Skeleton width="50%" height="1.2rem" /></div>
-                                <div class="p-d-flex p-ai-center p-px-2" style="height: 25px"><Skeleton width="60%" height="1.2rem" /></div>
-                                <div class="p-d-flex p-ai-center p-px-2" style="height: 25px"><Skeleton width="50%" height="1.2rem" /></div>
-                                <div class="p-d-flex p-ai-center p-px-2" style="height: 25px"><Skeleton width="60%" height="1.2rem" /></div>
-                                <div class="p-d-flex p-ai-center p-px-2" style="height: 25px"><Skeleton width="50%" height="1.2rem" /></div>
-                                <div class="p-d-flex p-ai-center p-px-2" style="height: 25px"><Skeleton width="60%" height="1.2rem" /></div>
+                                <div class="flex align-items-center px-2" style="height: 25px"><Skeleton width="60%" height="1.2rem" /></div>
+                                <div class="flex align-items-center px-2" style="height: 25px"><Skeleton width="50%" height="1.2rem" /></div>
+                                <div class="flex align-items-center px-2" style="height: 25px"><Skeleton width="60%" height="1.2rem" /></div>
+                                <div class="flex align-items-center px-2" style="height: 25px"><Skeleton width="50%" height="1.2rem" /></div>
+                                <div class="flex align-items-center px-2" style="height: 25px"><Skeleton width="60%" height="1.2rem" /></div>
+                                <div class="flex align-items-center px-2" style="height: 25px"><Skeleton width="50%" height="1.2rem" /></div>
+                                <div class="flex align-items-center px-2" style="height: 25px"><Skeleton width="60%" height="1.2rem" /></div>
                             </div>
                         </template>
                     </VirtualScroller>
@@ -851,31 +851,31 @@ export default {
                     content: `<div id="app">
             <div class="virtualscroller-demo">
                 <div class="card">
-                    <h5 class="p-mb-0">Basic</h5>
-                    <div class="p-d-flex p-ai-center p-flex-wrap">
-                        <div class="p-d-flex p-dir-col p-mr-3 p-mt-3">
+                    <h5 class="mb-0">Basic</h5>
+                    <div class="flex align-items-center flex-wrap">
+                        <div class="flex flex-column mr-3 mt-3">
                             <h6>Vertical</h6>
                             <p-virtualscroller :items="basicItems" :item-size="50">
                                 <template v-slot:item="{ item, options }">
-                                    <div :class="['scroll-item p-p-2', {'odd': options.odd}]" style="height: 50px">{{ item }}</div>
+                                    <div :class="['scroll-item p-2', {'odd': options.odd}]" style="height: 50px">{{ item }}</div>
                                 </template>
                             </p-virtualscroller>
                         </div>
 
-                        <div class="p-d-flex p-dir-col p-mr-3 p-mt-3">
+                        <div class="flex flex-column mr-3 mt-3">
                             <h6>Horizontal</h6>
                             <p-virtualscroller :items="basicItems" :item-size="50" orientation="horizontal">
                                 <template v-slot:item="{ item, options }">
-                                    <div :class="['scroll-item p-p-2', {'odd': options.odd}]" style="width: 50px">{{ item }}</div>
+                                    <div :class="['scroll-item p-2', {'odd': options.odd}]" style="width: 50px">{{ item }}</div>
                                 </template>
                             </p-virtualscroller>
                         </div>
 
-                        <div class="p-d-flex p-dir-col p-mr-3 p-mt-3">
+                        <div class="flex flex-column mr-3 mt-3">
                             <h6>Both</h6>
                             <p-virtualscroller :items="multiItems" :item-size="[50, 100]" orientation="both">
                                 <template v-slot:item="{ item, options }">
-                                    <div :class="['scroll-item p-p-2', {'odd': options.odd}]" style="height: 50px" >
+                                    <div :class="['scroll-item p-2', {'odd': options.odd}]" style="height: 50px" >
                                         <template v-for="(el, index) of item" :key="index">
                                             <div style="width: 100px">{{ el }}</div>
                                         </template>
@@ -887,31 +887,31 @@ export default {
                 </div>
 
                 <div class="card">
-                    <h5 class="p-mb-0">Scroll Delay</h5>
-                    <div class="p-d-flex p-ai-center p-flex-wrap">
-                        <div class="p-d-flex p-dir-col p-mr-3 p-mt-3">
+                    <h5 class="mb-0">Scroll Delay</h5>
+                    <div class="flex align-items-center flex-wrap">
+                        <div class="flex flex-column mr-3 mt-3">
                             <h6>0ms Delay</h6>
                             <p-virtualscroller :items="basicItems" :item-size="50">
                                 <template v-slot:item="{ item, options }">
-                                    <div :class="['scroll-item p-p-2', {'odd': options.odd}]" style="height: 50px">{{ item }}</div>
+                                    <div :class="['scroll-item p-2', {'odd': options.odd}]" style="height: 50px">{{ item }}</div>
                                 </template>
                             </p-virtualscroller>
                         </div>
 
-                        <div class="p-d-flex p-dir-col p-mr-3 p-mt-3">
+                        <div class="flex flex-column mr-3 mt-3">
                             <h6>150ms Delay</h6>
                             <p-virtualscroller :items="basicItems" :item-size="50" :delay="150">
                                 <template v-slot:item="{ item, options }">
-                                    <div :class="['scroll-item p-p-2', {'odd': options.odd}]" style="height: 50px">{{ item }}</div>
+                                    <div :class="['scroll-item p-2', {'odd': options.odd}]" style="height: 50px">{{ item }}</div>
                                 </template>
                             </p-virtualscroller>
                         </div>
 
-                        <div class="p-d-flex p-dir-col p-mr-3 p-mt-3">
+                        <div class="flex flex-column mr-3 mt-3">
                             <h6>250ms Delay</h6>
                             <p-virtualscroller :items="basicItems" :item-size="50" :delay="250">
                                 <template v-slot:item="{ item, options }">
-                                    <div :class="['scroll-item p-p-2', {'odd': options.odd}]" style="height: 50px">{{ item }}</div>
+                                    <div :class="['scroll-item p-2', {'odd': options.odd}]" style="height: 50px">{{ item }}</div>
                                 </template>
                             </p-virtualscroller>
                         </div>
@@ -919,25 +919,25 @@ export default {
                 </div>
 
                 <div class="card">
-                    <h5 class="p-mb-0">Loading</h5>
-                    <div class="p-d-flex p-ai-center p-flex-wrap">
-                        <div class="p-d-flex p-dir-col p-mr-3 p-mt-3">
+                    <h5 class="mb-0">Loading</h5>
+                    <div class="flex align-items-center flex-wrap">
+                        <div class="flex flex-column mr-3 mt-3">
                             <h6>Basic</h6>
                             <p-virtualscroller :items="basicItems" :item-size="50" show-loader :delay="250">
                                 <template v-slot:item="{ item, options }">
-                                    <div :class="['scroll-item p-p-2', {'odd': options.odd}]" style="height: 50px">{{ item }}</div>
+                                    <div :class="['scroll-item p-2', {'odd': options.odd}]" style="height: 50px">{{ item }}</div>
                                 </template>
                             </p-virtualscroller>
                         </div>
 
-                        <div class="p-d-flex p-dir-col p-mr-3 p-mt-3">
+                        <div class="flex flex-column mr-3 mt-3">
                             <h6>Templating</h6>
                             <p-virtualscroller class="custom-loading" :items="basicItems" :item-size="50" show-loader :delay="250">
                                 <template v-slot:item="{ item, options }">
-                                    <div :class="['scroll-item p-p-2', {'odd': options.odd}]" style="height: 50px">{{ item }}</div>
+                                    <div :class="['scroll-item p-2', {'odd': options.odd}]" style="height: 50px">{{ item }}</div>
                                 </template>
                                 <template v-slot:loader="{ options }">
-                                    <div :class="['scroll-item p-p-2', {'odd': options.odd}]" style="height: 50px" >
+                                    <div :class="['scroll-item p-2', {'odd': options.odd}]" style="height: 50px" >
                                         <p-skeleton :width="options.even ? '60%' : '50%'" height="1.3rem"></p-skeleton>
                                     </div>
                                 </template>
@@ -947,12 +947,12 @@ export default {
                 </div>
 
                 <div class="card">
-                    <h5 class="p-mb-0">Lazy</h5>
-                    <div class="p-d-flex p-ai-center p-flex-wrap">
-                        <div class="p-d-flex p-dir-col p-mr-3 p-mt-3">
+                    <h5 class="mb-0">Lazy</h5>
+                    <div class="flex align-items-center flex-wrap">
+                        <div class="flex flex-column mr-3 mt-3">
                             <p-virtualscroller :items="lazyItems" :item-size="50" show-loader :delay="250" :loading="lazyLoading" :lazy=true @lazy-load="onLazyLoad">
                                 <template v-slot:item="{ item, options }">
-                                    <div :class="['scroll-item p-p-2', {'odd': options.odd}]" style="height: 50px">{{ item }}</div>
+                                    <div :class="['scroll-item p-2', {'odd': options.odd}]" style="height: 50px">{{ item }}</div>
                                 </template>
                             </p-virtualscroller>
                         </div>
@@ -960,30 +960,30 @@ export default {
                 </div>
 
                 <div class="card">
-                    <h5 class="p-mb-0">Template</h5>
-                    <div class="p-d-flex p-ai-center p-flex-wrap">
-                        <div class="p-d-flex p-dir-col p-mr-3 p-mt-3">
+                    <h5 class="mb-0">Template</h5>
+                    <div class="flex align-items-center flex-wrap">
+                        <div class="flex flex-column mr-3 mt-3">
                             <p-virtualscroller class="custom-loading" :items="basicItems" :item-size="25 * 7" show-loader :delay="250">
                                 <template v-slot:item="{ item, options }">
                                     <div :class="['custom-scroll-item scroll-item', {'odd': options.odd}]">
-                                        <div class="p-d-flex p-ai-center p-px-2" style="height: 25px">{{\`Item: \${item}\`}}</div>
-                                        <div class="p-d-flex p-ai-center p-px-2" style="height: 25px">{{\`Index: \${options.index}\`}}</div>
-                                        <div class="p-d-flex p-ai-center p-px-2" style="height: 25px">{{\`Count: \${options.count}\`}}</div>
-                                        <div class="p-d-flex p-ai-center p-px-2" style="height: 25px">{{\`First: \${options.first}\`}}</div>
-                                        <div class="p-d-flex p-ai-center p-px-2" style="height: 25px">{{\`Last: \${options.last}\`}}</div>
-                                        <div class="p-d-flex p-ai-center p-px-2" style="height: 25px">{{\`Even: \${options.even}\`}}</div>
-                                        <div class="p-d-flex p-ai-center p-px-2" style="height: 25px">{{\`Odd: \${options.odd}\`}}</div>
+                                        <div class="flex align-items-center px-2" style="height: 25px">{{\`Item: \${item}\`}}</div>
+                                        <div class="flex align-items-center px-2" style="height: 25px">{{\`Index: \${options.index}\`}}</div>
+                                        <div class="flex align-items-center px-2" style="height: 25px">{{\`Count: \${options.count}\`}}</div>
+                                        <div class="flex align-items-center px-2" style="height: 25px">{{\`First: \${options.first}\`}}</div>
+                                        <div class="flex align-items-center px-2" style="height: 25px">{{\`Last: \${options.last}\`}}</div>
+                                        <div class="flex align-items-center px-2" style="height: 25px">{{\`Even: \${options.even}\`}}</div>
+                                        <div class="flex align-items-center px-2" style="height: 25px">{{\`Odd: \${options.odd}\`}}</div>
                                     </div>
                                 </template>
                                 <template v-slot:loader="{ options }">
                                     <div :class="['custom-scroll-item scroll-item', {'odd': options.odd}]">
-                                        <div class="p-d-flex p-ai-center p-px-2" style="height: 25px"><p-skeleton width="60%" height="1.2rem"></p-skeleton></div>
-                                        <div class="p-d-flex p-ai-center p-px-2" style="height: 25px"><p-skeleton width="50%" height="1.2rem"></p-skeleton></div>
-                                        <div class="p-d-flex p-ai-center p-px-2" style="height: 25px"><p-skeleton width="60%" height="1.2rem"></p-skeleton></div>
-                                        <div class="p-d-flex p-ai-center p-px-2" style="height: 25px"><p-skeleton width="50%" height="1.2rem"></p-skeleton></div>
-                                        <div class="p-d-flex p-ai-center p-px-2" style="height: 25px"><p-skeleton width="60%" height="1.2rem"></p-skeleton></div>
-                                        <div class="p-d-flex p-ai-center p-px-2" style="height: 25px"><p-skeleton width="50%" height="1.2rem"></p-skeleton></div>
-                                        <div class="p-d-flex p-ai-center p-px-2" style="height: 25px"><p-skeleton width="60%" height="1.2rem"></p-skeleton></div>
+                                        <div class="flex align-items-center px-2" style="height: 25px"><p-skeleton width="60%" height="1.2rem"></p-skeleton></div>
+                                        <div class="flex align-items-center px-2" style="height: 25px"><p-skeleton width="50%" height="1.2rem"></p-skeleton></div>
+                                        <div class="flex align-items-center px-2" style="height: 25px"><p-skeleton width="60%" height="1.2rem"></p-skeleton></div>
+                                        <div class="flex align-items-center px-2" style="height: 25px"><p-skeleton width="50%" height="1.2rem"></p-skeleton></div>
+                                        <div class="flex align-items-center px-2" style="height: 25px"><p-skeleton width="60%" height="1.2rem"></p-skeleton></div>
+                                        <div class="flex align-items-center px-2" style="height: 25px"><p-skeleton width="50%" height="1.2rem"></p-skeleton></div>
+                                        <div class="flex align-items-center px-2" style="height: 25px"><p-skeleton width="60%" height="1.2rem"></p-skeleton></div>
                                     </div>
                                 </template>
                             </p-virtualscroller>