Gutters

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

On this page

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

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

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

.gutter="y-" classes can be used to control the vertical gutter widths.

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

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

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

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>