Angular Gutters

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

|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_|