Angular Containers

On this page

## How they work Containers are the most basic layout element in CoreUI for Angular and are **required when using our default grid system**. Containers are used to contain, pad, and (sometimes) center the content within them. While containers can be nested, most layouts do not require a nested container. CoreUI for Angular comes with three different containers: - `c-container`, which sets a `max-width` at each responsive breakpoint - `c-container fluid`, which has `width: 100%` at all breakpoints - `c-container { sm|md|lg|xl|xxl }`, with `width: 100%` until the specified breakpoint The table below illustrates how each container's `max-width` compares to the original `c-container` and `c-container fluid` across each breakpoint.

	Extra small <576px	Small ≥576px	Medium ≥768px	Large ≥992px	X-Large ≥1200px	XX-Large ≥1400px
`<c-container>`	100%	540px	720px	960px	1140px	1320px
`<c-container breakpoint="sm">`	100%	540px	720px	960px	1140px	1320px
`<c-container breakpoint="md">`	100%	100%	720px	960px	1140px	1320px
`<c-container breakpoint="lg">`	100%	100%	100%	960px	1140px	1320px
`<c-container breakpoint="xl">`	100%	100%	100%	100%	1140px	1320px
`<c-container breakpoint="xxl">`	100%	100%	100%	100%	100%	1320px
`<c-container fluid>`	100%	100%	100%	100%	100%	100%

--- ### Default container Our default `c-container` class is a responsive, fixed-width container, meaning its `max-width` changes at each breakpoint.

--- ### Responsive containers Responsive containers allow you to specify a class that is 100% wide until the specified breakpoint is reached, after which we apply `max-width` for each of the higher breakpoints. For example, `c-container sm` is 100% wide to start until the `sm` breakpoint is reached, where it will scale up with `md`, `lg`, `xl`, and `xxl`.

--- ### Fluid containers Use `c-container fluid` for a full width container, spanning the entire width of the viewport.

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