Grid is basically use to create responsive design like how we want to show our website in different -different screens like mobiles, tablets, or desktop etc.
But here Bootstrap permits only 12 columns in a page. But if you don’t want to use 12 columns in any page than we can group them just to make a larger column.
There are mainly five type of classes in Grid according to the resolution screen size:-
.col- (extra small devices - screen width less than 576px)
.col-sm- (small devices - screen width equal to or greater than 576px)
.col-md-(medium devices - screen width equal to or greater than 768px)
.col-lg- (large devices - screen width equal to or greater than 992px)
.col-xl- (xlarge devices - screen width equal to or greater than 1200px)
Here we will create 4 different types of classes which will be responsive too.