Bricks Builder Container Elements: Sections, Containers, Blocks, and Divs [Article Only]

Welcome back to another Bricks tutorial on Van Marciano Pro. In this post, you’re going to learn all about the sections, containers, blocks, and divs inside of Bricks Builder.

This guide is designed to help beginners understand the fundamentals of modern web design elements and how to use Bricks Builder effectively.

What are the container elements?

The sections, containers, blocks, and divs are the four rudimentary container elements in Bricks Builder. While they’re logically simple enough to use when building the layout of your website pages, it’s important to understand when and how to use them. Let’s get started –

1. Sections

Let’s start with the first building block of any page and that is the section. Before we can start talking about sections in Bricks, it’s important to understand what a section is.

In web design, a <section> typically refers to a distinct part of a webpage that is visually separated from other parts.

Sections are used to semantically organize and structure the content on a webpage, making it easier for users as well as search algorithms to navigate and understand the information presented. Each section may have its own purpose, theme, or topic.

So in web development, HTML provides semantic structural elements like <section>, <div>, <article>, etc. We’ll talk about <divs> much later.

As web designers, we use sections to help structure and enhance the user experience by creating a clear and organized structure. We want to make it easier for our visitors to find and consume the content in a logical way.

Additionally, sections can be styled differently to create a visual hierarchy and emphasize certain information on the webpage. For example, a page can have a hero section with a nice call-to-action, followed by an about section, then a pricing table section, and so on.

Let’s look at an example of how a section is created using some markup (HTML).

<section>
   <h1>This is a heading title</h1>
   <p>This is a paragraph of text.</p>
</section>

In Bricks Builder, the <section> element is presented full-width, which also contains a <container> element (not shown in the above code). More on the ‘container’ later. The section is set to display: Flex by default, which basically means it’s using Flexbox layout.

2. Containers

Next, let’s talk about the containers.

A container in Bricks is simply a <div> container that is, once again, set to display: Flex by default.

The container is also set to 100% of the width of the parent container. The parent, of course, being the section. Here’s an example of what this would look like semantically –

<section>
   <div class-"container">
      <h1>This is a heading title</h1>
      <p>This is a paragraph of text.</p>
   </div>
</section>

The container element can be used to create simple layouts using Flex directions (columns and rows), as well as alignment options. To put it simply: Flexbox provides an efficient way to lay out, align, and distribute space among items in a container, even when their size is unknown or dynamic.

In Bricks, we can change the way the container is displayed and use the following –

• Grid
• Block
• Inline-block
• Inline
• none

CSS Grid Layout, often referred to simply as the “Grid,” is a two-dimensional layout system that allows developers to create complex layouts with rows and columns. It provides a powerful and flexible way to structure and arrange content on a web page, thus making it easier to design responsive and dynamic layouts.

Recommended tutorial: Creating a Grid-Based Pricing Table in Bricks Builder

3. Divs

Alright, so let’s talk about the <div>.

The beloved div is a generic container element that is used to group HTML elements.

This is where it can get a little confusing for beginners. So, in Bricks Builder, Containers uses the <div> HTML tag. But you can also use basic <div> containers as a bare-bones starting point for custom containers.

For visual reference, here’s an example of how divs are used in HTML:

<section>
   <div class="container">
      <div class="grid-box">
      <div class="grid-box">
         <div class="grid-box__inner">
      <div class="grid-box">
   <div>
</section>

In the example above, we have a <section>, and inside the section, we have a container that uses the HTML tag <div>. Then we have three nested boxes that also use the <div> tag. Inside of the second nested box, we have yet another box using the div tag.

Recommended: Check out my post on designing a Bento-style Footer Section in Oxygen

4. Blocks

A block element inside of Bricks is simply a custom container with the <div> tag that is set to display: flex. By default, the width is set to 100% of the width of the parent container, which can either be a section or container.

Blocks can be used to create columns (boxes inside of a container), and are ideal for containing and aligning child elements.

How to use sections, containers, divs, and blocks in Bricks

There is no definitive way to use container elements inside of Bricks, but you almost always start with a <section>.

Where you go from here depends on what you are trying to achieve with your page layout. For example, if I’m creating a pricing table, I’ll often use a container element <div> and set this to display: grid. Then place three separate block elements inside of the container. From there, I can adjust the grid template columns, rows, and so on.

Alternatively, I can use display: flex for the container and set the direction to horizontal, and then add my three block elements inside. We can then ensure that we’re adding correct semantic tags such as <UL> and <LI> to the table. We have a guide on how to do this in our new Build Series videos.

Divs are great if you do not need to have a container that uses 100% of the width of the page or a parent container. I rarely use <div> elements in my page layouts, unless I’m nesting them to create complex layouts.

Usually, I stick with sections, containers, and blocks. Again, it depends on what your design goals are with your page layouts, so you use what you need.

Finally, here is a visual representation of how sections, containers, blocks, and divs can be used in Bricks, using simple Flexbox –

If you look at the structure panel, you’ll see that I have highlighted what each container is.

Did you find this topic helpful? If so, you’ll be pleased to know that inside the Van Marciano Pro Membership you get access to over 400 combined course topics, in-depth tutorials, bonus videos, ready-made templates, code snippets, and much more. Why not become a member and join our growing community?