Description
The Container Block is the primary base layer for organizing content in each section of a page, following the Bootstrap Grid System like this: Container > Row > Column.
Any Foundry block can be added directly inside a Foundry Container Block EXCEPT the Column Block. Columns must be nested inside a Row Block within the container.
You can put content blocks inside containers using rows or columns, or without using them. Rows create horizontal gutters between columns and govern their alignment, while columns create vertical spacing. Skipping rows and columns would limit your control over spacing and alignment, but the container is still perfectly usable for content that doesn’t need this level of control.
Think of a filing cabinet. It has a drawers (which are containers). Some drawers have rails designed to hang files, others don’t. You can put loose items like binders, staplers, and snacks in the drawers.
The Container Block can also be added inside other blocks: the Column Block, Accordion Block, Slideout Block, Slider Block, Query Block, and Grid Block. This is the foundation for custom content layouts.
The Container Block can also be nested inside itself! There’s no limit to the number of Container Blocks that can be nested into any of the supported blocks or containers.
Screenshots
Settings
Container Settings
Full Width
This on/off toggle allows the container to either stretch to the full width of the browser, or to sit within the max-width setting (which is set by default to 1200px).
Padding
These top, right, bottom, and left sliders, with a range from 0 to 12, control the amount of interior space there is between the edges of the Column Block and its contents. More about Padding.
Margin
These sliders, with a range from 0 to 12, control the amount of exterior space there is around the block and adjacent objects. Each one controls the margins around the top, bottom, left, and right of the container. More about Margin.
Positioning
Position
These dropdown selections for None, Relative, Absolute, and Sticky positioning govern how the container is positioned within the surrounding elements. More about Positioning.
Top, Right, Bottom, Left & Z-Index
The top, right, bottom, and left position value inputs control the final position of a block, using Relative, Absolute, or Sticky positioning. You can’t use these values if you haven’t first set the Position (ie. if it’s left on the default, None). More about Positioning.
Z-index determines a block’s stacked position among overlapping elements, and it only works on blocks set as Relative, Absolute, or Sticky (not Static).
These position settings require a little more CSS knowledge to work with than most other settings.
Background Settings
Color
This option fills the entire Container Block background with the selected color. The colors found in the dropdown are set in the Global Styles > Colors area, in case you need to change your options.
Background: Image
This allows you to add images as backgrounds within a Container Block, and to order those image and gradient layers. More about Image Backgrounds.
Background: Gradient
This allows you to add gradient backgrounds within the Container Block, and to order those image and gradient layers. More about Gradient Backgrounds.
Border Radius
This value rounds the corners of the Container Block’s outer border edge.
Advanced
HTML Anchor
This allows you to enter a unique ID identifier, so you can create a URL for this specific Container Block within the page. More about HTML Anchors.
Additional CSS Class(es)
This allows you to enter a unique Class identifier, to facilitate custom CSS targeting within the theme for custom development. More about Theme Customizations.
It also enables the use of Foundry utility classes. More about Utility Classes.