-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy path20.GridSystemBasic.html
60 lines (56 loc) · 9.21 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
<!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. Impedit ex similique commodi est, accusamus nihil dolore itaque, repudiandae, culpa blanditiis voluptatum accusantium earum vero alias molestias dicta nulla error officiis corporis aperiam optio! Consequuntur perspiciatis mollitia eius ab quisquam voluptatum aperiam quae, ipsum sint fuga culpa repudiandae numquam at eligendi error nemo magnam totam obcaecati possimus. Sequi illo earum nesciunt minus inventore delectus aut unde nam voluptatibus veritatis reprehenderit natus, ea voluptas itaque nostrum sapiente dicta, asperiores necessitatibus rem a in facilis! Eius placeat iure assumenda, magnam quam quisquam sint numquam accusantium incidunt sunt unde. Molestias atque cumque deleniti aliquid!</p>
</div>
</div>
<!-- 50% -->
<div class="row">
<div class="alert alert-success col-sm-6">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit ex similique commodi est, accusamus nihil dolore itaque, repudiandae, culpa blanditiis voluptatum accusantium earum vero alias molestias dicta nulla error officiis corporis aperiam optio! Consequuntur perspiciatis mollitia eius ab quisquam voluptatum aperiam quae, ipsum sint fuga culpa repudiandae numquam at eligendi error nemo magnam totam obcaecati possimus. Sequi illo earum nesciunt minus inventore delectus aut unde nam voluptatibus veritatis reprehenderit natus, ea voluptas itaque nostrum sapiente dicta, asperiores necessitatibus rem a in facilis! Eius placeat iure assumenda, magnam quam quisquam sint numquam accusantium incidunt sunt unde. Molestias atque cumque deleniti aliquid!</p>
</div>
<div class="alert alert-success col-sm-6">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit ex similique commodi est, accusamus nihil dolore itaque, repudiandae, culpa blanditiis voluptatum accusantium earum vero alias molestias dicta nulla error officiis corporis aperiam optio! Consequuntur perspiciatis mollitia eius ab quisquam voluptatum aperiam quae, ipsum sint fuga culpa repudiandae numquam at eligendi error nemo magnam totam obcaecati possimus. Sequi illo earum nesciunt minus inventore delectus aut unde nam voluptatibus veritatis reprehenderit natus, ea voluptas itaque nostrum sapiente dicta, asperiores necessitatibus rem a in facilis! Eius placeat iure assumenda, magnam quam quisquam sint numquam accusantium incidunt sunt unde. Molestias atque cumque deleniti aliquid!</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. Impedit ex similique commodi est, accusamus nihil dolore itaque, repudiandae, culpa blanditiis voluptatum accusantium earum vero alias molestias dicta nulla error officiis corporis aperiam optio! Consequuntur perspiciatis mollitia eius ab quisquam voluptatum aperiam quae, ipsum sint fuga culpa repudiandae numquam at eligendi error nemo magnam totam obcaecati possimus. Sequi illo earum nesciunt minus inventore delectus aut unde nam voluptatibus veritatis reprehenderit natus, ea voluptas itaque nostrum sapiente dicta, asperiores necessitatibus rem a in facilis! Eius placeat iure assumenda, magnam quam quisquam sint numquam accusantium incidunt sunt unde. Molestias atque cumque deleniti aliquid!</p>
</div>
<div class="alert alert-success col-sm-4">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit ex similique commodi est, accusamus nihil dolore itaque, repudiandae, culpa blanditiis voluptatum accusantium earum vero alias molestias dicta nulla error officiis corporis aperiam optio! Consequuntur perspiciatis mollitia eius ab quisquam voluptatum aperiam quae, ipsum sint fuga culpa repudiandae numquam at eligendi error nemo magnam totam obcaecati possimus. Sequi illo earum nesciunt minus inventore delectus aut unde nam voluptatibus veritatis reprehenderit natus, ea voluptas itaque nostrum sapiente dicta, asperiores necessitatibus rem a in facilis! Eius placeat iure assumenda, magnam quam quisquam sint numquam accusantium incidunt sunt unde. Molestias atque cumque deleniti aliquid!</p>
</div>
<div class="alert alert-success col-sm-4">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit ex similique commodi est, accusamus nihil dolore itaque, repudiandae, culpa blanditiis voluptatum accusantium earum vero alias molestias dicta nulla error officiis corporis aperiam optio! Consequuntur perspiciatis mollitia eius ab quisquam voluptatum aperiam quae, ipsum sint fuga culpa repudiandae numquam at eligendi error nemo magnam totam obcaecati possimus. Sequi illo earum nesciunt minus inventore delectus aut unde nam voluptatibus veritatis reprehenderit natus, ea voluptas itaque nostrum sapiente dicta, asperiores necessitatibus rem a in facilis! Eius placeat iure assumenda, magnam quam quisquam sint numquam accusantium incidunt sunt unde. Molestias atque cumque deleniti aliquid!</p>
</div>
</div>
<!-- 25% -->
<div class="row">
<div class="alert alert-success col-sm-3">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit ex similique commodi est, accusamus nihil dolore itaque, repudiandae, culpa blanditiis voluptatum accusantium earum vero alias molestias dicta nulla error officiis corporis aperiam optio! Consequuntur perspiciatis mollitia eius ab quisquam voluptatum aperiam quae, ipsum sint fuga culpa repudiandae numquam at eligendi error nemo magnam totam obcaecati possimus. Sequi illo earum nesciunt minus inventore delectus aut unde nam voluptatibus veritatis reprehenderit natus, ea voluptas itaque nostrum sapiente dicta, asperiores necessitatibus rem a in facilis! Eius placeat iure assumenda, magnam quam quisquam sint numquam accusantium incidunt sunt unde. Molestias atque cumque deleniti aliquid!</p>
</div>
<div class="alert alert-success col-sm-3">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit ex similique commodi est, accusamus nihil dolore itaque, repudiandae, culpa blanditiis voluptatum accusantium earum vero alias molestias dicta nulla error officiis corporis aperiam optio! Consequuntur perspiciatis mollitia eius ab quisquam voluptatum aperiam quae, ipsum sint fuga culpa repudiandae numquam at eligendi error nemo magnam totam obcaecati possimus. Sequi illo earum nesciunt minus inventore delectus aut unde nam voluptatibus veritatis reprehenderit natus, ea voluptas itaque nostrum sapiente dicta, asperiores necessitatibus rem a in facilis! Eius placeat iure assumenda, magnam quam quisquam sint numquam accusantium incidunt sunt unde. Molestias atque cumque deleniti aliquid!</p>
</div>
<div class="alert alert-success col-sm-3">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit ex similique commodi est, accusamus nihil dolore itaque, repudiandae, culpa blanditiis voluptatum accusantium earum vero alias molestias dicta nulla error officiis corporis aperiam optio! Consequuntur perspiciatis mollitia eius ab quisquam voluptatum aperiam quae, ipsum sint fuga culpa repudiandae numquam at eligendi error nemo magnam totam obcaecati possimus. Sequi illo earum nesciunt minus inventore delectus aut unde nam voluptatibus veritatis reprehenderit natus, ea voluptas itaque nostrum sapiente dicta, asperiores necessitatibus rem a in facilis! Eius placeat iure assumenda, magnam quam quisquam sint numquam accusantium incidunt sunt unde. Molestias atque cumque deleniti aliquid!</p>
</div>
<div class="alert alert-success col-sm-3">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Impedit ex similique commodi est, accusamus nihil dolore itaque, repudiandae, culpa blanditiis voluptatum accusantium earum vero alias molestias dicta nulla error officiis corporis aperiam optio! Consequuntur perspiciatis mollitia eius ab quisquam voluptatum aperiam quae, ipsum sint fuga culpa repudiandae numquam at eligendi error nemo magnam totam obcaecati possimus. Sequi illo earum nesciunt minus inventore delectus aut unde nam voluptatibus veritatis reprehenderit natus, ea voluptas itaque nostrum sapiente dicta, asperiores necessitatibus rem a in facilis! Eius placeat iure assumenda, magnam quam quisquam sint numquam accusantium incidunt sunt unde. Molestias atque cumque deleniti aliquid!</p>
</div>
</div>
</div>
</body>
</html>