Advance grid for large 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.
Large devices are considered to have a screen width from 992px to 1199px. And here also we can split the columns for large screen
but at the end its total must be 12.
Let's understand this by following program in which we split the large screen in unequal columns:-
<!DOCTYPE html>
<html lang="en">
<head>
<tittle> bootstrap 4 Example</tittle>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>
</head>
<body>
<div class="Container-Fluid">
<div class="row">
<div class="col-lg-3" style="background-color:red;" >.col-lg-3 </div>
<div class="col-lg-9" style="background-color:orange;">.col-lg-9 </div>
</div>
</div>
</body>
</html>
Output of this Program
Here we had just created 2 columns of large screen and this is responsive too.
You can check it by resizing the browser when you perform it.
So here we get 2 unequal columns.
We can use two divs or columns together means we can implement small screen column medium screen as well as large screen columns
together.
<!DOCTYPE html>
<html lang="en">
<head>
<tittle> bootstrap 4 Example</tittle>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js">
</script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
</script>
</head>
<body>
<div class="Container-Fluid">
<div class="row">
<div class="col-sm-3 col-md-6 col lg-4"
style="background-color:pink;">.col-sm-3 col-md-6 col lg-4 </div>
<div class="col-sm-9 col-md-6 col lg-8"
style="background-color:orange;">.col-sm-9 col-md-6 col lg-8 </div>
</div>
</div>
</body>
</html>
Output of this Program
Here we had just created 2 columns of small screen, medium screen and large screen and all are 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 lg-4
.col-sm-9 col-md-6 col lg-8
