`.
-```jsx preview
-
+
-```jsx preview
-
+
## Without labels
Remember to still provide some form of accessible name for assistive technologies (for instance, using `aria-label`).
-```jsx preview
-
-
-
-
-```
+
+
## Toggle buttons
@@ -120,55 +134,31 @@ Create button-like checkboxes and radio buttons by using `button` boolean proper
### Checkbox toggle buttons
-```jsx preview
-
+
+
+
+
+
+
+
### Radio toggle buttons
-```jsx preview
-
+
### Outlined styles
Different variants of button, such at the various outlined styles, are supported.
-```jsx preview
-
-
-
-
-
-
-```
+
+
## API
diff --git a/packages/docs/src/content/docs/forms/examples/ChecksRadiosCheckboxToggleButtonsCheckedExample.tsx b/packages/docs/src/content/docs/forms/examples/ChecksRadiosCheckboxToggleButtonsCheckedExample.tsx
new file mode 100644
index 00000000..63c77668
--- /dev/null
+++ b/packages/docs/src/content/docs/forms/examples/ChecksRadiosCheckboxToggleButtonsCheckedExample.tsx
@@ -0,0 +1,11 @@
+import { CFormCheck } from '@coreui/react'
+
+export const ChecksRadiosCheckboxToggleButtonsCheckedExample = () => (
+
+
+
+
+
+
+
+)
diff --git a/packages/docs/src/content/docs/forms/examples/ChecksRadiosRadioToggleButtonsExample.tsx b/packages/docs/src/content/docs/forms/examples/ChecksRadiosRadioToggleButtonsExample.tsx
new file mode 100644
index 00000000..9dc0e4f8
--- /dev/null
+++ b/packages/docs/src/content/docs/forms/examples/ChecksRadiosRadioToggleButtonsExample.tsx
@@ -0,0 +1,40 @@
+import { CFormCheck } from '@coreui/react'
+
+export const ChecksRadiosRadioToggleButtonsExample = () => (
+ <>
+
+
+
+
+
+)
diff --git a/packages/docs/src/content/docs/forms/examples/FormControlColorExample.tsx b/packages/docs/src/content/docs/forms/examples/FormControlColorExample.tsx
new file mode 100644
index 00000000..33408cf7
--- /dev/null
+++ b/packages/docs/src/content/docs/forms/examples/FormControlColorExample.tsx
@@ -0,0 +1,13 @@
+import { CFormInput, CFormLabel } from '@coreui/react'
+
+export const FormControlColorExample = () => (
+ <>
+ Color picker
+
+
+ Email address
+
+
+ Example textarea
+
+
+)
diff --git a/packages/docs/src/content/docs/forms/examples/FormControlFileInputExample.tsx b/packages/docs/src/content/docs/forms/examples/FormControlFileInputExample.tsx
new file mode 100644
index 00000000..8bd5d96d
--- /dev/null
+++ b/packages/docs/src/content/docs/forms/examples/FormControlFileInputExample.tsx
@@ -0,0 +1,26 @@
+import { CFormInput, CFormLabel } from '@coreui/react'
+
+export const FormControlFileInputExample = () => (
+ <>
+
+ Default file input example
+
+
+ Multiple files input example
+
+
+ Disabled file input example
+
+
+ Small file input example
+
+
+ Large file input example
+
+
+)
diff --git a/packages/docs/src/content/docs/forms/examples/FormControlReadonlyExample.tsx b/packages/docs/src/content/docs/forms/examples/FormControlReadonlyExample.tsx
new file mode 100644
index 00000000..fa5b2d56
--- /dev/null
+++ b/packages/docs/src/content/docs/forms/examples/FormControlReadonlyExample.tsx
@@ -0,0 +1,10 @@
+import { CFormInput } from '@coreui/react'
+
+export const FormControlReadonlyExample = () => (
+
+
+ Email
+
+
+
+
+
+
+ Password
+
+
+
+
+
+)
diff --git a/packages/docs/src/content/docs/forms/examples/FormControlReadonlyPlainTextInlineExample.tsx b/packages/docs/src/content/docs/forms/examples/FormControlReadonlyPlainTextInlineExample.tsx
new file mode 100644
index 00000000..eb6ad256
--- /dev/null
+++ b/packages/docs/src/content/docs/forms/examples/FormControlReadonlyPlainTextInlineExample.tsx
@@ -0,0 +1,29 @@
+import { CButton, CCol, CForm, CFormInput, CFormLabel } from '@coreui/react'
+
+export const FormControlReadonlyPlainTextInlineExample = () => (
+
+
+
+ Email
+
+
+
+
+ Password
+
+
+
+
+ Confirm identity
+
+
+
+)
diff --git a/packages/docs/src/content/docs/forms/examples/FormControlSizingExample.tsx b/packages/docs/src/content/docs/forms/examples/FormControlSizingExample.tsx
new file mode 100644
index 00000000..73102bbb
--- /dev/null
+++ b/packages/docs/src/content/docs/forms/examples/FormControlSizingExample.tsx
@@ -0,0 +1,9 @@
+import { CFormInput } from '@coreui/react'
+
+export const FormControlSizingExample = () => (
+ <>
+
-
- Email address
-
-
- Example textarea
-
-
-```
+
+
## Sizing
Set heights using `size` property like `size="lg"` and `size="sm"`.
-```jsx preview
-
+
## Disabled
Add the `disabled` boolean attribute on an input to give it a grayed out appearance and remove pointer events.
-```jsx preview
-
+
## Readonly
Add the `readOnly` boolean attribute on an input to prevent modification of the input's value. Read-only inputs appear lighter (just like disabled inputs), but retain the standard cursor.
-```jsx preview
-
+
## Readonly plain text
If you want to have `
- Email
-
-
-
-
- Password
-
-
-
-```
-
-```jsx preview
-
-
- Email
-
-
- Password
-
-
- Confirm identity
-
-
-```
+
+
+
+
+
## File input
-```jsx preview
-
- Default file input example
-
-
- Multiple files input example
-
-
- Disabled file input example
-
-
- Small file input example
-
-
- Large file input example
-
-```
+
+
## Color
-```jsx preview
-Color picker
-
+
## API
diff --git a/packages/docs/src/content/docs/layout/columns.mdx b/packages/docs/src/content/docs/layout/columns.mdx
index 184a2299..c0ec7634 100644
--- a/packages/docs/src/content/docs/layout/columns.mdx
+++ b/packages/docs/src/content/docs/layout/columns.mdx
@@ -6,6 +6,31 @@ description: "Learn how to modify columns with a handful of options for alignmen
import CColData from '@api/CCol.api.json'
+import { ColumnsVerticalAlignmentExample } from './examples/ColumnsVerticalAlignmentExample'
+import ColumnsVerticalAlignmentExampleRaw from './examples/ColumnsVerticalAlignmentExample.tsx?raw'
+import { ColumnsVerticalAlignmentSelfExample } from './examples/ColumnsVerticalAlignmentSelfExample'
+import ColumnsVerticalAlignmentSelfExampleRaw from './examples/ColumnsVerticalAlignmentSelfExample.tsx?raw'
+import { ColumnsHorizontalAlignmentExample } from './examples/ColumnsHorizontalAlignmentExample'
+import ColumnsHorizontalAlignmentExampleRaw from './examples/ColumnsHorizontalAlignmentExample.tsx?raw'
+import { ColumnsWrappingExample } from './examples/ColumnsWrappingExample'
+import ColumnsWrappingExampleRaw from './examples/ColumnsWrappingExample.tsx?raw'
+import { ColumnsBreaksExample } from './examples/ColumnsBreaksExample'
+import ColumnsBreaksExampleRaw from './examples/ColumnsBreaksExample.tsx?raw'
+import { ColumnsBreaksResponsiveExample } from './examples/ColumnsBreaksResponsiveExample'
+import ColumnsBreaksResponsiveExampleRaw from './examples/ColumnsBreaksResponsiveExample.tsx?raw'
+import { ColumnsOrderExample } from './examples/ColumnsOrderExample'
+import ColumnsOrderExampleRaw from './examples/ColumnsOrderExample.tsx?raw'
+import { ColumnsOrderFirstLastExample } from './examples/ColumnsOrderFirstLastExample'
+import ColumnsOrderFirstLastExampleRaw from './examples/ColumnsOrderFirstLastExample.tsx?raw'
+import { ColumnsOffsetExample } from './examples/ColumnsOffsetExample'
+import ColumnsOffsetExampleRaw from './examples/ColumnsOffsetExample.tsx?raw'
+import { ColumnsOffsetResetExample } from './examples/ColumnsOffsetResetExample'
+import ColumnsOffsetResetExampleRaw from './examples/ColumnsOffsetResetExample.tsx?raw'
+import { ColumnsMarginUtilitiesExample } from './examples/ColumnsMarginUtilitiesExample'
+import ColumnsMarginUtilitiesExampleRaw from './examples/ColumnsMarginUtilitiesExample.tsx?raw'
+import { ColumnsStandaloneExample } from './examples/ColumnsStandaloneExample'
+import ColumnsStandaloneExampleRaw from './examples/ColumnsStandaloneExample.tsx?raw'
+
## 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.
@@ -20,135 +45,41 @@ Use flexbox alignment utilities to vertically and horizontally align columns.
### Vertical alignment
-```jsx preview className="docs-example-row docs-example-row-flex-cols"
-
-
- One of three columns
- One of three columns
- One of three columns
-
-
- One of three columns
- One of three columns
- One of three columns
-
-
- One of three columns
- One of three columns
- One of three columns
-
-
-```
-
-```jsx preview className="docs-example-row docs-example-row-flex-cols"
-
-
- One of three columns
- One of three columns
- One of three columns
-
-
-```
+
+
+
+
+
### Horizontal alignment
-```jsx preview className="docs-example-row"
-
-
- One of two columns
- One of two columns
-
-
- One of two columns
- One of two columns
-
-
- One of two columns
- One of two columns
-
-
- One of two columns
- One of two columns
-
-
- One of two columns
- One of two columns
-
-
- One of two columns
- One of two columns
-
-
-```
+
+
### Column wrapping
If more than 12 columns are placed within a single row, each group of extra columns will, as one unit, wrap onto a new line.
-```jsx preview className="docs-example-row"
-
-
- .col-9
-
- .col-4
-
-
- .col-6
-
-
-
-```
+
+
### Column breaks
Breaking columns to a new line in flexbox requires a small hack: add an element with `width: 100%` wherever you want to wrap your columns to a new line. Normally this is accomplished with multiple ``s, but not every implementation method can account for this.
-```jsx preview className="docs-example-row"
-
-
-
- .col-6 .col-sm-3
-
-
- .col-6 .col-sm-3
-
-
-
- .col-6 .col-sm-3
-
-
- .col-6 .col-sm-3
-
-
-
-```
+
+
You may also apply this break at specific breakpoints with our [responsive display utilities](https://coreui.io/bootstrap/docs/utilities/display).
-```jsx preview className="docs-example-row"
-
-
-
- .col-6 .col-sm-4
-
-
- .col-6 .col-sm-4
-
-
-
- .col-6 .col-sm-4
-
-
- .col-6 .col-sm-4
-
-
-
-```
+
+
## Reordering
@@ -156,27 +87,15 @@ You may also apply this break at specific breakpoints with our [responsive displ
Use `xs|sm|md|lg|xl|xxl={{ order: 1-5 }}` props for controlling the **visual order** of your content. These props are responsive, so you can set the `order` by breakpoint (e.g., `xs={{ order: 1}} md={{ order: 2}}`). Includes support for `1` through `5` across all six grid tiers.
-```jsx preview className="docs-example-row"
-
-
- First in DOM, no order applied
- Second in DOM, with a larger order
- Third in DOM, with an order of 1
-
-
-```
+
+
There are also responsive `xs|sm|md|lg|xl|xxl={{ order: 'first' }}` and `xs|sm|md|lg|xl|xxl={{ order: 'last' }}` props that change the `order` of an element by applying `order: -1` and `order: 6`, respectively. These values can also be intermixed with the numbered `xs|sm|md|lg|xl|xxl={{ order: 1-5 }}` values as needed.
-```jsx preview className="docs-example-row"
-
-
- First in DOM, ordered last
- Second in DOM, unordered
- Third in DOM, ordered first
-
-
-```
+
+
### Offsetting columns
@@ -186,84 +105,29 @@ You can offset grid columns in two ways: our responsive `xs|sm|md|lg|xl|xxl={{ o
Move columns to the right using `md={{ offset: * }}` props. These props increase the left margin of a column by `*` columns. For example, `md={{ offset: 4 }}` moves `.col-md-4` over four columns.
-```jsx preview className="docs-example-row"
-
-
- .col-md-4
- .col-md-4 .offset-md-4
-
-
- .col-md-3 .offset-md-3
- .col-md-3 .offset-md-3
-
-
- .col-md-6 .offset-md-3
-
-
-```
-
-```jsx preview className="docs-example-row"
-
-
-
- .col-sm-5 .col-md-6
-
-
- .col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0
-
-
-
-
- .col-sm-6 .col-md-5 .col-lg-6
-
-
- .col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0
-
-
-
-```
+
+
+
+
+
#### Margin utilities
You can use margin utilities like `.me-auto` to force sibling columns away from one another.
-```jsx preview className="docs-example-row"
-
-
- .col-md-4
-
- .col-md-4 .ms-auto
-
-
-
-
- .col-md-3 .ms-md-auto
-
-
- .col-md-3 .ms-md-auto
-
-
-
-
- .col-auto .me-auto
-
- .col-auto
-
-
-```
+
+
## Standalone column component
The `` component can also be used outside a `` to give an element a specific width. Whenever column component are used as non direct children of a row, the paddings are omitted.
-```jsx preview
-
- .col-3: width of 25%
-
-
- .col-sm-9: width of 75% above sm breakpoint
-
-```
+
+
## API
diff --git a/packages/docs/src/content/docs/layout/examples/ColumnsBreaksExample.tsx b/packages/docs/src/content/docs/layout/examples/ColumnsBreaksExample.tsx
new file mode 100644
index 00000000..17c66692
--- /dev/null
+++ b/packages/docs/src/content/docs/layout/examples/ColumnsBreaksExample.tsx
@@ -0,0 +1,21 @@
+import { CCol, CContainer, CRow } from '@coreui/react'
+
+export const ColumnsBreaksExample = () => (
+
+
+
+ .col-6 .col-sm-3
+
+
+ .col-6 .col-sm-3
+
+
+
+ .col-6 .col-sm-3
+
+
+ .col-6 .col-sm-3
+
+
+
+)
diff --git a/packages/docs/src/content/docs/layout/examples/ColumnsBreaksResponsiveExample.tsx b/packages/docs/src/content/docs/layout/examples/ColumnsBreaksResponsiveExample.tsx
new file mode 100644
index 00000000..51845306
--- /dev/null
+++ b/packages/docs/src/content/docs/layout/examples/ColumnsBreaksResponsiveExample.tsx
@@ -0,0 +1,21 @@
+import { CCol, CContainer, CRow } from '@coreui/react'
+
+export const ColumnsBreaksResponsiveExample = () => (
+
+
+
+ .col-6 .col-sm-4
+
+
+ .col-6 .col-sm-4
+
+
+
+ .col-6 .col-sm-4
+
+
+ .col-6 .col-sm-4
+
+
+
+)
diff --git a/packages/docs/src/content/docs/layout/examples/ColumnsHorizontalAlignmentExample.tsx b/packages/docs/src/content/docs/layout/examples/ColumnsHorizontalAlignmentExample.tsx
new file mode 100644
index 00000000..c54bf32b
--- /dev/null
+++ b/packages/docs/src/content/docs/layout/examples/ColumnsHorizontalAlignmentExample.tsx
@@ -0,0 +1,30 @@
+import { CCol, CContainer, CRow } from '@coreui/react'
+
+export const ColumnsHorizontalAlignmentExample = () => (
+
+
+ One of two columns
+ One of two columns
+
+
+ One of two columns
+ One of two columns
+
+
+ One of two columns
+ One of two columns
+
+
+ One of two columns
+ One of two columns
+
+
+ One of two columns
+ One of two columns
+
+
+ One of two columns
+ One of two columns
+
+
+)
diff --git a/packages/docs/src/content/docs/layout/examples/ColumnsMarginUtilitiesExample.tsx b/packages/docs/src/content/docs/layout/examples/ColumnsMarginUtilitiesExample.tsx
new file mode 100644
index 00000000..af7d09b5
--- /dev/null
+++ b/packages/docs/src/content/docs/layout/examples/ColumnsMarginUtilitiesExample.tsx
@@ -0,0 +1,26 @@
+import { CCol, CContainer, CRow } from '@coreui/react'
+
+export const ColumnsMarginUtilitiesExample = () => (
+
+
+ .col-md-4
+
+ .col-md-4 .ms-auto
+
+
+
+
+ .col-md-3 .ms-md-auto
+
+
+ .col-md-3 .ms-md-auto
+
+
+
+
+ .col-auto .me-auto
+
+ .col-auto
+
+
+)
diff --git a/packages/docs/src/content/docs/layout/examples/ColumnsOffsetExample.tsx b/packages/docs/src/content/docs/layout/examples/ColumnsOffsetExample.tsx
new file mode 100644
index 00000000..0886d393
--- /dev/null
+++ b/packages/docs/src/content/docs/layout/examples/ColumnsOffsetExample.tsx
@@ -0,0 +1,17 @@
+import { CCol, CContainer, CRow } from '@coreui/react'
+
+export const ColumnsOffsetExample = () => (
+
+
+ .col-md-4
+ .col-md-4 .offset-md-4
+
+
+ .col-md-3 .offset-md-3
+ .col-md-3 .offset-md-3
+
+
+ .col-md-6 .offset-md-3
+
+
+)
diff --git a/packages/docs/src/content/docs/layout/examples/ColumnsOffsetResetExample.tsx b/packages/docs/src/content/docs/layout/examples/ColumnsOffsetResetExample.tsx
new file mode 100644
index 00000000..774f29ff
--- /dev/null
+++ b/packages/docs/src/content/docs/layout/examples/ColumnsOffsetResetExample.tsx
@@ -0,0 +1,22 @@
+import { CCol, CContainer, CRow } from '@coreui/react'
+
+export const ColumnsOffsetResetExample = () => (
+
+
+
+ .col-sm-5 .col-md-6
+
+
+ .col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0
+
+
+
+
+ .col-sm-6 .col-md-5 .col-lg-6
+
+
+ .col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0
+
+
+
+)
diff --git a/packages/docs/src/content/docs/layout/examples/ColumnsOrderExample.tsx b/packages/docs/src/content/docs/layout/examples/ColumnsOrderExample.tsx
new file mode 100644
index 00000000..0188bf0d
--- /dev/null
+++ b/packages/docs/src/content/docs/layout/examples/ColumnsOrderExample.tsx
@@ -0,0 +1,11 @@
+import { CCol, CContainer, CRow } from '@coreui/react'
+
+export const ColumnsOrderExample = () => (
+
+
+ First in DOM, no order applied
+ Second in DOM, with a larger order
+ Third in DOM, with an order of 1
+
+
+)
diff --git a/packages/docs/src/content/docs/layout/examples/ColumnsOrderFirstLastExample.tsx b/packages/docs/src/content/docs/layout/examples/ColumnsOrderFirstLastExample.tsx
new file mode 100644
index 00000000..000b7345
--- /dev/null
+++ b/packages/docs/src/content/docs/layout/examples/ColumnsOrderFirstLastExample.tsx
@@ -0,0 +1,11 @@
+import { CCol, CContainer, CRow } from '@coreui/react'
+
+export const ColumnsOrderFirstLastExample = () => (
+
+
+ First in DOM, ordered last
+ Second in DOM, unordered
+ Third in DOM, ordered first
+
+
+)
diff --git a/packages/docs/src/content/docs/layout/examples/ColumnsStandaloneExample.tsx b/packages/docs/src/content/docs/layout/examples/ColumnsStandaloneExample.tsx
new file mode 100644
index 00000000..726b08ab
--- /dev/null
+++ b/packages/docs/src/content/docs/layout/examples/ColumnsStandaloneExample.tsx
@@ -0,0 +1,12 @@
+import { CCol } from '@coreui/react'
+
+export const ColumnsStandaloneExample = () => (
+ <>
+
+ .col-3: width of 25%
+
+
+ .col-sm-9: width of 75% above sm breakpoint
+
+
+)
diff --git a/packages/docs/src/content/docs/layout/examples/ColumnsVerticalAlignmentExample.tsx b/packages/docs/src/content/docs/layout/examples/ColumnsVerticalAlignmentExample.tsx
new file mode 100644
index 00000000..fc823cfa
--- /dev/null
+++ b/packages/docs/src/content/docs/layout/examples/ColumnsVerticalAlignmentExample.tsx
@@ -0,0 +1,21 @@
+import { CCol, CContainer, CRow } from '@coreui/react'
+
+export const ColumnsVerticalAlignmentExample = () => (
+
+
+ One of three columns
+ One of three columns
+ One of three columns
+
+
+ One of three columns
+ One of three columns
+ One of three columns
+
+
+ One of three columns
+ One of three columns
+ One of three columns
+
+
+)
diff --git a/packages/docs/src/content/docs/layout/examples/ColumnsVerticalAlignmentSelfExample.tsx b/packages/docs/src/content/docs/layout/examples/ColumnsVerticalAlignmentSelfExample.tsx
new file mode 100644
index 00000000..5379b675
--- /dev/null
+++ b/packages/docs/src/content/docs/layout/examples/ColumnsVerticalAlignmentSelfExample.tsx
@@ -0,0 +1,11 @@
+import { CCol, CContainer, CRow } from '@coreui/react'
+
+export const ColumnsVerticalAlignmentSelfExample = () => (
+
+
+ One of three columns
+ One of three columns
+ One of three columns
+
+
+)
diff --git a/packages/docs/src/content/docs/layout/examples/ColumnsWrappingExample.tsx b/packages/docs/src/content/docs/layout/examples/ColumnsWrappingExample.tsx
new file mode 100644
index 00000000..8e7d8caf
--- /dev/null
+++ b/packages/docs/src/content/docs/layout/examples/ColumnsWrappingExample.tsx
@@ -0,0 +1,20 @@
+import { CCol, CContainer, CRow } from '@coreui/react'
+
+export const ColumnsWrappingExample = () => (
+
+
+ .col-9
+
+ .col-4
+
+
+ .col-6
+
+
+
+)
diff --git a/packages/docs/src/content/docs/layout/examples/GridAllBreakpointsExample.tsx b/packages/docs/src/content/docs/layout/examples/GridAllBreakpointsExample.tsx
new file mode 100644
index 00000000..a5aee853
--- /dev/null
+++ b/packages/docs/src/content/docs/layout/examples/GridAllBreakpointsExample.tsx
@@ -0,0 +1,16 @@
+import { CCol, CContainer, CRow } from '@coreui/react'
+
+export const GridAllBreakpointsExample = () => (
+
+
+ col
+ col
+ col
+ col
+
+
+ col-8
+ col-4
+
+
+)
diff --git a/packages/docs/src/content/docs/layout/examples/GridEqualWidthExample.tsx b/packages/docs/src/content/docs/layout/examples/GridEqualWidthExample.tsx
new file mode 100644
index 00000000..8e039049
--- /dev/null
+++ b/packages/docs/src/content/docs/layout/examples/GridEqualWidthExample.tsx
@@ -0,0 +1,15 @@
+import { CCol, CContainer, CRow } from '@coreui/react'
+
+export const GridEqualWidthExample = () => (
+
+
+ 1 of 2
+ 2 of 2
+
+
+ 1 of 3
+ 2 of 3
+ 3 of 3
+
+
+)
diff --git a/packages/docs/src/content/docs/layout/examples/GridExample.tsx b/packages/docs/src/content/docs/layout/examples/GridExample.tsx
new file mode 100644
index 00000000..5f3e3b47
--- /dev/null
+++ b/packages/docs/src/content/docs/layout/examples/GridExample.tsx
@@ -0,0 +1,11 @@
+import { CCol, CContainer, CRow } from '@coreui/react'
+
+export const GridExample = () => (
+
+
+ One of three columns
+ One of three columns
+ One of three columns
+
+
+)
diff --git a/packages/docs/src/content/docs/layout/examples/GridMixAndMatchExample.tsx b/packages/docs/src/content/docs/layout/examples/GridMixAndMatchExample.tsx
new file mode 100644
index 00000000..b9938177
--- /dev/null
+++ b/packages/docs/src/content/docs/layout/examples/GridMixAndMatchExample.tsx
@@ -0,0 +1,27 @@
+import { CCol, CContainer, CRow } from '@coreui/react'
+
+export const GridMixAndMatchExample = () => (
+
+
+ .col-md-8
+
+ .col-6 .col-md-4
+
+
+
+
+ .col-6 .col-md-4
+
+
+ .col-6 .col-md-4
+
+
+ .col-6 .col-md-4
+
+
+
+ .col-6
+ .col-6
+
+
+)
diff --git a/packages/docs/src/content/docs/layout/examples/GridRowColumns2Example.tsx b/packages/docs/src/content/docs/layout/examples/GridRowColumns2Example.tsx
new file mode 100644
index 00000000..cbc33675
--- /dev/null
+++ b/packages/docs/src/content/docs/layout/examples/GridRowColumns2Example.tsx
@@ -0,0 +1,12 @@
+import { CCol, CContainer, CRow } from '@coreui/react'
+
+export const GridRowColumns2Example = () => (
+
+
+ Column
+ Column
+ Column
+ Column
+
+
+)
diff --git a/packages/docs/src/content/docs/layout/examples/GridRowColumns3Example.tsx b/packages/docs/src/content/docs/layout/examples/GridRowColumns3Example.tsx
new file mode 100644
index 00000000..050ff46a
--- /dev/null
+++ b/packages/docs/src/content/docs/layout/examples/GridRowColumns3Example.tsx
@@ -0,0 +1,12 @@
+import { CCol, CContainer, CRow } from '@coreui/react'
+
+export const GridRowColumns3Example = () => (
+
+
+ Column
+ Column
+ Column
+ Column
+
+
+)
diff --git a/packages/docs/src/content/docs/layout/examples/GridRowColumns4ColExample.tsx b/packages/docs/src/content/docs/layout/examples/GridRowColumns4ColExample.tsx
new file mode 100644
index 00000000..391d5cfa
--- /dev/null
+++ b/packages/docs/src/content/docs/layout/examples/GridRowColumns4ColExample.tsx
@@ -0,0 +1,12 @@
+import { CCol, CContainer, CRow } from '@coreui/react'
+
+export const GridRowColumns4ColExample = () => (
+
+
+ Column
+ Column
+ Column
+ Column
+
+
+)
diff --git a/packages/docs/src/content/docs/layout/examples/GridRowColumns4Example.tsx b/packages/docs/src/content/docs/layout/examples/GridRowColumns4Example.tsx
new file mode 100644
index 00000000..2dad81f7
--- /dev/null
+++ b/packages/docs/src/content/docs/layout/examples/GridRowColumns4Example.tsx
@@ -0,0 +1,12 @@
+import { CCol, CContainer, CRow } from '@coreui/react'
+
+export const GridRowColumns4Example = () => (
+
+
+ Column
+ Column
+ Column
+ Column
+
+
+)
diff --git a/packages/docs/src/content/docs/layout/examples/GridRowColumnsAutoExample.tsx b/packages/docs/src/content/docs/layout/examples/GridRowColumnsAutoExample.tsx
new file mode 100644
index 00000000..9561646a
--- /dev/null
+++ b/packages/docs/src/content/docs/layout/examples/GridRowColumnsAutoExample.tsx
@@ -0,0 +1,12 @@
+import { CCol, CContainer, CRow } from '@coreui/react'
+
+export const GridRowColumnsAutoExample = () => (
+
+
+ Column
+ Column
+ Column
+ Column
+
+
+)
diff --git a/packages/docs/src/content/docs/layout/examples/GridRowColumnsResponsiveExample.tsx b/packages/docs/src/content/docs/layout/examples/GridRowColumnsResponsiveExample.tsx
new file mode 100644
index 00000000..ec845d0c
--- /dev/null
+++ b/packages/docs/src/content/docs/layout/examples/GridRowColumnsResponsiveExample.tsx
@@ -0,0 +1,12 @@
+import { CCol, CContainer, CRow } from '@coreui/react'
+
+export const GridRowColumnsResponsiveExample = () => (
+
+
+ Column
+ Column
+ Column
+ Column
+
+
+)
diff --git a/packages/docs/src/content/docs/layout/examples/GridSettingOneColumnWidthExample.tsx b/packages/docs/src/content/docs/layout/examples/GridSettingOneColumnWidthExample.tsx
new file mode 100644
index 00000000..112bf80d
--- /dev/null
+++ b/packages/docs/src/content/docs/layout/examples/GridSettingOneColumnWidthExample.tsx
@@ -0,0 +1,16 @@
+import { CCol, CContainer, CRow } from '@coreui/react'
+
+export const GridSettingOneColumnWidthExample = () => (
+
+
+ 1 of 3
+ 2 of 3 (wider)
+ 3 of 3
+
+
+ 1 of 3
+ 2 of 3 (wider)
+ 3 of 3
+
+
+)
diff --git a/packages/docs/src/content/docs/layout/examples/GridStackedToHorizontalExample.tsx b/packages/docs/src/content/docs/layout/examples/GridStackedToHorizontalExample.tsx
new file mode 100644
index 00000000..72be3116
--- /dev/null
+++ b/packages/docs/src/content/docs/layout/examples/GridStackedToHorizontalExample.tsx
@@ -0,0 +1,15 @@
+import { CCol, CContainer, CRow } from '@coreui/react'
+
+export const GridStackedToHorizontalExample = () => (
+
+
+ col-sm-8
+ col-sm-4
+
+
+ col-sm
+ col-sm
+ col-sm
+
+
+)
diff --git a/packages/docs/src/content/docs/layout/examples/GridVariableWidthContentExample.tsx b/packages/docs/src/content/docs/layout/examples/GridVariableWidthContentExample.tsx
new file mode 100644
index 00000000..94739311
--- /dev/null
+++ b/packages/docs/src/content/docs/layout/examples/GridVariableWidthContentExample.tsx
@@ -0,0 +1,22 @@
+import { CCol, CContainer, CRow } from '@coreui/react'
+
+export const GridVariableWidthContentExample = () => (
+
+
+
+ 1 of 3
+
+ Variable width content
+
+ 3 of 3
+
+
+
+ 1 of 3
+ Variable width content
+
+ 3 of 3
+
+
+
+)
diff --git a/packages/docs/src/content/docs/layout/examples/GuttersHorizontalExample.tsx b/packages/docs/src/content/docs/layout/examples/GuttersHorizontalExample.tsx
new file mode 100644
index 00000000..313cb062
--- /dev/null
+++ b/packages/docs/src/content/docs/layout/examples/GuttersHorizontalExample.tsx
@@ -0,0 +1,14 @@
+import { CCol, CContainer, CRow } from '@coreui/react'
+
+export const GuttersHorizontalExample = () => (
+
+
+
+ Custom column padding
+
+
+ Custom column padding
+
+
+
+)
diff --git a/packages/docs/src/content/docs/layout/examples/GuttersHorizontalOverflowHiddenExample.tsx b/packages/docs/src/content/docs/layout/examples/GuttersHorizontalOverflowHiddenExample.tsx
new file mode 100644
index 00000000..8d5236e7
--- /dev/null
+++ b/packages/docs/src/content/docs/layout/examples/GuttersHorizontalOverflowHiddenExample.tsx
@@ -0,0 +1,14 @@
+import { CCol, CContainer, CRow } from '@coreui/react'
+
+export const GuttersHorizontalOverflowHiddenExample = () => (
+
+
+
+ Custom column padding
+
+
+ Custom column padding
+
+
+
+)
diff --git a/packages/docs/src/content/docs/layout/examples/GuttersHorizontalVerticalExample.tsx b/packages/docs/src/content/docs/layout/examples/GuttersHorizontalVerticalExample.tsx
new file mode 100644
index 00000000..dad9a6b8
--- /dev/null
+++ b/packages/docs/src/content/docs/layout/examples/GuttersHorizontalVerticalExample.tsx
@@ -0,0 +1,20 @@
+import { CCol, CContainer, CRow } from '@coreui/react'
+
+export const GuttersHorizontalVerticalExample = () => (
+
+
+
+ Custom column padding
+
+
+ Custom column padding
+
+
+ Custom column padding
+
+
+ Custom column padding
+
+
+
+)
diff --git a/packages/docs/src/content/docs/layout/examples/GuttersNoGuttersExample.tsx b/packages/docs/src/content/docs/layout/examples/GuttersNoGuttersExample.tsx
new file mode 100644
index 00000000..180c69ac
--- /dev/null
+++ b/packages/docs/src/content/docs/layout/examples/GuttersNoGuttersExample.tsx
@@ -0,0 +1,12 @@
+import { CCol, CRow } from '@coreui/react'
+
+export const GuttersNoGuttersExample = () => (
+
+
+ .col-sm-6 .col-md-8
+
+
+ .col-6 .col-md-4
+
+
+)
diff --git a/packages/docs/src/content/docs/layout/examples/GuttersRowColumnsExample.tsx b/packages/docs/src/content/docs/layout/examples/GuttersRowColumnsExample.tsx
new file mode 100644
index 00000000..9e67af41
--- /dev/null
+++ b/packages/docs/src/content/docs/layout/examples/GuttersRowColumnsExample.tsx
@@ -0,0 +1,38 @@
+import { CCol, CContainer, CRow } from '@coreui/react'
+
+export const GuttersRowColumnsExample = () => (
+
+
+
+ Row column
+
+
+ Row column
+
+
+ Row column
+
+
+ Row column
+
+
+ Row column
+
+
+ Row column
+
+
+ Row column
+
+
+ Row column
+
+
+ Row column
+
+
+ Row column
+
+
+
+)
diff --git a/packages/docs/src/content/docs/layout/examples/GuttersVerticalExample.tsx b/packages/docs/src/content/docs/layout/examples/GuttersVerticalExample.tsx
new file mode 100644
index 00000000..fd405578
--- /dev/null
+++ b/packages/docs/src/content/docs/layout/examples/GuttersVerticalExample.tsx
@@ -0,0 +1,20 @@
+import { CCol, CContainer, CRow } from '@coreui/react'
+
+export const GuttersVerticalExample = () => (
+
+
+
+ Custom column padding
+
+
+ Custom column padding
+
+
+ Custom column padding
+
+
+ Custom column padding
+
+
+
+)
diff --git a/packages/docs/src/content/docs/layout/grid.mdx b/packages/docs/src/content/docs/layout/grid.mdx
index 7d28bd8d..8ac085fb 100644
--- a/packages/docs/src/content/docs/layout/grid.mdx
+++ b/packages/docs/src/content/docs/layout/grid.mdx
@@ -8,19 +8,40 @@ import CContainerData from '@api/CContainer.api.json'
import CRowData from '@api/CRow.api.json'
import CColData from '@api/CCol.api.json'
+import { GridExample } from './examples/GridExample'
+import GridExampleRaw from './examples/GridExample.tsx?raw'
+import { GridEqualWidthExample } from './examples/GridEqualWidthExample'
+import GridEqualWidthExampleRaw from './examples/GridEqualWidthExample.tsx?raw'
+import { GridSettingOneColumnWidthExample } from './examples/GridSettingOneColumnWidthExample'
+import GridSettingOneColumnWidthExampleRaw from './examples/GridSettingOneColumnWidthExample.tsx?raw'
+import { GridVariableWidthContentExample } from './examples/GridVariableWidthContentExample'
+import GridVariableWidthContentExampleRaw from './examples/GridVariableWidthContentExample.tsx?raw'
+import { GridAllBreakpointsExample } from './examples/GridAllBreakpointsExample'
+import GridAllBreakpointsExampleRaw from './examples/GridAllBreakpointsExample.tsx?raw'
+import { GridStackedToHorizontalExample } from './examples/GridStackedToHorizontalExample'
+import GridStackedToHorizontalExampleRaw from './examples/GridStackedToHorizontalExample.tsx?raw'
+import { GridMixAndMatchExample } from './examples/GridMixAndMatchExample'
+import GridMixAndMatchExampleRaw from './examples/GridMixAndMatchExample.tsx?raw'
+import { GridRowColumns2Example } from './examples/GridRowColumns2Example'
+import GridRowColumns2ExampleRaw from './examples/GridRowColumns2Example.tsx?raw'
+import { GridRowColumns3Example } from './examples/GridRowColumns3Example'
+import GridRowColumns3ExampleRaw from './examples/GridRowColumns3Example.tsx?raw'
+import { GridRowColumnsAutoExample } from './examples/GridRowColumnsAutoExample'
+import GridRowColumnsAutoExampleRaw from './examples/GridRowColumnsAutoExample.tsx?raw'
+import { GridRowColumns4Example } from './examples/GridRowColumns4Example'
+import GridRowColumns4ExampleRaw from './examples/GridRowColumns4Example.tsx?raw'
+import { GridRowColumns4ColExample } from './examples/GridRowColumns4ColExample'
+import GridRowColumns4ColExampleRaw from './examples/GridRowColumns4ColExample.tsx?raw'
+import { GridRowColumnsResponsiveExample } from './examples/GridRowColumnsResponsiveExample'
+import GridRowColumnsResponsiveExampleRaw from './examples/GridRowColumnsResponsiveExample.tsx?raw'
+
## Example
CoreUI's grid system uses a series of containers, rows, and columns to layout and align content. It's built with [flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox) and is fully responsive. Below is an example and an in-depth explanation for how the grid system comes together.
-```jsx preview className="docs-example-row"
-
-
- One of three columns
- One of three columns
- One of three columns
-
-
-```
+
+
The above example creates three equal-width columns across all devices and viewports using our predefined grid classes. Those columns are centered in the page with the parent ``.
@@ -136,63 +157,25 @@ Utilize breakpoint-specific column classes for easy column sizing without an exp
For example, here are two grid layouts that apply to every device and viewport, from `xs` to `xxl`. Add any number of unit-less classes for each breakpoint you need and every column will be the same width.
-```jsx preview className="docs-example-row"
-
-
- 1 of 2
- 2 of 2
-
-
- 1 of 3
- 2 of 3
- 3 of 3
-
-
-```
+
+
### Setting one column width
Auto-layout for flexbox grid columns also means you can set the width of one column and have the sibling columns automatically resize around it. You may use predefined grid classes (as shown below), grid mixins, or inline widths. Note that the other columns will resize no matter the width of the center column.
-```jsx preview className="docs-example-row"
-
-
- 1 of 3
- 2 of 3 (wider)
- 3 of 3
-
-
- 1 of 3
- 2 of 3 (wider)
- 3 of 3
-
-
-```
+
+
### Variable width content
Use `
-
-
- 1 of 3
-
- Variable width content
-
- 3 of 3
-
-
-
- 1 of 3
- Variable width content
-
- 3 of 3
-
-
-
-```
+
+
## Responsive classes
@@ -202,68 +185,25 @@ CoreUI's grid includes six tiers of predefined classes for building complex resp
For grids that are the same from the smallest of devices to the largest, use the `` and `` classes. Specify a numbered class when you need a particularly sized column; otherwise, feel free to stick to ``.
-```jsx preview className="docs-example-row"
-
-
- col
- col
- col
- col
-
-
- col-8
- col-4
-
-
-```
+
+
### Stacked to horizontal
Using a single set of `` classes, you can create a basic grid system that starts out stacked and becomes horizontal at the small breakpoint (`sm`).
-```jsx preview className="docs-example-row"
-
-
- col-sm-8
- col-sm-4
-
-
- col-sm
- col-sm
- col-sm
-
-
-```
+
+
### Mix and match
Don't want your columns to simply stack in some grid tiers? Use a combination of different classes for each tier as needed. See the example below for a better idea of how it all works.
-```jsx preview className="docs-example-row"
-
-
- .col-md-8
-
- .col-6 .col-md-4
-
-
-
-
- .col-6 .col-md-4
-
-
- .col-6 .col-md-4
-
-
- .col-6 .col-md-4
-
-
-
- .col-6
- .col-6
-
-
-```
+
+
### Row columns
@@ -271,71 +211,29 @@ Use the responsive `{breakpoint}={{ cols: * }}` classes to quickly set the numbe
Use these row columns classes to quickly create basic grid layouts or to control your card layouts.
-```jsx preview className="docs-example-row"
-
-
- Column
- Column
- Column
- Column
-
-
-```
-
-```jsx preview className="docs-example-row"
-
-
- Column
- Column
- Column
- Column
-
-
-```
-
-```jsx preview className="docs-example-row"
-
-
- Column
- Column
- Column
- Column
-
-
-```
-
-```jsx preview className="docs-example-row"
-
-
- Column
- Column
- Column
- Column
-
-
-```
-
-```jsx preview className="docs-example-row"
-
-
- Column
- Column
- Column
- Column
-
-
-```
-
-```jsx preview className="docs-example-row"
-
-
- Column
- Column
- Column
- Column
-
-
-```
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
## API
diff --git a/packages/docs/src/content/docs/layout/gutters.mdx b/packages/docs/src/content/docs/layout/gutters.mdx
index 33e62924..9888955e 100644
--- a/packages/docs/src/content/docs/layout/gutters.mdx
+++ b/packages/docs/src/content/docs/layout/gutters.mdx
@@ -8,6 +8,19 @@ import CContainerData from '@api/CContainer.api.json'
import CRowData from '@api/CRow.api.json'
import CColData from '@api/CCol.api.json'
+import { GuttersHorizontalExample } from './examples/GuttersHorizontalExample'
+import GuttersHorizontalExampleRaw from './examples/GuttersHorizontalExample.tsx?raw'
+import { GuttersHorizontalOverflowHiddenExample } from './examples/GuttersHorizontalOverflowHiddenExample'
+import GuttersHorizontalOverflowHiddenExampleRaw from './examples/GuttersHorizontalOverflowHiddenExample.tsx?raw'
+import { GuttersVerticalExample } from './examples/GuttersVerticalExample'
+import GuttersVerticalExampleRaw from './examples/GuttersVerticalExample.tsx?raw'
+import { GuttersHorizontalVerticalExample } from './examples/GuttersHorizontalVerticalExample'
+import GuttersHorizontalVerticalExampleRaw from './examples/GuttersHorizontalVerticalExample.tsx?raw'
+import { GuttersRowColumnsExample } from './examples/GuttersRowColumnsExample'
+import GuttersRowColumnsExampleRaw from './examples/GuttersRowColumnsExample.tsx?raw'
+import { GuttersNoGuttersExample } from './examples/GuttersNoGuttersExample'
+import GuttersNoGuttersExampleRaw from './examples/GuttersNoGuttersExample.tsx?raw'
+
## How they work
- **Gutters are the gaps between column content, created by horizontal `padding`.** We set `padding-right` and `padding-left` on each column, and use negative `margin` to offset that at the start and end of each row to align content.
@@ -20,120 +33,39 @@ import CColData from '@api/CCol.api.json'
`{breakpoint}={{ gutterX: * }}` props can be used to control the horizontal gutter widths. The `` or `` parent may need to be adjusted if larger gutters are used too to avoid unwanted overflow, using a matching padding utility. For example, in the following example we've increased the padding with `.px-4`:
-```jsx preview className="docs-example m-0 border-0 docs-example-cols"
-
-
-
- Custom column padding
-
-
- Custom column padding
-
-
-
-```
+
+
An alternative solution is to add a wrapper around the `` with the `.overflow-hidden` class:
-```jsx preview className="docs-example m-0 border-0 docs-example-cols"
-
-
-
- Custom column padding
-
-
- Custom column padding
-
-
-
-```
+
+
## Vertical gutters
`{breakpoint}={{ gutterY: * }}` props can be used to control the vertical gutter widths. Like the horizontal gutters, the vertical gutters can cause some overflow below the `` at the end of a page. If this occurs, you add a wrapper around `` with the `.overflow-hidden` class:
-```jsx preview className="docs-example m-0 border-0 docs-example-cols"
-
-
-
- Custom column padding
-
-
- Custom column padding
-
-
- Custom column padding
-
-
- Custom column padding
-
-
-
-```
+
+
## Horizontal & vertical gutters
`{breakpoint}={{ gutter: * }}` props can be used to control the horizontal gutter widths, for the following example we use a smaller gutter width, so there won't be a need to add the `.overflow-hidden` wrapper class.
-```jsx preview className="docs-example m-0 border-0 docs-example-cols"
-
-
-
- Custom column padding
-
-
- Custom column padding
-
-
- Custom column padding
-
-
- Custom column padding
-
-
-
-```
+
+
## Row columns gutters
Gutter props can also be added to [row columns](../grid#row-columns). In the following example, we use responsive row columns and responsive gutter props.
-```jsx preview className="docs-example m-0 border-0 docs-example-cols"
-
-
-
- Row column
-
-
- Row column
-
-
- Row column
-
-
- Row column
-
-
- Row column
-
-
- Row column
-
-
- Row column
-
-
- Row column
-
-
- Row column
-
-
- Row column
-
-
-
-```
+
+
## No gutters
@@ -143,12 +75,9 @@ The gutters between columns in our predefined grid props can be removed with `{b
In practice, here's how it looks. Note you can continue to use this with all other predefined grid props (including column widths, responsive tiers, reorders, and more).
-```jsx preview className="docs-example m-0 border-0 docs-example-row"
-
- .col-sm-6 .col-md-8
- .col-6 .col-md-4
-
-```
+
+
## Change the gutters