# Custom Div

## Overview

A simple div, is the simplest Layout Container; can be used to divide the space in multiple blocks without additional rules.

![Custom Div](https://3933488479-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FjpWd52BKwABWxF2lScUK%2Fuploads%2Fgit-blob-8e199328a71fc9ed6178ea17fd316fd797dbfb97%2Fdiv.png?alt=media)

## Getting Started

### Create a Custom Div

<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-37fdde7ab1e30b249ced9adacfa05be9f6a61c28%2Fcustom-div.gif?alt=media" alt=""><figcaption><p>Create a Custom Div</p></figcaption></figure></div>

These are the steps for creating a Custom Div:

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