-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path20.GridSystemBasic.html
55 lines (55 loc) · 9.35 KB
/
20.GridSystemBasic.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid System</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
</head>
<body>
<div class="container-fluid">
<!-- 100% -->
<div class="row">
<div class="alert alert-success col-sm-12">
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam voluptatum ullam explicabo ex repellat, quasi voluptas vitae itaque sit, autem illo. Optio recusandae officiis natus deleniti modi doloribus architecto veniam! Vero, itaque quod voluptatibus dolorum corrupti cumque cupiditate ab culpa nihil id blanditiis quaerat aliquid similique enim a dolores non sint dignissimos eveniet eaque. Saepe eligendi laborum illo earum reprehenderit, culpa quae distinctio, maxime ducimus at obcaecati accusamus inventore esse, asperiores quibusdam deserunt beatae dolor iusto vel omnis incidunt nihil accusantium? Doloremque dolorum quo est porro, accusamus ex iure excepturi quod in voluptatum eos pariatur nulla mollitia praesentium, velit modi!</p>
</div>
</div>
<!-- 50% -->
<div class="row">
<div class="alert alert-success col-sm-6">
<p> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Delectus voluptate cum sapiente minus culpa iure voluptatum libero eaque, voluptatibus explicabo id laborum quisquam ullam impedit animi eum quos nisi facere, illum recusandae. Ullam, expedita magni pariatur, nesciunt quasi, vitae amet dignissimos maiores cupiditate itaque aspernatur quaerat impedit dolores quisquam! Repellendus quisquam dicta consequatur repellat nostrum consectetur aperiam illum. Vitae quasi hic animi enim eum earum. Perspiciatis molestiae corrupti fugit deserunt possimus qui temporibus ullam doloribus nemo cumque inventore, commodi exercitationem itaque dolor velit. Enim commodi, suscipit quod molestiae ad corrupti perspiciatis quaerat, sapiente qui repellat atque. Quis iste ut quam.</p>
</div>
<div class="alert alert-success col-sm-6">
<p> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Delectus voluptate cum sapiente minus culpa iure voluptatum libero eaque, voluptatibus explicabo id laborum quisquam ullam impedit animi eum quos nisi facere, illum recusandae. Ullam, expedita magni pariatur, nesciunt quasi, vitae amet dignissimos maiores cupiditate itaque aspernatur quaerat impedit dolores quisquam! Repellendus quisquam dicta consequatur repellat nostrum consectetur aperiam illum. Vitae quasi hic animi enim eum earum. Perspiciatis molestiae corrupti fugit deserunt possimus qui temporibus ullam doloribus nemo cumque inventore, commodi exercitationem itaque dolor velit. Enim commodi, suscipit quod molestiae ad corrupti perspiciatis quaerat, sapiente qui repellat atque. Quis iste ut quam.</p>
</div>
</div>
<!-- 33.33% -->
<div class="row">
<div class="alert alert-success col-sm-4">
<p> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Delectus voluptate cum sapiente minus culpa iure voluptatum libero eaque, voluptatibus explicabo id laborum quisquam ullam impedit animi eum quos nisi facere, illum recusandae. Ullam, expedita magni pariatur, nesciunt quasi, vitae amet dignissimos maiores cupiditate itaque aspernatur quaerat impedit dolores quisquam! Repellendus quisquam dicta consequatur repellat nostrum consectetur aperiam illum. Vitae quasi hic animi enim eum earum. Perspiciatis molestiae corrupti fugit deserunt possimus qui temporibus ullam doloribus nemo cumque inventore, commodi exercitationem itaque dolor velit. Enim commodi, suscipit quod molestiae ad corrupti perspiciatis quaerat, sapiente qui repellat atque. Quis iste ut quam.</p>
</div>
<div class="alert alert-success col-sm-4">
<p> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Delectus voluptate cum sapiente minus culpa iure voluptatum libero eaque, voluptatibus explicabo id laborum quisquam ullam impedit animi eum quos nisi facere, illum recusandae. Ullam, expedita magni pariatur, nesciunt quasi, vitae amet dignissimos maiores cupiditate itaque aspernatur quaerat impedit dolores quisquam! Repellendus quisquam dicta consequatur repellat nostrum consectetur aperiam illum. Vitae quasi hic animi enim eum earum. Perspiciatis molestiae corrupti fugit deserunt possimus qui temporibus ullam doloribus nemo cumque inventore, commodi exercitationem itaque dolor velit. Enim commodi, suscipit quod molestiae ad corrupti perspiciatis quaerat, sapiente qui repellat atque. Quis iste ut quam.</p>
</div>
<div class="alert alert-success col-sm-4">
<p> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Delectus voluptate cum sapiente minus culpa iure voluptatum libero eaque, voluptatibus explicabo id laborum quisquam ullam impedit animi eum quos nisi facere, illum recusandae. Ullam, expedita magni pariatur, nesciunt quasi, vitae amet dignissimos maiores cupiditate itaque aspernatur quaerat impedit dolores quisquam! Repellendus quisquam dicta consequatur repellat nostrum consectetur aperiam illum. Vitae quasi hic animi enim eum earum. Perspiciatis molestiae corrupti fugit deserunt possimus qui temporibus ullam doloribus nemo cumque inventore, commodi exercitationem itaque dolor velit. Enim commodi, suscipit quod molestiae ad corrupti perspiciatis quaerat, sapiente qui repellat atque. Quis iste ut quam.</p>
</div>
</div>
<!-- 25% -->
<div class="row">
<div class="alert alert-success col-sm-3">
<p> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Delectus voluptate cum sapiente minus culpa iure voluptatum libero eaque, voluptatibus explicabo id laborum quisquam ullam impedit animi eum quos nisi facere, illum recusandae. Ullam, expedita magni pariatur, nesciunt quasi, vitae amet dignissimos maiores cupiditate itaque aspernatur quaerat impedit dolores quisquam! Repellendus quisquam dicta consequatur repellat nostrum consectetur aperiam illum. Vitae quasi hic animi enim eum earum. Perspiciatis molestiae corrupti fugit deserunt possimus qui temporibus ullam doloribus nemo cumque inventore, commodi exercitationem itaque dolor velit. Enim commodi, suscipit quod molestiae ad corrupti perspiciatis quaerat, sapiente qui repellat atque. Quis iste ut quam.</p>
</div>
<div class="alert alert-success col-sm-3">
<p> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Delectus voluptate cum sapiente minus culpa iure voluptatum libero eaque, voluptatibus explicabo id laborum quisquam ullam impedit animi eum quos nisi facere, illum recusandae. Ullam, expedita magni pariatur, nesciunt quasi, vitae amet dignissimos maiores cupiditate itaque aspernatur quaerat impedit dolores quisquam! Repellendus quisquam dicta consequatur repellat nostrum consectetur aperiam illum. Vitae quasi hic animi enim eum earum. Perspiciatis molestiae corrupti fugit deserunt possimus qui temporibus ullam doloribus nemo cumque inventore, commodi exercitationem itaque dolor velit. Enim commodi, suscipit quod molestiae ad corrupti perspiciatis quaerat, sapiente qui repellat atque. Quis iste ut quam.</p>
</div>
<div class="alert alert-success col-sm-3">
<p> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Delectus voluptate cum sapiente minus culpa iure voluptatum libero eaque, voluptatibus explicabo id laborum quisquam ullam impedit animi eum quos nisi facere, illum recusandae. Ullam, expedita magni pariatur, nesciunt quasi, vitae amet dignissimos maiores cupiditate itaque aspernatur quaerat impedit dolores quisquam! Repellendus quisquam dicta consequatur repellat nostrum consectetur aperiam illum. Vitae quasi hic animi enim eum earum. Perspiciatis molestiae corrupti fugit deserunt possimus qui temporibus ullam doloribus nemo cumque inventore, commodi exercitationem itaque dolor velit. Enim commodi, suscipit quod molestiae ad corrupti perspiciatis quaerat, sapiente qui repellat atque. Quis iste ut quam.</p>
</div>
<div class="alert alert-success col-sm-3">
<p> Lorem ipsum dolor sit amet consectetur, adipisicing elit. Delectus voluptate cum sapiente minus culpa iure voluptatum libero eaque, voluptatibus explicabo id laborum quisquam ullam impedit animi eum quos nisi facere, illum recusandae. Ullam, expedita magni pariatur, nesciunt quasi, vitae amet dignissimos maiores cupiditate itaque aspernatur quaerat impedit dolores quisquam! Repellendus quisquam dicta consequatur repellat nostrum consectetur aperiam illum. Vitae quasi hic animi enim eum earum. Perspiciatis molestiae corrupti fugit deserunt possimus qui temporibus ullam doloribus nemo cumque inventore, commodi exercitationem itaque dolor velit. Enim commodi, suscipit quod molestiae ad corrupti perspiciatis quaerat, sapiente qui repellat atque. Quis iste ut quam.</p>
</div>
</div>
</body>
</html>