Gutters
Vue Bootstrap 5 Gutters
Gutters are the padding between your columns, used to responsively space and align content in the Bootstrap grid system.
How they work
-
Gutters are the gaps between column content, created by horizontal
padding. We setpadding-rightandpadding-lefton each column, and use negativemarginto 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 spacers scale. -
Gutters can be responsively adjusted. Use breakpoint-specific gutter classes to modify horizontal gutters, vertical gutters, and all gutters.
Horizontal gutters
.gx-* classes can be used to control the horizontal gutter widths. The
.container or .container-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:
<template>
<MDBContainer class="px-4">
<MDBRow class="gx-5">
<MDBCol>
<div class="p-3">Custom column padding</div>
</MDBCol>
<MDBCol>
<div class="p-3">Custom column padding</div>
</MDBCol>
</MDBRow>
</MDBContainer>
</template>
<script>
import { MDBCol, MDBRow, MDBContainer } from 'mdb-vue-ui-kit';
export default {
components: {
MDBCol,
MDBRow,
MDBContainer
},
};
</script>
<script setup lang="ts">
import { MDBCol, MDBRow, MDBContainer } from 'mdb-vue-ui-kit';
</script>
An alternative solution is to add a wrapper around the
MDBRow with the .overflow-hidden class:
<template>
<MDBContainer class="overflow-hidden">
<MDBRow class="gx-5">
<MDBCol>
<div class="p-3">Custom column padding</div>
</MDBCol>
<MDBCol>
<div class="p-3">Custom column padding</div>
</MDBCol>
</MDBRow>
</MDBContainer>
</template>
<script>
import { MDBCol, MDBRow, MDBContainer } from 'mdb-vue-ui-kit';
export default {
components: {
MDBCol,
MDBRow,
MDBContainer
},
};
</script>
<script setup lang="ts">
import { MDBCol, MDBRow, MDBContainer } from 'mdb-vue-ui-kit';
</script>
Vertical gutters
.gy-* classes can be used to control the vertical gutter widths. Like the
horizontal gutters, the vertical gutters can cause some overflow below the
MDBRow at the end of a page. If this occurs, you add a wrapper around
MDBRow with the .overflow-hidden class:
<template>
<MDBContainer class="overflow-hidden">
<MDBRow class="gy-5">
<MDBCol col="6">
<div class="p-3">Custom column padding</div>
</MDBCol>
<MDBCol col="6">
<div class="p-3">Custom column padding</div>
</MDBCol>
<MDBCol col="6">
<div class="p-3">Custom column padding</div>
</MDBCol>
<MDBCol col="6">
<div class="p-3">Custom column padding</div>
</MDBCol>
</MDBRow>
</MDBContainer>
</template>
<script>
import { MDBCol, MDBRow, MDBContainer } from 'mdb-vue-ui-kit';
export default {
components: {
MDBCol,
MDBRow,
MDBContainer
},
};
</script>
<script setup lang="ts">
import { MDBCol, MDBRow, MDBContainer } from 'mdb-vue-ui-kit';
</script>
Horizontal & vertical gutters
.g-* classes 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>
<MDBContainer>
<MDBRow class="g-2">
<MDBCol col="6">
<div class="p-3">Custom column padding</div>
</MDBCol>
<MDBCol col="6">
<div class="p-3">Custom column padding</div>
</MDBCol>
<MDBCol col="6">
<div class="p-3">Custom column padding</div>
</MDBCol>
<MDBCol col="6">
<div class="p-3">Custom column padding</div>
</MDBCol>
</MDBRow>
</MDBContainer>
</template>
<script>
import { MDBCol, MDBRow, MDBContainer } from 'mdb-vue-ui-kit';
export default {
components: {
MDBCol,
MDBRow,
MDBContainer
},
};
</script>
<script setup lang="ts">
import { MDBCol, MDBRow, MDBContainer } from 'mdb-vue-ui-kit';
</script>
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. To use row columns on MDBRow pass
property cols="*" to it. If you want to pass more than one argument use dynamic
:cols="[]" instead.
<template>
<MDBContainer>
<MDBRow :cols="[2, 'lg-5']" class="g-2 g-lg-3">
<MDBCol><div class="p-3">Row column</div></MDBCol>
<MDBCol><div class="p-3">Row column</div></MDBCol>
<MDBCol><div class="p-3">Row column</div></MDBCol>
<MDBCol><div class="p-3">Row column</div></MDBCol>
<MDBCol><div class="p-3">Row column</div></MDBCol>
<MDBCol><div class="p-3">Row column</div></MDBCol>
<MDBCol><div class="p-3">Row column</div></MDBCol>
<MDBCol><div class="p-3">Row column</div></MDBCol>
<MDBCol><div class="p-3">Row column</div></MDBCol>
<MDBCol><div class="p-3">Row column</div></MDBCol>
</MDBRow>
</MDBContainer>
</template>
<script>
import { MDBCol, MDBRow, MDBContainer } from 'mdb-vue-ui-kit';
export default {
components: {
MDBCol,
MDBRow,
MDBContainer
},
};
</script>
<script setup lang="ts">
import { MDBCol, MDBRow, MDBContainer } from 'mdb-vue-ui-kit';
</script>
No gutters
The gutters between columns in our predefined grid classes can be removed with
.g-0>. This removes the negative margin>s from MDBRow> and
the horizontal padding>
from all immediate children columns.
Need an edge-to-edge design? Drop the parent MDBContainer or
MDBContainer 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>
<MDBRow class="g-0">
<MDBCol sm="6" md="8">sm="6" md="8"</MDBCol>
<MDBCol col="6" md="4">col="6" md="4"</MDBCol>
</MDBRow>
</template>
<script>
import { MDBCol, MDBRow } from 'mdb-vue-ui-kit';
export default {
components: {
MDBCol,
MDBRow
},
};
</script>
<script setup lang="ts">
import { MDBCol, MDBRow } from 'mdb-vue-ui-kit';
</script>
Change the gutters
Classes are built from the $gutters Sass map which is inherited from the
$spacers Sass map.
$grid-gutter-width: 1.5rem;
$gutters: (
0: 0,
1: $spacer * .25,
2: $spacer * .5,
3: $spacer,
4: $spacer * 1.5,
5: $spacer * 3,
);