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 effective grid system to arrange the visual appearance of a web page. Like a construction set, it allows you to design a website quickly and with few added lines of code.

Concept of a 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 division divides the screen width in percent. For rows, however, the height is adjusted to the content.


Organisation of the grid

  • A grid is defined in WebAcappella by the button ” BOX ” which will contain as many lines as desired with always a maximum width of 12 columns 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 (and therefore essential) component


LINE: Component that allows the inclusion of 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