# 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: 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:

```
GET https://brixxbox.gitbook.io/brixxbox-documentation/configuration/app-editor/app-editor-properties/widthclass.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
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.
