-
Notifications
You must be signed in to change notification settings - Fork 0
/
nested_rows.html
92 lines (70 loc) · 4.65 KB
/
nested_rows.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
86
87
88
89
90
91
92
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<style>
.myP
{
text-align: justify;
padding: 5px;
}
.myColWidth
{
width: 49%;
}
@media only screen and (max-width:406px)
{
.myColWidth
{
width: 100%;
}
}
</style>
</head>
<body>
<div class="container border border-4 border-danger">
<div class="row">
<div class="col-md-6">
<h2 class="text-center display-6">First row</h2>
<div class="row d-flex gap-2">
<div class="col-md-5 bg-warning myColWidth">
<p class="myP">Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus assumenda maxime rerum eligendi porro, saepe quo recusandae rem consequatur nesciunt libero. Odit natus repellat amet magnam rem architecto dolorum dicta! Minus amet veritatis voluptate eaque facere? Eaque quo maiores voluptates.</p>
</div>
<div class="col-md-5 bg-success myColWidth">
<p class="text-light myP">Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus assumenda maxime rerum eligendi porro, saepe quo recusandae rem consequatur nesciunt libero. Odit natus repellat amet magnam rem architecto dolorum dicta! Minus amet veritatis voluptate eaque facere? Eaque quo maiores voluptates.</p>
</div>
</div>
<div class="row mt-2 d-flex gap-2">
<div class="col-md-5 bg-info myColWidth">
<p class="myP">Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus assumenda maxime rerum eligendi porro, saepe quo recusandae rem consequatur nesciunt libero. Odit natus repellat amet magnam rem architecto dolorum dicta! Minus amet veritatis voluptate eaque facere? Eaque quo maiores voluptates.</p>
</div>
<div class="col-md-5 bg-secondary myColWidth">
<p class="text-light myP">Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus assumenda maxime rerum eligendi porro, saepe quo recusandae rem consequatur nesciunt libero. Odit natus repellat amet magnam rem architecto dolorum dicta! Minus amet veritatis voluptate eaque facere? Eaque quo maiores voluptates.</p>
</div>
</div>
</div>
<div class="col-md-6">
<h2 class="text-center display-6">Second row</h2>
<div class="row">
<div class="col-md-12 bg-danger-subtle">
<h5 class="display-6">What is mean by bootstrap?</h5>
<p class="myP">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Fugit sunt nesciunt odit animi quas! Laboriosam, repudiandae minima. Ratione commodi accusamus eius a, quas nihil quod necessitatibus minima reiciendis ipsa ducimus voluptatibus ipsum fugiat laboriosam temporibus placeat! Voluptatibus minus blanditiis maxime harum saepe modi non ab amet omnis, culpa libero, molestiae dicta totam dolorem sed enim id eaque accusantium adipisci nulla delectus mollitia similique facilis! Cupiditate debitis maiores enim praesentium hic!</p>
</div>
</div>
<div class="row d-flex gap-2 mt-2">
<div class="col-md-5 bg-warning myColWidth">
<p class="myP">Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus assumenda maxime rerum eligendi porro, saepe quo recusandae rem consequatur nesciunt libero. Odit natus repellat amet magnam rem architecto dolorum dicta! Minus amet veritatis voluptate eaque facere? Eaque quo maiores voluptates.</p>
</div>
<div class="col-md-5 bg-success myColWidth">
<p class="text-light myP">Lorem ipsum dolor sit amet consectetur adipisicing elit. Temporibus assumenda maxime rerum eligendi porro, saepe quo recusandae rem consequatur nesciunt libero. Odit natus repellat amet magnam rem architecto dolorum dicta! Minus amet veritatis voluptate eaque facere? Eaque quo maiores voluptates.</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>