Q. Create following Bootstrap Web Layout Design. There are 9 blocks of the region in the arrangement. You can either place the images in them or the contents.
For creating the above web layout we use the Bootstarp 5 and make it. There are 9 blocks of the region in the arrangement. Here I can fill the color you can either place the images in them.
Code for Creating Bootstrap Web layout :
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Bootstrap CSS -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous"
/>
<title>color table</title>
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-danger affix">
<div class="container-fluid">
<a class="navbar-brand" href="#">Grid Table</a>
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link" href="#"> Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">gallary</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">contact us</a>
</li>
</ul>
</div>
</nav>
<div class="container m-5 p-3">
<div class="card" style="width: 35rem">
<div class="card-body m-2 p-3">
<div class="container p-2">
<div class="row d-flex ">
<div class="col-sm-4 bg-primary">block 1</div>
<div class="col-sm-8 bg-info">block 2</div>
</div>
<div class="row">
<div class="col-lg-6 bg-info" >block 3</div>
<div class="col-3 bg-primary">block 6</div>
<div class="col-3 bg-info">block 7</div>
</div>
<div class="row ">
<div class="col-lg-6 bg-info"></div>
<div class="col-3 bg-primary"></div>
<div class="col-lg-3 bg-primary">block 8</div>
</div>
<!-- Or let Bootstrap automatically handle the layout -->
<div class="row ">
<div class="col-sm-3 bg-primary offset">block 4</div>
<div class="col-sm-3 bg-info offset-xs-1">block 5</div>
<div class="col-3 bg-primary offset-xs-1"></div>
<div class="col-3 bg-info offset">block 9</div>
</div>
</div>
</div>
</div>
</div>
<!-- </div> -->
<style>
.col{
margin: 1px;
padding: 2px;
}
</style>
<footer>
<p
style="
background-color: rgb(221, 221, 200);
text-align: center;
align-items: center;
margin-top: 170px;
"
>
all © copyrights reserved
</p>
</footer>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script
src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
crossorigin="anonymous"
></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"
integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"
integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF"
crossorigin="anonymous"></script>
-->
</body>
</html>
-Code With VDK.