Layout & Grid System

To create a great looking website, you need to solid understand of layout components and grid system. In this section we will take a closer look into these concepts

Before we get started, make sure that, you have understood the basics of Bootstrap and Bulma framework.

Layout Components

Getting Started

From the components panel, under Layout you can find all the essentials to create a layout.

  1. Section

  2. Container

  3. Container Fluid

  4. Grid Components (1 Col, 2 Cols, 3 Cols, 4 Cols, 8 - 4 or 4 -8 Cols Grid) based on the framework Grid styles

Let us try to understand each of these components one by one.

Section Component

The section components basically creates <section> tag. Under the hood which defines a section in a document.

Example:

<section>
<h2>World Wide Web</h2>
<p>
The World Wide Web (WWW), commonly known as the Web, is an information system
where documents and other web resources are identified by Uniform Resource
Locators
</p>
</section>

Containers

Containers are a fundamental building block of Bootstrap or Bulma that contain, pad, and align your content within a given device or viewport.

Under the hood

<div class="container"></div>

Bootstrap or Bulma comes with three different containers:

  • .container, which sets a max-width at each responsive breakpoint

  • .container-fluid, which is width: 100% at all breakpoints

  • .container-{breakpoint}, which is width: 100% until the specified breakpoint

Fluid Container

You can drag 'n' drop the Container Fluid component from the layout component.

For Bootstrap - It uses .container-fluid class for a full width container, spanning the entire width of the viewport.

For Bulma - It uses .is-fluid class

If you don't want to have a maximum width but want to keep the 32px margin on the left and right sides, add the container fluid component

Under the hood

<div class="container-fluid"></div> <!---Bootstrap 4 or 5-->
<div class="container is-fluid"></div> <!---Bulma-->

Grid System

Grid system uses a series of rows, and columns to layout and align content. It’s built with flexbox and is fully responsive. It's depends on the properties of the framework you're using. Bootstrap will have different set of Grid features while Bulma will have different set of features

Under the hood

When you drag and drop any Grid system component. It will generates the code based on the framework Grid properties.

Bootstrap 4 or 5:

When you drag and drop 3 - Col Grid it will generates the following code under the hood.

<div class="row">
<div class="col-xl-4 col-lg-4 col-md-4 col-sm-4 col-12 py-3">
<p>Drop any content / div here</p>
</div>
<div class="col-xl-4 col-lg-4 col-md-4 col-sm-4 col-12 py-3">
<p>Drop any content / div here</p>
</div>
<div class="col-xl-4 col-lg-4 col-md-4 col-sm-4 col-12 py-3">
<p>Drop any content / div here</p>
</div>
</div>

Bulma:

<div class="columns">
<div class="column is-4">
<p>Drop any content / div here</p>
</div>
<div class="column is-4">
<p>Drop any content / div here</p>
</div>
<div class="column is-4">
<p>Drop any content / div here</p>
</div>
</div>

Creating a basic layout

In this tutorial - we will choose Bootstrap 5 framework for creating a basic layout.

Basic layout will be structured as following:

  1. Basic Section with Image on the left and content heading & paragraph on the right

  2. Below to that, we will create a container layout with 3 col Grid

  3. Let us add image card into each column

Final Output will be like this:

Sample Layout using 3 Col Grid, Section and Containers

Let us start with Basic Section

When you're working Grid System or Layout components - it is better to turn on the Highlight Border option.

This will turn on the border for all elements and will help you to navigate and drop items easily and precisely

Turn on the borders
  1. Drag and drop Section component

  2. Then Drag and drop Container component into that Section to keep all items in center

  3. Now let us add 4-8 Col Grid Component (stack the columns by making one full-width and the other half-width)

  4. Add image component from Basic to the 4 col area.

  5. Add the Heading / Paragraph from Basic to 8 col area.

Basic Section Layout with Image and Heading

When you follow the above steps it will generate the following code under the hood. You can always the customize the layout using Code Editor too.

<section class="py-5">
<div class="container py-5">
<div class="row">
<div class="col-xl-4 col-lg-4 col-md-4 col-sm-4 col-12 py-3"><img type="img" src="https://source.unsplash.com/BlIhVfXbi9s/500x500" alt="image alt" class="img-fluid" /></div>
<div class="col-xl-8 col-lg-8 col-md-8 col-sm-8 col-12 py-3" id="i903p">
<h1 class="display-1">This is Display Heading</h1>
<p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum...</p>
<figure>
<blockquote class="blockquote">
<p>A well-known quote, contained in a blockquote element.</p>
</blockquote>
<figcaption class="blockquote-footer">
Someone famous in <cite title="Source Title">Source Title</cite></figcaption>
</figure>
</div>
</div>
</div>
</section>

Now let us create 3 Col grid with image card

  1. Drag and drop the container component into the canvas, below the Section. The one you've created before.

  2. Now Drag and drop 3 - Col grid component

  3. From the Core Bootstrap, drag and drop Image Card into each of these columns

3 Col Grid with Image Card

When you follow the above steps it will generate the following code under the hood. You can view or edit them from the Code Editor.

<div class="container py-5">
<div class="row">
<div class="col-xl-4 col-lg-4 col-md-4 col-sm-4 col-12 py-3">
<div class="card"><img type="img" src="https://source.unsplash.com/collection/190727/600x600" alt="Card image cap" class="card-img-top" />
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p><a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-xl-4 col-lg-4 col-md-4 col-sm-4 col-12 py-3">
<div class="card"><img type="img" src="https://source.unsplash.com/collection/190727/600x600" alt="Card image cap" class="card-img-top" />
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p><a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
<div class="col-xl-4 col-lg-4 col-md-4 col-sm-4 col-12 py-3">
<div class="card"><img type="img" src="https://source.unsplash.com/collection/190727/600x600" alt="Card image cap" class="card-img-top" />
<div class="card-body">
<h5 class="card-title">Special title treatment</h5>
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p><a href="#" class="btn btn-primary">Go somewhere</a>
</div>
</div>
</div>
</div>
</div>

In this way, you can start working creating custom layouts using Gridbox - Bootstrap or Bulma layout components.

Further Reading