From f8d4f9f0c6427c79708236a346488d4a34b1f970 Mon Sep 17 00:00:00 2001
From: mrholek <lukasz@holeczek.pl>
Date: Wed, 15 Nov 2023 11:31:41 +0100
Subject: [PATCH] refactor: improve responsive behavior

---
 src/components/AppContent.js         |   2 +-
 src/views/dashboard/Dashboard.js     |  76 ++++++++------
 src/views/theme/colors/Colors.js     |   2 +-
 src/views/widgets/Widgets.js         | 146 ++++++++++-----------------
 src/views/widgets/WidgetsBrand.js    |  25 ++---
 src/views/widgets/WidgetsDropdown.js |  23 +++--
 6 files changed, 123 insertions(+), 151 deletions(-)

diff --git a/src/components/AppContent.js b/src/components/AppContent.js
index b72cc6bd6..b9a39ef50 100644
--- a/src/components/AppContent.js
+++ b/src/components/AppContent.js
@@ -7,7 +7,7 @@ import routes from '../routes'
 
 const AppContent = () => {
   return (
-    <CContainer class="px-4" lg>
+    <CContainer className="px-4" lg>
       <Suspense fallback={<CSpinner color="primary" />}>
         <Routes>
           {routes.map((route, idx) => {
diff --git a/src/views/dashboard/Dashboard.js b/src/views/dashboard/Dashboard.js
index da59f7818..5b0b61041 100644
--- a/src/views/dashboard/Dashboard.js
+++ b/src/views/dashboard/Dashboard.js
@@ -1,4 +1,5 @@
 import React from 'react'
+import classNames from 'classnames'
 
 import {
   CAvatar,
@@ -90,12 +91,12 @@ const Dashboard = () => {
       user: {
         name: 'Yiorgos Avraamu',
         new: true,
-        registered: 'Jan 1, 2021',
+        registered: 'Jan 1, 2023',
       },
       country: { name: 'USA', flag: cifUs },
       usage: {
         value: 50,
-        period: 'Jun 11, 2021 - Jul 10, 2021',
+        period: 'Jun 11, 2023 - Jul 10, 2023',
         color: 'success',
       },
       payment: { name: 'Mastercard', icon: cibCcMastercard },
@@ -106,12 +107,12 @@ const Dashboard = () => {
       user: {
         name: 'Avram Tarasios',
         new: false,
-        registered: 'Jan 1, 2021',
+        registered: 'Jan 1, 2023',
       },
       country: { name: 'Brazil', flag: cifBr },
       usage: {
         value: 22,
-        period: 'Jun 11, 2021 - Jul 10, 2021',
+        period: 'Jun 11, 2023 - Jul 10, 2023',
         color: 'info',
       },
       payment: { name: 'Visa', icon: cibCcVisa },
@@ -119,11 +120,11 @@ const Dashboard = () => {
     },
     {
       avatar: { src: avatar3, status: 'warning' },
-      user: { name: 'Quintin Ed', new: true, registered: 'Jan 1, 2021' },
+      user: { name: 'Quintin Ed', new: true, registered: 'Jan 1, 2023' },
       country: { name: 'India', flag: cifIn },
       usage: {
         value: 74,
-        period: 'Jun 11, 2021 - Jul 10, 2021',
+        period: 'Jun 11, 2023 - Jul 10, 2023',
         color: 'warning',
       },
       payment: { name: 'Stripe', icon: cibCcStripe },
@@ -131,11 +132,11 @@ const Dashboard = () => {
     },
     {
       avatar: { src: avatar4, status: 'secondary' },
-      user: { name: 'Enéas Kwadwo', new: true, registered: 'Jan 1, 2021' },
+      user: { name: 'Enéas Kwadwo', new: true, registered: 'Jan 1, 2023' },
       country: { name: 'France', flag: cifFr },
       usage: {
         value: 98,
-        period: 'Jun 11, 2021 - Jul 10, 2021',
+        period: 'Jun 11, 2023 - Jul 10, 2023',
         color: 'danger',
       },
       payment: { name: 'PayPal', icon: cibCcPaypal },
@@ -146,12 +147,12 @@ const Dashboard = () => {
       user: {
         name: 'Agapetus Tadeáš',
         new: true,
-        registered: 'Jan 1, 2021',
+        registered: 'Jan 1, 2023',
       },
       country: { name: 'Spain', flag: cifEs },
       usage: {
         value: 22,
-        period: 'Jun 11, 2021 - Jul 10, 2021',
+        period: 'Jun 11, 2023 - Jul 10, 2023',
         color: 'primary',
       },
       payment: { name: 'Google Wallet', icon: cibCcApplePay },
@@ -162,12 +163,12 @@ const Dashboard = () => {
       user: {
         name: 'Friderik Dávid',
         new: true,
-        registered: 'Jan 1, 2021',
+        registered: 'Jan 1, 2023',
       },
       country: { name: 'Poland', flag: cifPl },
       usage: {
         value: 43,
-        period: 'Jun 11, 2021 - Jul 10, 2021',
+        period: 'Jun 11, 2023 - Jul 10, 2023',
         color: 'success',
       },
       payment: { name: 'Amex', icon: cibCcAmex },
@@ -177,7 +178,7 @@ const Dashboard = () => {
 
   return (
     <>
-      <WidgetsDropdown />
+      <WidgetsDropdown className="mb-4" />
       <CCard className="mb-4">
         <CCardBody>
           <CRow>
@@ -185,7 +186,7 @@ const Dashboard = () => {
               <h4 id="traffic" className="card-title mb-0">
                 Traffic
               </h4>
-              <div className="small text-body-secondary">January - July 2021</div>
+              <div className="small text-body-secondary">January - July 2023</div>
             </CCol>
             <CCol sm={7} className="d-none d-md-block">
               <CButton color="primary" className="float-end">
@@ -208,22 +209,31 @@ const Dashboard = () => {
           <MainChart />
         </CCardBody>
         <CCardFooter>
-          <CRow xs={{ cols: 1 }} md={{ cols: 5 }} className="text-center">
-            {progressExample.map((item, index) => (
-              <CCol className="mb-sm-2 mb-0" key={index}>
+          <CRow
+            xs={{ cols: 1, gutter: 4 }}
+            sm={{ cols: 2 }}
+            lg={{ cols: 4 }}
+            xl={{ cols: 5 }}
+            className="mb-2 text-center"
+          >
+            {progressExample.map((item, index, items) => (
+              <CCol
+                className={classNames({
+                  'd-none d-xl-block': index + 1 === items.length,
+                })}
+                key={index}
+              >
                 <div className="text-body-secondary">{item.title}</div>
-                <strong>
+                <div className="fw-semibold text-truncate">
                   {item.value} ({item.percent}%)
-                </strong>
+                </div>
                 <CProgress thin className="mt-2" color={item.color} value={item.percent} />
               </CCol>
             ))}
           </CRow>
         </CCardFooter>
       </CCard>
-
-      <WidgetsBrand withCharts />
-
+      <WidgetsBrand className="mb-4" withCharts />
       <CRow>
         <CCol xs>
           <CCard className="mb-4">
@@ -232,20 +242,21 @@ const Dashboard = () => {
               <CRow>
                 <CCol xs={12} md={6} xl={6}>
                   <CRow>
-                    <CCol sm={6}>
+                    <CCol xs={6}>
                       <div className="border-start border-start-4 border-start-info py-1 px-3">
-                        <div className="text-body-secondary small">New Clients</div>
+                        <div className="text-body-secondary text-truncate xsall">New Clients</div>
                         <div className="fs-5 fw-semibold">9,123</div>
                       </div>
                     </CCol>
-                    <CCol sm={6}>
+                    <CCol xs={6}>
                       <div className="border-start border-start-4 border-start-danger py-1 px-3 mb-3">
-                        <div className="text-body-secondary small">Recurring Clients</div>
+                        <div className="text-body-secondary text-truncate small">
+                          Recurring Clients
+                        </div>
                         <div className="fs-5 fw-semibold">22,643</div>
                       </div>
                     </CCol>
                   </CRow>
-
                   <hr className="mt-0" />
                   {progressGroupExample1.map((item, index) => (
                     <div className="progress-group mb-4" key={index}>
@@ -259,18 +270,17 @@ const Dashboard = () => {
                     </div>
                   ))}
                 </CCol>
-
                 <CCol xs={12} md={6} xl={6}>
                   <CRow>
-                    <CCol sm={6}>
+                    <CCol xs={6}>
                       <div className="border-start border-start-4 border-start-warning py-1 px-3 mb-3">
-                        <div className="text-body-secondary small">Pageviews</div>
+                        <div className="text-body-secondary text-truncate small">Pageviews</div>
                         <div className="fs-5 fw-semibold">78,623</div>
                       </div>
                     </CCol>
-                    <CCol sm={6}>
+                    <CCol xs={6}>
                       <div className="border-start border-start-4 border-start-success py-1 px-3 mb-3">
-                        <div className="text-body-secondary small">Organic</div>
+                        <div className="text-body-secondary text-truncate small">Organic</div>
                         <div className="fs-5 fw-semibold">49,123</div>
                       </div>
                     </CCol>
@@ -314,7 +324,7 @@ const Dashboard = () => {
               <br />
 
               <CTable align="middle" className="mb-0 border" hover responsive>
-                <CTableHead>
+                <CTableHead className="text-nowrap">
                   <CTableRow>
                     <CTableHeaderCell className="bg-body-tertiary text-center">
                       <CIcon icon={cilPeople} />
diff --git a/src/views/theme/colors/Colors.js b/src/views/theme/colors/Colors.js
index 4a1570353..ef844e163 100644
--- a/src/views/theme/colors/Colors.js
+++ b/src/views/theme/colors/Colors.js
@@ -1,5 +1,5 @@
-import PropTypes from 'prop-types'
 import React, { useEffect, useState, createRef } from 'react'
+import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import { CRow, CCol, CCard, CCardHeader, CCardBody } from '@coreui/react'
 import { rgbToHex } from '@coreui/utils'
diff --git a/src/views/widgets/Widgets.js b/src/views/widgets/Widgets.js
index c6be871f6..a9bf51e12 100644
--- a/src/views/widgets/Widgets.js
+++ b/src/views/widgets/Widgets.js
@@ -41,41 +41,37 @@ const Widgets = () => {
     <CCard className="mb-4">
       <CCardHeader>Widgets</CCardHeader>
       <CCardBody>
-        <DocsExample href="/components/widgets/#cwidgetstatsa">
+        <DocsExample href="components/widgets/#cwidgetstatsa">
           <WidgetsDropdown />
         </DocsExample>
-        <DocsExample href="/components/widgets/#cwidgetstatsb">
-          <CRow>
-            <CCol xs={12} sm={6} lg={3}>
+        <DocsExample href="components/widgets/#cwidgetstatsb">
+          <CRow xs={{ gutter: 4 }}>
+            <CCol xs={12} sm={6} xl={4} xxl={3}>
               <CWidgetStatsB
-                className="mb-4"
                 progress={{ color: 'success', value: 89.9 }}
                 text="Lorem ipsum dolor sit amet enim."
                 title="Widget title"
                 value="89.9%"
               />
             </CCol>
-            <CCol xs={12} sm={6} lg={3}>
+            <CCol xs={12} sm={6} xl={4} xxl={3}>
               <CWidgetStatsB
-                className="mb-4"
                 value="12.124"
                 title="Widget title"
                 progress={{ color: 'info', value: 89.9 }}
                 text="Lorem ipsum dolor sit amet enim."
               />
             </CCol>
-            <CCol xs={12} sm={6} lg={3}>
+            <CCol xs={12} sm={6} xl={4} xxl={3}>
               <CWidgetStatsB
-                className="mb-4"
                 value="$98.111,00"
                 title="Widget title"
                 progress={{ color: 'warning', value: 89.9 }}
                 text="Lorem ipsum dolor sit amet enim."
               />
             </CCol>
-            <CCol xs={12} sm={6} lg={3}>
+            <CCol xs={12} sm={6} xl={4} xxl={3}>
               <CWidgetStatsB
-                className="mb-4"
                 value="2 TB"
                 title="Widget title"
                 progress={{ color: 'primary', value: 89.9 }}
@@ -84,11 +80,10 @@ const Widgets = () => {
             </CCol>
           </CRow>
         </DocsExample>
-        <DocsExample href="/components/widgets/#cwidgetstatsb">
-          <CRow>
-            <CCol xs={12} sm={6} lg={3}>
+        <DocsExample href="components/widgets/#cwidgetstatsb">
+          <CRow xs={{ gutter: 4 }}>
+            <CCol xs={12} sm={6} xl={4} xxl={3}>
               <CWidgetStatsB
-                className="mb-4"
                 color="success"
                 inverse
                 value="89.9%"
@@ -97,9 +92,8 @@ const Widgets = () => {
                 text="Lorem ipsum dolor sit amet enim."
               />
             </CCol>
-            <CCol xs={12} sm={6} lg={3}>
+            <CCol xs={12} sm={6} xl={4} xxl={3}>
               <CWidgetStatsB
-                className="mb-4"
                 color="info"
                 inverse
                 value="12.124"
@@ -108,9 +102,8 @@ const Widgets = () => {
                 text="Lorem ipsum dolor sit amet enim."
               />
             </CCol>
-            <CCol xs={12} sm={6} lg={3}>
+            <CCol xs={12} sm={6} xl={4} xxl={3}>
               <CWidgetStatsB
-                className="mb-4"
                 color="warning"
                 inverse
                 value="$98.111,00"
@@ -119,9 +112,8 @@ const Widgets = () => {
                 text="Lorem ipsum dolor sit amet enim."
               />
             </CCol>
-            <CCol xs={12} sm={6} lg={3}>
+            <CCol xs={12} sm={6} xl={4} xxl={3}>
               <CWidgetStatsB
-                className="mb-4"
                 color="primary"
                 inverse
                 value="2 TB"
@@ -132,8 +124,8 @@ const Widgets = () => {
             </CCol>
           </CRow>
         </DocsExample>
-        <DocsExample href="/components/widgets/#cwidgetstatse">
-          <CRow>
+        <DocsExample href="components/widgets/#cwidgetstatse">
+          <CRow xs={{ gutter: 4 }}>
             <CCol sm={4} lg={2}>
               <CWidgetStatsE
                 chart={
@@ -201,7 +193,6 @@ const Widgets = () => {
                     }}
                   />
                 }
-                className="mb-4"
                 title="title"
                 value="1,123"
               />
@@ -273,7 +264,6 @@ const Widgets = () => {
                     }}
                   />
                 }
-                className="mb-4"
                 title="title"
                 value="1,123"
               />
@@ -345,7 +335,6 @@ const Widgets = () => {
                     }}
                   />
                 }
-                className="mb-4"
                 title="title"
                 value="1,123"
               />
@@ -425,7 +414,6 @@ const Widgets = () => {
                     }}
                   />
                 }
-                className="mb-4"
                 title="title"
                 value="1,123"
               />
@@ -505,7 +493,6 @@ const Widgets = () => {
                     }}
                   />
                 }
-                className="mb-4"
                 title="title"
                 value="1,123"
               />
@@ -585,45 +572,40 @@ const Widgets = () => {
                     }}
                   />
                 }
-                className="mb-4"
                 title="title"
                 value="1,123"
               />
             </CCol>
           </CRow>
         </DocsExample>
-        <DocsExample href="/components/widgets/#cwidgetstatsf">
-          <CRow>
-            <CCol xs={12} sm={6} lg={3}>
+        <DocsExample href="components/widgets/#cwidgetstatsf">
+          <CRow xs={{ gutter: 4 }}>
+            <CCol xs={12} sm={6} xl={4} xxl={3}>
               <CWidgetStatsF
-                className="mb-3"
                 icon={<CIcon width={24} icon={cilSettings} size="xl" />}
                 title="income"
                 value="$1.999,50"
                 color="primary"
               />
             </CCol>
-            <CCol xs={12} sm={6} lg={3}>
+            <CCol xs={12} sm={6} xl={4} xxl={3}>
               <CWidgetStatsF
-                className="mb-3"
                 icon={<CIcon width={24} icon={cilUser} size="xl" />}
                 title="income"
                 value="$1.999,50"
                 color="info"
               />
             </CCol>
-            <CCol xs={12} sm={6} lg={3}>
+            <CCol xs={12} sm={6} xl={4} xxl={3}>
               <CWidgetStatsF
-                className="mb-3"
                 icon={<CIcon width={24} icon={cilMoon} size="xl" />}
                 title="income"
                 value="$1.999,50"
                 color="warning"
               />
             </CCol>
-            <CCol xs={12} sm={6} lg={3}>
+            <CCol xs={12} sm={6} xl={4} xxl={3}>
               <CWidgetStatsF
-                className="mb-3"
                 icon={<CIcon width={24} icon={cilBell} size="xl" />}
                 title="income"
                 value="$1.999,50"
@@ -632,11 +614,10 @@ const Widgets = () => {
             </CCol>
           </CRow>
         </DocsExample>
-        <DocsExample href="/components/widgets/#cwidgetstatsf">
-          <CRow>
-            <CCol xs={12} sm={6} lg={3}>
+        <DocsExample href="components/widgets/#cwidgetstatsf">
+          <CRow xs={{ gutter: 4 }}>
+            <CCol xs={12} sm={6} xl={4} xxl={3}>
               <CWidgetStatsF
-                className="mb-3"
                 icon={<CIcon width={24} icon={cilSettings} size="xl" />}
                 title="income"
                 value="$1.999,50"
@@ -654,9 +635,8 @@ const Widgets = () => {
                 }
               />
             </CCol>
-            <CCol xs={12} sm={6} lg={3}>
+            <CCol xs={12} sm={6} xl={4} xxl={3}>
               <CWidgetStatsF
-                className="mb-3"
                 icon={<CIcon width={24} icon={cilLaptop} size="xl" />}
                 title="income"
                 value="$1.999,50"
@@ -674,9 +654,8 @@ const Widgets = () => {
                 }
               />
             </CCol>
-            <CCol xs={12} sm={6} lg={3}>
+            <CCol xs={12} sm={6} xl={4} xxl={3}>
               <CWidgetStatsF
-                className="mb-3"
                 icon={<CIcon width={24} icon={cilMoon} size="xl" />}
                 title="income"
                 value="$1.999,50"
@@ -694,9 +673,8 @@ const Widgets = () => {
                 }
               />
             </CCol>
-            <CCol xs={12} sm={6} lg={3}>
+            <CCol xs={12} sm={6} xl={4} xxl={3}>
               <CWidgetStatsF
-                className="mb-3"
                 icon={<CIcon width={24} icon={cilBell} size="xl" />}
                 title="income"
                 value="$1.999,50"
@@ -716,11 +694,10 @@ const Widgets = () => {
             </CCol>
           </CRow>
         </DocsExample>
-        <DocsExample href="/components/widgets/#cwidgetstatsf">
-          <CRow>
-            <CCol xs={12} sm={6} lg={3}>
+        <DocsExample href="components/widgets/#cwidgetstatsf">
+          <CRow xs={{ gutter: 4 }}>
+            <CCol xs={12} sm={6} xl={4} xxl={3}>
               <CWidgetStatsF
-                className="mb-3"
                 icon={<CIcon width={24} icon={cilSettings} size="xl" />}
                 padding={false}
                 title="income"
@@ -728,9 +705,8 @@ const Widgets = () => {
                 color="primary"
               />
             </CCol>
-            <CCol xs={12} sm={6} lg={3}>
+            <CCol xs={12} sm={6} xl={4} xxl={3}>
               <CWidgetStatsF
-                className="mb-3"
                 icon={<CIcon width={24} icon={cilUser} size="xl" />}
                 padding={false}
                 title="income"
@@ -738,9 +714,8 @@ const Widgets = () => {
                 color="info"
               />
             </CCol>
-            <CCol xs={12} sm={6} lg={3}>
+            <CCol xs={12} sm={6} xl={4} xxl={3}>
               <CWidgetStatsF
-                className="mb-3"
                 icon={<CIcon width={24} icon={cilMoon} size="xl" />}
                 padding={false}
                 title="income"
@@ -748,9 +723,8 @@ const Widgets = () => {
                 color="warning"
               />
             </CCol>
-            <CCol xs={12} sm={6} lg={3}>
+            <CCol xs={12} sm={6} xl={4} xxl={3}>
               <CWidgetStatsF
-                className="mb-3"
                 icon={<CIcon width={24} icon={cilBell} size="xl" />}
                 padding={false}
                 title="income"
@@ -760,13 +734,13 @@ const Widgets = () => {
             </CCol>
           </CRow>
         </DocsExample>
-        <DocsExample href="/components/widgets/#cwidgetstatsd">
+        <DocsExample href="components/widgets/#cwidgetstatsd">
           <WidgetsBrand />
         </DocsExample>
-        <DocsExample href="/components/widgets/#cwidgetstatsd">
+        <DocsExample href="components/widgets/#cwidgetstatsd">
           <WidgetsBrand withCharts />
         </DocsExample>
-        <DocsExample href="/components/widgets/#cwidgetstatsc">
+        <DocsExample href="components/widgets/#cwidgetstatsc">
           <CCardGroup className="mb-4">
             <CWidgetStatsC
               icon={<CIcon icon={cilPeople} height={36} />}
@@ -800,67 +774,61 @@ const Widgets = () => {
             />
           </CCardGroup>
         </DocsExample>
-        <DocsExample href="/components/widgets/#cwidgetstatsc">
-          <CRow>
-            <CCol sm={6} md={2}>
+        <DocsExample href="components/widgets/#cwidgetstatsc">
+          <CRow xs={{ gutter: 4 }}>
+            <CCol xs={6} lg={4} xl={4} xxl={2}>
               <CWidgetStatsC
                 icon={<CIcon icon={cilPeople} height={36} />}
                 value="87.500"
                 title="Visitors"
                 progress={{ color: 'info', value: 75 }}
-                className="mb-4"
               />
             </CCol>
-            <CCol sm={6} md={2}>
+            <CCol xs={6} lg={4} xl={4} xxl={2}>
               <CWidgetStatsC
                 icon={<CIcon icon={cilUserFollow} height={36} />}
                 value="385"
                 title="New Clients"
                 progress={{ color: 'success', value: 75 }}
-                className="mb-4"
               />
             </CCol>
-            <CCol sm={6} md={2}>
+            <CCol xs={6} lg={4} xl={4} xxl={2}>
               <CWidgetStatsC
                 icon={<CIcon icon={cilBasket} height={36} />}
                 value="1238"
                 title="Products sold"
                 progress={{ color: 'warning', value: 75 }}
-                className="mb-4"
               />
             </CCol>
-            <CCol sm={6} md={2}>
+            <CCol xs={6} lg={4} xl={4} xxl={2}>
               <CWidgetStatsC
                 icon={<CIcon icon={cilChartPie} height={36} />}
                 value="28%"
                 title="Returning Visitors"
                 progress={{ color: 'primary', value: 75 }}
-                className="mb-4"
               />
             </CCol>
-            <CCol sm={6} md={2}>
+            <CCol xs={6} lg={4} xl={4} xxl={2}>
               <CWidgetStatsC
                 icon={<CIcon icon={cilSpeedometer} height={36} />}
                 value="5:34:11"
                 title="Avg. Time"
                 progress={{ color: 'danger', value: 75 }}
-                className="mb-4"
               />
             </CCol>
-            <CCol sm={6} md={2}>
+            <CCol xs={6} lg={4} xl={4} xxl={2}>
               <CWidgetStatsC
                 icon={<CIcon icon={cilSpeech} height={36} />}
                 value="972"
-                title="comments"
+                title="Comments"
                 progress={{ color: 'info', value: 75 }}
-                className="mb-4"
               />
             </CCol>
           </CRow>
         </DocsExample>
-        <DocsExample href="/components/widgets/#cwidgetstatsc">
-          <CRow>
-            <CCol sm={6} md={2}>
+        <DocsExample href="components/widgets/#cwidgetstatsc">
+          <CRow xs={{ gutter: 4 }}>
+            <CCol xs={6} lg={4} xl={4} xxl={2}>
               <CWidgetStatsC
                 color="info"
                 icon={<CIcon icon={cilPeople} height={36} />}
@@ -868,10 +836,9 @@ const Widgets = () => {
                 title="Visitors"
                 inverse
                 progress={{ value: 75 }}
-                className="mb-4"
               />
             </CCol>
-            <CCol sm={6} md={2}>
+            <CCol xs={6} lg={4} xl={4} xxl={2}>
               <CWidgetStatsC
                 color="success"
                 icon={<CIcon icon={cilUserFollow} height={36} />}
@@ -879,10 +846,9 @@ const Widgets = () => {
                 title="New Clients"
                 inverse
                 progress={{ value: 75 }}
-                className="mb-4"
               />
             </CCol>
-            <CCol sm={6} md={2}>
+            <CCol xs={6} lg={4} xl={4} xxl={2}>
               <CWidgetStatsC
                 color="warning"
                 icon={<CIcon icon={cilBasket} height={36} />}
@@ -890,10 +856,9 @@ const Widgets = () => {
                 title="Products sold"
                 inverse
                 progress={{ value: 75 }}
-                className="mb-4"
               />
             </CCol>
-            <CCol sm={6} md={2}>
+            <CCol xs={6} lg={4} xl={4} xxl={2}>
               <CWidgetStatsC
                 color="primary"
                 icon={<CIcon icon={cilChartPie} height={36} />}
@@ -901,10 +866,9 @@ const Widgets = () => {
                 title="Returning Visitors"
                 inverse
                 progress={{ value: 75 }}
-                className="mb-4"
               />
             </CCol>
-            <CCol sm={6} md={2}>
+            <CCol xs={6} lg={4} xl={4} xxl={2}>
               <CWidgetStatsC
                 color="danger"
                 icon={<CIcon icon={cilSpeedometer} height={36} />}
@@ -912,18 +876,16 @@ const Widgets = () => {
                 title="Avg. Time"
                 inverse
                 progress={{ value: 75 }}
-                className="mb-4"
               />
             </CCol>
-            <CCol sm={6} md={2}>
+            <CCol xs={6} lg={4} xl={4} xxl={2}>
               <CWidgetStatsC
                 color="info"
                 icon={<CIcon icon={cilSpeech} height={36} />}
                 value="972"
-                title="comments"
+                title="Comments"
                 inverse
                 progress={{ value: 75 }}
-                className="mb-4"
               />
             </CCol>
           </CRow>
diff --git a/src/views/widgets/WidgetsBrand.js b/src/views/widgets/WidgetsBrand.js
index b5eb528ac..f09393aae 100644
--- a/src/views/widgets/WidgetsBrand.js
+++ b/src/views/widgets/WidgetsBrand.js
@@ -5,7 +5,7 @@ import CIcon from '@coreui/icons-react'
 import { cibFacebook, cibLinkedin, cibTwitter, cilCalendar } from '@coreui/icons'
 import { CChart } from '@coreui/react-chartjs'
 
-const WidgetsBrand = ({ withCharts }) => {
+const WidgetsBrand = (props) => {
   const chartOptions = {
     elements: {
       line: {
@@ -35,11 +35,10 @@ const WidgetsBrand = ({ withCharts }) => {
   }
 
   return (
-    <CRow>
-      <CCol sm={6} lg={3}>
+    <CRow className={props.className} xs={{ gutter: 4 }}>
+      <CCol sm={6} xl={4} xxl={3}>
         <CWidgetStatsD
-          className="mb-4"
-          {...(withCharts && {
+          {...(props.withCharts && {
             chart: (
               <CChart
                 className="position-absolute w-100 h-100"
@@ -72,10 +71,9 @@ const WidgetsBrand = ({ withCharts }) => {
         />
       </CCol>
 
-      <CCol sm={6} lg={3}>
+      <CCol sm={6} xl={4} xxl={3}>
         <CWidgetStatsD
-          className="mb-4"
-          {...(withCharts && {
+          {...(props.withCharts && {
             chart: (
               <CChart
                 className="position-absolute w-100 h-100"
@@ -108,10 +106,9 @@ const WidgetsBrand = ({ withCharts }) => {
         />
       </CCol>
 
-      <CCol sm={6} lg={3}>
+      <CCol sm={6} xl={4} xxl={3}>
         <CWidgetStatsD
-          className="mb-4"
-          {...(withCharts && {
+          {...(props.withCharts && {
             chart: (
               <CChart
                 className="position-absolute w-100 h-100"
@@ -144,11 +141,10 @@ const WidgetsBrand = ({ withCharts }) => {
         />
       </CCol>
 
-      <CCol sm={6} lg={3}>
+      <CCol sm={6} xl={4} xxl={3}>
         <CWidgetStatsD
-          className="mb-4"
           color="warning"
-          {...(withCharts && {
+          {...(props.withCharts && {
             chart: (
               <CChart
                 className="position-absolute w-100 h-100"
@@ -182,6 +178,7 @@ const WidgetsBrand = ({ withCharts }) => {
 }
 
 WidgetsBrand.propTypes = {
+  className: PropTypes.string,
   withCharts: PropTypes.bool,
 }
 
diff --git a/src/views/widgets/WidgetsDropdown.js b/src/views/widgets/WidgetsDropdown.js
index ed4174b23..85e2fc969 100644
--- a/src/views/widgets/WidgetsDropdown.js
+++ b/src/views/widgets/WidgetsDropdown.js
@@ -1,4 +1,6 @@
 import React, { useEffect, useRef } from 'react'
+import PropTypes from 'prop-types'
+
 import {
   CRow,
   CCol,
@@ -13,7 +15,7 @@ import { CChartBar, CChartLine } from '@coreui/react-chartjs'
 import CIcon from '@coreui/icons-react'
 import { cilArrowBottom, cilArrowTop, cilOptions } from '@coreui/icons'
 
-const WidgetsDropdown = () => {
+const WidgetsDropdown = (props) => {
   const widgetChartRef1 = useRef(null)
   const widgetChartRef2 = useRef(null)
 
@@ -36,10 +38,9 @@ const WidgetsDropdown = () => {
   }, [widgetChartRef1, widgetChartRef2])
 
   return (
-    <CRow>
-      <CCol sm={6} lg={3}>
+    <CRow className={props.className} xs={{ gutter: 4 }}>
+      <CCol sm={6} xl={4} xxl={3}>
         <CWidgetStatsA
-          className="mb-4"
           color="primary"
           value={
             <>
@@ -128,9 +129,8 @@ const WidgetsDropdown = () => {
           }
         />
       </CCol>
-      <CCol sm={6} lg={3}>
+      <CCol sm={6} xl={4} xxl={3}>
         <CWidgetStatsA
-          className="mb-4"
           color="info"
           value={
             <>
@@ -218,9 +218,8 @@ const WidgetsDropdown = () => {
           }
         />
       </CCol>
-      <CCol sm={6} lg={3}>
+      <CCol sm={6} xl={4} xxl={3}>
         <CWidgetStatsA
-          className="mb-4"
           color="warning"
           value={
             <>
@@ -291,9 +290,8 @@ const WidgetsDropdown = () => {
           }
         />
       </CCol>
-      <CCol sm={6} lg={3}>
+      <CCol sm={6} xl={4} xxl={3}>
         <CWidgetStatsA
-          className="mb-4"
           color="danger"
           value={
             <>
@@ -390,4 +388,9 @@ const WidgetsDropdown = () => {
   )
 }
 
+WidgetsDropdown.propTypes = {
+  className: PropTypes.string,
+  withCharts: PropTypes.bool,
+}
+
 export default WidgetsDropdown