Container

Use containers to keep your content legible and centered.

We’re transitioning to a new UI, and are in the process of updating our Webflow University content.

The container element is useful for keeping your content neatly organized towards the center of the screen. It’s typically used alongside a section element. You can add a container from the Add panel > Structure section.

In this lesson, we’ll cover:

  1. Anatomy of a container
  2. How to use containers, sections, and div blocks

Anatomy of a container

A container is a div block with predefined styles. It has a 940-pixel max width on larger displays to keep your content centered relative to the browser window. On smaller devices (like phones and tablets), containers extend the full width of the screen.

You can adjust the max width of a container so it will still respond to the size of your viewport but only extend to the maximum width you set.

How to use containers, sections, and div blocks

In web development, containers are often situated inside of section elements. A section, by default, is full-width. You can put a container inside the section to keep elements neatly bound towards the center. Then, you can use div blocks inside containers to organize elements using layout, spacing, size, and position.

Pro tip: A section is a div block that’s full-width and that has a predefined “Section” HTML5 tag. A container is a div block with a default max-width.

Learn more about building web layouts.

Table of contents

Continue learning

Hmm…we couldn’t find any results for “search query”. Try a different search term or check out our community forum.

Search the forumReset the filter
Load more

Filter

Reset
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Topics
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.
Back to top