# column

## Overview

The `columns` UI component can contain one or more `column`s.

{% hint style="info" %}
**Version compatibility**

Specifying more than 2 `column`s is supported from version **4.60.0** of the JourneyApps Runtime.
{% endhint %}

## Standard Attributes

None

## Advanced Attributes

### `align`

**Optional**

**Type**: `center` | `fullwidth`

**Default**: `fullwidth`

{% hint style="warning" %}
**Alignment limitation**

`align` set to `center` is only relevant when using a single column, on a tablet or a desktop device.
{% endhint %}

{% code title="main.view\.xml" %}

```xml
<columns>
    <column align="center">
            <heading>Add new part</heading>
            <text-input bind="part.name" required="true" />
            <text-input bind="part.serial" required="true"/>
            <text-input bind="part.description" required="false" />
            <single-choice-radio label="Condition" bind="part.condition" required="true" />
            <button-group>
                <button label="Cancel" on-press="$:closeDialog()" validate="false" />
                <button label="Submit" on-press="$:closeDialog()" validate="true" style="solid"/>
            </button-group>
    </column>
</columns>
```

{% endcode %}

![](https://2865107717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F9TCHLR67eLHBOjPvHhud%2Fuploads%2Fgit-blob-65f83a07e9813a31f55cff7f33b63be05ae4f2d4%2Fcolumns-single.png?alt=media)

### `show-if` and `hide-if`

{% content-ref url="../../xml-fields/show-if" %}
[show-if](https://docs.journeyapps.com/reference/build/ui-components/xml-fields/show-if)
{% endcontent-ref %}

{% content-ref url="../../xml-fields/hide-if" %}
[hide-if](https://docs.journeyapps.com/reference/build/ui-components/xml-fields/hide-if)
{% endcontent-ref %}

{% hint style="info" %}
**Note**: A `column` will be hidden if all its children components are hidden.
{% endhint %}