Gutters

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

On this page

How they work

Gutters are the gaps between column content, created by horizontal padding. We set padding-right and padding-left on each column, and use negative margin to offset that at the start and end of each row to align content.
Gutters start at 1.5rem (24px) wide. This allows us to match our grid to the padding and margin spacersopen in new window scale.
Gutters can be responsively adjusted. Use breakpoint-specific gutter props to modify horizontal gutters, vertical gutters, and all gutters.

Horizontal gutters

:{breakpoint}="{ gutterX: * }" props can be used to control the horizontal gutter widths. The <CContainer> or <CContainer 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 .px-4:

Custom column padding

<CContainer class="px-4">
  <CRow :xs="{ gutterX: 5 }">
    <CCol>
      <div class="p-3 border bg-light">Custom column padding</div>
    </CCol>
    <CCol>
      <div class="p-3 border bg-light">Custom column padding</div>
    </CCol>
  </CRow>
</CContainer>

1
2
3
4
5
6
7
8
9
10

An alternative solution is to add a wrapper around the <CRow> with the .overflow-hidden class:

Custom column padding

<CContainer class="overflow-hidden">
  <CRow :xs="{ gutterX: 5 }">
    <CCol>
      <div class="p-3 border bg-light">Custom column padding</div>
    </CCol>
    <CCol>
      <div class="p-3 border bg-light">Custom column padding</div>
    </CCol>
  </CRow>
</CContainer>

1
2
3
4
5
6
7
8
9
10

Vertical gutters

:{breakpoint}="{ gutterY: * }" props can be used to control the vertical gutter widths. Like the horizontal gutters, the vertical gutters can cause some overflow below the <CRow> at the end of a page. If this occurs, you add a wrapper around <CRow> with the .overflow-hidden class:

Custom column padding

<CContainer class="overflow-hidden">
  <CRow :xs="{ gutterY: 5 }">
    <CCol :xs="{ span: 6 }">
      <div class="p-3 border bg-light">Custom column padding</div>
    </CCol>
    <CCol :xs="{ span: 6 }">
      <div class="p-3 border bg-light">Custom column padding</div>
    </CCol>
    <CCol :xs="{ span: 6 }">
      <div class="p-3 border bg-light">Custom column padding</div>
    </CCol>
    <CCol :xs="{ span: 6 }">
      <div class="p-3 border bg-light">Custom column padding</div>
    </CCol>
  </CRow>
</CContainer>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

Horizontal & vertical gutters

:{breakpoint}="{ gutter: * }" props 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

<CContainer>
  <CRow :xs="{ gutter: 2 }">
    <CCol :xs="{ span: 6 }">
      <div class="p-3 border bg-light">Custom column padding</div>
    </CCol>
    <CCol :xs="{ span: 6 }">
      <div class="p-3 border bg-light">Custom column padding</div>
    </CCol>
    <CCol :xs="{ span: 6 }">
      <div class="p-3 border bg-light">Custom column padding</div>
    </CCol>
    <CCol :xs="{ span: 6 }">
      <div class="p-3 border bg-light">Custom column padding</div>
    </CCol>
  </CRow>
</CContainer>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

Row columns gutters

Gutter props can also be added to row columns. In the following example, we use responsive row columns and responsive gutter props.

Row column

<CContainer>
  <CRow :xs="{ cols:2, gutter: 2 }" :lg="{ cols: 5, gutter: 3}">
    <CCol>
      <div class="p-3 border bg-light">Row column</div>
    </CCol>
    <CCol>
      <div class="p-3 border bg-light">Row column</div>
    </CCol>
    <CCol>
      <div class="p-3 border bg-light">Row column</div>
    </CCol>
    <CCol>
      <div class="p-3 border bg-light">Row column</div>
    </CCol>
    <CCol>
      <div class="p-3 border bg-light">Row column</div>
    </CCol>
    <CCol>
      <div class="p-3 border bg-light">Row column</div>
    </CCol>
    <CCol>
      <div class="p-3 border bg-light">Row column</div>
    </CCol>
    <CCol>
      <div class="p-3 border bg-light">Row column</div>
    </CCol>
    <CCol>
      <div class="p-3 border bg-light">Row column</div>
    </CCol>
    <CCol>
      <div class="p-3 border bg-light">Row column</div>
    </CCol>
  </CRow>
</CContainer>

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

No gutters

The gutters between columns in our predefined grid props can be removed with :{breakpoint}="{ gutter: 0 }". This removes the negative margins from <CRow> and the horizontal padding from all immediate children columns.

Need an edge-to-edge design? Drop the parent <CContainer> or <CContainer fluid>.

In practice, here's how it looks. Note you can continue to use this with all other predefined grid props (including column widths, responsive tiers, reorders, and more).

.col-sm-6 .col-md-8

.col-6 .col-md-4

<CRow :xs="{ gutter: 0 }">
  <CCol sm="6" md="8">.col-sm-6 .col-md-8</CCol>
  <CCol xs="6" md="4">.col-6 .col-md-4</CCol>
</CRow>

1
2
3
4

API

CContainer

import { CContainer } from '@coreui/bootstrap-vue'
// or
import CContainer from '@coreui/bootstrap-vue/src/components/grid/CContainer'

1
2
3

Props

Prop name	Description	Type	Values
sm	Set container 100% wide until small breakpoint.	boolean	-
md	Set container 100% wide until medium breakpoint.	boolean	-
lg	Set container 100% wide until large breakpoint.	boolean	-
xl	Set container 100% wide until X-large breakpoint.	boolean	-
xxl	Set container 100% wide until XX-large breakpoint.	boolean	-
fluid	Set container 100% wide, spanning the entire width of the viewport.	boolean	-

CRow

import { CRow } from '@coreui/bootstrap-vue'
// or
import CRow from '@coreui/bootstrap-vue/src/components/grid/CRow'

1
2
3

Props

Prop name	Description	Type	Values	Default
xs	The number of columns/offset/order on extra small devices (<576px).	Object as () => BPObject	`{ cols: 'auto' \| number \| string } \| { gutter: number \| string } \| { gutterX: number \| string } \| { gutterY: number \| string }`	-
sm	The number of columns/offset/order on small devices (<768px).	Object as () => BPObject	`{ cols: 'auto' \| number \| string } \| { gutter: number \| string } \| { gutterX: number \| string } \| { gutterY: number \| string }`	-
lg	The number of columns/offset/order on large devices (<1200px).	Object as () => BPObject	`{ cols: 'auto' \| number \| string } \| { gutter: number \| string } \| { gutterX: number \| string } \| { gutterY: number \| string }`	-
xl	The number of columns/offset/order on X-Large devices (<1400px).	Object as () => BPObject	`{ cols: 'auto' \| number \| string } \| { gutter: number \| string } \| { gutterX: number \| string } \| { gutterY: number \| string }`	-
xxl	The number of columns/offset/order on XX-Large devices (≥1400px).	Object as () => BPObject	`{ cols: 'auto' \| number \| string } \| { gutter: number \| string } \| { gutterX: number \| string } \| { gutterY: number \| string }`	-

CCol

import { CCol } from '@coreui/bootstrap-vue'
// or
import CCol from '@coreui/bootstrap-vue/src/components/grid/CCol'

1
2
3

Props

Prop name	Description	Type	Values	Default
xs	The number of columns/offset/order on extra small devices (<576px).	Col	`'auto' \| number \| string \| boolean \| { span: 'auto' \| number \| string \| boolean } \| { offset: number \| string } \| { order: 'first' \| 'last' \| number \| string }`	-
sm	The number of columns/offset/order on small devices (<768px).	Col	`'auto' \| number \| string \| boolean \| { span: 'auto' \| number \| string \| boolean } \| { offset: number \| string } \| { order: 'first' \| 'last' \| number \| string }`	-
md	The number of columns/offset/order on medium devices (<992px).	Col	`'auto' \| number \| string \| boolean \| { span: 'auto' \| number \| string \| boolean } \| { offset: number \| string } \| { order: 'first' \| 'last' \| number \| string }`	-
lg	The number of columns/offset/order on large devices (<1200px).	Col	`'auto' \| number \| string \| boolean \| { span: 'auto' \| number \| string \| boolean } \| { offset: number \| string } \| { order: 'first' \| 'last' \| number \| string }`	-
xl	The number of columns/offset/order on X-Large devices (<1400px).	Col	`'auto' \| number \| string \| boolean \| { span: 'auto' \| number \| string \| boolean } \| { offset: number \| string } \| { order: 'first' \| 'last' \| number \| string }`	-
xxl	The number of columns/offset/order on XX-Large devices (≥1400px).	Col	`'auto' \| number \| string \| boolean \| { span: 'auto' \| number \| string \| boolean } \| { offset: number \| string } \| { order: 'first' \| 'last' \| number \| string }`	-

Gutters

How they work #

Horizontal gutters #

Vertical gutters #

Horizontal & vertical gutters #

Row columns gutters #

No gutters #

API #

CContainer #

Props #

CRow #

Props #

CCol #

Props #

How they work

Horizontal gutters

Vertical gutters

Horizontal & vertical gutters

Row columns gutters

No gutters

API

CContainer

Props

CRow

Props

CCol

Props