# Building responsive dashboards

CTools includes Bootstrap’s responsive library, so you can develop dashboards which work across a range of different devices, such as laptops, tablets, and smart phones. In this walk-through tutorial, you will convert the **demoDashboard** you created in the [Create a dashboard using RequireJS](https://github.com/pentaho/documentation/blob/main/PDIA/11.0/CTools/CDE%20advanced%20solutions/CDE%20advanced%20solutions/Create%20a%20dashboard%20using%20RequireJS=GUID-2EF401C9-C356-43A3-B041-9546712FB647=1=en=.md) or [Exporting charts](/pba-ctools/cde-advanced-solutions/exporting-charts.md) tutorials to a responsive dashboard.

These instructions assume that you are familiar with the [main features in CDE](https://github.com/pentaho/documentation/blob/main/PDIA/11.0/CTools/CDE%20dashboard%20overview/CDE%20dashboard%20overview=GUID-45B6F4DA-C45F-482D-AA7A-99BE0016F616=4=en=.md) and the basic steps of [creating a dashboard in CDE](https://github.com/pentaho/documentation/blob/main/PDIA/11.0/CTools/CDE%20quick%20start%20guide/CDE%20quick%20start%20guide=GUID-4DBA97DB-6E34-4E20-8815-6332FB0D8626=3=en=.md). In addition, these instructions assume that you have [activated the CDE plugin](/pba-ctools/activate-cde.md).

1. Open the **demoDashboard** in CDE.

   For detailed instructions, see Step 1 in [Exporting Charts with CGG](/pba-ctools/cde-advanced-solutions/exporting-charts.md#exporting-charts-with-cgg).
2. In the Layout perspective, locate and expand the **chartTableRow** row.

   1. Select the **tableObj** column and in the **Properties** pane, set the **Medium Devices** property to `6` spans. Additionally, set the**Extra Small Devices** property to `12` spans.
   2. Select the **chartObj** column and in the **Properties** pane, set the **Medium Devices** property to `6` spans. Additionally, set the**Extra Small Devices** property to `12` spans.

   ![](/files/b0y8yJ8dzUHd65QOGNDc)

   **Note:** The **Small Devices** property will inherit its value from the **Extra Small Devices** property, and the **Large Devices** property will inherit its value from the **Medium Devices** property. For more information about how Bootstrap works in CDE, see the [CDE Dashboard Overview](/pba-ctools/cde-dashboard-overview.md).
3. Save the **demoDashboard**.
4. In Pentaho User Console, navigate to the Browse Files perspective and double-click the `demoDashboard` file. When rendered, the dashboard will look similar to the following:

   ![Resulting example dashboard](/files/GgcQdcvnMypkVe2qWuam)
5. To test the responsiveness of your dashboard, reduce the size of your browser window. The dashboard layout will respond accordingly:

   ![Example dashboard responding accordingly](/files/3W0pkdZFOPKyeyTQgnUs)


---

# 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://docs.pentaho.com/pba-ctools/cde-advanced-solutions/building-responsive-dashboards.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.