Bootstrap uses the concept of “containers”. Each area of the page can be represented as a series of these containers. The “flow” of the containers is determined by the screen size of the viewing device. Developing a single application for multiple devices is made possible by this responsive container behavior, which can be customized to accommodate unique designs.
The best way to get started quickly is to use one of the hundreds of freely available Bootstrap templates. This is “standing on the shoulders of giants” and highly recommended!
The following example was created with a template from Start Bootstrap, which is one of the many online repositories of free themes and templates. The one used here is the “2 Column Portfolio” template, which is a grid-style portfolio template. Click here for the landing page.
Here is a view of just the template. It’s up to you to customize the template and drop in the Spotfire pieces.
In this “2 Column Portfolio” template, the 2 x 2 grid will automatically flow to a stacked panel layout if the device size is too small to fit 2 panels side-by-side.
By narrowing the size of the browser, you’ll see the panels reflow to accommodative the smaller screen size.