-
Notifications
You must be signed in to change notification settings - Fork 116
/
how-to-responsive-design-with-bootstrap.html
347 lines (297 loc) · 18.8 KB
/
how-to-responsive-design-with-bootstrap.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
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>How to Responsive Design with Bootstrap</title>
<link meta="description" content="Learn how to create responsive design and layouts using the Bootstrap grid">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" />
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" />
<link href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css" rel="stylesheet" />
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/ionicons/3.0.0/css/ionicons.css" />
<link rel="stylesheet" href="css/styles.css" />
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon" />
<meta property="og:image" name="twitter:image" content="http://themes.guide/favicon-1024.png">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@ThemesGuide">
<meta name="twitter:creator" content="@ThemesGuide">
<meta name="twitter:title" content="Responsive Design with Bootstrap">
<meta name="twitter:description" content="Learn how to create responsive design and layouts using Bootstrap">
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-103606808-1', 'auto');
ga('send', 'pageview');
</script>
<script src="https://www.codeply.com/js/embed.js"></script>
</head>
<body id="page-top" data-spy="scroll" data-target=".fixed-top" data-offset="60">
<nav class="navbar navbar-custom navbar-dark fixed-top navbar-expand-md" role="navigation">
<div class="container">
<a class="navbar-text page-scroll font-weight-bold text-uppercase py-3" href="http://themes.guide">
<span>Themes.guide</span>
</a>
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target=".navbar-collapse">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse">
<ul class="navbar-nav ml-md-auto">
<li class="nav-item"><a class="page-scroll active nav-link pr-3" href="./">Bootstrap 4</a></li>
<li class="nav-item"><a class="page-scroll nav-link pr-3" target="_ext" href="https://themestr.app" title="Bootstrap theme builder">Themestr.app</a></li>
<li class="nav-item"><a class="page-scroll nav-link pr-3" title="Bootstrap 4 themes collection" href="http://themes.guide/#freebies">Free Themes</a></li>
<li class="nav-item"><a class="page-scroll nav-link pr-0" href="http://themes.guide/#themes">Pro Themes</a></li>
</ul>
</div>
</div>
</nav>
<div class="container pt-5">
<div class="row mt-5">
<div class="col-md-12">
<h4>
<a href="how-to.html">
<img src="./assets/howto/bootstrap-punchout.svg" alt="How to Bootstrap 4" class="bg-primary border rounded border-primary mr-2 mb-1" style="width:30px;height:30px">
How to... Bootstrap</a>
</h4>
</div>
<div class="col-md-12 pt-5 text-center">
<h1 class="font-weight-light">How to Responsive Design with Bootstrap </h1>
</div>
</div>
</div>
<section id="howto">
<div class="container">
<div class="row mb-3">
<div class="col-sm-10 mx-auto">
<h3 class="pb-5 text-justify">
The Rows & Columns of the <a href="how-to-use-bootstrap-grid.html">Bootstrap Grid</a> are the "star of the show" when it comes to Responsive Design. I will tell you all about
Grid tiers, media queries and breakpoints in Bootstrap 4. It’s all about width.
</h3>
<p class="lead">
Bootstrap 4 has 5 Responsive Tiers (a.k.a. “Breakpoints”) that you may have noticed in
some of the previous Column examples (ie; col-lg-4, col-md).
</p>
<p class="lead font-weight-bold">Bootstap 4 Responsive Breakpoints (based on screen width):</p>
<ul>
<li>(xs) — screen width < 576px (This is the “default” tier)</li>
<li>sm — screen width ≥ 576px</li>
<li>md — screen width ≥ 768px</li>
<li>lg — screen width ≥ 992px</li>
<li>xl — screen width ≥ 1200px</li>
</ul>
<div class="card">
<div class="card-body">
<strong>Why did I put (xs) in parenthesis, and not the other breakpoints?</strong> Since xs (extra-small) is the default
breakpoint, the <code>-xs</code> infix that was used for Bootstrap 3.x is longer used in Bootstrap 4.x. So instead of
using <code>col-xs-6</code>, it’s simply <code>col-6</code>.
</div>
</div>
<hr>
<p class="lead">
Bootstrap uses CSS media queries to establish these Responsive Breakpoints. They enable you to control Column behavior at different screen widths.</p>
<p class="lead">
<em>For example</em>: here are 2 columns, each 50% width:</p>
<pre class="bg-dark text-white rounded mb-5">
<div class="container">
<div class="row">
<div class="col-sm-6">Column 1</div>
<div class="col-sm-6">Column 2</div>
</div>
</div>
</pre>
<p class="lead">
The col-sm-6 means use 6 of 12 columns wide (50%), on a typical small device width (greater than or equal to 768 px):</p>
<img src="./assets/howto/cols15.png" class="d-block img-fluid mx-auto my-4" alt="Grid 1">
<p class="lead">
On <b>less than 768px</b>, the 2 columns become 100% width and stack vertically:</p>
<img src="./assets/howto/cols16.png" class="d-block img-fluid mx-auto my-4" alt="Grid 2">
<p class="lead">
This is because (xs) is the default or implied breakpoint. Since I didn’t specify a default Column width, the 50% width was only applied on 768px and wider for the sm breakpoint.</p>
<h3Mobile-first!></h3>
<p class="lead">Since (xs) is the default breakpoint, the col-12 is implied. So, this:</p>
<pre class="bg-dark text-white rounded mb-5">
<div class="col-12 col-sm-6">Column</div></pre>
<p class="lead">
Is effectively the same as this:</p>
<pre class="bg-dark text-white rounded mb-5">
<div class="col-sm-6">Column</div></pre>
<p class="lead font-weight-bold">
Larger breakpoints, override Smaller breakpoints.</p>
<code>xs</code> (default) > <br>
overridden by <code>sm</code> > <br>
overridden by <code>md</code> > <br>
overridden by <code>lg</code> > <br>
overridden by <code>xl</code><br><br>
<p class="lead">
Or, in reverse…</p>
<code>xl</code> > overrides <code>lg</code> > overrides <code>md</code> > overrides <code>sm</code> > overrides (xs)
<p class="lead">
Therefore, <code>col-sm-6</code> really means 50% width on small-and-up. For the same column width on all tiers, just set the width for the smallest tier that’s desired. <em>For example</em>:</p>
<p class="lead"><em>For example</em>:</p>
<p>
<code> <div class="col-lg-3 col-md-3 col-sm-3">..</div> </code> is the same as, <code> <div class="col-sm-3">..</div> </code>
</p>
<p class="lead">
For a different column width on a larger tier, use the appropriate larger breakpoint to override the smaller breakpoint.
For example, 3 columns wide on sm, and 4 columns wide on <b>md-and-up:</b></p>
<pre class="bg-dark text-white rounded mb-5">
<div class="col-sm-3 col-md-4">..</div></pre>
<p class="lead">
The Bootstrap 4 <a target="_new" href="http://getbootstrap.com/docs/4.1/layout/grid/#auto-layout-columns">auto-layout</a> columns also work responsively. Because of their simplicity, I prefer them over the classic 12-unit columns.
The auto-layout columns are perfect for any layout scenarios where equal-width columns are required. But, don’t forget, the 12-unit columns can be mixed-in as needed.</p>
<p class="lead font-weight-bold">
Take a look at a few auto-layout Grid examples…</p>
<p class="lead">
3 equal-width columns. The `cols` remain horizontal at all widths, and don’t stack vertically because the xs breakpoint is the default:</p>
<pre class="bg-dark text-white rounded mb-5">
<div class="container">
<div class="row">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
</div>
</div></pre>
<p class="lead">
3 equal-width columns (responsive). In this example, the `cols` remain horizontal until the <code>sm</code> breakpoint of 576px, and then stack vertically:
</p>
<pre class="bg-dark text-white rounded mb-5">
<div class="container">
<div class="row">
<div class="col-sm">1</div>
<div class="col-sm">2</div>
<div class="col-sm">3</div>
</div>
</div></pre>
<p class="lead">
Remember, you can switch out sm for whatever breakpoint (md,lg,xl) is needed.
</p>
<p class="lead">
2 columns, left sidebar & right. Here’s an example of combining the classic defined-width columns,
with the auto-layout columns. The right column will automatically grow to fill the width.
The sidebar will stack on top at the sm breakpoint of 576px:
</p>
<pre class="bg-dark text-white rounded mb-5">
<div class="container">
<div class="row">
<div class="col-sm-2">sidebar</div>
<div class="col">main</div>
</div>
</div></pre>
<hr>
<h3>Key points on Responsive Design using the Grid:</h3>
<p class="lead">
Columns will stack vertically (and become full-width) at the smaller screen widths unless you use a
specific <code>col-*</code> class in your HTML markup. Use a specific <code>col-*</code> to prevent that vertical stacking.</p>
<p class="lead">
The smaller grid classes also apply to larger screens unless overridden specifically for larger screen width.
So, <code><div class="col-md-6"></div></code> is effectively the same as <code><div class="col-md-6 col-lg-6"></div></code>.
Therefore, you only need to use the class for the smallest width you want to support.</p>
<p class="lead">
Rows are <code>display:flex</code>, and therefore Columns are equal height in the same row. Use auto-margins or Flexbox align-items and
justify-content for horizontal or vertical alignment (centering, bottom, right, etc..).
</p>
</div>
<div class="col-sm-10 mx-auto mt-5 py-4 border-top">
<div class="row">
<div class="col-sm mr-auto">
<a href="how-to-use-bootstrap-grid.html">Prev: How to Use the Bootstrap Grid</a>
</div>
<div class="col-sm-auto text-right">
<a href="how-to-use-bootstrap-javascript.html">Next: How to Use Bootstrap JavaScript</a>
</div>
</div>
</div>
</div>
</div>
</section>
<div id="modalContact" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header d-block">
<h3 class="text-center">How can we help you?</h3>
</div>
<div class="modal-body">
<form id="contactForm" role="form" method="post">
<div class="form-group">
<label for="inputEmail" class="col-md-2 form-control-label">Email</label>
<div class="col-md-12">
<input type="email" class="form-control" id="inputEmail" name="contactEmail" required="">
</div>
</div>
<div class="form-group">
<label for="inputMessage" class="col-md-2 form-control-label">Message</label>
<div class="col-md-12">
<textarea class="form-control" id="inputMessage" rows="6" name="contactMessage"></textarea>
</div>
</div>
<div class="form-group">
<div class="col-xl-12">
<button type="submit" id="contactBtn" class="btn btn-primary btn-lg mx-auto">Send it</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
<div id="modalThanks" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header d-block text-center">
<h3>Thank you!</h3>
<h6>We'll be in touch</h6>
</div>
</div>
</div>
</div>
<footer id="footer" class="bg-dark text-white">
<div class="container pt-3">
<div class="row">
<div class="col-6 col-md-6 col-lg-3 column">
<h6>Information</h6>
<ul class="list-unstyled">
<li><a href="http://themes.guide/#freebies">Free Themes</a>
</li>
<li><a href="http://themes.guide/#themes">Pro Themes</a>
</li>
<li><a href="http://themes.guide/#about">Benefits</a>
</li>
</ul>
</div>
<div class="col-6 col-lg-3 column text-lg-left text-right">
<h6>Tools</h6>
<ul class="list-unstyled">
<li><a href="https://themestr.app" title="Custom Bootstrap theme creator - SASS to CSS">Themestr.app</a>
</li>
<li><a href="http://bootstrap4.guide" title="Learn about Bootstrap 4">Bootstrap4.guide</a>
</li>
<li><a href="http://www.codeply.com" title="Prototype and edit code for Bootstrap and other responsive frameworks">Codeply</a>
</li>
</ul>
</div>
<div class="col-6 col-lg-3 column">
<h6></h6>
</div>
<div class="col-6 col-lg-3 column text-right">
<h6>Follow</h6>
<ul class="nav float-right">
<li><a class="nav-link px-1" href="//twitter.com/ThemesGuide" title="@ThemesGuide"><i class="fa fa-3x ion-logo-twitter"></i></a></li>
<li><a class="nav-link px-1" href="https://github.com/ThemesGuide/bootstrap-themes" title="Star on GitHub"><i class="fa fa-3x ion-ios-star-outline"></i></a></li>
<li><a class="nav-link pl-1 pr-0" href="https://github.com/ThemesGuide" title="Follow on GitHub"><i class="fa fa-3x ion-logo-github"></i></a></li>
</ul>
</div>
</div>
</div>
<div class="container pt-5">
<p class="small text-right">Made with ♥ by <a class="text-white" href="http://themes.guide">Themes.guide</a> ©2018</p>
</div>
</footer>
<!--scripts loaded here-->
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.13.0/umd/popper.min.js"></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
</body>
</html>