Content module
Container block
A flexible layout box for other blocks: rows, columns and grids, full-width or boxed content, backgrounds, overlays and per-device layouts.
Overview
The Container is the building block for page layouts. It holds any other blocks — Brigade Blocks and WordPress’s own — and arranges them in a column, a row or a grid. It can span the full width of the screen while keeping its content centred (“boxed”), and it can have a background colour, gradient or image with an overlay, borders, rounded corners and shadows.
Containers can be placed inside other containers, so you can build any layout: a full-width hero with a two-column row inside, a grid of cards, a sticky sidebar, and so on. Almost all of its settings are in the Styles tab, where every layout value can be different on desktop, tablet and mobile.
At a glance
- Block name
wpbb/container- Module
- Content
- Find it by searching
- Container
- Loads JavaScript on the site
- No
When and why to use it
- Build page sections: a coloured band, a hero with a background image, a call-to-action strip.
- Put blocks side by side — two or three columns that stack on phones.
- Create grids of cards (for example 3 columns on desktop, 2 on tablet, 1 on mobile).
- Centre content vertically and horizontally inside a tall area.
Example scenarios
- Hero: a full-width Container with a background image and a dark overlay, Boxed content, and a Heading and Button inside, centred.
- Features: a Container in Grid layout with 3 columns (2 on tablet, 1 on mobile) holding six Icon Boxes.
- Text and image: the “Two columns” layout with a Text Editor on the left and an Image on the right, which stacks on phones.
See it in action
These are live examples: real Container blocks rendered by WordPress with the plugin’s own styles and scripts. Use the buttons to see how they adapt to tablet and phone screens.
How to add the Container block
- Open the editor. In your WordPress dashboard go to Pages (or Posts) and click the page you want to edit, or click Add New. For headers, footers and templates, use Appearance → Editor (block themes).
- Add a new block. Click the blue + (Block Inserter) button in the top-left corner, or the small + that appears where you want the block. You can also type / on an empty line.
- Search for the block. Type Container in the search field. Brigade Blocks appear in the Brigade Blocks category and show the coral block icon.
- Insert it. Click Container in the results. The block appears with a layout picker.
- Configure the content. Pick a starting layout from the picker (you can change everything later), then add blocks inside with the + button. Select the Container itself (tip: use the List View or the “Select parent” arrow in the toolbar) and open the Styles tab for its layout options.
- Customise the design. Switch to the Styles tab (half-filled circle icon) to change colours, spacing, borders and more — see Design & styling.
- Save or publish. Click Save draft to keep working later, Preview to check it, or Publish / Update to make it live.
Content settings
The Container has very few settings of its own: its layout and design live in the Styles tab (see Design & styling below). The Settings tab shows a short reminder of that.
On the block (in the editor canvas)
Starting layout (when inserted)
- What it does
- Sets up the Container with a ready-made layout. Vertical: blocks stacked in a column. Horizontal: blocks side by side in a row that wraps, vertically centred. Centered: content centred horizontally and vertically, centred text, at least 320px tall. Two columns / Three columns: equal columns (each one a nested Container) that stack into a single column on mobile. Skip starts with a vertical flex layout.
- What to enter or choose
- Click one of the five layouts — Vertical, Horizontal, Centered, Two columns, Three columns — or Skip.
- How to use it
- Click the text in the block on the page and type. Use the block toolbar for bold, italic and links.
- When to use it
- Every time you insert a Container — it saves you setting the layout by hand.
- Example
- Choose “Two columns” for text beside an image.
- Result
- The Container is created with those layout values in the Styles tab, and — for the column layouts — with empty column Containers inside.
- Good to know
- The picker only appears once. Afterwards change the layout in the Styles tab → Layout panel.
Blocks inside
- What it does
- The content of the Container.
- What to enter or choose
- Any blocks.
- How to use it
- Click the + inside the empty Container, or drag blocks into it from the List View.
- When to use it
- Always — an empty Container shows nothing on the site.
- Example
- A Heading, a Text Editor and a Button.
- Result
- The blocks are arranged according to the layout.
Block toolbar
Layout summary
- What it does
- Shows the current layout at a glance, for example “Flex · Row · Boxed” or “Grid · 3 cols · Full width”.
- What to enter or choose
- Nothing to choose — it is information only.
- How to use it
- Select the block; the button is in the toolbar that appears above it.
- When to use it
- To check the layout of a Container without opening the Styles tab.
- Example
- “Flex · Column · Full width”.
- Result
- —
Settings panel: Advanced (HTML element)
In the Advanced section at the bottom of the Settings tab.
HTML element
- What it does
- The HTML tag used for the Container.
- What to enter or choose
- One of: <div>, <section>, <article>, <aside>, <header>, <footer>, <main>, <nav>.
- Default
- <div>
- How to use it
- Open the dropdown and pick an option.
- When to use it
- Use a meaningful element when it describes the content:
<section>for a page section,<header>/<footer>in templates,<nav>around navigation,<aside>for sidebars. Keep<div>for pure layout boxes. - Example
<section>for the “Our services” band of a page.- Result
- Looks the same, but screen readers and search engines understand the page structure better.
- Good to know
- Use
<main>only once per page, and only if your theme does not already add one.
Design & styling
Select the block, open the Styles tab in the settings sidebar (the half-filled circle icon next to the gear) and use the three pickers at the top of the Style panel:
- Element — which part of the block to style.
- State — Normal, or a state such as Hover (only the states the part supports are offered).
- Device — Desktop, Tablet or Mobile, for values that can differ per screen size.
Only panels that make sense for the chosen part and state are shown. The full meaning of every control is in the Styling Controls guide; below is exactly what Container offers.
The Container’s Layout panel sets how its blocks are arranged, and its Sizing panel has the Content width choice: Full width (default) or Boxed (background full width, content centred at the “Content max width”). Background images can have an Overlay colour — only the Container offers overlays. Every block placed directly inside a Container also gets a Flex item panel in its own Styles tab.
Element: Container
The Container itself, including the layout of the blocks inside it.
| Panel | Control | Per device | Available in states |
|---|---|---|---|
| Layout | Layout type | Yes | Normal |
| Layout on this device | Yes | Normal | |
| Direction | Yes | Normal | |
| Wrap | Yes | Normal | |
| Columns | Yes | Normal | |
| Justify content | Yes | Normal | |
| Align items | Yes | Normal | |
| Align content | Yes | Normal | |
| Gap | Yes | Normal | |
| Typography | Font family | — | Normal |
| Font size | Yes | Normal | |
| Weight | — | Normal | |
| Style | — | Normal | |
| Line height | Yes | Normal | |
| Letter spacing | Yes | Normal | |
| Letter case | — | Normal | |
| Alignment | Yes | Normal | |
| Decoration | — | Normal, Hover, Focus | |
| Colors | Text | — | Normal, Hover, Focus |
| Link | — | Normal | |
| Link hover | — | Normal | |
| Background | Type | — | Normal, Hover, Focus |
| Color / Gradient | — | Normal, Hover, Focus | |
| Image | — | Normal | |
| Overlay | — | Normal, Hover, Focus | |
| Border | Border type | — | Normal, Hover, Focus |
| Border | — | Normal, Hover, Focus | |
| Radius | Yes | Normal | |
| Box Shadow | Remove shadow | — | Normal, Hover, Focus |
| Shadow layers | — | Normal, Hover, Focus | |
| Spacing | Margin | Yes | Normal |
| Padding | Yes | Normal | |
| Sizing | Content width | Yes | Normal |
| Width | Yes | Normal | |
| Max width | Yes | Normal | |
| Height | Yes | Normal | |
| Min width / Min height / Max height | Yes | Normal | |
| Block alignment | Yes | Normal | |
| Position | Position | Yes | Normal |
| Top / Right / Bottom / Left | Yes | Normal | |
| Z-index | Yes | Normal | |
| Overflow | Yes | Normal | |
| Transform | Move X / Move Y | — | Normal, Hover, Focus |
| Scale X / Scale Y | — | Normal, Hover, Focus | |
| Rotate (°), Rotate X (°), Rotate Y (°) | — | Normal, Hover, Focus | |
| Skew X (°) / Skew Y (°) | — | Normal, Hover, Focus | |
| Effects | Opacity (%) | Yes | Normal, Hover, Focus |
| State transition (ms) | — | Normal | |
| Timing | — | Normal | |
| Visibility | Show on Desktop / Tablet / Mobile | — | Normal |
States for this part:
- Hover — When the mouse pointer is over it. (Touch screens have no hover; they show the normal style.)
- Focus — When it has keyboard focus — reached with the Tab key. Mouse clicks usually do not show focus styles.
Responsive settings
Brigade Blocks uses three screen sizes: Desktop (wider than 1023px), Tablet (600–1023px) and Mobile (599px and narrower). Tablet and Mobile values are optional: when empty, the value of the next larger screen is used.
The Container is where responsive layouts are made. Common recipes:
- Row on desktop, column on phones: Styles → Device: Mobile → Layout → Direction: Column. (The Two/Three columns layouts are already set up this way.)
- 3 → 2 → 1 columns: Layout type Grid, Columns 3 on Desktop, 2 on Tablet, 1 on Mobile.
- Less padding on phones: Spacing → Padding, set a smaller value with Device: Mobile.
In the Styles tab, pick the Device first; these controls can then have a different value for that screen size: Layout type, Layout on this device, Direction, Wrap, Columns, Justify content, Align items, Align content, Gap, Font size, Line height, Letter spacing, Alignment, Radius, Margin, Padding, Content width, Width, Max width, Height, Min width / Min height / Max height, Block alignment, Position, Top / Right / Bottom / Left, Z-index, Overflow, Opacity (%).
The Visibility panel (Styles tab, Normal state) can hide the block entirely on Desktop, Tablet or Mobile.
Advanced options
- HTML anchor (Advanced section of the Settings tab) — a unique name such as
pricing, so you can link straight to this block with#pricingat the end of the page address (for example from a menu). - Additional CSS class(es) (Advanced section) — for custom CSS from your theme or the Site Editor. Separate several classes with spaces.
- Custom attributes (Advanced section) — add
data-*,title,aria-label,aria-describedby,langordirattributes. See Custom attributes. - State transition (Styles tab → Effects, Normal state) — how smoothly hover and focus styles animate.
- Width alignment (block toolbar) — Wide width, Full width, when your theme supports them.
How it works on your site
The Container outputs a single element (the one chosen as HTML element) with your blocks inside; Boxed adds one inner wrapper that centres the content. All layout is pure CSS — no JavaScript. Styles are generated only for the values you set.
Accessibility
- Layout order: “Reverse” directions and the Flex item Order change the visual order only. Screen readers and keyboard users follow the order in the editor, so keep that order logical.
- When text sits on a background image, add an overlay so the text keeps enough contrast.
- Choose a semantic HTML element for landmarks (header, nav, main, footer, aside).
Tips and best practices
- Use the List View (the three-lines icon in the top toolbar) to select nested containers precisely.
- Start with a layout from the picker; it is faster than setting Flex values by hand.
- For consistent spacing between blocks, use the Layout panel’s Gap instead of margins on each block.
- Save a finished section as a pattern (block menu → “Create pattern”) to reuse it.
Limitations and notes
- Overlays only work with the Container (other blocks do not offer them).
- Sticky positioning stops working if a parent container hides its overflow.
Troubleshooting
My columns do not stack on the phone.
Select the Container, open Styles, set Device to Mobile and choose Layout → Direction: Column (or Grid → Columns: 1).
I cannot select the Container because the blocks inside cover it.
Select any block inside, then click the “Select parent” arrow in the block toolbar, or use the List View.
The content is not centred on wide screens.
Set Styles → Sizing → Content width to Boxed, and optionally a Content max width such as 1200px.