Back to all lessons
Lesson library


Use containers to keep your content centered and legible.

This video features an old UI. Updated version coming soon!

The Container element is the perfect companion for a Section element. When we place a Container inside a Section, and we place elements inside the Container - the Container keeps the content neatly organized towards the center of the screen.

In this lesson:

  1. Anatomy of a Container
  2. Adding a Container
  3. Custom-width containers
  4. Container padding
  5. Reusing containers
  6. Containers and Div blocks

Anatomy of a Container

A Container is a Div block with pre-defined styles. It comes with a 940-pixel max-width on larger displays that keeps your content centered relative to the browser window. On smaller devices (like phones and tablets), Containers extend across the full width of the screen.

A container contains an image in the background, a div block filled with a Headline, paragraph and a button.

Adding a Container

You can add a Container element from the Layout section in the Elements panel (A).

Container icon thumbnail

Then, you can place new elements or move your content into the Container.

Custom-width containers

By default, the Container element is automatically responsive. But sometimes you want a wider container instead of the default maximum width (940 pixels).

You can do this in 2 steps

  1. Add a class to our Container  (e.g. Container)
  2. Set the max-width (e.g. 1100 pixels). 

A style panel displays a selected class called container. It also displays the sections layout (collapsed), spacing (collapsed) and size (expanded).

Now, the Container will respond to the size of your viewport but only extend to the maximum width you set. 

Larger breakpoint

You can also style the Container for breakpoints larger than the default. If you want your Container width to be more appropriately sized for larger displays - you can do that in 4 steps:

  1. Click the Add large breakpoint option (the three dots next to the base breakpoint)
  2. Select any larger breakpoint
  3. Then, make sure to select your Container element
  4. Lastly, change the max-width style that best fits the selected breakpoint
The add large breakpoint settings panel displays three additional breakpoints 1280px, 1440px and 1920px.

As a note: always go back to the base breakpoint to continue designing your project. The reason is because of this: changes made in the Style panel cascade outwards from the base. 

A diagram displaying a line with two arrows pointing outwards from the Desktop (base) breakpoint. A message warns "styles cascade up to larger devices."

Changes cascade downwards towards smaller breakpoints.

A diagram displays the cascading order down to smaller devices tablet, mobile landscape and mobile portrait.

And upwards towards larger breakpoints from the base breakpoint.

A diagram displays the cascading order upwards to larger devices. From right to left, Large breakpoint 1, large breakpoint 2, large breakpoint 3.

Container padding

You can use your Container to add space around your elements. In our example, the content is being pushed right up to the edge in the mobile-landscape breakpoint. 

A container without padding displays the content right at the edge viewed in the mobile-landscape breakpoint.

This is because the Container is full-width for mobile devices and elements inside are at the edge. You can adjust the padding to give some nice breathing room. 

The style panel displays an expanded Spacing section with 20 pixels of padding on the left and right sides.

To do this: 

  1. Select the Container element on the canvas (in our example, we named it “Container”)
  2. In the Style panel, add left and right padding (e.g. 20 pixels)
A container with padding displays the content with space between the edge viewed in the mobile-landscape breakpoint.

That styling will then pass down to Mobile portrait as well. 

Reusing containers

Because you already gave your Container a class (in our example, we named it “Container”), you can apply that class to other containers you add to your project.

To apply a class:

  1. Select an element on the canvas
  2. Type in the class name in the Selector field
  3. Press Return
The style panel displays a text input field in the selector section to type the class name.
Note: A change to the styling on that class will affect all containers that have that class applied. Learn more about Classes.

Containers and Div blocks

Containers inside of Sections is a common hierarchy in web development 

A Section, by default, is full-width. Inside the Section, you have a Container, which keeps everything inside neatly bound towards the center. 

A Div block is the most basic and versatile element used when designing your project because it can be anything you want it to be. You can use Div blocks inside Containers to organize your elements using Layout, Spacing, Size, and Position styles.

Note: a Section is a Div block that’s full-width and a Container is a Div block that that has a max-width by default. 

But that’s an overview of Containers in the Webflow Designer.

Try Webflow — it's free