Gutters

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

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":

Custom column padding
Custom column padding
vue
<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:

Custom column padding
Custom column padding
vue
<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:

Custom column padding
Custom column padding
Custom column padding
Custom column padding
vue
<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.

Custom column padding
Custom column padding
Custom column padding
Custom column padding
vue
<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.

Row column
Row column
Row column
Row column
Row column
Row column
Row column
Row column
Row column
Row column
vue
<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).

.col-sm-6 .col-md-8
.col-6 .col-md-4
vue
<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>

See Also