Horizontal gutters
gutter="x-5" classes can be used to control the horizontal gutter widths.
The <GridContainer> or <GridContainer type="fluid"> parent may need to be adjusted if larger gutters are used too to avoid unwanted overflow, using a matching padding utility.
For example, in the following example we've increased the padding with padding="x-4":
<template>
<Container padding="x-4">
<Row gutter="x-5">
<Col>
<b-div padding="3">
Custom column padding
</b-div>
</Col>
<Col>
<b-div padding="3">
Custom column padding
</b-div>
</Col>
</Row>
</Container>
</template>
An alternative solution is to add a wrapper around the Row with the overflow="hidden class:
<template>
<Container overflow="hidden">
<Row gutter="x-5">
<Col>
<b-div padding="3">
Custom column padding
</b-div>
</Col>
<Col>
<b-div padding="3">
Custom column padding
</b-div>
</Col>
</Row>
</Container>
</template>
Vertical gutters
Like the horizontal gutters, the vertical gutters can cause some overflow below the Row at the end of a page.
If this occurs, you add a wrapper around Row, with the overflow="hidden" class:
<template>
<Container overflow="hidden">
<Row gutter="y-5">
<Col col="6">
<b-div padding="3">
Custom column padding
</b-div>
</Col>
<Col col="6">
<b-div padding="3">
Custom column padding
</b-div>
</Col>
<Col col="6">
<b-div padding="3">
Custom column padding
</b-div>
</Col>
<Col col="6">
<b-div padding="3">
Custom column padding
</b-div>
</Col>
</Row>
</Container>
</template>
Horizontal & vertical gutters
gutter properties can be used to control the horizontal gutter widths,
for the following example we use a smaller gutter width, so there won't be a need to add the overflow="hidden" wrapper class.
<template>
<Container>
<Row :gutter="2">
<Col col="6">
<b-div padding="3">
Custom column padding
</b-div>
</Col>
<Col col="6">
<b-div padding="3">
Custom column padding
</b-div>
</Col>
<Col col="6">
<b-div padding="3">
Custom column padding
</b-div>
</Col>
<Col col="6">
<b-div padding="3">
Custom column padding
</b-div>
</Col>
</Row>
</Container>
</template>
Row columns gutters
Gutter classes can also be added to row columns . In the following example, we use responsive row columns and responsive gutter classes.
<template>
<Container>
<Row
columns="2 lg-5"
gutter="2 lg-3"
>
<Col>
<b-div padding="3">
Row column
</b-div>
</Col>
<Col>
<b-div padding="3">
Row column
</b-div>
</Col>
<Col>
<b-div padding="3">
Row column
</b-div>
</Col>
<Col>
<b-div padding="3">
Row column
</b-div>
</Col>
<Col>
<b-div padding="3">
Row column
</b-div>
</Col>
<Col>
<b-div padding="3">
Row column
</b-div>
</Col>
<Col>
<b-div padding="3">
Row column
</b-div>
</Col>
<Col>
<b-div padding="3">
Row column
</b-div>
</Col>
<Col>
<b-div padding="3">
Row column
</b-div>
</Col>
<Col>
<b-div padding="3">
Row column
</b-div>
</Col>
</Row>
</Container>
</template>
No gutters
The gutters between columns in our predefined grid classes can be removed with gutter="0".
This removes the negative margins from Row and the horizontal padding from all immediate children columns.
Need an edge-to-edge design? Drop the parent Container or type="fluid".
In practice, here's how it looks.
Note you can continue to use this with all other predefined grid classes (including column widths, responsive tiers, reorders, and more).
<template>
<Row gutter="0">
<Col col="sm-6 md-8">
.col-sm-6 .col-md-8
</Col>
<Col col="sm-6 md-4">
.col-6 .col-md-4
</Col>
</Row>
</template>