-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path20.GridSystemBasic.html
61 lines (56 loc) · 4.44 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
56
57
58
59
60
61
<!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. Iure eos magnam minima praesentium porro modi consequuntur pariatur eligendi, aut ipsum doloribus molestiae blanditiis rem ipsam veritatis maiores. Autem, voluptates. Commodi, nam ratione natus corporis deserunt provident, nisi dolorem tempora perspiciatis quis expedita repellendus nihil laboriosam. Iure rem minus magnam consectetur.</p>
</div>
</div>
<!-- 50% -->
<div class="row">
<div class="alert alert-success col-sm-6">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt obcaecati magnam voluptas porro minima ipsum amet architecto eum nam, vero beatae doloremque eaque velit unde voluptate. Cumque vel quibusdam libero eius quod id similique hic quas, impedit ipsa provident quam eaque. Dolore, numquam! Magnam, tenetur consequuntur officia laboriosam quo consequatur.</p>
</div>
<div class="alert alert-success col-sm-6">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Incidunt obcaecati magnam voluptas porro minima ipsum amet architecto eum nam, vero beatae doloremque eaque velit unde voluptate. Cumque vel quibusdam libero eius quod id similique hic quas, impedit ipsa provident quam eaque. Dolore, numquam! Magnam, tenetur consequuntur officia laboriosam quo consequatur.</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. Explicabo, dolorum sunt quidem quam vel officiis dolor, fuga eveniet nulla rem nemo aperiam nam libero earum non? Impedit cupiditate tenetur quas.</p>
</div>
<div class="alert alert-success col-sm-4">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam illo, reiciendis excepturi enim dolorum assumenda consequuntur expedita magnam ullam ad, debitis aut culpa provident quas nam porro impedit, aliquam alias.</p>
</div>
<div class="alert alert-success col-sm-4">
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Deserunt, quisquam esse! Quae sit rem harum delectus eveniet doloribus officia. Ut eaque sequi ab impedit incidunt illum explicabo minus cupiditate asperiores.</p>
</div>
</div>
<!-- 25% -->
<div class="row">
<div class="alert alert-success col-sm-3">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum voluptas quidem autem? Explicabo laboriosam blanditiis illo dolore atque ratione alias nisi eos, voluptas possimus quo veniam. Odit atque aliquam itaque.</p>
</div>
<div class="alert alert-success col-sm-3">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore reprehenderit modi commodi possimus excepturi, ea nulla laudantium! Ratione iste illo fugit officia, dolor, adipisci veritatis laborum quasi quae distinctio vero.</p>
</div>
<div class="alert alert-success col-sm-3">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Sed error maiores quam dolor velit accusantium itaque illo harum amet nam quis vitae doloremque ratione animi quisquam, officiis rerum repellendus aperiam.</p>
</div>
<div class="alert alert-success col-sm-3">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium similique ad ipsum explicabo quo perspiciatis molestiae a ex, non vero, quaerat iusto illum veritatis excepturi magnam labore cum sapiente fuga.</p>
</div>
</div>
</div>
</body>
</html>