Containers

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

1.0 Containers

The container is a structural element used to wrap content and layout elements on a webpage. The primary purposes of a container are to group related elements, control the layout and alignment of content, and apply consistent styling.

Browse the starting utility classes and their properties in the table below. Learn more about how containers are used in your layouts through the structure overview page.

2.0 Container Classes

Class Name	Width	Max Width	Magin Left & Right
Container X Large	100%	1440px	Auto
Container Large	100%	1280px	Auto
Container Regular	100%	1140px	Auto
Container Small	100%	960px	Auto
Container X Small	100%	640px	Auto
{Custom} Container	{Custom}	{Custom}	Auto

3.0 General Usage

3.1 Overview

Containers in Webflow should use a <div-block> element, instead of the default <container> element. While the default container element provides a beneficial visual icon in the navigation panel, it also comes bundled with some pre-applied styles that aren't always suitable. So, while you can use this element it is generally recommended to use a <div-block> and apply appropriate styles yourself.

3.2 Class Naming

Class naming for containers follows a similiar approach to other structure elements. You can learn more about the general philosophy of class naming here.

• Default Containers: Default containers use descriptive names based on max width.

  • Example: Container Large, Container Regular, Container Small

• Custom Containers: Use section as a suffix to the parent category

  • Example: Testmonial Container, Pricing Container