Gutters are the padding between your columns, used to responsively space and align content in the CoreUI for Angular grid system.
How they work
-
Gutters are the gaps between column content, created by horizontal padding. We set
padding-rightandpadding-lefton 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 spacers scale. -
Gutters can be responsively adjusted. Use breakpoint-specific gutter props to modify horizontal gutters, vertical gutters, and all gutters.
Horizontal gutters
c-row [gutter]={gx: *} directive can be used to control the horizontal gutter widths. The c-container or
c-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:
import { Component } from '@angular/core';
import { ColComponent, ContainerComponent, GutterDirective, RowComponent } from '@coreui/angular';
@Component({
selector: 'docs-gutters-horizontal',
templateUrl: './gutters-horizontal.component.html',
imports: [ContainerComponent, RowComponent, GutterDirective, ColComponent]
})
export class GuttersHorizontalComponent {}<c-container class="px-4">
<c-row [gutter]="{gx: 5}">
<c-col>
<div class="p-3 border bg-light">Custom column padding</div>
</c-col>
<c-col>
<div class="p-3 border bg-light">Custom column padding</div>
</c-col>
</c-row>
</c-container>An alternative solution is to add a wrapper around the c-row with the .overflow-hidden class:
import { Component } from '@angular/core';
import { ColComponent, ContainerComponent, GutterDirective, RowComponent } from '@coreui/angular';
@Component({
selector: 'docs-gutters-horizontal-2',
templateUrl: './gutters-horizontal-2.component.html',
imports: [ContainerComponent, RowComponent, GutterDirective, ColComponent]
})
export class GuttersHorizontal2Component {}<c-container class="overflow-hidden">
<c-row [gutter]="{gx: 5}">
<c-col>
<div class="p-3 border bg-light">Custom column padding</div>
</c-col>
<c-col>
<div class="p-3 border bg-light">Custom column padding</div>
</c-col>
</c-row>
</c-container>Vertical gutters
c-row [gutter]={gy: *} directive can be used to control the vertical gutter widths. Like the horizontal gutters,
the vertical gutters can cause some overflow below the c-row at the end of a page. If this occurs, add a wrapper
around c-row with the .overflow-hidden class:
import { Component } from '@angular/core';
import { ColComponent, ContainerComponent, GutterDirective, RowComponent } from '@coreui/angular';
@Component({
selector: 'docs-gutters-vertical',
templateUrl: './gutters-vertical.component.html',
imports: [ContainerComponent, RowComponent, GutterDirective, ColComponent]
})
export class GuttersVerticalComponent {}<c-container class="overflow-hidden">
<c-row [gutter]="{gy: 5}">
<c-col xs="6">
<div class="p-3 border bg-light">Custom column padding</div>
</c-col>
<c-col xs="6">
<div class="p-3 border bg-light">Custom column padding</div>
</c-col>
<c-col xs="6">
<div class="p-3 border bg-light">Custom column padding</div>
</c-col>
<c-col xs="6">
<div class="p-3 border bg-light">Custom column padding</div>
</c-col>
</c-row>
</c-container>
Horizontal and vertical gutters
c-row [gutter]="2" directive 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.
import { Component } from '@angular/core';
import { ColComponent, ContainerComponent, GutterDirective, RowComponent } from '@coreui/angular';
@Component({
selector: 'docs-gutters-horizontal-vertical',
templateUrl: './gutters-horizontal-vertical.component.html',
imports: [ContainerComponent, RowComponent, GutterDirective, ColComponent]
})
export class GuttersHorizontalVerticalComponent {}<c-container class="overflow-hidden">
<c-row [gutter]="2">
<c-col xs="6">
<div class="p-3 border bg-light">Custom column padding</div>
</c-col>
<c-col xs="6">
<div class="p-3 border bg-light">Custom column padding</div>
</c-col>
<c-col xs="6">
<div class="p-3 border bg-light">Custom column padding</div>
</c-col>
<c-col xs="6">
<div class="p-3 border bg-light">Custom column padding</div>
</c-col>
</c-row>
</c-container>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.
import { Component } from '@angular/core';
import { ColComponent, ContainerComponent, GutterDirective, RowComponent } from '@coreui/angular';
@Component({
selector: 'docs-gutters-row-columns',
templateUrl: './gutters-row-columns.component.html',
imports: [ContainerComponent, RowComponent, GutterDirective, ColComponent]
})
export class GuttersRowColumnsComponent {}<c-container>
<c-row [xs]="2" [lg]="5" [gutter]="{g: 2, lg: {g: 3}}">
<c-col>
<div class="p-3 border bg-light">Row column</div>
</c-col>
<c-col>
<div class="p-3 border bg-light">Row column</div>
</c-col>
<c-col>
<div class="p-3 border bg-light">Row column</div>
</c-col>
<c-col>
<div class="p-3 border bg-light">Row column</div>
</c-col>
<c-col>
<div class="p-3 border bg-light">Row column</div>
</c-col>
<c-col>
<div class="p-3 border bg-light">Row column</div>
</c-col>
<c-col>
<div class="p-3 border bg-light">Row column</div>
</c-col>
<c-col>
<div class="p-3 border bg-light">Row column</div>
</c-col>
<c-col>
<div class="p-3 border bg-light">Row column</div>
</c-col>
<c-col>
<div class="p-3 border bg-light">Row column</div>
</c-col>
</c-row>
</c-container>
No gutters
The gutters between columns in our predefined grid props can be removed with [gutter]="{g: 0}".
This removes the negative margins from c-row and the horizontal padding from all immediate children columns.
Need an edge-to-edge design? Drop the parent c-container or c-container 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).
import { Component } from '@angular/core';
import { ColComponent, GutterDirective, RowComponent } from '@coreui/angular';
@Component({
selector: 'docs-gutters-no',
templateUrl: './gutters-no.component.html',
imports: [RowComponent, GutterDirective, ColComponent]
})
export class GuttersNoComponent {}<c-row [gutter]="0">
<c-col sm="6" md="8" class="border p-3">.col-sm-6 .col-md-8</c-col>
<c-col xs="6" md="4" class="border p-3">.col-6 .col-md-4</c-col>
</c-row>API reference
Grid Module
import { GridModule } from '@coreui/angular';
@NgModule({
imports: [GridModule,]
})
export class AppModule() { }c-container
component
import { ContainerComponent } from '@coreui/angular'| Property | Default | Type |
|---|---|---|
| breakpoint | '' | string |
Set container 100% wide until a breakpoint. | ||
| fluid | false | boolean |
Set container 100% wide, spanning the entire width of the viewport. | ||
c-row cRow
component directive
import { RowComponent } from '@coreui/angular'gutter
directive for c-row
import { GutterDirective } from '@coreui/angular'| Property | Default | Type |
|---|---|---|
| gutter | {} | number, IGutterObject, GutterBreakpoints |
Define padding between columns to space and align content responsively in the Bootstrap grid system. | ||
c-col cCol
component directive
import { ColComponent } from '@coreui/angular'