# Boostrap 12grid layout

Welcome to the 12grid wiki!

This is the bootstrap 12 grid layout package for making responsive forms. It is meant to work with the bootstrap components package or any other compatible component packages. You can build a responsive layout for your form using this combination or components and layouts. 12grid is based on bootstrap grid system, see <https://getbootstrap.com/docs/5.0/layout/grid/> for more details.

## [Collapsible Container](/reference/servoyextensions/layout/home/collapsible-container.md)

## [Simple Collapsible](/reference/servoyextensions/layout/home/simple-collapsible.md)

## [Center Container](/reference/servoyextensions/layout/home/center-container.md)

## [Inline Group Container](/reference/servoyextensions/layout/home/inline-group-container.md)

## [Flexbox Layout](/reference/servoyextensions/layout/home/flexbox-layout.md)

## Nesting responsive forms

In responsive layouts, when you nest multiple forms using tab panels or other types of container-components it may happen that a tab/child form that has in it directly "row" layout containers (so no root layout "container" or layout "container-fluid") shows unwanted scroll-bars. That happens because bootstrap requires that all 'row' divs must either be put in a 'container', a 'container-fluid' or in a 'column', while in the case of a tabpanel for example the parent DOM Element is just some intermediate div. Because 'row' has negative margins of -15px and parent intermediate div might not have padding of 15px, the scrollbars can appear (if that div has overflow: auto). For example:

\| container\
\| row\
\| column\
\| div style="overflow: auto" // the intermediate div of container-component\
\| row // results in a scrollbar because of margin -15px\
\| columns

The problem does not appear when a 'row' is inside a 'column', a 'container' or a 'container fluid' - because those have a padding of 15px defined. However, bootstrap doesn't allow nesting of containers in it's layout docs - so adding a container layout as root of child/contained form is not an option. But as the tabpanel might want to contain absolute forms as well (for example), that intermediate div cannot always set a 15px padding - as that might not be necessary... So we just need to change the margins of such rows as in the rule below (that is included already in "standard\_ngclient.css"):

```
div:not(.container):not(.container-fluid):not([class^="col-xs-"]):not([class^="col-sm-"]):not([class^="col-md-"]):not([class^="col-lg-"])
 > .row {
    margin-right: 0;
    margin-left: 0;
}
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.servoy.com/reference/servoyextensions/layout/home.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.