> For the complete documentation index, see [llms.txt](https://docs.cloudio.io/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.cloudio.io/ui-components/widgets/div.md).

# DIV

## Description:

Div

The DIV component is a container unit that encapsulates other page elements and divides the HTML document into sections.

### Allowed Parent Components:

1. Card Body
2. Col

### Allowed Child Components:

1. Date
2. H1
3. H2
4. H3
5. H4
6. H5
7. HTML
8. Icon
9. Image
10. Number
11. Paragraph
12. Popover
13. Pulse
14. Trigger Before Render

### Properties

### ➤ Self Alignment

Select an option to align the div inside a flex container.

Allowed Values:

1. Start
2. Center
3. End

### ➤ Align Items

Select an option to align all direct children as a group. In Flexbox, it aligns the items on the Cross Axis. In Grid Layout, it aligns the items on the Block Axis within their grid area.

Allowed Values:

1. stretch
2. center
3. initial
4. baseline

### ➤ Display

Select an option to set whether the Div is treated as a block or inline element and the layout used for its children, such as grid or flex.

Allowed Values:

1. inline
2. block

### ➤ Background Color

Allowed Values: Color

### ➤ Border Top

Select this to add a border on top

Allowed Values: Yes/No

### ➤ Border Right

Select this to add a border on right

Allowed Values: Yes/No

### ➤ Border Bottom

Select this to add a border on bottom

Allowed Values: Yes/No

### ➤ Border Left

Select this to add a border on left

Allowed Values: Yes/No

### ➤ Border Width

Select an option to change the width of a border

Allowed Values:

1. default
2. normal
3. thick
4. thicker

### ➤ Border Type

Select an option to change the type of a border

Allowed Values:

1. solid
2. dashed
3. dotted

### ➤ Border Color

Select a color or enter the custom class to set the color on the sides of the element's border.

Allowed Values: Select a color or enter the custom class to set the color on the sides of the element's border.

### ➤ Margin

Select a value to add margin on all four sides of the component. It is a shorthand for margin-top, margin-right, margin-bottom, and margin-left.

Allowed Values: Any number value

### ➤ Margin Bottom

Select a value to add margin on the bottom of the component.

Allowed Values: Any number value

### ➤ Margin Left

Select a value to add margin on the left of the component.

Allowed Values: Any number value

### ➤ Margin Right

Select a value to add margin on the right of the component.

Allowed Values: Any number value

### ➤ Margin Top

Select a value to add margin on the top of the component.

Allowed Values: Any number value

### ➤ Padding

Select a value to add padding on all four sides of the component. It is a shorthand for padding-top, padding-right, padding-bottom, and padding-left.

Allowed Values: Any number value

### ➤ Padding Bottom

Select a value to add padding in the bottom of the component.

Allowed Values: Any number value

### ➤ Padding Left

Select a value to add padding in the left of the component.

Allowed Values: Any number value

### ➤ Padding Right

Select a value to add padding in right of the component.

Allowed Values: Any number value

### ➤ Padding Top

Select a value to add padding in top of the component.

Allowed Values: Any number value