Containers

Learn about containers, and how to best use them in the Base System

Overview

Containers set the boundaries of content by setting a max width on content inside a section, ensuring content is readable and consistently aligned. Containers are div-block elements with styles that center them and set a max-width. The max-width is used to set the bounds of our content. Containers are typically added inside the <section> element to group and align content. This structure ensures a logical and consistent hierarchy within your layouts, with the section providing vertical spacing and the container handling content alignment and width constraints.

---

Container Classes

Class Name	Max Width
Container X Large	1280px / 80rem
Container Large	1120px / 70rem
Container Regular	960px / 60rem
Container Small	800px / 50rem
Container X Small	640px / 40rem
{Custom} Container	{Custom}

---

How to use Containers

In Webflow, containers should utilize the <div-block> element rather than the default <container> element. Although the default container element provides a convenient visual icon in the Navigator panel, it does not provide any SEO benefits and includes pre-applied styles that may not align with the desired design requirements.

Utility Containers

Containers are not controlled via variables, as we found that we rarely created custom container classes. If we need to add additional styles, we found it easier to add those styles to a new div block inside the container rather than style the container.

If you need additional sizes, you can easily extend the scale. For example: Container 2X Small.

Custom Containers

For containers requiring unique styling, you can customize them using combo classes Ideal for minor adjustments like higher z-index, background colors, overflow properties.

Ocasionally, you may need to create a new class Examples: Testimonial Container, Pricing Container.

---