Containers

How they work#

Containers are the most basic layout element and are required when using the grid. 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.

felt-css comes with three different containers:

• .container, which is width: 100% up to a maximum width of --container-max (1080px)
• .container-{breakpoint}, which is width: 100% until the specified breakpoint
• .container-fluid, which is width: 100% at all breakpoints

Unlike Bootstrap, whose .container steps through a fixed width per breakpoint, felt-css has a single maximum width: a container is fluid until it reaches 1080px, then it stays centered. All containers have 1rem of horizontal padding. The table below shows how each container's max-width compares across the breakpoints.

Since every viewport below 1080px is narrower than the maximum, .container-sm, -md and -lg only differ from .container on screens wider than 1080px. There is no .container-xl or .container-xxl.

Default container#

The default .container class is a responsive container: full width on small screens, centered with a max-width of 1080px on larger ones.

<div class="container">
  <!-- Content here -->
</div>

Responsive containers#

Responsive containers allow you to specify a class that is 100% wide until the specified breakpoint is reached, after which the maximum width applies. For example, .container-sm is 100% wide to start until the sm breakpoint is reached.

<div class="container-sm">100% wide until small breakpoint</div>
<div class="container-md">100% wide until medium breakpoint</div>
<div class="container-lg">100% wide until large breakpoint</div>

Fluid containers#

Use .container-fluid for a full width container, spanning the entire width of the viewport.

<div class="container-fluid">
  ...
</div>

Custom width#

The maximum width is a custom property on :root. Override it to make every container wider or narrower:

:root {
  --container-max: 1280px;
}