wovoui

Columns

Learn how to modify columns with a handful of options for alignment, ordering, and offsetting thanks to our flexbox grid system. Plus, see how to use column classes to manage widths of non-grid elements.

Alignment

Vertical alignment

Use prop align-items on Row component to vertically align 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 

<Container>
    <Row align-items="start" style="min-height: 10rem;" class="border">
        <Col>
        One of three columns
        </Col>
        <Col>
        One of three columns
        </Col>
        <Col>
        One of three columns
        </Col>
    </Row>
    <Row align-items="center" style="min-height: 10rem;" class="border">
        <Col>
        One of three columns
        </Col>
        <Col>
        One of three columns
        </Col>
        <Col>
        One of three columns
        </Col>
    </Row>
    <Row align-items="end" style="min-height: 10rem;" class="border">
        <Col>
        One of three columns
        </Col>
        <Col>
        One of three columns
        </Col>
        <Col>
        One of three columns
        </Col>
    </Row>
</Container>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

Cols can be aligned by using align-self prop. Supported values are

type colAlignments = 'start' | 'center' | 'end';
1
One of three columns
One of three columns
One of three columns 

<Container class="child-col-border">
    <Row style="min-height: 10rem;">
        <Col align-self="start">
        One of three columns
        </Col>
        <Col align-self="center">
        One of three columns
        </Col>
        <Col align-self="end">
        One of three columns
        </Col>
    </Row>
</Container>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

Horizontal alignment

Use prop justify-content

Supported values

type alignments = 'start' | 'center' | 'end' | 'around' | 'between' | 'evenly';
1
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 

<Container>
    <Row justify-content="start">
        <Col :col="4">
        One of two columns
        </Col>
        <Col :col="4">
        One of two columns
        </Col>
    </Row>
    <Row justify-content="center">
        <Col :col="4">
        One of two columns
        </Col>
        <Col :col="4">
        One of two columns
        </Col>
    </Row>
    <Row justify-content="end">
        <Col :col="4">
        One of two columns
        </Col>
        <Col :col="4">
        One of two columns
        </Col>
    </Row>
    <Row justify-content="around">
        <Col :col="4">
        One of two columns
        </Col>
        <Col :col="4">
        One of two columns
        </Col>
    </Row>
    <Row justify-content="between">
        <Col :col="4">
        One of two columns
        </Col>
        <Col :col="4">
        One of two columns
        </Col>
    </Row>
    <Row justify-content="evenly">
        <Col :col="4">
        One of two columns
        </Col>
        <Col :col="4">
        One of two columns
        </Col>
    </Row>
</Container>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

Reordering

Use prop order to reorder columns.

First in DOM, no order applied
Second in DOM, with a larger order
Third in DOM, with an order of 1 

<Container>
    <Row>
        <Col>
        First in DOM, no order applied
        </Col>
        <Col :order="5">
        Second in DOM, with a larger order
        </Col>
        <Col :order="1">
        Third in DOM, with an order of 1
        </Col>
    </Row>
</Container>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

order's value can be also first and last which generates bootstrap's responsive order-first and order-last classes respectively.

First in DOM, ordered last
Second in DOM, unordered
Third in DOM, ordered first 

<Container>
    <Row>
        <Col order="last">
        First in DOM, ordered last
        </Col>
        <Col>
        Second in DOM, unordered
        </Col>
        <Col order="first">
        Third in DOM, ordered first
        </Col>
    </Row>
</Container>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

Offsetting columns

Use offset and offset-{responsive-breakpoints} prop to set offset utility classes.

:md="4"
:md="4" offset-md="4"
:md="4" :offset-md="4"
:md="3" :offset-md="3"
:md="6" :offset-md="3" 

<Container>
    <Row>
        <Col :md="4">
        :md="4"
        </Col>
        <Col :md="4" offset-md="4">
        :md="4" offset-md="4"
        </Col>
    </Row>
    <Row>
        <Col :md="4" :offset-md="4">
        :md="4" :offset-md="4"
        </Col>
        <Col :md="3" :offset-md="3">
        :md="3" :offset-md="3"
        </Col>
    </Row>
    <Row>
        <Col :md="6" :offset-md="3">
        :md="6" :offset-md="3"
        </Col>
    </Row>
</Container>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24