Grids help you achieve consistency in your designs by offering you a structure to put your design elements in. Prior to Bootstrap 3, you had to add mobile styles explicitly. Bootstrap 3 has changed all that by adapting a mobile-first approach with mobile styles baked-in to the core. All the columns are stacked on small mobile phone screens, with the grid scaling up to 12 columns on the large screen. The Grid system in Bootstrap helps you add CSS classes to block elements such as <div> in your HTML documents.

The new Bootstrap Grid system adapts a mobile-first approach, and therefore, when you declare a specific grid size, it becomes the grid for that size and higher. In other words, if you define a size at sm (small-screen-sized devices), then it will be that grid size for sm, md (medium-screen-sized devices), and lg (large-screen-sized devices). We will get to this later in the chapter, so please do not get overwhelmed with the overload of description...