Grid layout

Use of Web standards

WebAcappella uses the latest version of the Bootstrap framework and the powerful CSS3 FlexBox standard. A WebAcappella page features a simple and efficient grid system to organize the visual aspect of a web page. Like a construction set, it allows to design a website quickly and with few lines of code added.

Notion of grid

A grid is simply a division into cells of the same dimensions

The Bootstrap grid has 12 columns.

A grid is divided into rows (called “row” in Bootstrap) and columns (“col”), as in the following figure:


The Bootstrap grid

The column layout divides the screen width in percent. For the rows on the other hand the height will be adjusted to the content.


Organization of the grid

  • A grid is defined in WebAcappella by the button ” BOX ” which will contain as many lines as desired with always a width of 12 columns maximum per line.

  • A row in Bootstrap will contain elements (text, image, etc.).

The major components are the “BOX”, “COL” and “ROW”.


BOX : This is the primary component (therefore essential)


LINE: Component that allows you to include images, texts, a gallery, etc.

A row is divided into 12 columns (see bootstrap), a component like an image can have a minimum width of 1 column and a maximum of 12 columns.

WebAcappella Fusion Editor

You can drag and drop all the components into the working interface


Resize your columns by checking this box


This allows you to grab the borders of your elements to adjust their width