Changing Bootstrap container element in a CDE dashboard

[gundisalwa]

A common request for dashboard layouts is to change the element where the bootstrap .container class is added. The use cases for this vary from already having it defined in the .html template, setting the container class to .container-fluid (always stretches to the entire viewport) or adding multiple parallel container elements in the same dashboard.

My standard approach to this usually involves two steps:

1. Removing the .container class from the root element, that was added by CDE. This can be achieved using a simple jquery snippet, usually similar to

   $('body > .container').removeClass('container');

   Your .html template might have a different structure, and the div.container element might not be a child of body, so YMMV.
2. Using freeform layout components to place the container elements where needed. This kind of layout components allow the user to place any kind of html element on the dashboard, also specifying its attributes. The default is a div with no classes, attributes or IDs, so I simply add the .container class manually.

Here's an example of usage for a specific use case: