A row defines an area of the page, a position defines a place for a module, and Bootstrap numbers define the width. Once you separate these three concepts, building a template starts to make sense.
What you will learn
- Understand the difference between a row, a Joomla position, and a module.
- Read the 12-column Bootstrap grid.
- Divide a row into positions without coding.
- Distinguish between an editor preview and live content after installation.
Three building layers
A row is a horizontal section of a template, such as a header, a feature strip, or a footer. Inside a row are Joomla positions—named places where Joomla can place modules. A module is the actual functional block, such as a menu, logo, login form, or slideshow.
A position itself creates no text or functionality. It is similar to an empty shelf. In the editor, you can see a safe preview of an inserted module on it, but the actual live output is created only on the target website where Joomla loads the installed and published module.
Why the number 12 keeps appearing
Bootstrap divides the width of a row into twelve imaginary parts. A position with a width of 12 takes up the whole row, two positions of 6 + 6 form halves, and three positions of 4 + 4 + 4 form thirds. The combination does not have to be symmetrical: 3 + 6 + 3 creates narrow sides and a wide middle.
The sum can exceed 12. The next position will then wrap to a new visual row within the same section. For a beginner, it is usually clearer to keep one row at a sum of 12 and split more complex layouts into multiple separate sections.
Imagine a section with two parts. On the left should be brief information, and on the right a wider login or search module. A 4 + 8 split gives the right side twice as much space. Numbers describe only space; they do not create any content on their own. If both parts collapse to a width of 12 on a mobile phone, they remain the same two Joomla positions with the same modules, just displayed below one another.
Therefore, choose and check position names according to their role; width and order alone do not dictate what live content Joomla will insert into them later.
How to prepare a row for modules
- In Grid mode, select the row where you want to place content.
- Choose a column preset or manually set the number and widths of positions.
- Ensure that each position you want to use is turned on and visible.
- Go to Modules and drag a supported module into the highlighted position.
- Verify the result on desktop, tablet, and mobile; each width can have its own layout.
Componentbox is not a regular module position
The main componentbox area represents the space for component content, such as an article or a list view. You cannot drag a module into it. The preview of an article or product in the editor is an inert sample; Template Architect does not create a live article, product, or menu item by doing this.