Are you ready for Cyber ~~Monday~~ Week Deals?

Extra 25% off for all sale items + Free CoreUI Icons PRO with every order! Limited offer for the first 100 people, use code 2024BWCW25 during checkout.

On this page

Angular Gutters

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-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 spacers](https://coreui.io/docs/utilities/spacing) 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`:

An alternative solution is to add a wrapper around the `c-row` with the `.overflow-hidden` class:

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

## 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.

## 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.

## 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).

--- ## API reference ### Grid Module ```typescript import { GridModule } from '@coreui/angular'; @NgModule({ imports: [GridModule,] }) export class AppModule() { } ``` --- ### c-container _component_ ##### Inputs

|prop|description|type|default|notes| |:---|:---|:---|:---:|---| |`fluid`|Set container 100% wide, spanning the entire width of the viewport.|`boolean`|_undefined_| |`breakpoint`|Set container 100% wide until `{sm\|md\|lg\|xl\|xxl}` breakpoint.|`string`|_undefined_|

--- ### c-row cRow _component_ _directive_ ##### Inputs

|prop|description|type|default|notes| |:---|:---|:---|:---:|---| |`xs`|The number of columns/offset/order on extra small devices (<576px).|`auto \| number \| boolean`|_undefined_| |`sm`|The number of columns/offset/order on extra small devices (<768px).|`auto \| number \| boolean`|_undefined_| |`md`|The number of columns/offset/order on extra small devices (<992px).|`auto \| number \| boolean`|_undefined_| |`lg`|The number of columns/offset/order on extra small devices (<1200px).|`auto \| number \| boolean`|_undefined_| |`xl`|The number of columns/offset/order on extra small devices (<1400px).|`auto \| number \| boolean`|_undefined_| |`xxl`|The number of columns/offset/order on extra small devices (≥1400px).|`auto \| number \| boolean`|_undefined_|

--- ### gutter _directive_ for c-row ##### Inputs

|prop|description|type|default|notes| |:---|:---|:---|:---:|---| |`gutter`|Define padding between columns to space and align content responsively in the Bootstrap grid system.|(IGutterObject | GutterBreakpoints | Gutters)|_undefined_|

--- ### c-col cCol _component_ _directive_ ##### Inputs

|prop|description|type|default|notes| |:---|:---|:---|:---:|---| |`xs`|The number of columns/offset/order on extra small devices (<576px).|`auto \| number`|_undefined_| |`sm`|The number of columns/offset/order on extra small devices (<768px).|`auto \| number`|_undefined_| |`md`|The number of columns/offset/order on extra small devices (<992px).|`auto \| number`|_undefined_| |`lg`|The number of columns/offset/order on extra small devices (<1200px).|`auto \| number `|_undefined_| |`xl`|The number of columns/offset/order on extra small devices (<1400px).|`auto \| number `|_undefined_| |`xxl`|The number of columns/offset/order on extra small devices (≥1400px).|`auto \| number`|_undefined_| |`offset`|Offset grid columns|`number\|{sm\|md\|lg\|xl\|xxl}:number`|_undefined_| |`order`|Controls the visual order of your columns. Includes support for `1` through `5` across all six grid tiers.|`"first"\|"last"\|number\|{sm\|md\|lg\|xl\|xxl}:number`|_undefined_|