When we first think about grids, we imagine the intersection of vertical and horizontal lines that create grids. That's what's happening here too. Bootstrap's grid system contains rows equivalent to horizontal lines, and columns equivalent to vertical lines. When these rows and columns meet, they create grids, which can be used to fill some content in our webpage. Simple, isn't it?

One of the biggest advantages of using Bootstrap's grid system is that it is responsive. Unlike HTML tables, Bootstrap's grid system is flexible and adjusts itself properly in the smaller screens as well. The size of the grids in Bootstrap isn't fixed. They change as per the size of the device's screen. Hence, the content is rearranged, as per the space available.

Most developers fail to understand the grid system properly and hence they fail to achieve a responsive web design. In this section, we will first create a static non-Rails webpage showcasing how to create Bootstrap's Grid...