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

```html
<template>
  <div class="docs-example-row docs-example-row-flex-cols">
    <CContainer>
      <CRow class="align-items-start">
        <CCol> One of three columns </CCol>
        <CCol> One of three columns </CCol>
        <CCol> One of three columns </CCol>
      </CRow>
      <CRow class="align-items-center">
        <CCol> One of three columns </CCol>
        <CCol> One of three columns </CCol>
        <CCol> One of three columns </CCol>
      </CRow>
      <CRow class="align-items-end">
        <CCol> One of three columns </CCol>
        <CCol> One of three columns </CCol>
        <CCol> One of three columns </CCol>
      </CRow>
    </CContainer>
  </div>
</template>

<script setup>
import { CContainer, CRow, CCol } from '@coreui/vue'
</script>
```
  
</Example>

```html
<template>
  <div class="docs-example-row docs-example-row-flex-cols">
    <CContainer>
      <CRow>
        <CCol class="align-self-start"> One of three columns </CCol>
        <CCol class="align-self-center"> One of three columns </CCol>
        <CCol class="align-self-end"> One of three columns </CCol>
      </CRow>
    </CContainer>
  </div>
</template>

<script setup>
import { CContainer, CRow, CCol } from '@coreui/vue'
</script>
```
  
</Example>

### Horizontal alignment

```html
<template>
  <div class="docs-example-row">
    <CContainer>
      <CRow class="justify-content-start">
        <CCol xs="4"> One of two columns </CCol>
        <CCol xs="4"> One of two columns </CCol>
      </CRow>
      <CRow class="justify-content-center">
        <CCol xs="4"> One of two columns </CCol>
        <CCol xs="4"> One of two columns </CCol>
      </CRow>
      <CRow class="justify-content-end">
        <CCol xs="4"> One of two columns </CCol>
        <CCol xs="4"> One of two columns </CCol>
      </CRow>
      <CRow class="justify-content-around">
        <CCol xs="4"> One of two columns </CCol>
        <CCol xs="4"> One of two columns </CCol>
      </CRow>
      <CRow class="justify-content-between">
        <CCol xs="4"> One of two columns </CCol>
        <CCol xs="4"> One of two columns </CCol>
      </CRow>
      <CRow class="justify-content-evenly">
        <CCol xs="4"> One of two columns </CCol>
        <CCol xs="4"> One of two columns </CCol>
      </CRow>
    </CContainer>
  </div>
</template>

<script setup>
import { CContainer, CRow, CCol } from '@coreui/vue'
</script>
```
  
</Example>

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

```html
<template>
  <div class="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>
  </div>
</template>

<script setup>
import { CContainer, CRow, CCol } from '@coreui/vue'
</script>
```
  
</Example>

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

```html
<template>
  <div class="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 class="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>
  </div>
</template>

<script setup>
import { CContainer, CRow, CCol } from '@coreui/vue'
</script>
```
  
</Example>

You may also apply this break at specific breakpoints with our [responsive display utilities](https://coreui.io/docs/utilities/display).

```html
<template>
  <div class="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 class="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>
  </div>
</template>

<script setup>
import { CContainer, CRow, CCol } from '@coreui/vue'
</script>
```
  
</Example>

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

```html
<template>
  <div class="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>
  </div>
</template>

<script setup>
import { CContainer, CRow, CCol } from '@coreui/vue'
</script>
```
  
</Example>

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.

```html
<template>
  <div class="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>
  </div>
</template>

<script setup>
import { CContainer, CRow, CCol } from '@coreui/vue'
</script>
```
  
</Example>

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

```html
<template>
  <div class="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>
  </div>
</template>

<script setup>
import { CContainer, CRow, CCol } from '@coreui/vue'
</script>
```
  
</Example>

```html
<template>
  <div class="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>
  </div>
</template>

<script setup>
import { CContainer, CRow, CCol } from '@coreui/vue'
</script>
```
  
</Example>

#### Margin utilities

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

```html
<template>
  <div class="docs-example-row">
    <CContainer>
      <CRow>
        <CCol md="4">.col-md-4</CCol>
        <CCol md="4" class="ms-auto">.col-md-4 .ms-auto</CCol>
      </CRow>
      <CRow>
        <CCol md="3" class="ms-md-auto">.col-md-3 .ms-md-auto</CCol>
        <CCol md="3" class="ms-md-auto">.col-md-3 .ms-md-auto</CCol>
      </CRow>
      <CRow>
        <CCol xs="auto" class="me-auto">.col-auto .me-auto</CCol>
        <CCol xs="auto">.col-auto</CCol>
      </CRow>
    </CContainer>
  </div>
</template>

<script setup>
import { CContainer, CRow, CCol } from '@coreui/vue'
</script>
```
  
</Example>

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

```html
<template>
  <CCol xs="3" class="bg-light p-3 border"> .col-3: width of 25% </CCol>
  <CCol sm="9" class="bg-light p-3 border"> .col-sm-9: width of 75% above sm breakpoint </CCol>
</template>

<script setup>
import { CCol } from '@coreui/vue'
</script>
```
  
</Example>