# Bootstrap 12-Grid

## Bootstrap 12-Grid Layout

### Overview

This is the bootstrap 12 grid layout package for making [**responsive forms**](https://docs.servoy.com/guides/develop/application-design/forms/layout-management/abstract-form). 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.

See below the Layout Containers which can be found within the Bootstrap 12-Grid Layout package:

### Container

Container, based on the Bootstrap [Container](https://getbootstrap.com/docs/5.0/layout/containers) is used to contain, pad, and (sometimes) center the content within them. While containers can be nested, most layouts do not require a nested container.

**Constraints** : A Container can be dropped only at the root of the form layout and can contain **only** [Row](#row), therefore you will be allowed to drag & drop into it **only** [Row](#row) layout or templates starting with rows (e.g. Row and 1 Column, Label and Field...).

![Container](https://3933488479-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjpWd52BKwABWxF2lScUK%2Fuploads%2Fgit-blob-63bbca67b19b85d5478cf32dc37c7ee41702ee2f%2Fcontainer.png?alt=media)

#### Create a Container

<div align="left"><figure><img src="https://3933488479-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjpWd52BKwABWxF2lScUK%2Fuploads%2Fgit-blob-41938503e8b49ddc29394a73d37cac76682ced57%2Fb12-container.gif?alt=media" alt=""><figcaption><p>Create a Container</p></figcaption></figure></div>

These are the steps for creating a Container:

1. Open the [Form Editor](https://docs.servoy.com/reference/servoy-developer/object-editors/form-editor) of your [**responsive form**](https://docs.servoy.com/guides/develop/application-design/forms/layout-management/abstract-form)
2. Find **Container** in *Bootstrap 12-Grid* section of the components' pallet
3. Drag and drop the **Container** component in the form
4. Add at least one [Row](#row) component

### Row

Rows are wrappers for columns. Each column has horizontal padding (called a gutter) for controlling the space between them. This padding is then counteracted on the rows with negative margins to ensure the content in your columns is visually aligned down the left side. Rows also support modifier classes to uniformly apply column sizing and gutter classes to change the spacing of your content.

**Constraints** : A row can contain **only** [Column](#column) containers.

![Row](https://3933488479-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjpWd52BKwABWxF2lScUK%2Fuploads%2Fgit-blob-9632d8c4c510b0217b2b2323c2f68c8c5330120d%2Frow.png?alt=media\&token=bbcf75b3-19ad-478c-b1b3-6dcac141eb63)

#### Create a Row

<div align="left"><figure><img src="https://3933488479-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjpWd52BKwABWxF2lScUK%2Fuploads%2Fgit-blob-b833aa4b9a319dc506e50b703fd1c4fc27a6da9e%2Fb12-row.gif?alt=media" alt=""><figcaption><p>Create a Row</p></figcaption></figure></div>

These are the steps for creating a Row:

1. Open the [Form Editor](https://docs.servoy.com/reference/servoy-developer/object-editors/form-editor) of your [**responsive form**](https://docs.servoy.com/guides/develop/application-design/forms/layout-management/abstract-form)
2. Find **Row** in *Bootstrap 12-Grid* section of the components' pallet
3. Drag and drop the **Row** component in:
   * empty space of the form, as an independent component
   * inside a [Container](#container) component
   * inside a [Column](#column) component
4. Add at least one [Column](#column) component

### Column

Columns are at the core of the 12 Grid Layout system. Nested within [Row](#row) containers, they can divide the parent row's width to up 12 blocks of same relative size, allowing you to create different combinations of elements that span any number of columns. Column classes indicate the number of template columns to span (e.g., col-4 spans four). widths are set in percentages so you always have the same relative sizing.

**Constraints** : A column can contain any component and any layout containers **except** for [Container](#container), [Column](#column) or [Flex Item](https://docs.servoy.com/guides/develop/application-design/forms/layout-management/flexbox#flex-item).

![Column](https://3933488479-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjpWd52BKwABWxF2lScUK%2Fuploads%2Fgit-blob-0408bf28c5dbf444644a98a95e3a3df9a521ce4b%2Fcolumn.png?alt=media\&token=93ce9ef8-7660-4874-9f7b-54cca8fb06b7)

Can nest rows into a column to further organize the layout:

![Column Nested](https://3933488479-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjpWd52BKwABWxF2lScUK%2Fuploads%2Fgit-blob-be32ea25cf298cc264d8ecc8bbc9a5ba60069f67%2Fcolumn2.png?alt=media\&token=b973e250-fc59-4a57-9087-b722bc872969)

#### Create a Column

<div align="left"><figure><img src="https://3933488479-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjpWd52BKwABWxF2lScUK%2Fuploads%2Fgit-blob-b030b6f39828c006c972ff9be7000a4d5bf31596%2Fb12-column-v2.gif?alt=media" alt=""><figcaption><p>Create a Column</p></figcaption></figure></div>

These are the steps for creating a Column:

1. Open the [Form Editor](https://docs.servoy.com/reference/servoy-developer/object-editors/form-editor) of your **responsive form**
2. Find **Column** in *Bootstrap 12-Grid* section of the components' pallet
3. Drag and drop the **Column** component in a [Row](#row) component
4. Add other needed components inside the **Column**, **except** for [Container](#container), [Column](#column) or [Flex Item](https://docs.servoy.com/guides/develop/application-design/forms/layout-management/flexbox#flex-item)

***

## Bootstrap 12-Grid Layout Templates

The following are ready to use layout templates based on the 12 Grid Layout.

### Row-With-Column

A quick start for a 12 Grid layout. These 3 templates *Row with 1 Column*, *Row with 2 Columns*, *Row with 3 Columns* are row layout containing already 1, 2 or 3 equally sized columns.

![Row With Column](https://3933488479-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjpWd52BKwABWxF2lScUK%2Fuploads%2Fgit-blob-25b38052ef1efe47e5191719dd77272c342eab84%2Frowcolumns.png?alt=media)

#### Create a Row-With-Column

<div align="left"><figure><img src="https://3933488479-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjpWd52BKwABWxF2lScUK%2Fuploads%2Fgit-blob-e84a4bf54ec1541a31c7a0a2082d73f623987b20%2Fb12-row-with-column.gif?alt=media" alt=""><figcaption><p>Create a Row-With-Column</p></figcaption></figure></div>

These are the steps for creating a Row-With-Column:

1. Open the [Form Editor](https://docs.servoy.com/reference/servoy-developer/object-editors/form-editor) of your **responsive form**
2. Find **Row with 1 Column** / **Row with 2 Columns** / **Row with 3 Columns** in the *Bootstrap 12-Grid* section of the components' pallet
3. Drag and drop the component in:
   * empty space of the form, as an independent component
   * inside a [Container](#container) component
   * inside a [Column](#column) component
4. Add other needed components inside the **Column**, **except** for [Container](#container), [Column](#column) or [Flex Item](https://docs.servoy.com/guides/develop/application-design/forms/layout-management/flexbox#flex-item), even other columns inside the row, if needed

### Label-And-Field

A predefined template which comes with a row and 2 columns ( md-4 and md-8 ) having a [Label](https://docs.servoy.com/guides/develop/application-design/ui-components/buttons-and-text/label) component in the first column and a [Textbox](https://docs.servoy.com/guides/develop/application-design/ui-components/input-controls/textbox) component in the second column.

![Label And Field](https://3933488479-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjpWd52BKwABWxF2lScUK%2Fuploads%2Fgit-blob-081ae46c4039477b2054a8f267d99e94295b0f7f%2Flabelfield.png?alt=media)

#### Create a Label-And-Field

<div align="left"><figure><img src="https://3933488479-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjpWd52BKwABWxF2lScUK%2Fuploads%2Fgit-blob-60227238677dc1071f5a309e6e704afc80d52aba%2Fb12-label-and-field.gif?alt=media" alt=""><figcaption><p>Create a Label-And-Field</p></figcaption></figure></div>

These are the steps for creating a Label-And-Field:

1. Open the [Form Editor](https://docs.servoy.com/reference/servoy-developer/object-editors/form-editor) of your **responsive form**
2. Find **Label-And-Field** in *Templates* subsection of the *Bootstrap 12-Grid* section in the components' pallet
3. Drag and drop the **Label-And-Field** component in:
   * empty space of the form, as an independent component
   * inside a [Container](#container) component
   * inside a [Column](#column) component
4. Edit the [Label](https://docs.servoy.com/guides/develop/application-design/ui-components/buttons-and-text/label) component in the first column and the [Textbox](https://docs.servoy.com/guides/develop/application-design/ui-components/input-controls/textbox) component in the second column, or even add other components if needed

### Responsive-Form-Template

A predefined layout of nested rows and columns; you can further edit it by adding or removing other layout containers.

![Responsive Template](https://3933488479-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjpWd52BKwABWxF2lScUK%2Fuploads%2Fgit-blob-c6b846fea50afda9a8e0e844fcc5005d5943cf7e%2Fresptemplate.png?alt=media)

#### Create a Responsive-Form-Template

<div align="left"><figure><img src="https://3933488479-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjpWd52BKwABWxF2lScUK%2Fuploads%2Fgit-blob-87fc084838d39dfb947c725b1960dab44469b1fb%2Fb12-resp-form-template-v2.gif?alt=media" alt=""><figcaption><p>Create a Responsive-Form-Template</p></figcaption></figure></div>

These are the steps for creating a Responsive-Form-Template:

1. Open the [Form Editor](https://docs.servoy.com/reference/servoy-developer/object-editors/form-editor) of your **responsive form**
2. Find **Responsive-Form-Template** in *Templates* subsection of the *Bootstrap 12-Grid* section in the components' pallet
3. Drag and drop the **Responsive-Form-Template** component into an empty space of the form, as an independent component
4. Edit the [Columns](#column) and [Rows](#row); you can also add or remove components inside