Container Element

Bricks 1.2 introduced the “Container” element. Which served as the only layout-specific element in Bricks up to Bricks 1.5 (currently in beta).

The container element gives you much more design freedom and is far easier to adjust and align than the old and rigid section, row, column layout. It also minimises your entire HTML structure for faster loading times.

IMPORTANT: If you have built your site with a version before Bricks 1.2 you have to convert your existing Bricks data to the new container layout. Please read and follow the step-by-step migrator instructions below.

The information below only relevant for Bricks versions prior to 1.5. As we are currently transitioning to a Section/Container/Div layout solution, we’ll update the information on this page in regards to the Container element.

How to use the “Container” element

The “Container” element is the main building block to create pretty much any layout with Bricks. From a simple container (div) with a few elements inside of it to multi-column layouts, or more complex layouts that are nested five or more levels deep.

The container element uses the CSS flexbox layout by default. Flexbox provides various settings to easily align a container and its inner elements. If you are new to flexbox we highly recommend you to check out the Complete Guide to Flexbox and the Basic concepts of flexbox.

CSS grid support will be added in a future release of Bricks!

Let’s explore the container capabilities and go over a few container layout examples in the video below:

How to convert your existing Bricks data to the new container layout

If you’ve built your site with the “old” section, row, column layout, you need to convert your data to the new container layout.

Bricks comes with a built-in container migrator that migrates your existing Bricks data to the new container layout with one-click. So you don’t have to re-create your entire site from scratch.

As the new container layout is fully flexible and does NOT have a pre-defined concept of “sections”, “rows” or “columns” you most likely have to make some manual adjustments after running the migrator.

After updating to Bricks 1.2 your old data will still be rendered on the frontend, but it’s not a 100% accurate representation of your existing section layout.

Once you’ve updated to Bricks 1.2+, please convert your existing Bricks data as soon as possible as outlined in the step-by-step migration guide below.

We highly recommend migrating your pages one by one, to ensure you don’t miss reviewing any of your migrated pages.

As an extra precaution, you can also clone your existing site or editing it on a staging server first, and perform the migration there (rather than on any live site).

The migrator does NOT delete any of your existing (section) Bricks data. If you feel Bricks 1.2 and the migrator are not ready for your site yet, you can always download a previous version of Bricks (like 1.1.3) from your Bricks account to roll back and continue using the section, row, column layout for now.

STEP #1: View your un-migrated data on the post type screen

All un-migrated posts/pages/templates, etc. all marked as such by the “(not migrated)” label behind the title. As you can see in the screenshot below, we need to migrate a page named “Blank”:

Page “Blank” needs to be migrated

STEP #2: Select your page and run the migrator

Now select the page you want to migrate, click on the “Bulk actions” dropdown. Select “Migrate Bricks Data” and click “Apply” to run the migrator:

Select and apply the “Migrate Bricks Data” bulk action

STEP #3: Review the migration result

To inspect the results of the one-click migrator, edit your migrated page with Bricks, and perform any necessary adjustments inside the builder. Then preview your changes on the frontend as well, to ensure your layout matches your expectations.

Migration tips:

  • Restore the default section margin-bottom of 30px under: Theme Styles > General > Root Container Margin
  • Restore the default element margin-bottom of 15px under: Theme Styles > General > Element Margin