Bricks Builder: Beginners guide to using Sections, Containers, Blocks, and Divs [Article Only]

By
Fabrizio Van Marciano

Welcome back to another beginner’s Bricks Builder tutorial. In this guide, you’re going to learn all about the sections, containers, blocks, and divs inside of Bricks Builder.

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 –

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 and search algorithms to navigate and understand the information presented. Each section may have its own purpose, theme, or topic.

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

Web designers use sections to enhance the user experience by creating a clear and organized structure, making it easier for visitors to find and consume the content.

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 call-to-action, and an about section, a pricing table section, and so on.

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

<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. More on the ‘container’ later. The section is set to display: Flex by default. In other words, it’s using Flexbox layout.

Containers

Next, let’s talk about the containers. A container in Bricks is simply a <div> container that is set to display: Flex by default. The container is set to be 100% of the width of the parent container, which is of course the section. Here’s an example of what this would look like in HTML –

<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 “Grid,” is a two-dimensional layout system in CSS that allows developers to create complex grid-based layouts with rows and columns. It provides a powerful and flexible way to structure and arrange content on a web page, making it easier to design responsive and dynamic layouts.

Recommended: Creating a Pricing Table using Grid Layout in Bricks Builder

Divs

OK, 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. 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">
   <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.

Blocks

A block element inside of Bricks is simply a <div> that is set to display: flex by default and is 100% of the width of the parent container, which can 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.

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. Usually, I stick with sections, containers, and blocks. But again, it depends on what your goals are with your page layout, so you use what you need.

Here is a visual representation of how sections, containers, blocks, and divs are used in Bricks, using simple Flexbox –

If you look at the structure panel, I have highlighted which container is which.

Did you find this topic useful? If so, we have over 250 combined course topics and expert tutorials in the Van Marciano Pro Membership! Consider becoming a member today.

Go straight to the main video