-
Notifications
You must be signed in to change notification settings - Fork 116
/
how-to-use-bootstrap-grid.html
529 lines (439 loc) · 29.7 KB
/
how-to-use-bootstrap-grid.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
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>How to Use the Bootstrap Grid</title>
<link meta="description" content="Learn How to use the Bootstrap Grid rows columns and containers for layouts with Bootstrap 4">
<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="Bootstrap 4 Themes and Templates">
<meta name="twitter:description" content="Learn How to use the Bootstrap Grid rows columns and containers for layouts">
<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="display-4">How to Use the Bootstrap Grid</h1>
<h1>The Right Way</h1>
</div>
</div>
</div>
<section id="howto">
<div class="container">
<div class="row mb-3">
<div class="col-sm-10 mx-auto">
<p class="lead">
The <a href="https://getbootstrap.com/docs/4.1/layout/grid/" target="_new">Bootstrap Grid System</a>
is used for layout, specifically <strong>Responsive Layouts</strong>. Understanding how it works is <em>vital</em> to understanding Bootstrap.
The Grid is made up of groupings of <strong>Rows & Columns</strong> inside one or more <strong>Containers</strong>.
</p>
<p class="lead">The Bootstrap Grid can be used alone, without the Bootstrap JavaScript and other CSS Components. You just need to download and
reference the <code>"bootstrap-grid.css"</code> which contains the Grid and Flexbox classes. More info on only using the
<a href="http://getbootstrap.com/docs/4.1/getting-started/contents/#css-files" target="_new">Bootstrap Grid CSS</a> is here in the docs.
</p>
<hr class="my-5">
<h4>Basic example of using the Grid:</h4>
<pre class="bg-dark text-white rounded my-3">
<code>
<div class="container">
<div class="row">
<div class="col">I'm your content inside the grid!</div>
</div>
</div>
</code></pre>
This gives us one big “column” horizontally across the viewport…
<img src="./assets/howto/1col.png" class="d-block img-fluid mx-auto my-4" alt="Grid 1">
<h4>
2 Columns…
</h4>
<pre class="bg-dark text-white rounded my-3">
<code>
<div class="container">
<div class="row">
<div class="col">Left column</div>
<div class="col">Right column</div>
</div>
</div>
</code></pre>
<img src="./assets/howto/2col.png" class="d-block img-fluid mx-auto my-4" alt="Grid 1">
<h4>
3 Columns…
</h4>
<pre class="bg-dark text-white rounded my-3">
<code>
<div class="container">
<div class="row">
<div class="col">Left column</div>
<div class="col">Middle column</div>
<div class="col">Right column</div>
</div>
</div>
</code></pre>
<img src="./assets/howto/3col.png" class="d-block img-fluid mx-auto my-4" alt="Grid 1">
<hr class="my-5 border-dark">
<p class="h4 mb-3">Basic Grid concepts are <em>quickly</em> understood, but you may be wondering why all of this
HTML markup is neccessary. You might have some questions like…</p>
<h5>Why do I need a Container?</h5>
<h5>Can I make one column wider than the others?</h5>
<h5>Do I need to use the Row?</h5>
<div class="w-100 py-4"></div>
<p class="lead">I will address Grid questions like these a little further down.
But, first I want to take a step back to explain something very important about using the Grid.
Understanding the “Rules of the Grid” will save you a lot of time and frustration.
Read them carefully…</p>
<hr class="my-5" id="gridrules">
<h1>The Rules of the Grid:</h1>
<h3>1. Columns <em>must</em> be the immediate child of a Row.</h3>
<h3>2. Rows are <em>only</em> used to contain Columns, nothing else.</h3>
<h3>3. Rows should be placed inside a Container.</h3>
<div class="w-100 py-4"></div>
<p class="lead">Those rules are very IMPORTANT. The Rows & Columns always work together, and you should never have one without the other.
Bad stuff will happen if you don’t follow those 3 simple Grid rules, exactly. I’ve answered countless Bootstrap questions
on Stack Overflow by simply applying those rules. At first this might sound complicated, but it’s really easy once you understand how the Grid works.</p>
<hr class="my-5">
<h4>There's a <em>Right Way</em> to Use the Bootstrap Grid...</h4>
<hr class="border-dark my-5">
<h1>Container</h1>
<p class="lead">
In the basic examples before you may have noticed that I used the <code>.container</code> class to wrap the <code>.row</code>.
The Container is the root (a.k.a: top-level, outermost) element of the Bootstrap Grid.</p>
<pre class="bg-dark text-white rounded my-3">
<code>
<div class="container">
<div class="row">
<div class="col">I'm content inside the grid!</div>
</div>
</div>
</code></pre>
<p class="lead">
The Container can be used to hold any elements and content. It’s not only used for the
Grid Rows & Columns. For example, this is perfectly valid Bootstrap markup:</p>
<pre class="bg-dark text-white rounded my-3">
<code>
<div class="container">
<h2> My Heading</h2>
<div class="row">
<div class="col"> I'm content inside the grid!</div>
</div>
</div>
</code></pre>
<p class="lead">
At first, the Container may seem trivial or unnecessary, but it’s very important to <strong>control
width</strong> of the layout. The Container is also used to <strong>evenly align the left and right edges</strong> of the
layout within the browser’s viewport.</p>
<p class="lead">
Bootstrap 4 has <a target="_new" rel="nofollow" href="http://getbootstrap.com/docs/4.1/layout/overview/#containers">2 types of Containers</a>. In my examples I used <code>.container</code>, but there is also the
full-width <code>.container-fluid</code>. You can use either one:</p>
<h5>1 — Fixed-width container to center your layout in the middle:</h5>
<pre class="bg-dark text-white rounded my-3">
<code>
<div class="container"> </div>
</code></pre>
<h5>2 — Full-width container for a layout the spans the entire width:</h5>
<pre class="bg-dark text-white rounded my-3">
<code>
<div class="container-fluid"> </div>
</code></pre>
<p class="lead">
The <code>.container</code> scales down in width responsively (as the screen width narrows) so that eventually
it becomes full-width like the <code>.container-fluid</code> on smaller devices.</p>
<p class="lead">
<strong>Note:</strong> A Container can be used to contain any content, not just the Grid Rows & Columns. But, if you
do utilize the Grid Rows & Columns, the Rows should be placed inside a Container.
<a target="_new" rel="nofollow" href="">Try the Container demo on Codeply</a>
</p>
<p class="lead">
When utilizing the Grid, one more Rows will be placed inside the Container. You can have multiple Rows in a
Container, and you can have multiple Containers on one page. It all depends on what layout you’re trying to
accomplish, but don’t get too concerned with that yet.</p>
<h5 class="my-4">It’s important that a Container is used to contain grid Rows (.row).</h5>
<p class="lead">
Rows have a negative left/right margin of -15px. The Container padding of 15px is used to counteract the negative margins of the Row.
This is to keep content evenly aligned on the edges of the layout. If you don’t put a Row in a Container, the Row will overflow it’s
container, causing an undesirable horizontal scroll.</p>
<hr class="my-5 bg-dark">
<h1>Rows & Columns</h1>
<p class="lead">
Notice that I've grouped "Rows & Columns" together in a single section for this article. This is because you can't have one without the
other as explained earlier in the "<a href="#gridrules">Rules of the Grid</a>".<p>
<p class="lead">
For a while now I've wished that the Bootstrap .row wasn't actually named "row".
The name "row" is often misleading, and obscures the actual purpose of the <code>.row</code>.
When you think "row", you probably think <em>horizontal line</em>, which is okay, BUT, it's better to think of the
<code>.row</code> simply as a <em>parent</em> of columns.</p>
<p class="lead">
Think of the Row as a group of Columns
This is because columns inside the <code>.row</code> aren't always laid-out horizontally across the viewport. Some times we want the column layout to be horizontal,
while other times we want the columns to layout vertically down the viewport. The concept of horizontal vs. vertical layout is the essence of
Responsive Design. The sole purpose of the "row" is to contain 1 or more "columns".</p>
<h4>DON'T PUT CONTENT DIRECTLY INSIDE THE ROW!</h4>
<p class="lead">Again, the Row's <em>only</em> purpose is to contain Coumns.</p>
<pre class="bg-dark text-white rounded mb-5">
⛔
<div class="row">
This is very bad, wrong way, no bueno!!
</div>
<div class="row">
<p>This is also very bad, the wrong way!!</p>
</div>
<div class="row">
<h2>No headings either! This is the wrong way!!</h2>
</div>
</pre>
<p class="lead">Columns, and <em>only</em> columns, are placed inside the Row.</p>
<pre class="bg-dark text-white rounded mb-5">
✅
<div class="row">
<div class="col">Happy :-) This is the right way.</div>
</div>
</pre>
<p class="lead">
It's also important to mention that the <code>.row</code> is <code>display:flex</code>. As Flexbox children,
the Columns in each row are the same height. Because of Flexbox, horizontal and vertical alignment (align right, center, bottom, etc..)
is easily accomplished using Bootstrap 4's Flex and Auto-margin Utility classes.
Now it's time to look deeper at Rows & Columns, and <em>exactly</em> how they work together.
There are different "types" of Columns, and different ways to use them in your layout. They are magic.
</p>
<hr class="my-5 border-dark">
<h3>Happiness is... Columns.</h3>
<p class="lead">All the things Bootstrap 4 Columns can do...</p>
<ul class="mb-5">
<li>Create horizontal divisions across the viewport.</li>
<li>Can have different defined widths.</li>
<li>Can change in width at different screen widths.</li>
<li>Layout horizontally left-to-right, then vertically up-and-down.</li>
<li>Can change position (re-order) relative to siblings in the same row.</li>
<li>Are the same height as their siblings in the same row.</li>
<li>Can "grow" or "shrink" in width.</li>
<li>Can automatically "wrap" or "stack" vertically as needed, or at different widths.</li>
<li>Can contain more Rows & Columns__ this is called "nesting".</li>
</ul>
<p class="lead">All you need to know about Bootstrap Columns...</p>
<p>
Columns create horizontal divisions across the viewport.
The space between the columns is called the "gutter".
</p>
<img src="./assets/howto/cols.png" class="d-block img-fluid mx-auto my-4" alt="Columns 1">
<p>
The classic Bootstrap grid has 12 column units:
</p>
<img src="./assets/howto/cols2.png" class="d-block img-fluid mx-auto my-4" alt="Columns 2">
<blockquote class="small blockquote">
<b>Note for Dummies:</b> Columns aren't actually light pink. That is only used for you to see the left/right boundaries of the Columns.
In most cases you're not going to use all 12 individual columns as illustrated above. Instead you'll be using some
combination of the 12 to contain page content…
</blockquote>
<p>
So, the columns can be evenly divided up into factors of 12. For example, 6 columns (12/6 = 2):
</p>
<img src="./assets/howto/cols3.png" class="d-block img-fluid mx-auto my-4" alt="Columns 3">
<p>
And, you can do the math…
</p>
<img src="./assets/howto/cols4.png" class="d-block img-fluid mx-auto my-4" alt="Columns 4">
<p>
The columns can be split-up using <em>any</em> part of the 12 units. And, it's okay to use <em>less than 12</em>. It's also okay to use <em>more than 12</em> which I'll show you later.
</p>
<img src="./assets/howto/cols5.png" class="d-block img-fluid mx-auto my-4" alt="Columns 5">
<p>
With all of this flexibility, the layout possibilities are seemingly endless…
</p>
<img src="./assets/howto/cols6.png" class="d-block img-fluid mx-auto my-4" alt="Columns 6">
<hr class="my-5 border-dark">
<p class="lead pb-3">
But, the Grid is not <em>always</em> about 12. Thanks to <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout" target="_new" rel="nofollow">Flexbox</a>,
Bootstrap 4 has a new <a href="http://getbootstrap.com/docs/4.1/layout/grid/#auto-layout-columns" target="_new" rel="nofollow">"Auto-layout" Columns</a>.
These unit-less columns give you even more <em>flexibility</em> when it comes to designing layouts.
</p>
<div data-codeply="6rPBFWFNPS" data-codeply-height="850px"></div>
<p class="lead mt-5">
Now you know how to use Columns to create a horizontal layout. But wait... there’s more! Let’s talk about some fancier things Columns can do.
</p>
<p>
As you saw before, Columns can be different widths:
</p>
<img src="./assets/howto/cols7.png" class="d-block img-fluid mx-auto my-4" alt="Columns 7">
<p>
Did you know that, Column width can <b><em>change</em> depending on screen width</b>?
</p>
<img src="./assets/howto/cols8.png" class="d-block img-fluid mx-auto my-4" alt="Columns 8">
<p class="lead">
This is called <b>Responsive Design</b>, and I will tell you exactly how it works a very soon.
But, first things first, I need to finish telling you about Columns. Remember before when I said
"<b>It's okay to use more than 12 Columns in a Row</b>"?
</p>
<p>
Columns in the same Row layout horizontally across, and then stack vertically down. This vertical "stacking" or "wrapping"
occurs when the Column units in a single Row exceed 12. This is known as "Column Wrapping"…
Columns in the same Row wrap to the next line every 12 units:
</p>
<img src="./assets/howto/cols9.png" class="d-block img-fluid mx-auto my-4" alt="Columns 9">
<p>
Column width and “wrapping” can be controlled using different Responsive Grid Tiers (a.k.a “Grid Breakpoints”):
</p>
<img src="./assets/howto/cols13.png" class="d-block img-fluid mx-auto my-4" alt="Columns responsive grid">
<p>
Columns can change position (re-order) relative to siblings in the same Row:
</p>
<img src="./assets/howto/cols11.png" class="d-block img-fluid mx-auto my-4" alt="Columns 11">
<p>
Columns can contain baby Rows & Columns. This is called “Nesting”:
</p>
<img src="./assets/howto/cols14.png" class="d-block img-fluid mx-auto my-4" alt="Columns nesting">
<p>
Columns can “grow” or “shrink” in width. These are <a href="http://getbootstrap.com/docs/4.1/layout/grid/#auto-layout-columns" target="_new" rel="nofollow">Auto-layout</a> Columns:
</p>
<img src="./assets/howto/cols12.png" class="d-block img-fluid mx-auto my-4" alt="Columns grow and shrink">
<hr>
<h3>
Now that you understand the basics of using Bootstrap’s Grid System, next I will show you what
the <code>sm</code>, <code>-md</code>, <code>-lg</code>, and <code>-xl</code> mean. I will explain more
about how to use the Grid for <b>Responsive Design</b>.
</h3>
</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-css.html">Prev: How to Use Bootstrap CSS</a>
</div>
<div class="col-sm-auto text-right">
<a href="how-to-responsive-design-with-bootstrap.html">Next: How to Responsive Design with Bootstrap</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>