×

Html & Html5

The World's best Software Development Study Portal

Advance grid for medium screen



As we have discussed earlier also that 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.

Medium devices are considered to have a screen width from 768px to 991px. And here also we can split the columns in medium screen but at the end its total must be 12.

Let's understand this by following program :-





Output of this Program


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


.col-md-4
.col-md-8

So here we get 2 unequal columns of medium screen.



We can use two divs or columns together means we can implement small screen column as well as medium screen together. .
Let's understand this by the following program:-





Output of this Program


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

Here is the output:-


.col-sm-3 .col-md-6
.col-sm-3 .col-md-6

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