In Chapter 2, Understanding Mobile Frameworks and APIs, we made a brief mention of responsive design. This is an approach to web application development that provides true cross-device capabilities, allowing your mobile app to look good and be user-friendly on all mobile devices. Bootstrap, which is the focus of this chapter, is the most popular responsive framework. The following screenshot illustrates ArcGIS web applications provide true cross-device capabilities:

Cross-device ArcGIS web applications

Layouts built with Bootstrap adapt to different screen sizes, screen resolution/pixel density and changes in device orientation. As mentioned in Chapter 2, Understanding Mobile Frameworks and APIs, Bootstrap uses a fluid grid system that is based on percentages. The default grid system has 12 columns or a 940 pixel-wide container, as shown in the following screenshot:

Default fluid grid system

Think of the grid as a page that is broken up into a series of columns...