To make your MIStudio project's user interfaces (HMIs) viewable on all size screens, you can lay out your application panels in a responsive grid using the Project's main node and using the BootstrapConfig option. With a responsive layout the HTML web view from MIX will resize to fit the size of the web browser screen. In other words, the same user interface can be used on a wide high resolution monitor, a lower resolution panel pc, or a smaller tablet, or a mobile phone.

The BootstrapConfig uses any number (one or more) of the applications you have designed in MIStudio as “panels” in the bootstrap layout. As an example, here is the application node with six applications in it:

The bootstrap layout is based on rows of 12 equally sized columns. Each row should use applications of the same height. Each row should fill all 12 columns, but it is not required. A typical header application might have a width of 1200 to fill a whole row, with units of 100 per column, so that 12 x 100 is a total of 1200. You can also base this on a width of 600, either using two applications of 600 width each, or using the whole 600 width application, using all 12 column segments so it stretches to the whole width when rendered in the web browser.

So, in summary:

• Design applications for each row with the same height
• Design the width of a row to fit an even 1200 units with one or more application panels in the row