-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy path3Grid.html
More file actions
46 lines (46 loc) · 4.84 KB
/
3Grid.html
File metadata and controls
46 lines (46 loc) · 4.84 KB
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Bootstrap Grid</title>
<link rel="stylesheet" href="bootstrap/css/bootstrap.css">
<script src="bootstrap/js/bootstrap.js"></script>
</head>
<body>
<div>
<h2><u>Bootstrap Grid system</u></h2>
<div class="row">
<div class="col-md-6">
<p class="text-justify"><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusantium assumenda consequuntur debitis distinctio dolores est et eveniet ex libero nemo, obcaecati perferendis, quaerat quam quis, sit totam vitae. Iure.</span><span>Beatae consequatur deserunt exercitationem expedita molestiae nemo nesciunt quisquam repellendus tempora voluptatem! Adipisci aliquam cum cumque dignissimos fuga fugiat fugit iste maxime molestias nemo numquam, praesentium, provident reprehenderit temporibus, veniam!</span><span>Adipisci doloremque ducimus eius harum in modi nostrum reiciendis reprehenderit! Aliquam architecto at commodi, cumque deleniti dolor error ex facilis in itaque labore molestias nobis, nostrum perferendis quibusdam quidem, ratione.</span>
</p>
</div>
<div class="col-md-6">
<p class="text-justify"><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. A accusantium assumenda consequuntur debitis distinctio dolores est et eveniet ex libero nemo, obcaecati perferendis, quaerat quam quis, sit totam vitae. Iure.</span><span>Beatae consequatur deserunt exercitationem expedita molestiae nemo nesciunt quisquam repellendus tempora voluptatem! Adipisci aliquam cum cumque dignissimos fuga fugiat fugit iste maxime molestias nemo numquam, praesentium, provident reprehenderit temporibus, veniam!</span><span>Adipisci doloremque ducimus eius harum in modi nostrum reiciendis reprehenderit! Aliquam architecto at commodi, cumque deleniti dolor error ex facilis in itaque labore molestias nobis, nostrum perferendis quibusdam quidem, ratione.</span>
</p>
</div>
</div>
<div class="row">
<div class="col-md-4">
<p class="text-justify"><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi dignissimos doloremque dolores ea eius est expedita facilis incidunt itaque laborum maiores minima minus neque omnis perspiciatis, quaerat quia reprehenderit voluptatibus?</span><span>Ad blanditiis, laboriosam non quam reiciendis vel. Accusamus at consequuntur error, laborum minus recusandae! Ad aperiam, esse fuga porro repellat sequi sint tenetur unde. Dicta fuga neque porro voluptas voluptate!</span><span>Accusantium aspernatur cumque esse eveniet ipsum natus nisi pariatur quaerat quis? Architecto atque cupiditate dolore eos laborum maxime mollitia nemo suscipit ut voluptatem. Commodi corporis iusto praesentium quas reprehenderit repudiandae?</span>
</p>
</div>
<div class="col-md-4">
<img style="border: 2px solid darkgreen; border-radius:15px;" src="image/pic.jpg" alt="grid image 1" width="100%" height="350">
</div>
<div class="col-md-4">
<p class="text-justify"><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Commodi dignissimos doloremque dolores ea eius est expedita facilis incidunt itaque laborum maiores minima minus neque omnis perspiciatis, quaerat quia reprehenderit voluptatibus?</span><span>Ad blanditiis, laboriosam non quam reiciendis vel. Accusamus at consequuntur error, laborum minus recusandae! Ad aperiam, esse fuga porro repellat sequi sint tenetur unde. Dicta fuga neque porro voluptas voluptate!</span><span>Accusantium aspernatur cumque esse eveniet ipsum natus nisi pariatur quaerat quis? Architecto atque cupiditate dolore eos laborum maxime mollitia nemo suscipit ut voluptatem. Commodi corporis iusto praesentium quas reprehenderit repudiandae?</span>
</p>
</div>
</div>
<div class="row">
<div class="col-md-5">
<img style="border-radius: 15px;border:2px dashed darkred" src="image/pic.jpg" alt="grid img2" width="100%" height="500">
</div>
<div class="col-md-7">
<p class="text-justify"><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At blanditiis cum distinctio, id, impedit ipsa ipsum itaque laborum obcaecati officia porro praesentium quam quos, veniam voluptatem! Deserunt minima similique sunt.</span><span>Aliquid asperiores cum, distinctio, et ex exercitationem, fugiat fugit id ipsa iure minima modi molestiae mollitia nam numquam officiis perspiciatis quae quasi qui quis reprehenderit repudiandae sequi soluta vitae voluptatibus.</span><span>Aliquid aperiam autem cum eaque, ex inventore iste laborum, maiores natus nihil nostrum quis quisquam sit voluptate voluptatibus. Animi doloremque doloribus eligendi ipsa labore magni, mollitia quibusdam quidem tempora voluptatem.</span>
</p>
</div>
</div>
</div>
</body>
</html>