×

Html & Html5

The World's best Software Development Study Portal

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.


four columns

After resizing the browser window we can see the effect.

.col
.col-sm-3
.col-lg-3
.col-xl-3

So here we get 4 columns.



Two unequal responsive columns .

Let's understand this by the following program:-







Output of this Program


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

Here is the output:-


two columns

After resizing the browser window we can see the effect.

.col-sm-3
.col-lg-3





Bootstrap 4 training insitute | Best IT Training classes in Gurgaon | Web Designing Training Institute