-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcontainer_and_row.html
85 lines (77 loc) · 3.21 KB
/
container_and_row.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<!-- Container and Row class in Bootstrap
Use of Container and row in Bootstrap
Container is used to create a fixed width container
Row is used to create a horizontal group of columns
Container-fluid is used to create a full width container
Row is used to create a horizontal group of columns
Container and Container-fluid are used to create a fixed width container
Row is used to create a horizontal group of columns
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Container and row class in Bootstrap</title>
<script defer src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" crossorigin="anonymous"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
<style>
.ul{
margin-top: auto;
margin-bottom: auto;
}
.li{
list-style: none;
margin-left: 10px;
}
.first{
background-color: rgb(235, 190, 113);
height: 10vh;
}
.second{
background-color: rgb(191, 220, 128);
}
.blue{
background-color: rgb(159, 207, 237);
}
.pink{
background-color: rgb(247, 213, 219);
}
</style>
</head>
<body>
<div class="container-fluid">
<div class="row first">
<h1> Website Name</h1>
</div>
<div class="row second">
<ul class="d-flex ul">
<li class="li"> Home | </li>
<li class="li"> About Us |</li>
<li class="li"> Gallery | </li>
<li class="li"> Contact Us</li>
</ul>
</div>
<div class="row">
<div class="col-9">
<h1>Sub Heading</h1>
<p>
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ducimus commodi ipsum, non consequatur reiciendis consectetur ab neque labore dignissimos voluptatibus nobis! Explicabo et molestiae eos modi excepturi possimus blanditiis. Fugiat consequuntur atque ipsam pariatur animi tenetur dolore hic temporibus architecto blanditiis voluptates sequi, laboriosam adipisci suscipit nisi nam nesciunt similique?
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Praesentium repellat maiores omnis sit architecto aliquam cupiditate tempora accusamus enim inventore aliquid voluptates, eum dignissimos fuga esse atque facilis sapiente placeat.</p>
</p>
</div>
<div class="col-3 blue">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Gallery</li>
<li>Contact Us</li>
</ul>
</div>
</div>
<div class="row ">
<p class="pink text-end">Websitename@copyright</p>
</div>
</div>
</body>
</html>