Containers

As people may visit your website using various devices with a range of screen sizes (e.g. small phones, large monitors), it can be helpful to set a maximum width for your page content. This can be done using Codebase containers.

On this page:

.container

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

The .container class fluidly constrains a block to maximum width 1280px (default), and it centers the block by auto-margins right and left.

Various Container Widths

If you want to constrain a container width to something smaller than the maximum, Codebase has are several options. These are based on the media query breakpoint widths with an inset of 5vw to allow for white-space right and left of the block:

Example:

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

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

Container classes	`max-width`	Example usage
`.container`	`1280px`	Wrapping an entire page (e.g. this page)
`.container.container-xl` or `.container` `.container-xl`	`calc(1280px - 5vw)`
`.container.container-lg` or `.container` `.container-lg`	`calc(1024px - 5vw)`
`.container.container-md` or `.container` `.container-md`	`calc(768px - 5vw)`	Long-read articles (e.g. these docs articles)
`.container.container-sm` or `.container` `.container-sm`	`calc(580px - 5vw)`	Narrow modals

Note: no padding is added by the .container class. If you need padding, add a padding utility class of your choice.

Containers and Grid Systems

You can use a container as a wrapper for a Codebase CSS grid layout system.

<div class="container grid">
  ...
</div>

Layout

Flexbox