Bootstrap Activity
Bootstrap Activity
Activity 1: Write html css and bootstrap code to design below image layout
<!DOCTYPE html>
<html>
<head>
<title>Activity 1</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style type="text/css">
.container{
font-size: 20px;
font-weight: bold;
text-align: center;
margin-top: 10px;
}
.c1{
background-color: lightgray;
padding-top: 10px;
padding-bottom: 10px;
border-bottom: 5px solid white;
}
.c2{
text-align: center;
border-top: 5px solid white;
}
.c3{
background-color: lightgray;
border-bottom: 10px solid white;
border-right: 5px solid white;
padding-top: 5px;
padding-bottom: 40px;
}
.c4{
background-color: lightgray;
border-left: 5px solid white;
border-right: 5px solid white;
border-bottom: 10px solid white;
padding-top: 5px;
padding-bottom: 45px;
}
.c5{
background-color: lightgray;
border-top: 5px solid white;
border-bottom: 10px solid white;
border-left: 5px solid white;
padding-top: 5px;
padding-bottom: 45px;
}
.c6{
background-color: lightgray;
padding-top: 10px;
padding-bottom: 40px;
border-right: 5px solid white;
margin-top: -10px;
border-bottom: 10px solid white;
}
.c6a{
background-color: lightgray;
padding-top: 10px;
padding-bottom: 55px;
border-right: 5px solid white;
margin-top: -10px;
border-bottom: 10px solid white;
}
.c7{
border-bottom: 10px solid white;
}
.c8{
margin-top: -5px;
}
.c9{
background-color: lightgray;
padding-top: 3px;
padding-bottom: 3px;
border-left: 5px solid white;
border-bottom: 5px solid white;
border-right: 5px solid white;
}
.c9a{
background-color: lightgray;
padding-top: 3px;
padding-bottom: 3px;
border-left: 5px solid white;
border-bottom: 5px solid white;
border-right: 5px solid white;
}
.c10{
background-color: lightgray;
padding-top: 3px;
padding-bottom: 3px;
border-right: 5px solid white;
border-bottom: 5px solid white;
border-left: 5px solid white;
}
.c10a{
background-color: lightgray;
padding-top: 3px;
padding-bottom: 3px;
border-right: 5px solid white;
border-bottom: 5px solid white;
border-left: 5px solid white;
}
.c11{
background-color: lightgray;
padding-top: 3px;
padding-bottom: 3px;
border-left: 5px solid white;
border-top: 5px solid white;
border-right: 5px solid white;
}
.c12{
background-color: lightgray;
padding-top: 3px;
padding-bottom: 3px;
border-right: 5px solid white;
border-top: 5px solid white;
border-left: 5px solid white;
}
.c13{
background-color: lightgray;
padding-top: 5px;
padding-bottom: 45px;
border-left: 5px solid white;
border-bottom: 10px solid white;
}
.c15{
background-color: lightgray;
padding-top: 3px;
padding-bottom: 15px;
}
</style>
</head>
<body class="container">
<div class="row c1">
<div class="col-md-12">Navbar</div>
</div>
<div class="row c2">
<div class="col-md-3 c3">3</div>
<div class="col-md-7 c4">7-12</div>
<div class="col-md-2 c5">2</div>
</div>
<div class="row">
<div class="col-md-3 c6">3</div>
<div class="col-md-7 c7">
<div class="row c8">
<div class="col-md-3 c9">3</div>
<div class="col-md-9 c10">7-9</div>
</div>
<div class="row">
<div class="col-md-3 c11">3</div>
<div class="col-md-9 c12">7-9</div>
</div>
</div>
<div class="col-md-2 c13">2</div>
</div>
<div class="row">
<div class="col-md-3 c6a">3</div>
<div class="col-md-7 c7">
<div class="row c8">
<div class="col-md-3 c9a">3</div>
<div class="col-md-9 c10a">7-9</div>
</div>
<div class="row">
<div class="col-md-3 c11">3</div>
<div class="col-md-9 c12">7-9</div>
</div>
</div>
<div class="col-md-2 c13">2</div>
</div>
<div class="row">
<div class="col-md-12 c15">Footer</div>
</div>
</body>
</html>
Activity 2: Write html css and bootstrap code to design below image layout
<!DOCTYPE html>
<html>
<head>
<title>Activity 2</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<style type="text/css">
.container{
font-size: 20px;
font-weight: bold;
text-align: center;
margin-top: 10px;
}
.c1{
background-color: lightgray;
padding-top: 5px;
padding-bottom: 500px;
border-right: 5px solid white;
}
.c2{
background-color: lightgray;
padding-top: 5px;
padding-bottom: 130px;
border-left: 5px solid white;
border-bottom: 5px solid white;
}
.c3{
background-color: lightgray;
border-left: 5px solid white;
border-right: 5px solid white;
border-top: 5px solid white;
border-bottom: 5px solid white;
padding-top: 5px;
padding-bottom: 90px;
}
.c4{
background-color: lightgray;
border-left: 5px solid white;
border-right: 5px solid white;
border-top: 5px solid white;
border-bottom: 5px solid white;
padding-top: 5px;
padding-bottom: 90px;
}
.c5{
background-color: lightgray;
border-left: 5px solid white;
border-right: 5px solid white;
border-top: 5px solid white;
border-bottom: 5px solid white;
padding-top: 5px;
padding-bottom: 90px;
}
.c6{
background-color: lightgray;
border-left: 5px solid white;
border-right: 5px solid white;
border-top: 5px solid white;
border-bottom: 5px solid white;
padding-top: 5px;
padding-bottom: 90px;
}
.c7{
background-color: lightgray;
border-left: 5px solid white;
border-right: 5px solid white;
border-top: 5px solid white;
border-bottom: 5px solid white;
padding-top: 5px;
padding-bottom: 140px;
}
.c8{
background-color: lightgray;
border-left: 5px solid white;
border-right: 5px solid white;
border-top: 5px solid white;
border-bottom: 5px solid white;
padding-top: 5px;
padding-bottom: 140px;
}
.c9{
background-color: lightgray;
border-left: 5px solid white;
border-right: 5px solid white;
border-top: 5px solid white;
border-bottom: 5px solid white;
padding-top: 5px;
padding-bottom: 140px;
}
.c10{
background-color: lightgray;
border-left: 5px solid white;
border-right: 5px solid white;
border-top: 5px solid white;
padding-top: 5px;
padding-bottom: 11px;
}
.c11{
background-color: lightgray;
border-left: 5px solid white;
border-right: 5px solid white;
border-top: 5px solid white;
padding-top: 5px;
padding-bottom: 11px;
}
</style>
</head>
<body class="container">
<div class="row">
<div class="col-md-12">
<div class="row">
<div class="col-md-3 c1">3 col</div>
<div class="col-md-9">
<div class="row">
<div class="col-md-12 c2">9col-12col</div>
</div>
<div class="row">
<div class="col-md-3 c3">9-3col</div>
<div class="col-md-3 c4">9-3col</div>
<div class="col-md-3 c5">9-3col</div>
<div class="col-md-3 c6">9-3col</div>
</div>
<div class="row">
<div class="col-md-4 c7">9-4col</div>
<div class="col-md-4 c8">9-4col</div>
<div class="col-md-4 c9">9-4col</div>
</div>
<div class="row">
<div class="col-md-6 c10">9-6col</div>
<div class="col-md-6 c11">9-6col</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Hello, my name is Muhammad Bin Jameel.
No comments:
Post a Comment