> For the complete documentation index, see [llms.txt](https://brixxbox.gitbook.io/brixxbox-documentation/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://brixxbox.gitbook.io/brixxbox-documentation/configuration/app-editor/app-editor-properties/widthclass.md).

# WidthClass

You can specify your display layout for 4 different categories of devices.

* **extra small** - screens less than 768 pixel wide like **phones**.
* **small** - screens less than 992 pixel wide like **tablets**.
* **medium** - screens less than 1200 pixel wide like **small laptops**.
* **large** - screens with more than 1200 pixel wide like **laptops and desktops**.

You can make a setting for each of those categories. Or u can just skip the layout for a setting and the smaller setting will come into place. The screen width is always split into 12 logical columns. The smallest line width to choose is 1/12. brixxbox will set the extra small device to 12/12 as default. An input control will go across the full screen width. Medium devices will be set to 4/12 per control. That will lead to 3 controls per screen line for medium and large layouts.

In addition you can decide if u want to have the control label on a separate line above the control or in front of the control. Those settings will be used for all devices.

After saving the control settings in app designer the preview will reflect the changes.

\
For further information please have a look at [Bootstrap Grid System](https://www.w3schools.com/bootstrap/bootstrap_grid_system.asp)


---

# 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://brixxbox.gitbook.io/brixxbox-documentation/configuration/app-editor/app-editor-properties/widthclass.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.