Angular Containers
Containers are a fundamental building block of CoreUI for Angular. They contain, pad, and align your content within a given device or viewport.
How they work
Containers are the most basic layout element in CoreUI for Angular and arerequired when using our default gridsystem. Containers are used to contain, pad, and (sometimes) center the content within them. While containers can benested, most layouts do not require a nested container.
CoreUI for Angular comes with three different containers:
c-container, which sets amax-widthat each responsive breakpointc-container fluid, which haswidth: 100%at all breakpointsc-container { sm|md|lg|xl|xxl }, withwidth: 100%until the specified breakpoint
The table below illustrates how each container'smax-width compares to the originalc-container andc-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 defaultc-container class is a responsive, fixed-width container, meaning itsmax-width changes at eachbreakpoint.
<c-container> Content here...</c-container>import { Component } from '@angular/core';import { ContainerComponent } from '@coreui/angular';@Component({ selector: 'docs-containers01', templateUrl: './containers01.component.html', styleUrls: ['./containers02.component.scss'], standalone: true, imports: [ContainerComponent]})export class Containers01Component {}:host { c-container { margin-bottom: 1rem; background-color: var(--cui-light); }}Responsive containers
Responsive containers allow you to specify a class that is 100% wide until the specified breakpoint is reached, afterwhich we applymax-width for each of the higher breakpoints. For example,c-container sm is 100% wide to startuntil thesm breakpoint is reached, where it will scale up withmd,lg,xl, andxxl.
<c-container breakpoint="sm"> 100% wide until small breakpoint</c-container><c-container breakpoint="md"> 100% wide until medium breakpoint</c-container><c-container breakpoint="lg"> 100% wide until large breakpoint</c-container><c-container breakpoint="xl"> 100% wide until extra large breakpoint</c-container><c-container breakpoint="xxl"> 100% wide until extra extra large breakpoint</c-container>import { Component } from '@angular/core';import { ContainerComponent } from '@coreui/angular';@Component({ selector: 'docs-containers02', templateUrl: './containers02.component.html', styleUrls: ['./containers02.component.scss'], standalone: true, imports: [ContainerComponent]})export class Containers02Component {}:host { c-container { margin-bottom: 1rem; background-color: var(--cui-light); }}Fluid containers
Usec-container fluid for a full width container, spanning the entire width of the viewport.
<c-container fluid> Content here...</c-container>import { Component } from '@angular/core';import { ContainerComponent } from '@coreui/angular';@Component({ selector: 'docs-containers03', templateUrl: './containers03.component.html', styleUrls: ['./containers01.component.scss'], standalone: true, imports: [ContainerComponent]})export class Containers03Component {}:host { c-container { background-color: var(--cui-light); }}API reference
Grid Module
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 |