-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathspacing.html
204 lines (198 loc) · 10.7 KB
/
spacing.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
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0 shrink-to-fit=no" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<meta name="description" content="Bootstrap demo site">
<meta name="author" content="Anna Greaves">
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css">
<link rel="stylesheet" href="assets/css/prism.css">
<link rel="stylesheet" href="assets/css/main.css" type="text/css" />
<title>Bootstrap grid demo | Responsive</title>
</head>
<body>
<!-- Navigation -->
<nav class="navbar navbar-expand-md navbar-light fixed-top bg-white">
<a class="navbar-brand mr-1" href="index.html">
<img src="assets/images/logo.gif" height="40" alt="AG logo" title="AG logo">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav ml-auto text-uppercase">
<li class="nav-item">
<a class="nav-link" href="index.html">Essentials</a>
</li>
<li class="nav-item">
<a class="nav-link" href="containers-rows.html">Containers & Rows</a>
</li>
<li class="nav-item">
<a class="nav-link" href="columns.html">Columns</a>
</li>
<li class="nav-item">
<a class="nav-link" href="responsive.html">Responsive</a>
</li>
<li class="nav-item">
<a class="nav-link active" href="spacing.html">Spacing</a>
</li>
</ul>
</div>
</nav>
<main>
<div class="wrapper bg-secondary text-white">
<div class="container-fluid p-0">
<div class="row justify-content-center">
<div class="col-12 col-md-10 text-left">
<header>
<h1 class="text-center mt-4">Spacing</h1>
</header>
<ul>
<li>You might have noticed in the last page, that when column widths do not add up to 12 we are left with a space on the right side of our columns.</li>
<li>Having your column(s) up against the left side of the screen is not great user experience most of the time.</li>
<li>So what can we do to fix that?</li>
</ul>
</div>
</div>
</div>
</div>
<div class="wrapper m-0">
<div class="container-fluid p-0">
<div class="row justify-content-center">
<div class="col-12 col-lg-10 text-left">
<h2 class="text-center pb-2">Creating space with flex</h2>
<ul>
<li>We can use the <span class="mono">justify-content</span> classes</li>
<li>We apply these classes to the <span class="mono bold">row</span> that our columns are contained in</li>
<li>Each of these rows has 3 col-2 elements inside</li>
<li>Look at the ways the different <span class="mono">justify-content</span> classes effect their layout.</li>
</ul>
</div>
</div>
<div class="row no-gutters mb-2 justify-content-center">
<div class="col-sm-12 col-md-8 col-lg-6">
<!-- Example code block to show how justify-content classes effect column positioning -->
<pre>
<code class="language-markup">
<script type="prism-html-markup">
<div class="container-fluid">
<div class="row justify-content-start">...</div>
<div class="row justify-content-end">...</div>
<div class="row justify-content-center">...</div>
<div class="row justify-content-between">...</div>
<div class="row justify-content-around">...</div>
</div>
</script>
</code>
</pre>
</div>
</div>
<p class="spacing-text">justify-content-start</p>
<div class="row spacing-row mb-2 justify-content-start">
<div class="col-2 spacing-col">col-2</div>
<div class="col-2 spacing-col">col-2</div>
<div class="col-2 spacing-col">col-2</div>
</div>
<p class="spacing-text">justify-content-end</p>
<div class="row spacing-row mb-2 justify-content-end">
<div class="col-2 spacing-col">col-2</div>
<div class="col-2 spacing-col">col-2</div>
<div class="col-2 spacing-col">col-2</div>
</div>
<p class="spacing-text">justify-content-center</p>
<div class="row spacing-row mb-2 justify-content-center">
<div class="col-2 spacing-col">col-2</div>
<div class="col-2 spacing-col">col-2</div>
<div class="col-2 spacing-col">col-2</div>
</div>
<p class="spacing-text">justify-content-between</p>
<div class="row spacing-row mb-2 justify-content-between">
<div class="col-2 spacing-col">col-2</div>
<div class="col-2 spacing-col">col-2</div>
<div class="col-2 spacing-col">col-2</div>
</div>
<p class="spacing-text">justify-content-around</p>
<div class="row spacing-row mb-2 justify-content-around">
<div class="col-2 spacing-col">col-2</div>
<div class="col-2 spacing-col">col-2</div>
<div class="col-2 spacing-col">col-2</div>
</div>
<div class="row mt-4">
<div class="col-12 text-left">
<ul>
<li>You can also apply the <span class="mono">sm md lg xl</span> sub-classes to these!</li>
<li>For example: <span class="mono">justify-content-sm-center</span> <span class="mono">justify-content-md-around</span> <span class="mono">justify-content-xl-end</span> etc</li>
</ul>
</div>
</div>
<div class="row no-gutters justify-content-center">
<div class="col-sm-12 col-xl-10">
<!-- Example code block to show responsive justify-content classes in action -->
<pre>
<code class="language-markup">
<script type="prism-html-markup">
<div class="row justify-content-sm-center justify-content-md-around justify-content-xl-end">
<div class="col-2"></div>
<div class="col-2"></div>
<div class="col-2"></div>
</div>
</script>
</code>
</pre>
</div>
</div>
<p class="text-center mt-5 mb-3">Change the width of your browser window to see how the position of the columns change</p>
<p class="spacing-text text-center">row justify-content-sm-center justify-content-md-around justify-content-xl-end</p>
<div class="row spacing-row mb-2 justify-content-sm-center justify-content-md-around justify-content-xl-end">
<div class="col-2 spacing-col">col-2</div>
<div class="col-2 spacing-col">col-2</div>
<div class="col-2 spacing-col">col-2</div>
</div>
</div>
</div>
<div class="container">
<div class="row justify-content-center">
<div class="col-12 col-lg-10 text-left">
<h2 class="text-center mt-3">Further reading</h2>
<ul>
<li>Now that you have a grasp of the basics, you can learn much more about the power of Bootstrap in their own documentation:</li>
<li>Search for what you are looking for in the <a href="https://getbootstrap.com/docs/4.3/getting-started/introduction">Bootstrap 4 documentation</a> search bar</li>
<li>Bootstrap 4 documentation: <a href="https://getbootstrap.com/docs/4.3/layout/grid/">Grid system</a></li>
<li>Bootstrap 4 documentation: <a href="https://getbootstrap.com/docs/4.3/utilities/flex/">Spacing</a></li>
<li>An excellent YouTube video on understanding the bootstrap grid: <a href="https://www.youtube.com/watch?v=qmPmwdshCMw">Here</a></li>
</ul>
</div>
</div>
</div>
</main>
<footer class="bg-secondary mt-5 p-3">
<div class="container-fluid">
<div class="row">
<div class="col-12 text-white">
<h3>Developed by Anna Greaves 2019</h3>
<a href="https://github.com/AJGreaves" target="_blank" aria-label="Find me on GitHub" rel="noopener">
<i class="fab fa-github-alt"></i>
</a>
<a href="https://www.facebook.com/a.gilhespy" target="_blank" aria-label="Find me on Facebook" rel="noopener">
<i class="fab fa-facebook"></i>
</a>
<a href="https://www.linkedin.com/in/anna-greaves-923474186/" target="_blank" aria-label="Find me on LinkedIn" rel="noopener">
<i class="fab fa-linkedin"></i>
</a>
<a href="https://code-institute-room.slack.com/messages/DF89S323B/" target="_blank" aria-label="Find me on Slack" rel="noopener">
<i class="fab fa-slack"></i>
</a>
</div>
</div>
</div>
</footer>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.2.1/js/bootstrap.min.js"></script>
<script src="assets/js/prism.js"></script>
</body>
</html>