Container

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.

Adding a Container

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

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). 

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

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. 

Changes cascade downwards towards smaller breakpoints.

And upwards towards larger breakpoints from the base breakpoint.

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. 

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. 

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)

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

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.