refactor: update examples

src/scss/_custom.scss

@@ -5,6 +5,10 @@
   min-height: calc(4rem + 1px); // stylelint-disable-line function-disallowed-list
 }
 
+.header > .container-fluid + .container-fluid {
+  min-height: 3rem;
+}
+
 .sidebar-brand-full {
   margin-left: 3px;
 }
@@ -20,19 +24,6 @@
   }
 }
 
-.header > .container-fluid + .container-fluid {
-  min-height: 3rem;
-}
-
-.header {
-  padding: 0;
-
-  .container-fluid {
-    padding-right: $spacer;
-    padding-left: $spacer;
-  }
-}
-
 .footer {
   min-height: calc(3rem + 1px); // stylelint-disable-line function-disallowed-list
 }

src/scss/_examples.scss

@@ -51,6 +51,9 @@
     }
 
     // Buttons
+    .col > .btn,
+    .col-auto > .btn,
+    .d-md-block > .btn,
     > .btn,
     > .btn-group {
       margin: .25rem .125rem;

src/views/base/carousels/Carousels.js

@@ -107,7 +107,7 @@ const Carousels = () => {
               You can add captions to slides with the <code>&lt;CCarouselCaption&gt;</code> element
               within any <code>&lt;CCarouselItem&gt;</code>. They can be immediately hidden on
               smaller viewports, as shown below, with optional{' '}
-              <a href="https://coreui.io/4.0/utilities/display">display utilities</a>. We hide them
+              <a href="https://coreui.io//utilities/display">display utilities</a>. We hide them
               with <code>.d-none</code> and draw them back on medium-sized devices with{' '}
               <code>.d-md-block</code>.
             </p>

src/views/base/tables/Tables.js

@@ -463,7 +463,7 @@ const Tables = () => {
               </CTable>
             </DocsExample>
             <p className="text-body-secondary small">
-              <a href="https://coreui.io/docs/4.0/utilities/borders#border-color">
+              <a href="https://coreui.io/docs/utilities/borders#border-color">
                 Border color utilities
               </a>{' '}
               can be added to change colors:

src/views/buttons/buttons/Buttons.js

@@ -60,7 +60,7 @@ const Buttons = () => {
           </CCardHeader>
           <CCardBody>
             <p className="text-body-secondary small">
-              You can combine button with our <a href="https://icons.coreui.io/">CoreUI Icons</a>.
+              You can combine button with our <a href="https://coreui.io/icons/">CoreUI Icons</a>.
             </p>
             <DocsExample href="components/buttons">
               {['normal', 'active', 'disabled'].map((state, index) => (

src/views/notifications/alerts/Alerts.js

@@ -24,9 +24,7 @@ const Alerts = () => {
               React Alert is prepared for any length of text, as well as an optional close button.
               For a styling, use one of the <strong>required</strong> contextual <code>color</code>{' '}
               props (e.g., <code>primary</code>). For inline dismissal, use the{' '}
-              <a href="https://coreui.io/react/docs/4.0/components/alert#dismissing">
-                dismissing prop
-              </a>
+              <a href="https://coreui.io/react/docs/components/alert#dismissing">dismissing prop</a>
               .
             </p>
             <DocsExample href="components/alert">

src/views/notifications/toasts/Toasts.js

@@ -176,12 +176,12 @@ const Toasts = () => {
           <CCardBody>
             <p className="text-body-secondary small">
               Customize your toasts by removing sub-components, tweaking them with{' '}
-              <a href="https://coreui.io/docs/4.0/utilities/api">utilities</a>, or by adding your
-              own markup. Here we&#39;ve created a simpler toast by removing the default{' '}
+              <a href="https://coreui.io/docs/utilities/api">utilities</a>, or by adding your own
+              markup. Here we&#39;ve created a simpler toast by removing the default{' '}
               <code>&lt;CToastHeader&gt;</code>, adding a custom hide icon from{' '}
-              <a href="https://icons.coreui.io">CoreUI Icons</a>, and using some{' '}
-              <a href="https://coreui.io/docs/4.0/utilities/flex">flexbox utilities</a> to adjust
-              the layout.
+              <a href="https://coreui.io/icons/">CoreUI Icons</a>, and using some{' '}
+              <a href="https://coreui.io/docs/utilities/flex">flexbox utilities</a> to adjust the
+              layout.
             </p>
             <DocsExample href="components/toast#custom-content">
               <CToast autohide={false} className="align-items-center" visible={true}>
@@ -220,12 +220,12 @@ const Toasts = () => {
           <CCardBody>
             <p className="text-body-secondary small">
               Building on the above example, you can create different toast color schemes with our{' '}
-              <a href="https://coreui.io/docs/4.0/utilities/colors">color</a> and{' '}
-              <a href="https://coreui.io/docs/4.0//utilities/background">background</a> utilities.
-              Here we&#39;ve set <code>color=&#34;primary&#34;</code> and added{' '}
-              <code>.text-white</code> class to the <code>&lt;Ctoast&gt;</code>, and then set{' '}
-              <code>white</code> property to our close button. For a crisp edge, we remove the
-              default border with <code>.border-0</code>.
+              <a href="https://coreui.io/docs/utilities/colors">color</a> and{' '}
+              <a href="https://coreui.io/docs/utilities/background">background</a> utilities. Here
+              we&#39;ve set <code>color=&#34;primary&#34;</code> and added <code>.text-white</code>{' '}
+              class to the <code>&lt;Ctoast&gt;</code>, and then set <code>white</code> property to
+              our close button. For a crisp edge, we remove the default border with{' '}
+              <code>.border-0</code>.
             </p>
             <DocsExample href="components/toast#color-schemes">
               <CToast