> For the complete documentation index, see [llms.txt](https://docs.servoy.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.servoy.com/reference/servoyextensions/layout/home/inline-group-container.md).

# Inline Group Container

The Inline Group Container allow you to use at best the available width dividing the available width in 3 horizontal section, **left**, **right** and **content**; the left and the right section will use all and only the necessary width depending on their content (if any); the **content** section instead will use all the remaining width.

### Getting Started

You can drop Servoy any Servoy Web Components and nest other 12Grid containers into the **left**, **right** and **content** section.

You may decide to leave empty the **right** or **left** section, not necessarely you need to use these section; however you may use at least one of these 2 sections; otherwise you may not use this container at all since there is no benefit on using only the **content** section.

**IMPORTANT!** The parent container of the inline group container MUST have a known width, the inline group container is not useful at all if the width of it's top container is 'auto' (which is an unknown value).

### Fixed Left/Right Section Size

You may force the **left** and or **right** section to a fixed width by setting the respectively the **data-leftsize** and **data-rightsize** attribute of the inline group container to one of the pre-defined values *xs*, *sm*, *md*, *lg*.

Setting a fixed size to a section is particoularly useful when you want to align multiple label and fields using multiple inline group containers.

You can override the default sizes of the pre-defined values by adding the following CSS rules to the CSS styleSheet of your Solution.

```
 /* Inline Group Sizes */
.inline-group[data-leftsize="xs"] > .inline-group-left,
.inline-group[data-rightsize="xs"] > .inline-group-right {
 	width: 40px;
}
 
.inline-group[data-leftsize="sm"] > .inline-group-left,
.inline-group[data-rightsize="sm"] > .inline-group-right {
 	width: 80px;
}
 
.inline-group[data-leftsize="md"] > .inline-group-left,
.inline-group[data-rightsize="md"] > .inline-group-right {
 	width: 120px;
}
 
.inline-group[data-leftsize="lg"] > .inline-group-left,
.inline-group[data-rightsize="lg"] > .inline-group-right {
 	width: 160px;
}
```

You can of course decide also to add your own CSS class to set a specific width to the section instead of using the pre-defined sizes.

### Responsive Section

You can enable a responsive behavior for the **left** section using the attribute **data-responsive** of the inline-group-container. You can select a breakpoint value (sm, md, lg) for which the left section will move into a new line when the screen size is smaller thane the breakpoint value; see the [Bootstrap CSS Media Query](https://getbootstrap.com/docs/3.0/css/#grid-media-queries) for the breakpoint values.

### Nesting Inline Group Containers

You can nest multiple inline group container within the content section to sub-divide the available width of the content section.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://docs.servoy.com/reference/servoyextensions/layout/home/inline-group-container.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.