What is grid system in bootstrap?
Bootstrap provides a responsive grid system that appropriately scales up to 12 columns as the device or viewport size increases. To create a responsive layout using bootstrap 12 column structure these points need to be considered
.rowto group column
*represent number from 1 to 12. These classes take effect as per viewport of the device.
Below diagram describes the simple layout of a web page.
if a row has column with class
.col-sm-4 then it mean it will occupy first 4 column for small device and full width in extra small device.
similarly column with class
.col-sm-8 will occupy next 8 column in the row and full width for extra small device.