wovoui

Gutters

Gutters are the padding between your columns, used to responsively space and align content in the Bootstrap grid system.

Horizontal gutters

To apply horizontal gutters, use prop gx.

Custom column padding
Custom column padding

<Container class=" px-4">
    <Row :gx="5">
        <Col>
        <div class="p-3 border bg-light">Custom column padding</div>
        </Col>
        <Col>
        <div class="p-3 border bg-light">Custom column padding</div>
        </Col>
    </Row>
</Container>
1
2
3
4
5
6
7
8
9
10
11

Vertical gutters

Use prop gy to set vertical gutters between columns.

Custom column padding
Custom column padding
Custom column padding
Custom column padding

<Container class="overflow-hidden">
    <Row :gy="5">
        <Col :col="6">
        <div class="p-3 border bg-light">Custom column padding</div>
        </Col>
        <Col :col="6">
        <div class="p-3 border bg-light">Custom column padding</div>
        </Col>
        <Col :col="6">
        <div class="p-3 border bg-light">Custom column padding</div>
        </Col>
        <Col :col="6">
        <div class="p-3 border bg-light">Custom column padding</div>
        </Col>
    </Row>
</Container>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

Horizontal & vertical gutters

Use prop g on Rows.

Custom column padding
Custom column padding
Custom column padding
Custom column padding

<Container>
    <Row :g="2">
        <Col :col="6">
        <div class="p-3 border bg-light">Custom column padding</div>
        </Col>
        <Col :col="6">
        <div class="p-3 border bg-light">Custom column padding</div>
        </Col>
        <Col :col="6">
        <div class="p-3 border bg-light">Custom column padding</div>
        </Col>
        <Col :col="6">
        <div class="p-3 border bg-light">Custom column padding</div>
        </Col>
    </Row>
</Container>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17