# Containers

> Containers are a fundamental building block of CoreUI for React.js that 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 React.js 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 React.js comes with three different containers:

- `<CContainer>`, which sets a `max-width` at each responsive breakpoint
- `<CContainer fluid>`, which is `width: 100%` at all breakpoints
- `<CContainer {sm|md|lg|xl|xxl}>`, which is `width: 100%` until the specified breakpoint

The table below illustrates how each container's `max-width` compares to the original `<CContainer>` and `<CContainer fluid>` across each breakpoint.

|  | Extra small<div className="fw-normal">&lt;576px</div> | Small<div className="fw-normal">&ge;576px</div> | Medium<div className="fw-normal">&ge;768px</div> | Large<div className="fw-normal">&ge;992px</div> | X-Large<div className="fw-normal">&ge;1200px</div> | XX-Large<div className="fw-normal">&ge;1400px</div> |
| --- | --- | --- | --- | --- | --- | --- |
| `.container` | <span className="text-body-secondary">100%</span> | 540px | 720px | 960px | 1140px | 1320px |
| `.container-sm` | <span className="text-body-secondary">100%</span> | 540px | 720px | 960px | 1140px | 1320px |
| `.container-md` | <span className="text-body-secondary">100%</span> | <span className="text-body-secondary">100%</span> | 720px | 960px | 1140px | 1320px |
| `.container-lg` | <span className="text-body-secondary">100%</span> | <span className="text-body-secondary">100%</span> | <span className="text-body-secondary">100%</span> | 960px | 1140px | 1320px |
| `.container-xl` | <span className="text-body-secondary">100%</span> | <span className="text-body-secondary">100%</span> | <span className="text-body-secondary">100%</span> | <span className="text-body-secondary">100%</span> | 1140px | 1320px |
| `.container-xxl` | <span className="text-body-secondary">100%</span> | <span className="text-body-secondary">100%</span> | <span className="text-body-secondary">100%</span> | <span className="text-body-secondary">100%</span> | <span className="text-body-secondary">100%</span> | 1320px |
| `.container-fluid` | <span className="text-body-secondary">100%</span> | <span className="text-body-secondary">100%</span> | <span className="text-body-secondary">100%</span> | <span className="text-body-secondary">100%</span> | <span className="text-body-secondary">100%</span> | <span className="text-body-secondary">100%</span> |

## Default container

Our default `<CContainer>` class is a responsive, fixed-width container, meaning its `max-width` changes at each breakpoint.

```jsx
<CContainer>
  Content here
</CContainer>
```

## 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`s for each of the higher breakpoints. For example, `<CContainer sm>` is 100% wide to start until the `sm` breakpoint is reached, where it will scale up with `md`, `lg`, `xl`, and `xxl`.

```jsx
<CContainer sm>100% wide until small breakpoint</CContainer>
<CContainer md>100% wide until medium breakpoint</CContainer>
<CContainer lg>100% wide until large breakpoint</CContainer>
<CContainer xl>100% wide until extra large breakpoint</CContainer>
<CContainer xxl>100% wide until extra extra large breakpoint</CContainer>
```

## Fluid containers

Use `<CContainer fluid>` for a full width container, spanning the entire width of the viewport.

```jsx
<CContainer fluid>
  Content here
</CContainer>
```

## API

### CContainer

```jsx
import { CContainer } from '@coreui/react-pro'
```

### Props

| Name | Type | Default | Description |
| --- | --- | --- | --- |
| `className` | `string \| undefined` | - | A string of all className you want applied to the base component. |
| `fluid` | `boolean \| undefined` | - | Set container 100% wide, spanning the entire width of the viewport. |
| `lg` | `boolean \| undefined` | - | Set container 100% wide until large breakpoint. |
| `md` | `boolean \| undefined` | - | Set container 100% wide until medium breakpoint. |
| `sm` | `boolean \| undefined` | - | Set container 100% wide until small breakpoint. |
| `xl` | `boolean \| undefined` | - | Set container 100% wide until X-large breakpoint. |
| `xxl` | `boolean \| undefined` | - | Set container 100% wide until XX-large breakpoint. |