The grid system

Bootstrap's grid system is arguably its most impressive and most commonly used feature, as it solves the important task of horizontal and vertical positioning of a page's contents, allowing the contents to be structured across multiple display widths. Therefore, mastering this core functionality is essential for any Bootstrap developer.

As already noted in Chapter 1, Revving Up Bootstrap, Bootstrap 4 is mobile-first. As such, it should come as no surprise that the grid system is optimized for smaller viewports, and it scales up to suit larger viewports (as opposed to scaling down to smaller viewports).

What is a viewport?
A viewport is the available display size to render the contents of a page, that is, it refers to your browser window, minus the toolbars and scrollbars. The viewport should not be confused with the viewport meta tag, which is used to define the viewport's actual display size. To elaborate, as already noted in Chapter 1, Revving Up Bootstrap, mobile devices may indicate their viewport to be larger than it actually is in order to allow for the display of websites that have not been optimized for display on mobile devices. As a consequence, websites that take mobile viewports into consideration may often not render as intended. As a remedy, the viewport meta tag was introduced by Apple on iOS (and has since been uniformly adopted by all other major browsers) in order to allow websites to circumvent this problem by allowing developers to explicitly define the intended display size.

The grid composing the grid system is a structure that consists of three distinct, but fundamentally linked, parts: an all—encapsulating container split into horizontal rows that are themselves split into 12 equal columns (refer to Figure 2.1). In the following subsections, we will take an in-depth look at the three building blocks of Bootstrap's grid system:

Figure 2.1: The Bootstrap grid structure: a container (outermost box) containing a table-like structure consisting of rows and 12 columns. It is important to note that rows must be contained inside the container. Likewise, columns can only exist within the context of rows. While grids can be used to construct tables, they are not tables in themselves. Unlike tables, independent rows may consist of a di?erent number of columns. So, for example, row 1 may consist of 12 columns, while row 2 may contain only three columns.

官术网_书友最值得收藏!

Mastering Bootstrap 4（Second Edition）

The grid system