-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path20.GridSystemBasic.html
61 lines (56 loc) · 4.76 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. Ex ad numquam quos ut maxime quaerat inventore cumque exercitationem voluptate quo eaque ratione non placeat aliquid, repudiandae facere quas dolorem consequatur dolore architecto reiciendis tempora eos dolor sapiente! Dignissimos illo ullam illum nihil, obcaecati accusamus animi soluta odio autem, aliquam minima quos adipisci quas eius possimus rem alias distinctio repellendus sint sunt voluptatum iste tenetur non pariatur. Neque cupiditate, inventore sint doloremque impedit quo reprehenderit blanditiis dolor aliquid voluptas hic voluptatibus illo, nemo nesciunt vero, doloribus expedita sapiente quis dignissimos ex sit pariatur laborum delectus? Quae eligendi repudiandae officia necessitatibus odio.</p>
</div>
</div>
<!-- 50% -->
<div class="row">
<div class="alert alert-success col-sm-6">
<p class="card-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam ab, corrupti suscipit ratione ullam voluptate laborum explicabo illum nulla qui dolorum, exercitationem accusamus nesciunt unde. Nulla sapiente praesentium ut debitis. Illo, quam iusto, atque quisquam qui iure nulla magni hic facilis, obcaecati aspernatur? Obcaecati maiores voluptates praesentium enim esse ipsum.</p>
</div>
<div class="alert alert-success col-sm-6">
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ratione hic aliquam possimus deserunt. Ullam ea, eveniet repudiandae atque cumque veritatis neque aut consequatur doloribus officiis sapiente minima ipsa possimus fugiat.</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. Quaerat iste fugiat sint possimus nostrum odit esse! Laborum neque deserunt provident alias inventore ipsum, eaque iusto repudiandae nesciunt ab, eos vitae.</p>
</div>
<div class="alert alert-success col-sm-4">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed maiores ipsum recusandae tempore voluptas molestiae? Cum aperiam culpa soluta iste, aut vero sequi error ipsa id officia cumque quasi eaque?</p>
</div>
<div class="alert alert-success col-sm-4">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum quidem voluptatibus vero? Quibusdam cupiditate dolores maxime non. Cum impedit delectus, repellendus saepe quam, temporibus animi dolorum atque nesciunt amet quo.</p>
</div>
</div>
<!-- 25% -->
<div class="row">
<div class="alert alert-success col-sm-3">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis minus enim modi quos, beatae ea dolorem eveniet dolor est! Error dolores deserunt a officia distinctio amet tenetur similique odio atque.</p>
</div>
<div class="alert alert-success col-sm-3">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Optio tempora voluptatem, perspiciatis, necessitatibus explicabo, blanditiis magnam suscipit quasi natus ratione provident soluta. Quo, tempora pariatur nemo laboriosam explicabo assumenda aut!</p>
</div>
<div class="alert alert-success col-sm-3">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nulla odit inventore ut expedita harum soluta tempore architecto error pariatur atque dolorum aliquam, quos maxime consequatur. Et maxime saepe repellendus hic.</p>
</div>
<div class="alert alert-success col-sm-3">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Exercitationem, quia, earum perspiciatis laborum recusandae facilis asperiores fugiat sint numquam pariatur mollitia facere perferendis praesentium consequatur, ex dolore omnis voluptate veniam?</p>
</div>
</div>
</div>
</body>
</html>