Leiout Grid Structure and Bootstrap

Published on 03/22/2021
Help Article Intro To Leiout
Jason Hoover
Leiout Developer
Katy Wellington
UX/UI Designer

In this Leiout tutorial we are going to discuss two things:

  • The structure of Leiout components.
  • How bootstrap works with this structure since Leiout is Bootstrap based.


In Leiout the containers are sections, rows, columns, and column groups. All the containers have the following in common:

  • A handle that allows them to be moved around
  • A cog button that brings up the toolbar
  • A clone button
  • An inner and outer div (except for column groups)

The outer div is referred to as the wrapper in Leiout and the inner div is referred to as the node. If you click the cog for a container and navigate to the classes tab you will notice classes for the wrapper and node. You can also see this if you click the three ellipses on the container handle. 

Screen Shot 2021-03-22 at 1.56.29 PM.png
Screen Shot 2021-03-22 at 1.56.37 PM.png

You will notice that there are classes already attached to the wrapper and nodes. The classes in grey are native Leiout classes that cannot be changed. Any other classes that are present are either bootstrap classes or classes that the developer has created and defined in the global css. These can be changed or deleted. The Leiout structure mirrors the bootstrap grid system except that the section does not have the container class. Instead the row has the container class on the outer and the row class on the inner div. 

Screen Shot 2021-03-22 at 1.59.58 PM.png

Every Leiout website comes with Bootstrap CSS and JS libraries already attached (as well as JQuery). Because these linbraries are already attached, we can simply add bootstrap classes to make changes. For example, I can add the bootstrap classes, "text-center" and "bg-dark" to the column below to change the appearance. 

Screen Shot 2021-03-22 at 2.03.57 PM.png

That is the basic structure of Leiout and how it works with Bootstrap. 

Related Articles

Plugin Options

This article explains how to add and use multiple plugin options.

02, Aug 2021
Help Article Plugins

In this Leiout tutorial, you will learn about the different parts of the toolbar. You will learn about and how to use common toolbar options that all containers and elements have.

23, Mar 2021
Help Article Intro To Leiout

This tutorial will be broken up in two parts and will walk you through the ins and outs of the navigation and how to set up navigation items on a Leiout website. In part one you will learn about the Builder and Legacy navs and in part two you will l...

23, Mar 2021
Help Article Intro To Leiout
Uploads vs Sass vs Global CSS

In Leiout, there are different places to put specific files, SASS, and other CSS. In this tutorial you will learn the difference between the Uploads, SASS files, and the Global CSS tabs under Assets on the admin dashboard and how to utilize these opt...

23, Mar 2021
Help Article Intro To Leiout