refactor: update examples

src/views/forms/FloatingLabels.vue

@@ -1,9 +1,9 @@
 <template>
 <CRow>
-      <CCol xs="12">
-        <DocsCallout name="Floating Label" href="forms/floating-label" />
+      <CCol :xs="12">
+        <DocsCallout name="Floating Label" href="forms/floating-labels.html" />
       </CCol>
-      <CCol xs="12">
+      <CCol :xs="12">
         <CCard class="mb-4">
           <CCardHeader>
             <strong>Vue Floating labels</strong>
@@ -17,7 +17,7 @@
               pseudo-element. Also note that the <code>&lt;CFormInput&gt;</code> must come first so
               we can utilize a sibling selector (e.g., <code>~</code>).
             </p>
-            <DocsExample href="forms/floating-labels">
+            <DocsExample href="forms/floating-labels.html">
               <CFormFloating class="mb-3">
                 <CFormInput type="email" id="floatingInput" placeholder="name@example.com" />
                 <CFormLabel htmlFor="floatingInput">Email address</CFormLabel>
@@ -31,7 +31,7 @@
               When there&#39;s a <code>value</code> already defined, <code>&lt;CFormLabel&gt;</code>
               s will automatically adjust to their floated position.
             </p>
-            <DocsExample href="forms/floating-labels">
+            <DocsExample href="forms/floating-labels.html">
               <CFormFloating>
                 <CFormInput
                   type="email"
@@ -45,7 +45,7 @@
           </CCardBody>
         </CCard>
       </CCol>
-      <CCol xs="12">
+      <CCol :xs="12">
         <CCard class="mb-4">
           <CCardHeader>
             <strong>Vue Floating labels</strong> <small>Textareas</small>
@@ -55,7 +55,7 @@
               By default, <code>&lt;CFormTextarea&gt;</code>s will be the same height as
               <code>&lt;CFormInput&gt;</code>s.
             </p>
-            <DocsExample href="forms/floating-labels#textareas">
+            <DocsExample href="forms/floating-labels.html#textareas">
               <CFormFloating>
                 <CFormTextarea
                   id="floatingTextarea"
@@ -69,7 +69,7 @@
               <code>rows</code> attribute. Instead, set an explicit <code>height</code> (either
               inline or via custom CSS).
             </p>
-            <DocsExample href="forms/floating-labels#textareas">
+            <DocsExample href="forms/floating-labels.html#textareas">
               <CFormFloating>
                 <CFormTextarea
                   placeholder="Leave a comment here"
@@ -82,7 +82,7 @@
           </CCardBody>
         </CCard>
       </CCol>
-      <CCol xs="12">
+      <CCol :xs="12">
         <CCard class="mb-4">
           <CCardHeader>
             <strong>Vue Floating labels</strong> <small>Selects</small>
@@ -97,7 +97,7 @@
                 Selects with <code>size</code> and <code>multiple</code> are not supported.
               </strong>
             </p>
-            <DocsExample href="forms/floating-labels#selects">
+            <DocsExample href="forms/floating-labels.html#selects">
               <CFormFloating>
                 <CFormSelect id="floatingSelect" aria-label="Floating label select example">
                   <option>Open this select menu</option>
@@ -111,7 +111,7 @@
           </CCardBody>
         </CCard>
       </CCol>
-      <CCol xs="12">
+      <CCol :xs="12">
         <CCard class="mb-4">
           <CCardHeader>
             <strong>Vue Floating labels</strong> <small>Layout</small>
@@ -121,7 +121,7 @@
               When working with the CoreUI for Bootstrap grid system, be sure to place form elements
               within column classes.
             </p>
-            <DocsExample href="forms/floating-labels#layout">
+            <DocsExample href="forms/floating-labels.html#layout">
               <CRow :xs="{ gutter: 2 }">
                 <CCol md>
                   <CFormFloating>