-
Notifications
You must be signed in to change notification settings - Fork 0
/
grids.html
69 lines (68 loc) · 3.84 KB
/
grids.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap Grids</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/popper.min.js"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<div class="col bg-warning">This is the first col</div>
<div class="col bg-primary">This is the second col</div>
<div class="col bg-dark text-white">This is the third col</div>
</div>
</div>
<div class="container-fluid p-3 my-3">
<div class="row">
<div class="col-sm-3 bg-warning">This is the first col</div>
<div class="col-md-3 bg-primary">This is the second col</div>
<div class="col-lg-3 bg-dark text-white">This is the third col</div>
<div class="col-xl-3 bg-success">This is the third col</div>
</div>
</div>
<div class="container-fluid p-3 my-4">
<div class="row">
<div class="col-3 bg-light"> This is col 4 Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Atque eveniet exercitationem natus nemo numquam pariatur quam quod soluta vero?
Aspernatur dicta earum perspiciatis, quas quisquam reiciendis rerum saepe sunt veritatis?</div>
<div class="col-3 bg-info">This is a col 3 Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Cum deleniti deserunt fugiat nemo nihil porro saepe unde. Adipisci autem dignissimos magnam modi,
odit temporibus velit voluptate voluptatem voluptatum. Dicta, exercitationem.</div>
<div class="col-3 bg-secondary">This is a col 5 Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Ab at doloremque est excepturi explicabo facere harum iure modi molestias nesciunt nihil pariatur qui quibusdam quisquam quos rem sint,
tenetur voluptatibus!</div>
<div class="col-3 bg-primary">This is a col 6 Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Cumque distinctio dolor ducimus enim hic minus officiis optio perferendis porro,
ullam! At consequatur illum nihil odio voluptatibus. Facere repellat repudiandae velit.</div>
</div>
</div>
<div class="container p-3 my-3">
<div class="row">
<div class="col-3 bg-primary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus autem, cumque est obcaecati officia perspiciatis quis saepe sequi vel voluptas?
Accusamus asperiores deleniti fugit ipsam magnam nulla obcaecati ratione sequi.</div>
<div class="col-3 bg-secondary">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Beatae excepturi laboriosam non vel! At magnam nesciunt non sint veniam!
Autem deserunt distinctio modi non quaerat, quod sunt ullam voluptates! Tempora.</div>
<div class="col-6 bg-success">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur cupiditate dolores est ex, illum incidunt minus nihil placeat provident,
quae quod quos repellendus reprehenderit sapiente soluta sunt vel velit vitae!</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-sm-4"><img src="images2/Slide3.JPG" alt="" style="height: 300px; width: 400px"></div>
<div class="col-sm-4"><img src="images2/Slide4.JPG" alt="" style="height: 300px; width: 400px"></div>
<div class="col-sm-4"><img src="images2/Slide5.JPG" alt="" style="height: 300px; width: 400px"></div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-xl-6"><img src="images2/Slide4.JPG" alt="" style="height: 300px; width: 400px"></div>
<div class="col-xl-6"> I think all girls deserve a nice look
so girl live the shit out and get your ass to a nice spa and start looking like a lady</div>
</div>
</div>
</body>
</html>