Basics of Grid

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.

Let's understand this by following program:-

Output of this Program

Here we had just created 4 columns and this is responsive too. You can check it by resizing the browser when you perform it.

So here we get 4 columns.