# Columns

> Learn how to modify columns with a handful of options for alignment, ordering, and offsetting thanks to our flexbox grid system.

## 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.

- **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.

- **CoreUI for React.js includes predefined components for creating fast, responsive layouts.** With [six breakpoints](./../breakpoints) and a dozen columns at each grid tier, we have dozens of components already built for you to create your desired layouts. This can be disabled via Sass if you wish.

## Alignment

Use flexbox alignment utilities to vertically and horizontally align columns.

### Vertical alignment

```jsx preview className="docs-example-row docs-example-row-flex-cols"
<CContainer>
  <CRow className="align-items-start">
    <CCol>One of three columns</CCol>
    <CCol>One of three columns</CCol>
    <CCol>One of three columns</CCol>
  </CRow>
  <CRow className="align-items-center">
    <CCol>One of three columns</CCol>
    <CCol>One of three columns</CCol>
    <CCol>One of three columns</CCol>
  </CRow>
  <CRow className="align-items-end">
    <CCol>One of three columns</CCol>
    <CCol>One of three columns</CCol>
    <CCol>One of three columns</CCol>
  </CRow>
</CContainer>
```

```jsx preview className="docs-example-row docs-example-row-flex-cols"
<CContainer>
  <CRow>
    <CCol className="align-self-start">One of three columns</CCol>
    <CCol className="align-self-center">One of three columns</CCol>
    <CCol className="align-self-end">One of three columns</CCol>
  </CRow>
</CContainer>
```

### Horizontal alignment

```jsx preview className="docs-example-row"
<CContainer>
  <CRow className="justify-content-start">
    <CCol xs={4}>One of two columns</CCol>
    <CCol xs={4}>One of two columns</CCol>
  </CRow>
  <CRow className="justify-content-center">
    <CCol xs={4}>One of two columns</CCol>
    <CCol xs={4}>One of two columns</CCol>
  </CRow>
  <CRow className="justify-content-end">
    <CCol xs={4}>One of two columns</CCol>
    <CCol xs={4}>One of two columns</CCol>
  </CRow>
  <CRow className="justify-content-around">
    <CCol xs={4}>One of two columns</CCol>
    <CCol xs={4}>One of two columns</CCol>
  </CRow>
  <CRow className="justify-content-between">
    <CCol xs={4}>One of two columns</CCol>
    <CCol xs={4}>One of two columns</CCol>
  </CRow>
  <CRow className="justify-content-evenly">
    <CCol xs={4}>One of two columns</CCol>
    <CCol xs={4}>One of two columns</CCol>
  </CRow>
</CContainer>
```

### 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"
<CContainer>
  <CRow>
    <CCol xs={9}>.col-9</CCol>
    <CCol xs={4}>
      .col-4
      <br />
      Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one
      contiguous unit.
    </CCol>
    <CCol xs={6}>
      .col-6
      <br />
      Subsequent columns continue along the new line.
    </CCol>
  </CRow>
</CContainer>
```

### 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 `<CRow>`s, but not every implementation method can account for this.

```jsx preview className="docs-example-row"
<CContainer>
  <CRow>
    <CCol xs={6} sm={3}>
      .col-6 .col-sm-3
    </CCol>
    <CCol xs={6} sm={3}>
      .col-6 .col-sm-3
    </CCol>
    <div className="w-100"></div>
    <CCol xs={6} sm={3}>
      .col-6 .col-sm-3
    </CCol>
    <CCol xs={6} sm={3}>
      .col-6 .col-sm-3
    </CCol>
  </CRow>
</CContainer>
```

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"
<CContainer>
  <CRow>
    <CCol xs={6} sm={4}>
      .col-6 .col-sm-4
    </CCol>
    <CCol xs={6} sm={4}>
      .col-6 .col-sm-4
    </CCol>
    <div className="w-100 d-none d-md-block"></div>
    <CCol xs={6} sm={4}>
      .col-6 .col-sm-4
    </CCol>
    <CCol xs={6} sm={4}>
      .col-6 .col-sm-4
    </CCol>
  </CRow>
</CContainer>
```

## Reordering

### Order props

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"
<CContainer>
  <CRow>
    <CCol>First in DOM, no order applied</CCol>
    <CCol xs={{ span: true, order: 5 }}>Second in DOM, with a larger order</CCol>
    <CCol xs={{ span: true, order: 1 }}>Third in DOM, with an order of 1</CCol>
  </CRow>
</CContainer>
```

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"
<CContainer>
  <CRow>
    <CCol xs={{ span: true, order: 'last' }}>First in DOM, ordered last</CCol>
    <CCol>Second in DOM, unordered</CCol>
    <CCol xs={{ span: true, order: 'first' }}>Third in DOM, ordered first</CCol>
  </CRow>
</CContainer>
```

### Offsetting columns

You can offset grid columns in two ways: our responsive `xs|sm|md|lg|xl|xxl={{ offset: 0-12 }}` grid props and our [margin utilities](https://coreui.io/bootstrap/docs/utilities/spacing). Grid props are sized to match columns while margins are more useful for quick layouts where the width of the offset is variable.

#### Offset prop

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"
<CContainer>
  <CRow>
    <CCol md={4}>.col-md-4</CCol>
    <CCol md={{ span: 4, offset: 4 }}>.col-md-4 .offset-md-4</CCol>
  </CRow>
  <CRow>
    <CCol md={{ span: 3, offset: 3 }}>.col-md-3 .offset-md-3</CCol>
    <CCol md={{ span: 3, offset: 3 }}>.col-md-3 .offset-md-3</CCol>
  </CRow>
  <CRow>
    <CCol md={{ span: 6, offset: 3 }}>.col-md-6 .offset-md-3</CCol>
  </CRow>
</CContainer>
```

```jsx preview className="docs-example-row"
<CContainer>
  <CRow>
    <CCol sm={5} md={6}>
      .col-sm-5 .col-md-6
    </CCol>
    <CCol sm={{ span: 5, offset: 2 }} md={{ span: 6, offset: 0 }}>
      .col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0
    </CCol>
  </CRow>
  <CRow>
    <CCol sm={6} md={5} lg={6}>
      .col-sm-6 .col-md-5 .col-lg-6
    </CCol>
    <CCol sm={6} md={{ span: 5, offset: 2 }} lg={{ span: 6, offset: 0 }}>
      .col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0
    </CCol>
  </CRow>
</CContainer>
```

#### Margin utilities

You can use margin utilities like `.me-auto` to force sibling columns away from one another.

```jsx preview className="docs-example-row"
<CContainer>
  <CRow>
    <CCol md={4}>.col-md-4</CCol>
    <CCol md={4} className="ms-auto">
      .col-md-4 .ms-auto
    </CCol>
  </CRow>
  <CRow>
    <CCol md={3} className="ms-md-auto">
      .col-md-3 .ms-md-auto
    </CCol>
    <CCol md={3} className="ms-md-auto">
      .col-md-3 .ms-md-auto
    </CCol>
  </CRow>
  <CRow>
    <CCol xs="auto" className="me-auto">
      .col-auto .me-auto
    </CCol>
    <CCol xs="auto">.col-auto</CCol>
  </CRow>
</CContainer>
```

## Standalone column component

The `<CCol>` component can also be used outside a `<CRow>` 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
<CCol xs={3} className="bg-light p-3 border">
  .col-3: width of 25%
</CCol>
<CCol sm={9} className="bg-light p-3 border">
  .col-sm-9: width of 75% above sm breakpoint
</CCol>
```

## API

### CCol

```jsx
import { CCol } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `className` | `string \| undefined` | - | A string of all className you want applied to the base component. |
| `lg` | `{ 'auto' \| number \| string \| boolean \| { span: 'auto' \| number \| string \| boolean } \| { offset: number \| string } \| { order: 'first' \| 'last' \| number \| string }}` | - | The number of columns/offset/order on large devices (<1200px). |
| `md` | `{ 'auto' \| number \| string \| boolean \| { span: 'auto' \| number \| string \| boolean } \| { offset: number \| string } \| { order: 'first' \| 'last' \| number \| string }}` | - | The number of columns/offset/order on medium devices (<992px). |
| `sm` | `{ 'auto' \| number \| string \| boolean \| { span: 'auto' \| number \| string \| boolean } \| { offset: number \| string } \| { order: 'first' \| 'last' \| number \| string }}` | - | The number of columns/offset/order on small devices (<768px). |
| `xl` | `{ 'auto' \| number \| string \| boolean \| { span: 'auto' \| number \| string \| boolean } \| { offset: number \| string } \| { order: 'first' \| 'last' \| number \| string }}` | - | The number of columns/offset/order on X-Large devices (<1400px). |
| `xs` | `{ 'auto' \| number \| string \| boolean \| { span: 'auto' \| number \| string \| boolean } \| { offset: number \| string } \| { order: 'first' \| 'last' \| number \| string }}` | - | The number of columns/offset/order on extra small devices (<576px). |
| `xxl` | `{ 'auto' \| number \| string \| boolean \| { span: 'auto' \| number \| string \| boolean } \| { offset: number \| string } \| { order: 'first' \| 'last' \| number \| string }}` | - | The number of columns/offset/order on XX-Large devices (≥1400px). |