-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathbootstrap-grid-layout.html
154 lines (145 loc) · 7.62 KB
/
bootstrap-grid-layout.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
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Bootstrap Grid</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">
</head>
<body>
<!-- entire page wrapped in a fluid container and single row -->
<div class="container-fluid boostrap-container">
<div class="row">
<!-- header takes up full row -->
<header class="col-12">
<h1 class="text-center display-4 py-5">Bootstrap Grid Intro</h1>
</header>
<!-- nav takes up full width for small devices and 2 columns for medium and up devices -->
<nav class="col-sm-fluid col-md-2">
<!-- list should be a flex container with column layout for medium and up devices -->
<ul class="nav pl-md-3 pl-lg-5 mb-5 text-nowrap">
<li class="nav-item">
<a class="nav-link" href="">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Posts</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Social Media</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Contact Us</a>
</li>
<li class="nav-item">
<a class="nav-link" href="">Sponsors</a>
</li>
</ul>
</nav>
<!--
main is both a column class and row, since it will contain nested columns
- main should fully stretch across the page for small devices, ten columns for medium and 8 columns for large
-->
<main class="col-12 col-md-10 col-lg-8 row">
<!-- each article should take up the full width of small devices, two side-by-side for medium and three across for large -->
<article class="col-12 col-md-6 col-lg-4">
<h3>This is a Post</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci aliquam iste nemo nulla.
Consequatur
culpa dolore ducimus et eveniet impedit inventore minima, nam natus pariatur porro quae quis ratione
tenetur, velit! Accusamus aspernatur beatae cupiditate delectus dolor, dolores, doloribus, enim iure
modi mollitia nam non officiis quia quibusdam sed similique suscipit vitae voluptatibus. Ad aliquid
animi aperiam architecto commodi debitis dignissimos dolore dolorem doloribus dolorum ducimus eaque
esse
expedita facere fugiat id illum impedit in, inventore ipsa iste iusto laboriosam libero minus natus
nemo
nisi nostrum perspiciatis quaerat qui ratione recusandae similique suscipit tenetur unde velit
voluptates! Ab alias animi culpa, cumque deleniti distinctio dolorem dolores et eveniet fuga harum
iste
itaque laudantium</p>
</article>
<article class="col-12 col-md-6 col-lg-4">
<h3>This is a Post</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci aliquam iste nemo nulla.
Consequatur
culpa dolore ducimus et eveniet impedit inventore minima, nam natus pariatur porro quae quis ratione
tenetur, velit! Accusamus aspernatur beatae cupiditate delectus dolor, dolores, doloribus, enim iure
modi mollitia nam non officiis quia quibusdam sed similique suscipit vitae voluptatibus. Ad aliquid
animi aperiam architecto commodi debitis dignissimos dolore dolorem doloribus dolorum ducimus eaque
esse
expedita facere fugiat id illum impedit in, inventore ipsa iste iusto laboriosam libero minus natus
nemo
nisi nostrum</p>
</article>
<article class="col-12 col-md-6 col-lg-4">
<h3>This is a Post</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci aliquam iste nemo nulla.
Consequatur
culpa dolore ducimus et eveniet impedit inventore minima, nam natus pariatur porro quae quis ratione
tenetur, velit! Accusamus aspernatur beatae cupiditate delectus dolor, dolores, doloribus, enim iure
modi mollitia nam non officiis quia quibusdam sed similique suscipit vitae voluptatibus. Ad aliquid
animi aperiam architecto commodi debitis dignissimos dolore dolorem doloribus dolorum ducimus eaque
esse
expedita facere fugiat id illum impedit in, inventore ipsa iste iusto laboriosam libero minus natus
nemo
nisi nostrum perspiciatis .</p>
</article>
<!-- the forms should take up the full width of main -->
<div class="col-12">
<!-- since multiple forms will be laid out within this div, it should be a row -->
<div class="row">
<!-- each form should take up the full width of main for small devices and halve for large devices -->
<section class="col-12 col-lg-6">
<div class="card d-flex flex-column p-2">
<h3 class="my-3 text-center">Sign Up</h3>
<form action="" class="d-flex flex-column form-group">
<div class="form-group">
<input class="form-control" type="text" placeholder="Name">
</div>
<div class="form-group">
<input class="form-control" type="text" placeholder="Age">
</div>
<div class="form-group">
<input class="form-control" type="password" placeholder="Password">
</div>
<button class="mt-auto center-block btn btn-success">Sign Up</button>
</form>
</div>
</section>
<section class="col-12 col-lg-6">
<div class="card d-flex flex-column p-2 h-100">
<h3 class="my-3 text-center">Sign In</h3>
<form action="" class="d-flex flex-column form-group h-100">
<div class="form-group">
<input type="text" class="form-control" placeholder="Name">
</div>
<div class="form-group">
<input class="form-control" type="password" placeholder="Password">
</div>
<button class="mt-auto btn btn-success">Sign In</button>
</form>
</div>
</section>
</div>
</div>
</main>
<!-- the aside should disappear for medium devices and smaller and take up two columns on large devices -->
<aside class="d-none col-lg-2 d-lg-block "></aside>
<!-- the footer should take up the full width for small devices and two thirds of the center for medium and larger devices -->
<footer class="col-12 offset-lg-2 col-lg-8 mt-3">
<h3>This is a footer.</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Enim eum fugit impedit magnam numquam optio
ratione
repellat rerum sapiente vitae. Amet asperiores aut, doloribus eaque, eius est eum fugiat iste iure
laudantium
libero numquam optio placeat quisquam sed, sequi tenetur ullam unde! Dicta quisquam recusandae
voluptates.
Deserunt laboriosam magnam quidem!</p>
</footer>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
</body>
</html>