docs: update documentation

Author: mrholek

docs/layout/columns.mdx

@@ -13,7 +13,7 @@ import { CRow } from '../../src/components/grid/CRow.tsx'
 
 ## How they work
 
-- **Columns build on the grid's flexbox architecture.** Flexbox means we have options for changing individual columns and [modifying groups of columns at the row level](./../grid#row-columns"). You choose how columns grow, shrink, or otherwise change.
+- **Columns build on the grid's flexbox architecture.** Flexbox means we have options for changing individual columns and [modifying groups of columns at the row level](./../grid#row-columns). You choose how columns grow, shrink, or otherwise change.
 
 - **When building grid layouts, all content goes in columns.** The hierarchy of CoreUI's grid goes from [container](./../containers) to row to column to your content. On rare occasions, you may combine content and column, but be aware there can be unintended consequences.
 

src/components/button/CButtonClose.mdx

@@ -3,7 +3,7 @@ title: React Close Button Component
 name: Close Button
 description: A generic close button component for dismissing content like modals and alerts.
 menu: Components
-route: /components/buttons
+route: /components/close-buttons
 ---
 
 import { Playground, Props } from 'docz'

src/components/card/CCard.mdx

@@ -592,10 +592,10 @@ When using card groups with footers, their content will automatically line up.
 
 ### Grid cards
 
-Use the `CRow` component and set `cols*` property to control how many grid columns (wrapped around your cards) you show per row. For example, here's `cols="1"` laying out the cards on one column, and `colsMd="2"` splitting four cards to equal width across multiple rows, from the medium breakpoint up.
+Use the `CRow` component and set `xs|sm|md|lg|xl|xxl}={{ cols: * }}` property to control how many grid columns (wrapped around your cards) you show per row. For example, here's `xs={{cols: 1}}` laying out the cards on one column, and `md={{cols: 1}}` splitting four cards to equal width across multiple rows, from the medium breakpoint up.
 
 <Playground>
-  <CRow cols="1" colsMd="2" className="g-4">
+  <CRow xs={{ cols: 1, gutter: 4}} md={{ cols:2 }}>
     <CCol xs>
       <CCard>
         <CCardImage component="svg" orientation="top" className="docs-placeholder-img" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Image cap" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text></CCardImage>
@@ -639,10 +639,10 @@ Use the `CRow` component and set `cols*` property to control how many grid colum
   </CRow>
 </Playground>
 
-Change it to `colsMd="3"` and you'll see the fourth card wrap.
+Change it to `md={{ cols: 3}` and you'll see the fourth card wrap.
 
 <Playground>
-  <CRow cols="1" colsMd="3" className="g-4">
+  <CRow xs={{ cols: 1, gutter: 4}} md={{ cols: 3 }}>
     <CCol xs>
       <CCard>
         <CCardImage component="svg" orientation="top" className="docs-placeholder-img" width="100%" height="180" xmlns="http://www.w3.org/2000/svg" role="img" aria-label="Placeholder: Image cap" preserveAspectRatio="xMidYMid slice" focusable="false"><title>Placeholder</title><rect width="100%" height="100%" fill="#868e96"></rect><text x="50%" y="50%" fill="#dee2e6" dy=".3em">Image cap</text></CCardImage>

src/components/carousel/CCarousel.mdx

@@ -94,7 +94,7 @@ You can attach the indicators to the carousel, lengthwise the controls, too.
 
 ### With captions
 
-You can add captions to slides with the `<CCarouselCaption>` element within any `<CCarouselItem>`. They can be immediately hidden on smaller viewports, as shown below, with optional [display utilities](https://coreui.io/4.0/utilities/display"). We hide them with `.d-none` and draw them back on medium-sized devices with `.d-md-block`.
+You can add captions to slides with the `<CCarouselCaption>` element within any `<CCarouselItem>`. They can be immediately hidden on smaller viewports, as shown below, with optional [display utilities](https://coreui.io/4.0/utilities/display). We hide them with `.d-none` and draw them back on medium-sized devices with `.d-md-block`.
 
 <Playground>
   {() => {

src/components/form/CInputGroup.mdx

@@ -27,7 +27,7 @@ import { CRow } from '../grid/CRow'
 
 ## Basic example
 
-Place one add-on or button on either side of an input. You may also place one on both sides of an input. Remember to place `<label>`s outside the input group.
+Place one add-on or button on either side of an input. You may also place one on both sides of an input. Remember to place `<CFormLabel>`s outside the input group.
 
 <Playground>
 <CInputGroup className="mb-3">
@@ -77,7 +77,7 @@ Input groups wrap by default via `flex-wrap: wrap` in order to accommodate custo
 
 ## Sizing
 
-Add the relative form sizing classes to the `.input-group` itself and contents within will automatically resize—no need for repeating the form control size classes on each element.
+Add the relative form sizing classes to the `<CInputGroup>` itself and contents within will automatically resize—no need for repeating the form control size classes on each element.
 
 **Sizing on the individual input group elements isn't supported.**
 
@@ -120,7 +120,7 @@ Place any checkbox or radio option within an input group's addon instead of text
 
 ## Multiple inputs
 
-While multiple `<input>`s are supported visually, validation styles are only available for input groups with a single `<input>`.
+While multiple `<CFormControl>`s are supported visually, validation styles are only available for input groups with a single `<CFormControl>`.
 
 <Playground>
 <CInputGroup>

src/components/modal/CModal.mdx

@@ -27,7 +27,7 @@ import { CTooltip } from '../tooltip/CTooltip.tsx'
 Below is a static modal example (meaning its `position` and `display` have been overridden). Included are the modal header, modal body (required for `padding`), and modal footer (optional). We ask that you include modal headers with dismiss actions whenever possible, or provide another explicit dismiss action.
 
 <Playground>
-  <CModal className="show d-block position-static">
+  <CModal className="show d-block position-static" backdrop={false} keyboard={false} portal={false} visible>
     <CModalHeader>
       <CModalTitle>Modal title</CModalTitle>
     </CModalHeader>
@@ -528,7 +528,7 @@ Another override is the option to pop up a modal that covers the user viewport,
       <td>Below <code>1200px</code></td>
     </tr>
     <tr>
-      <td><code>'xx'n</code></td>
+      <td><code>'xxl'</code></td>
       <td>Below <code>1400px</code></td>
     </tr>
   </tbody>

src/components/nav/CNav.mdx

@@ -240,7 +240,7 @@ For equal-width elements, use `layout="justified"`. All horizontal space will be
 
 ## Working with flex utilities
 
-If you need responsive nav variations, consider using a series of [flexbox utilities](https://coreui.io/docs/utilities/flex"). While more verbose, these utilities offer greater customization across responsive breakpoints. In the example below, our nav will be stacked on the lowest breakpoint, then adapt to a horizontal layout that fills the available width starting from the small breakpoint.
+If you need responsive nav variations, consider using a series of [flexbox utilities](https://coreui.io/docs/utilities/flex). While more verbose, these utilities offer greater customization across responsive breakpoints. In the example below, our nav will be stacked on the lowest breakpoint, then adapt to a horizontal layout that fills the available width starting from the small breakpoint.
 
 <Playground>
   <CNav component="nav" variant="pills" className="flex-column flex-sm-row">

src/components/table/CTable.mdx

@@ -429,7 +429,7 @@ Add `bordered` property for borders on all sides of the table and cells.
   </CTable>
 </Playground>
 
-[Border color utilities](https://coreui.io/docs/4.0/utilities/borders#border-color") can be added to change colors:
+[Border color utilities](https://coreui.io/docs/4.0/utilities/borders#border-color) can be added to change colors:
 
 <Playground>
   <CTable bordered borderColor="primary">

src/components/toast/CToast.mdx

@@ -58,7 +58,7 @@ Toasts are as flexible as you need and have very little required markup. At a mi
   {() => {
     const [toast, addToast] = useState(0)
     const toaster = useRef()
-    const toast2 = (
+    const exampleToast = (
       <CToast title="CoreUI for React.js">
         <CToastHeader close>
           <svg
@@ -80,7 +80,7 @@ Toasts are as flexible as you need and have very little required markup. At a mi
     )
     return (
       <>
-        <CButton onClick={() => addToast(toast2)}>Send a toast</CButton>
+        <CButton onClick={() => addToast(exampleToast)}>Send a toast</CButton>
         <CToaster ref={toaster} push={toast} placement="top-end" />
       </>
     )
@@ -161,7 +161,7 @@ You can stack toasts by wrapping them in a toast container, which will verticall
 
 ### Custom content
 
-Customize your toasts by removing sub-components, tweaking them with [utilities](https://coreui.io/docs/4.0/utilities/api"), or by adding your own markup. Here we've created a simpler toast by removing the default `.<CToastHeader>`, adding a custom hide icon from [CoreUI Icons](https://icons.coreui.io), and using some [flexbox utilities](https://coreui.io/docs/4.0/utilities/flex") to adjust the layout.
+Customize your toasts by removing sub-components, tweaking them with [utilities](https://coreui.io/docs/4.0/utilities/api), or by adding your own markup. Here we've created a simpler toast by removing the default `<CToastHeader>`, adding a custom hide icon from [CoreUI Icons](https://icons.coreui.io), and using some [flexbox utilities](https://coreui.io/docs/4.0/utilities/flex) to adjust the layout.
 
 <Playground>
   <CToast autohide={false} className="align-items-center">
@@ -191,7 +191,7 @@ Alternatively, you can also add additional controls and components to toasts.
 
 ### Color schemes
 
-Building on the above example, you can create different toast color schemes with our [color]({{< docsref "/utilities/colors" >}}) and [background]({{< docsref "/utilities/background" >}}) utilities. Here we've added `.bg-primary` and `.text-white` to the `.toast`, and then added `.btn-close-white` to our close button. For a crisp edge, we remove the default border with `.border-0`.
+Building on the above example, you can create different toast color schemes with our [color](https://coreui.io/docs/4.0/utilities/colors) and [background](https://coreui.io/docs/4.0//utilities/background) utilities. Here we've set `color="primary"` and added `.text-white` class to the `<Ctoast>`, and then set `white` property to our close button. For a crisp edge, we remove the default border with `.border-0`.
 
 <Playground>
   <CToast autohide={false} color="primary" className="text-white align-items-center">

src/components/tooltip/CTooltip.mdx

@@ -18,7 +18,7 @@ import { CLink } from './../link/CLink.tsx'
 Hover over the links below to see tooltips:
 
 <Playground>
-  <p className="muted">
+  <p className="text-medium-emphasis">
     Tight pants next level keffiyeh
     <CTooltip content="Tooltip text">
       <CLink> you probably </CLink>