In this chapter, we will explain Bootstrap's Grid System. Bootstrap provides a responsive, mobile-first fluid grid system that automatically divides into up to 12 columns as the screen or viewport size increases. From Wikipedia: > !(#) In graphic design, a grid is a structure (usually two-dimensional) consisting of a series of intersecting straight (vertical, horizontal) lines used to organize content. It is widely used in print design for layout and content structure. In web design, it is a method for quickly creating consistent layouts and effectively using HTML and CSS. Simply put, grids in web design are used to organize content, make websites easier to browse, and reduce the load on the client side. Bootstrap's official documentation description of the grid system: > !(#) Bootstrap includes a responsive, mobile-first, fluid grid system that appropriately scales up to 12 columns as the device or viewport size increases. It includes predefined classes for easy layout options, as well as powerful mixins for generating more semantic layouts. Let's understand the statement above. Bootstrap 3 is mobile-first in the sense that the Bootstrap code starts from small screen devices (like mobile devices, tablets) and then expands to components and grids on larger screen devices (like laptops, desktops). ### Mobile-First Strategy * **Content** * Decide what is most important. * **Layout** * Design for smaller widths first. * The base CSS is mobile-first, with media queries targeting tablets and desktops. * **Progressive Enhancement** * Add elements as the screen size increases. The responsive grid system automatically divides into up to 12 columns as the screen or viewport size increases. 1 1 1 1 1 1 1 1 1 1 1 1 4 4 4 4 8 6 6 12 The grid system creates page layouts through a series of rows and columns containing content. Below is how the Bootstrap grid system works: * Rows must be placed within a **.container** class for proper alignment and padding. * Use rows to create horizontal groups of columns. * Content should be placed within columns, and only columns may be immediate children of rows. * Predefined grid classes, like **.row** and **.col-xs-4**, are used for quickly creating grid layouts. LESS mixins are used for more semantic layouts. * Columns create gaps between column content via padding. This padding is offset by negative margins on the **.rows**, representing the row offset for the first and last columns. * The grid system is created by specifying the twelve available columns you wish to span. For example, to create three equal columns, use three **.col-xs-4**. Media queries are very neat "conditional CSS rules". They only apply CSS based on certain specified conditions. If those conditions are met, the corresponding styles are applied. Media queries in Bootstrap allow you to move, show, and hide content based on viewport size. The following media queries are used in LESS files to create the key breakpoint thresholds in the Bootstrap grid system. /* Extra small devices (phones, less than 768px) *//* No media query since this is the default in Bootstrap *//* Small devices (tablets, 768px and up) */@media (min-width: @screen-sm-min) { ... }/* Medium devices (desktops, 992px and up) */@media (min-width: @screen-md-min) { ... }/* Large devices (large desktops, 1200px and up) */@media (min-width: @screen-lg-min) { ... } We sometimes also include **max-width** in media query code to limit the CSS impact to a smaller range of screen sizes. @media (max-width: @screen-xs-max) { ... }@media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... }@media (min-width: @screen-md-min) and (max-width: @screen-md-max) { ... }@media (min-width: @screen-lg-min) { ... } A media query has two parts: a device specification and then a size rule. In the above example, the following rules are set: Let's look at this line of code: @media (min-width: @screen-sm-min) and (max-width: @screen-sm-max) { ... } For all devices with _min-width: @screen-sm-min_, if the screen width is less than _@screen-sm-max_, some processing will occur. The following table summarizes how the Bootstrap grid system works across multiple devices: | | Extra small devices Phones (<768px) | Small devices Tablets (≥768px) | Medium devices Desktops (≥992px) | Large devices Desktops (≥1200px) | | --- | --- | --- | --- | --- | | Grid behavior | Always horizontal | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints | Collapsed to start, horizontal above breakpoints | | Max container width | None (auto) | 750px | 970px | 1170px | | Class prefix | **.col-xs-** | **.col-sm-** | **.col-md-** | **.col-lg-** | | Number of columns | 12 | 12 | 12 | 12 | | Column width | Auto | 60px | 78px | 95px | | Gutter width | 30px (15px on each side of a column) | 30px (15px on each side of a column) | 30px (15px on each side of a column) | 30px (15px on each side of a column) | | Nestable | Yes | Yes | Yes | Yes | | Offsetting | Yes | Yes | Yes | Yes | | Column ordering | Yes | Yes | Yes | Yes | ### Basic Grid Structure Below is the basic structure of a Bootstrap grid: