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
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
|
<!doctype html>
<html lang="en" class="no-js">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://gmpg.org/xfn/11" rel="profile">
<link rel="canonical" href="https://blog.getbootstrap.com/">
<meta name="description" content="Official blog for the Bootstrap framework.">
<meta name="generator" content="Hugo 0.105.0">
<title>Bootstrap Blog · Official blog for the Bootstrap framework.</title>
<link href="/assets/css/style.css" rel="stylesheet">
<link rel="alternate" type="application/rss+xml" href="https://blog.getbootstrap.com/feed.xml" title="Bootstrap Blog">
<!-- Favicons -->
<link rel="apple-touch-icon" href="/assets/img/favicons/apple-touch-icon.png" sizes="180x180">
<link rel="icon" href="/assets/img/favicons/favicon-32x32.png" sizes="32x32" type="image/png">
<link rel="icon" href="/assets/img/favicons/favicon-16x16.png" sizes="16x16" type="image/png">
<link rel="manifest" href="/assets/img/favicons/manifest.json">
<link rel="mask-icon" href="/assets/img/favicons/safari-pinned-tab.svg" color="#712cf9">
<link rel="icon" href="/assets/img/favicons/favicon.ico">
<meta name="theme-color" content="#712cf9">
<meta name="author" content="Mark Otto">
<!-- Twitter -->
<meta name="twitter:card" content="summary_large_image"/>
<meta name="twitter:image" content="https://blog.getbootstrap.com/assets/img/bootstrap-social.png"/>
<meta name="twitter:title" content="Bootstrap Blog"/>
<meta name="twitter:description" content="Official blog for the Bootstrap framework."/>
<meta name="twitter:creator" content="@">
<!-- Facebook -->
<meta property="og:title" content="Bootstrap Blog" />
<meta property="og:description" content="Official blog for the Bootstrap framework." />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://blog.getbootstrap.com/" /><meta property="og:image" content="https://blog.getbootstrap.com/assets/img/bootstrap-social.png"/>
<meta property="og:image:width" content="2000">
<meta property="og:image:height" content="1000">
<script defer src="https://cdn.usefathom.com/script.js" data-site="ITUSEYJG"></script>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-146052-12', 'getbootstrap.com');
ga('set', 'anonymizeIp', true);
ga('send', 'pageview');
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>
<script>
(function(html) {
html.className = html.className.replace(/\bno-js\b/, '');
})(document.documentElement);
</script>
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="archive" viewBox="0 0 16 16">
<path d="M0 2a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v2a1 1 0 0 1-1 1v7.5a2.5 2.5 0 0 1-2.5 2.5h-9A2.5 2.5 0 0 1 1 12.5V5a1 1 0 0 1-1-1V2zm2 3v7.5A1.5 1.5 0 0 0 3.5 14h9a1.5 1.5 0 0 0 1.5-1.5V5H2zm13-3H1v2h14V2zM5 7.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5z"/>
</symbol>
<symbol id="file-earmark-richtext" viewBox="0 0 16 16">
<path d="M14 4.5V14a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V2a2 2 0 0 1 2-2h5.5L14 4.5zm-3 0A1.5 1.5 0 0 1 9.5 3V1H4a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V4.5h-2z"/>
<path d="M4.5 12.5A.5.5 0 0 1 5 12h3a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm0-2A.5.5 0 0 1 5 10h6a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm1.639-3.708 1.33.886 1.854-1.855a.25.25 0 0 1 .289-.047l1.888.974V8.5a.5.5 0 0 1-.5.5H5a.5.5 0 0 1-.5-.5V8s1.54-1.274 1.639-1.208zM6.25 6a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5z"/>
</symbol>
<symbol id="film" viewBox="0 0 16 16">
<path d="M0 1a1 1 0 0 1 1-1h14a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H1a1 1 0 0 1-1-1V1zm4 0v6h8V1H4zm8 8H4v6h8V9zM1 1v2h2V1H1zm2 3H1v2h2V4zM1 7v2h2V7H1zm2 3H1v2h2v-2zm-2 3v2h2v-2H1zM15 1h-2v2h2V1zm-2 3v2h2V4h-2zm2 3h-2v2h2V7zm-2 3v2h2v-2h-2zm2 3h-2v2h2v-2z"/>
</symbol>
<symbol id="rss" viewBox="0 0 16 16">
<path d="M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"/>
<path d="M5.5 12a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0zm-3-8.5a1 1 0 0 1 1-1c5.523 0 10 4.477 10 10a1 1 0 1 1-2 0 8 8 0 0 0-8-8 1 1 0 0 1-1-1zm0 4a1 1 0 0 1 1-1 6 6 0 0 1 6 6 1 1 0 1 1-2 0 4 4 0 0 0-4-4 1 1 0 0 1-1-1z"/>
</symbol>
<symbol id="three-dots" viewBox="0 0 16 16">
<path d="M3 9.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3z"/>
</symbol>
</svg>
<header class="navbar navbar-expand-lg navbar-dark bd-navbar sticky-top">
<nav class="container-xxl bd-gutter flex-wrap flex-lg-nowrap" aria-label="Main navigation">
<div class="d-lg-none" style="width: 2.25rem;"></div>
<a class="navbar-brand p-0 me-0 me-lg-2" href="/" aria-label="Bootstrap">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="d-block my-1" viewBox="0 0 118 94" role="img"><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"/></svg>
</a>
<button class="navbar-toggler d-flex d-lg-none order-3 p-2" type="button" data-bs-toggle="offcanvas" data-bs-target="#bdNavbar" aria-controls="bdNavbar" aria-expanded="false" aria-label="Toggle navigation">
<svg class="bi" width="24" height="24" aria-hidden="true"><use xlink:href="#three-dots"></use></svg>
</button>
<div class="offcanvas-lg offcanvas-end flex-grow-1" id="bdNavbar" aria-labelledby="bdNavbarOffcanvasLabel">
<div class="offcanvas-header px-4 pb-0">
<h5 class="offcanvas-title text-white" id="bdNavbarOffcanvasLabel">Bootstrap</h5>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close" data-bs-target="#bdNavbar"></button>
</div>
<div class="offcanvas-body p-4 pt-0 p-lg-0">
<hr class="d-lg-none text-white-50">
<ul class="navbar-nav flex-row flex-wrap bd-navbar-nav">
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://getbootstrap.com/docs/5.2/getting-started/introduction/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Docs');">Docs</a>
</li>
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://getbootstrap.com/docs/5.2/examples/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Examples');">Examples</a>
</li>
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://icons.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Icons');" target="_blank" rel="noopener">Icons</a>
</li>
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://themes.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Themes');" target="_blank" rel="noopener">Themes</a>
</li>
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2 active" href="https://blog.getbootstrap.com/" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');" rel="noopener">Blog</a>
</li>
</ul>
<hr class="d-lg-none text-white-50">
<ul class="navbar-nav flex-row flex-wrap ms-md-auto">
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://github.com/twbs" target="_blank" rel="noopener">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" class="navbar-nav-svg" viewBox="0 0 512 499.36" role="img"><path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z"/></svg>
<small class="d-lg-none ms-2">GitHub</small>
</a>
</li>
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://twitter.com/getbootstrap" target="_blank" rel="noopener">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" class="navbar-nav-svg" viewBox="0 0 512 416.32" role="img"><path fill="currentColor" d="M160.83 416.32c193.2 0 298.92-160.22 298.92-298.92 0-4.51 0-9-.2-13.52A214 214 0 0 0 512 49.38a212.93 212.93 0 0 1-60.44 16.6 105.7 105.7 0 0 0 46.3-58.19 209 209 0 0 1-66.79 25.37 105.09 105.09 0 0 0-181.73 71.91 116.12 116.12 0 0 0 2.66 24c-87.28-4.3-164.73-46.3-216.56-109.82A105.48 105.48 0 0 0 68 159.6a106.27 106.27 0 0 1-47.53-13.11v1.43a105.28 105.28 0 0 0 84.21 103.06 105.67 105.67 0 0 1-47.33 1.84 105.06 105.06 0 0 0 98.14 72.94A210.72 210.72 0 0 1 25 370.84a202.17 202.17 0 0 1-25-1.43 298.85 298.85 0 0 0 160.83 46.92"/></svg>
<small class="d-lg-none ms-2">Twitter</small>
</a>
</li>
<li class="nav-item col-6 col-lg-auto">
<a class="nav-link py-2 px-0 px-lg-2" href="https://opencollective.com/bootstrap" target="_blank" rel="noopener">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" class="navbar-nav-svg" fill="currentColor" fill-rule="evenodd" viewBox="0 0 40 41" role="img"><title>Open Collective</title><path fill-opacity=".4" d="M32.8 21c0 2.4-.8 4.9-2 6.9l5.1 5.1c2.5-3.4 4.1-7.6 4.1-12 0-4.6-1.6-8.8-4-12.2L30.7 14c1.2 2 2 4.3 2 7z"/><path d="M20 33.7a12.8 12.8 0 0 1 0-25.6c2.6 0 5 .7 7 2.1L32 5a20 20 0 1 0 .1 31.9l-5-5.2a13 13 0 0 1-7 2z"/></svg>
<small class="d-lg-none ms-2">Open Collective</small>
</a>
</li>
</ul>
</div>
</div>
</nav>
</header>
<div class="container-xxl px-4 px-xxl-2">
<div class="d-lg-grid" id="content">
<div class="sidebar">
<div class="masthead py-5">
<div class="mb-4 text-center text-lg-start">
<a class="flex-shrink-0 mb-lg-3 link-dark text-decoration-none" href="/" aria-label="Bootstrap">
<img src="/assets/brand/bootstrap-logo-shadow.png" width="200" height="165" alt="Bootstrap" class="bd-booticon d-block mx-auto mb-3 mx-lg-0">
</a>
<div class="ms-3 ms-lg-0">
<h1 class="mb-1 mb-lg-2 f1 fw-600">The Bootstrap Blog</h1>
<p class="col-sm-8 col-lg-12 mx-auto mb-0 mb-lg-4">
News and announcements for all things <a href="https://getbootstrap.com/" title="Visit the Bootstrap docs">Bootstrap</a>,
including new releases, <a href="https://themes.getbootstrap.com/" title="Browse the official Bootstrap themes">Bootstrap Themes</a>,
and <a href="https://icons.getbootstrap.com/" title="Official open source Bootstrap Icons">Bootstrap Icons</a>.
</p>
</div>
</div>
<nav class="nav nav-pills justify-content-center flex-lg-column justify-content-lg-start gap-1 sidebar-nav">
<a class="nav-link d-flex align-items-center active fw-600" href="/">
<svg class="bi me-2 f5 bd-text-purple"><use xlink:href="#file-earmark-richtext"></use></svg>
All posts
</a>
<a class="nav-link d-flex align-items-center text-dark" href="/archive/">
<svg class="bi me-2 f5 text-primary"><use xlink:href="#archive"></use></svg>
Archive
</a>
<a class="nav-link d-flex align-items-center text-dark" href="/videos/">
<svg class="bi me-2 f5 text-info"><use xlink:href="#film"></use></svg>
Videos
</a>
<a class="nav-link d-flex align-items-center text-dark" href="https://blog.getbootstrap.com/feed.xml">
<svg class="bi me-2 f5 text-warning"><use xlink:href="#rss"></use></svg>
Subscribe
</a>
</nav>
<script async src="https://cdn.carbonads.com/carbon.js?serve=CKYIKKJJ&placement=bloggetbootstrapcom" id="_carbonads_js"></script>
</div>
</div>
<div class="main">
<div class="posts-container mx-auto my-5">
<div class="posts">
<div class="post">
<h1 class="post-title fw-600">
<a href="/2021/10/28/bootstrap-4.6.1/" class="text-decoration-none">
Bootstrap v4.6.1
</a>
</h1>
<div class="d-flex align-items-center mb-4 text-muted author-info">
<a class="d-flex align-items-center text-muted text-decoration-none" href="https://github.com/mdo" target="_blank" rel="noopener">
<img class="mb-0 me-2 rounded-2" srcset="https://github.com/mdo.png?size=32, https://github.com/mdo.png?size=64 2x"
src="https://github.com/mdo.png?size=32"
alt="" width="32" height="32">
<span>@mdo</span>
</a>
<span class="d-flex align-items-center ms-3" title="28 Oct 21 21:30 UTC">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="me-2" viewBox="0 0 16 16" role="img" fill="currentColor">
<path d="M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1z"/>
<path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/>
</svg>
October 28, 2021
</span>
</div>
<div class="ratio ratio-16x9">
<iframe src="https://www.youtube-nocookie.com/embed/wBl2QGAIx1s?rel=0&start=135" title="YouTube Video" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" width="760" height="570" allowfullscreen></iframe>
</div>
<p>Bootstrap v4.6.1 has finally arrived! Biggest change here is a re-implementation of our Sass division functions and updates from v5, as well as some accessibility improvements and general bug fixes.</p>
<p>Read on for the highlights or <a href="https://getbootstrap.com/docs/4.6/">head to the v4.6.x docs</a> to see the latest in action.</p>
<h2 id="whats-changed">What’s changed</h2>
<ul>
<li>Replace Sass division with multiplication and custom <code>divide()</code> function</li>
<li>fix(forms): input-group and validation icons</li>
<li>Fix minor visual bug in FF caused by moz-focusring</li>
<li>Adjust <code>SAFE_URL_PATTERN</code> regex for use with test method of regexes</li>
<li>Add <code>sms</code> in the <code>SAFE_URL_PATTERN</code> for sanitizer</li>
<li>Adjust feedback icon position and padding for <code>select.form-control</code></li>
<li>Carousel: use buttons, not links, for prev/next controls</li>
<li>v4: Sass docs for default variables</li>
<li>Handle complex expressions in <code>add()</code> & <code>subtract()</code></li>
<li>More concise improvements for <code>add()</code> and <code>subtract()</code></li>
<li>Remove aria-haspopup from dropdowns</li>
<li>Dropdown: support <code>.dropdown-item</code> wrapped in <code><li></code> tags</li>
<li>Update Node versions in JS tests (drop Node 10, add Node 16) and add variables for <code>vertical-align</code> in spinners</li>
<li>Replace Freenode with Libera IRC server</li>
<li>Fix repetition in the Navbar docs description</li>
<li>Enable <code>0.x</code> with negative margins in utilities</li>
<li>Remove print <code>thead</code> rule</li>
<li>Fix prevented <code>show</code> event disabling modals with fade class from being displayed again</li>
<li>Input group validation with custom-file input</li>
<li>Add eslint-plugin-qunit and tighten JS tests</li>
<li>Update our tests to Node 16 and npm 8</li>
<li>Disabled link cleanup</li>
</ul>
<p><a href="https://github.com/twbs/bootstrap/releases/tag/v4.6.1">Review the GitHub v4.6.1 release changelog</a> for more details.</p>
<h2 id="next-up">Next up</h2>
<p>We’ll be flipping back to v5 development after this release, focusing on v5.2.0 with some additional updates to using more CSS variables and other awesome features. Sometime after that, we hope to ship a v4.7.0 release with some additional backported features and improvements to v4.</p>
<p>Please keep the feedback coming on what we can improve, how our releases are performing, and any other suggestions.</p>
<h2 id="support-the-team">Support the team</h2>
<p>Visit our <a href="https://opencollective.com/bootstrap">Open Collective page</a> or our <a href="https://github.com/orgs/twbs/people">team members</a>’ GitHub profiles to help support the maintainers contributing to Bootstrap.</p>
</div><div class="post">
<h1 class="post-title fw-600">
<a href="/2021/10/13/bootstrap-icons-1-6-0/" class="text-decoration-none">
Bootstrap Icons v1.6.0
</a>
</h1>
<div class="d-flex align-items-center mb-4 text-muted author-info">
<a class="d-flex align-items-center text-muted text-decoration-none" href="https://github.com/mdo" target="_blank" rel="noopener">
<img class="mb-0 me-2 rounded-2" srcset="https://github.com/mdo.png?size=32, https://github.com/mdo.png?size=64 2x"
src="https://github.com/mdo.png?size=32"
alt="" width="32" height="32" loading="lazy">
<span>@mdo</span>
</a>
<span class="d-flex align-items-center ms-3" title="13 Oct 21 00:00 UTC">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="me-2" viewBox="0 0 16 16" role="img" fill="currentColor">
<path d="M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1z"/>
<path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/>
</svg>
October 13, 2021
</span>
</div>
<div class="ratio ratio-16x9">
<iframe class="lazy" data-src="https://www.youtube-nocookie.com/embed/sOS9aOIXPEk?rel=0" title="YouTube Video" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" width="760" height="570" allowfullscreen></iframe>
</div>
<p><a href="https://icons.getbootstrap.com">Bootstrap Icons v1.6.0</a> adds over 30 new icons, adds official Composer support, includes a new <code>.scss</code> stylesheet for the icon font, plus some other enhancements and bug fixes. Keep reading to see what’s new!</p>
<h2 id="1400-icons">1,400+ icons</h2>
<p>We’ve officially passed 1,400 glyphs in Bootstrap Icons with this release—woohoo! Seems utterly insane to me that the project has come this far and there are still so many more icons to include.</p>
<p><img src="/assets/img/2021/10/v160-new-updated-icons.png" class="d-block img-fluid mb-2 rounded border" alt="New icons in v1.6.0" loading="lazy" width="1104" height="784">
</p>
<p>We have a few dozen new and updated icons in this release, including:</p>
<ul>
<li>New brand icons for Apple, Behance, Dribbble, Line, Medium, Microsoft, PayPal, Pinterest, Signal, Snapchat, Spotify, Stack Overflow, Strava, Vimeo, Windows, and WordPress</li>
<li>Two new easel variations</li>
<li>New fingerprint icon</li>
<li>New magic stick</li>
<li>New people variations for rolodex, workspace, and video chat</li>
<li>New webcam icons</li>
<li>New radioactive icon</li>
<li>New fan icon</li>
<li>New hypnotize icon</li>
<li>New yin yang icon</li>
<li>New activity/pulse icon</li>
<li>Updated large dash, plus, slash, x, i, ?, !, and check icons to have a thinner stroke that better matches other icons</li>
<li>Updated lamp icons</li>
<li>Updated <code>graph-up</code> and <code>graph-down</code> icons, with the previous ones being renamed to <code>graph-up-arrow</code> and <code>graph-down-arrow</code></li>
</ul>
<h2 id="new-features">New features</h2>
<p>We’ve added a handful of new features and enhancements to how you can use Bootstrap Icons in this release:</p>
<ul>
<li>
<p><strong>Added Composer support</strong> with automatic publishing to Packagist. See the <a href="https://packagist.org/packages/twbs/bootstrap-icons">official package</a> for more information.</p>
</li>
<li>
<p><strong>Added new <code>bootstrap-icons.scss</code> stylesheet for the icon font.</strong> This includes font name and path variables, plus a Sass map of icon names and unicode values.</p>
</li>
<li>
<p><strong>Added new <code>.bi</code> CSS selector</strong> to the icon font ruleset (in addition to the attribute selectors we had through v1.5.0) to allow for easier <code>@extend</code>ing of icon styles. This has also been reflected in the new <code>.scss</code> stylesheet.</p>
</li>
</ul>
<p>Our next minor release will continue to see improvements to our icon permalink pages, adding more options for copying and pasting our icons. If you have other suggestions, please don’t hesitate to open a new issue!</p>
<h2 id="bug-fixes">Bug fixes</h2>
<p>We’ve fixed a few glitches with existing icons in this release:</p>
<ul>
<li><code>droplet-fill</code> now renders correctly thanks to an updated fill rule</li>
<li><code>lamp</code> and <code>lamp-fill</code> now look more like lamps and less like toilets 😅</li>
<li><code>coin</code> now renders correctly thanks to an updated fill rule</li>
<li><code>cloud</code> now renders correctly thanks to an updated fill rule</li>
<li><code>textarea-resize</code> is no longer incorrectly placed in the <code>viewBox</code></li>
</ul>
<p>Found another bug, or have a suggestion? Check out the issue tracker and open an issue if you don’t see one already opened.</p>
<h2 id="install">Install</h2>
<p>To get started, install or update via npm:</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh"><span class="line"><span class="cl">npm i bootstrap-icons
</span></span></code></pre></div><p>Or Composer:</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh"><span class="line"><span class="cl">composer require twbs/bootstrap-icons
</span></span></code></pre></div><p>You can also <a href="https://github.com/twbs/icons/releases/tag/v1.6.0">download the release from GitHub</a>, or <a href="https://github.com/twbs/icons/releases/download/v1.6.0/bootstrap-icons-1.6.0.zip">download just the SVGs and fonts</a> (without the rest of the repository files).</p>
<h2 id="figma">Figma</h2>
<p>The Figma file is now published to the Figma Community! It’s the same <a href="https://www.figma.com/file/cKgRyErzl4pR1WN4NcB5lv/Bootstrap-Icons">Bootstrap Icons Figma file</a> you’ve seen from previous releases, just a little more accessible to those using the app.</p>
</div><div class="post">
<h1 class="post-title fw-600">
<a href="/2021/10/05/bootstrap-5-1-2/" class="text-decoration-none">
Bootstrap 5.1.2
</a>
</h1>
<div class="d-flex align-items-center mb-4 text-muted author-info">
<a class="d-flex align-items-center text-muted text-decoration-none" href="https://github.com/mdo" target="_blank" rel="noopener">
<img class="mb-0 me-2 rounded-2" srcset="https://github.com/mdo.png?size=32, https://github.com/mdo.png?size=64 2x"
src="https://github.com/mdo.png?size=32"
alt="" width="32" height="32" loading="lazy">
<span>@mdo</span>
</a>
<span class="d-flex align-items-center ms-3" title="05 Oct 21 00:00 UTC">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="me-2" viewBox="0 0 16 16" role="img" fill="currentColor">
<path d="M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1z"/>
<path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/>
</svg>
October 05, 2021
</span>
</div>
<div class="ratio ratio-16x9">
<iframe class="lazy" data-src="https://www.youtube-nocookie.com/embed/HoQN7K6HdRw?rel=0" title="YouTube Video" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" width="760" height="570" allowfullscreen></iframe>
</div>
<p>Bootstrap v5.1.2 is here with a handful of improvements across our components, plus a fix for an issue in another project that prevented our Sass from compiling properly. Keep reading for the highlights.</p>
<h2 id="highlights">Highlights</h2>
<ul>
<li>Temporarily patched a <a href="https://github.com/shellscape/postcss-values-parser/issues/138">postcss-values-parser</a> issue by rearranging our <code>calc()</code> functions that use negative numbers. This should restore the ability to import and compile Bootstrap’s Sass in <code>create-react-app</code>.</li>
<li>Added <code>border-radius</code> sizes to small and large <code>.form-select</code>s</li>
<li>Added <code>align-self: center</code> to buttons for improved rendering in flex containers</li>
<li>Fixed Collapse regression that prevented toggling between sibling children</li>
<li>Updated JS Sanitizer to add <code>sms</code> in the <code>SAFE_URL_PATTERN</code></li>
<li>Improved docs around <code>.img-fluid</code></li>
<li>Added <code>role="switch"</code> to our form switches in our docs</li>
<li>Implemented GitHub Issue forms to replace our previous issue templates.</li>
</ul>
<h2 id="up-next">Up next</h2>
<p>Up next is our v5.2.0 release, adding more utility improvements and fixing an issue with how <a href="https://github.com/twbs/bootstrap/issues/34756">Sass handles re-assigned maps and variables</a>. Alongside that, we’ll be shipping an update to v4 soon as well.</p>
<h2 id="get-the-release">Get the release</h2>
<p><strong>Head to <a href="https://getbootstrap.com">https://getbootstrap.com</a> for the latest.</strong> It’s also been pushed to npm:</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh"><span class="line"><span class="cl">npm i bootstrap
</span></span></code></pre></div><p><a href="https://github.com/twbs/bootstrap/releases/tag/v5.1.2">Review the GitHub v5.1.2 release changelog</a> for a complete list of changes since our last release.</p>
<h2 id="support-the-team">Support the team</h2>
<p>Visit our <a href="https://opencollective.com/bootstrap">Open Collective page</a> or our <a href="https://github.com/orgs/twbs/people">team members</a>’ GitHub profiles to help support the maintainers contributing to Bootstrap.</p>
</div><div class="post">
<h1 class="post-title fw-600">
<a href="/2021/09/07/bootstrap-5-1-1/" class="text-decoration-none">
Bootstrap 5.1.1
</a>
</h1>
<div class="d-flex align-items-center mb-4 text-muted author-info">
<a class="d-flex align-items-center text-muted text-decoration-none" href="https://github.com/mdo" target="_blank" rel="noopener">
<img class="mb-0 me-2 rounded-2" srcset="https://github.com/mdo.png?size=32, https://github.com/mdo.png?size=64 2x"
src="https://github.com/mdo.png?size=32"
alt="" width="32" height="32" loading="lazy">
<span>@mdo</span>
</a>
<span class="d-flex align-items-center ms-3" title="07 Sep 21 00:00 UTC">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="me-2" viewBox="0 0 16 16" role="img" fill="currentColor">
<path d="M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1z"/>
<path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/>
</svg>
September 07, 2021
</span>
</div>
<div class="ratio ratio-16x9">
<iframe class="lazy" data-src="https://www.youtube-nocookie.com/embed/bRt5z880CFY?rel=0" title="YouTube Video" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" width="760" height="570" allowfullscreen></iframe>
</div>
<p>Bootstrap v5.1.1 has landed with a handful of bug fixes and documentation improvements. Following this release, we’ll be shipping another bugfix and docs update before moving onto additional new features. Keep reading for the highlights.</p>
<h2 id="highlights">Highlights</h2>
<ul>
<li><strong>Fixed broken <code>.bg-body</code> utility.</strong> This was caused by the same <code>--body-rgb</code> CSS variable for both text and background. <code>--body-rgb</code> is now split into <code>--body-color-rgb</code> and <code>--body-bg-rgb</code> for proper usage. <em>While this could be considered a breaking change, the current implementation was outright broken, so we’ve chosen to address this head-on.</em></li>
<li><strong>All CSS dist builds now include <code>_root.scss</code> and all our <code>:root</code>-level CSS variables.</strong> The goal here is consistency across the distribution files so that no matter what CSS build you use, you have the same level of customization potential.</li>
<li>Updated <a href="https://getbootstrap.com/docs/5.1/customize/options/">global options page</a> to document <code>$enable-smooth-scroll</code> variable.</li>
<li>Added callout to the <a href="https://getbootstrap.com/docs/5.1/helpers/stacks/">Stacks page</a> about <code>gap</code> browser support with flexbox.</li>
<li>Cleaned up documentation and usage of <a href="https://getbootstrap.com/docs/5.1/components/buttons/#disabled-state">disabled links</a>, especially for <code><a></code> based buttons.</li>
<li>Fixed toggle between modal regression. <a href="https://getbootstrap.com/docs/5.1/components/modal/#toggle-between-modals">See docs example.</a></li>
<li>Fixed regression in tooltips where content doesn’t update after the first <code>show()</code>.</li>
<li>Fixed collapse toggle unintentionally hiding descendant tab panels.</li>
<li>Improved Alerts live example documentation.</li>
<li>Updated <code>$dropdown-link-hover-color</code> to modify the <code>$dropdown-link-color</code> instead of base <code>$gray-900</code> variable for improved customization.</li>
<li>Clarified <a href="https://getbootstrap.com/docs/5.1/getting-started/webpack/#importing-javascript">JavaScript import usage</a> for our Webpack guide.</li>
</ul>
<h2 id="about-sass-compilers">About Sass compilers</h2>
<p>We’ve had a number of Visual Studio users mention that Sass compiling for Bootstrap 5.1.0 is broken when using the <a href="https://github.com/madskristensen/WebCompiler">Web Compiler extension</a>. This extension hasn’t been updated in more than five years, so we recommend moving to a newer alternative. Some users mentioned the <a href="https://github.com/madskristensen/SassCompiler">Sass Compiler extension</a> as a successful alternative. If you have additional recommendations, <a href="https://github.com/twbs/bootstrap/issues/34738">please leave a comment to share</a>.</p>
<h2 id="get-the-release">Get the release</h2>
<p><strong>Head to <a href="https://getbootstrap.com">https://getbootstrap.com</a> for the latest.</strong> It’s also been pushed to npm:</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-sh" data-lang="sh"><span class="line"><span class="cl">npm i bootstrap
</span></span></code></pre></div><p><a href="https://github.com/twbs/bootstrap/releases/tag/v5.1.1">Review the GitHub v5.1.1 release changelog</a> for a complete list of changes since our last release.</p>
<h2 id="support-the-team">Support the team</h2>
<p>Visit our <a href="https://opencollective.com/bootstrap">Open Collective page</a> or our <a href="https://github.com/orgs/twbs/people">team members</a>’ GitHub profiles to help support the maintainers contributing to Bootstrap.</p>
</div><div class="post">
<h1 class="post-title fw-600">
<a href="/2021/08/19/ten/" class="text-decoration-none">
Ten Years of Bootstrap
</a>
</h1>
<div class="d-flex align-items-center mb-4 text-muted author-info">
<a class="d-flex align-items-center text-muted text-decoration-none" href="https://github.com/mdo" target="_blank" rel="noopener">
<img class="mb-0 me-2 rounded-2" srcset="https://github.com/mdo.png?size=32, https://github.com/mdo.png?size=64 2x"
src="https://github.com/mdo.png?size=32"
alt="" width="32" height="32" loading="lazy">
<span>@mdo</span>
</a>
<span class="d-flex align-items-center ms-3" title="19 Aug 21 00:00 UTC">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="me-2" viewBox="0 0 16 16" role="img" fill="currentColor">
<path d="M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1z"/>
<path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/>
</svg>
August 19, 2021
</span>
</div>
<div class="ratio ratio-16x9">
<iframe class="lazy" data-src="https://www.youtube-nocookie.com/embed/KQ6zr6kCPj8?rel=0&start=85" title="YouTube Video" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" width="760" height="570" allowfullscreen></iframe>
</div>
<p><a href="https://blog.twitter.com/developer/en_us/a/2011/bootstrap-twitter">Ten years ago today</a>, we shipped the <a href="https://getbootstrap.com/1.0.0/">first release of Bootstrap</a>. Releasing it on GitHub was my first real plunge into open source—what an introduction! Here we are a decade later with one of the most widely used open source projects and frontend toolkits on the web. Happy birthday, Bootstrap—what a ride!</p>
<p>While numbers certainly don’t tell the whole story, Bootstrap has reached some incredible milestones over the past decade. Here are some highlights:</p>
<ul>
<li><strong>Over 2.5 billion pageviews for our docs.</strong> That’s more than 685,000 a day.</li>
<li><strong>394,000,000 <a href="https://npm-stat.com/charts.html?package=bootstrap&from=2011-08-01&to=2021-08-18">npm downloads</a></strong> since 2015—over 131 million of which were in 2020 alone. That’s 180,000 a day over the last six years.</li>
<li><strong>50 million RubyGems downloads</strong></li>
<li><strong>57 million <a href="https://www.nuget.org/packages/bootstrap/">NuGet downloads</a></strong></li>
<li><strong>7.5 million <a href="https://packagist.org/packages/twbs/bootstrap/stats">Packagist installs</a></strong></li>
<li><strong>Used by over <a href="https://w3techs.com/technologies/details/js-bootstrap">22% of all websites</a></strong></li>
<li>Used by 2.7 million projects on GitHub</li>
<li>Over 21,100 commits on GitHub with nearly 35,000 issues and pull requests</li>
</ul>
<p>Hidden in all those numbers are millions and millions of people that interact with Bootstrap just by visiting the sites and apps built with it. It’s still mind-blowing to see what’s been built with it after over the years, especially with how it all started.</p>
<p>Back in early 2011, the two of us were just a couple of nerds working at Twitter—Jacob was an engineer working on internal tools, me a product designer working on ads. Our paths crossed when the project I was working on needed to have its own internal tools app built for managing Twitter ad campaigns. Over a few months, we started working more and more together before ultimately deciding to release our project to the world.</p>
<p>Here we are 10 years later, still just a handful of nerds doing what we love, contributing to open source, and having an impact on people’s lives through our work. Bootstrap continues to be a passion project for me, from major rewrites to new features and from a growing <a href="https://icons.getbootstrap.com">icon library</a> to a full-blown <a href="https://themes.getbootstrap.com">marketplace</a>. It’s been an incredible journey, and one that’s still going strong thanks to the community’s love and the support of a small group of maintainers over the years.</p>
<p>The maintainers and contributors deserve the utmost thanks and appreciation. Please join me in thanking them—and every other open source maintainer!—whenever and however frequently you can. While this list can never fully represent all the contributions made to Bootstrap, I want to give a special shoutout to maintainers past and present, and some of the most prolific contributors.</p>
<ul>
<li><a href="https://github.com/xhmikosr">@xhmikosr</a></li>
<li><a href="https://github.com/martijncuppens">@martijncuppens</a></li>
<li><a href="https://github.com/johann-s">@johann-s</a></li>
<li><a href="https://github.com/patrickhlauke">@patrickhlauke</a></li>
<li><a href="https://github.com/geosot">@geosot</a></li>
<li><a href="https://github.com/rohit2sharma95">@rohit2sharma95</a></li>
<li><a href="https://github.com/alpadev">@alpadev</a></li>
<li><a href="https://github.com/ffoodd">@ffoodd</a></li>
<li><a href="https://github.com/cvrebert">@cvrebert</a></li>
<li><a href="https://github.com/andresgalante">@andresgalante</a></li>
<li><a href="https://github.com/ysds">@ysds</a></li>
<li><a href="https://github.com/thomas-mcdonald">@thomas-mcdonald</a></li>
<li><a href="https://github.com/glebm">@glebm</a></li>
<li><a href="https://github.com/zlatanvasovic">@zlatanvasovic</a></li>
<li><a href="https://github.com/hnrch02">@hnrch02</a></li>
<li><a href="https://github.com/juthilo">@juthilo</a></li>
<li><a href="https://github.com/bardiharborow">@bardiharborow</a></li>
<li><a href="https://github.com/coliff">@coliff</a></li>
<li><a href="https://github.com/vsn4ik">@vsn4ik</a></li>
<li><a href="https://github.com/supergibbs">@supergibbs</a></li>
</ul>
<p>Thank you again, folks. And to everyone who has used Bootstrap over the years, thank you for making a decade of building with Bootstrap possible. Cheers to whatever comes next, and see you soon for our next release.</p>
<p><3,<br>
<a href="https://twitter.com/mdo">@mdo</a></p>
</div>
</div>
<div class="pagination"><a class="pagination-item older" href="/page/4/">Older</a>
<a class="pagination-item newer" href="/page/2/">Newer</a>
</div>
</div>
</div>
</div>
</div>
<footer class="bd-footer py-4 py-md-5 mt-5 bg-light">
<div class="container py-4 py-md-5 px-4 px-md-3">
<div class="row">
<div class="col-lg-3 mb-3">
<a class="d-inline-flex align-items-center mb-2 link-dark text-decoration-none" href="/" aria-label="Bootstrap">
<svg xmlns="http://www.w3.org/2000/svg" width="40" height="32" class="d-block me-2" viewBox="0 0 118 94" role="img"><path fill-rule="evenodd" clip-rule="evenodd" d="M24.509 0c-6.733 0-11.715 5.893-11.492 12.284.214 6.14-.064 14.092-2.066 20.577C8.943 39.365 5.547 43.485 0 44.014v5.972c5.547.529 8.943 4.649 10.951 11.153 2.002 6.485 2.28 14.437 2.066 20.577C12.794 88.106 17.776 94 24.51 94H93.5c6.733 0 11.714-5.893 11.491-12.284-.214-6.14.064-14.092 2.066-20.577 2.009-6.504 5.396-10.624 10.943-11.153v-5.972c-5.547-.529-8.934-4.649-10.943-11.153-2.002-6.484-2.28-14.437-2.066-20.577C105.214 5.894 100.233 0 93.5 0H24.508zM80 57.863C80 66.663 73.436 72 62.543 72H44a2 2 0 01-2-2V24a2 2 0 012-2h18.437c9.083 0 15.044 4.92 15.044 12.474 0 5.302-4.01 10.049-9.119 10.88v.277C75.317 46.394 80 51.21 80 57.863zM60.521 28.34H49.948v14.934h8.905c6.884 0 10.68-2.772 10.68-7.727 0-4.643-3.264-7.207-9.012-7.207zM49.948 49.2v16.458H60.91c7.167 0 10.964-2.876 10.964-8.281 0-5.406-3.903-8.178-11.425-8.178H49.948z" fill="currentColor"/></svg>
<span class="fs-5">Bootstrap</span>
</a>
<ul class="list-unstyled small text-muted">
<li class="mb-2">Designed and built with all the love in the world by the <a href="https://getbootstrap.com/docs/5.2/about/team/">Bootstrap team</a> with the help of <a href="https://github.com/twbs/blog/graphs/contributors">our contributors</a>.</li>
</ul>
</div>
<div class="col-6 col-lg-2 offset-lg-1 mb-3">
<h5>Links</h5>
<ul class="list-unstyled">
<li class="mb-2"><a href="https://getbootstrap.com/">Home</a></li>
<li class="mb-2"><a href="https://getbootstrap.com/docs/5.2/">Docs</a></li>
<li class="mb-2"><a href="https://getbootstrap.com/docs/5.2/examples/">Examples</a></li>
<li class="mb-2"><a href="https://icons.getbootstrap.com/">Icons</a></li>
<li class="mb-2"><a href="https://themes.getbootstrap.com/">Themes</a></li>
<li class="mb-2"><a href="https://blog.getbootstrap.com/">Blog</a></li>
<li class="mb-2"><a href="">Swag Store</a></li>
</ul>
</div>
<div class="col-6 col-lg-2 mb-3">
<h5>Guides</h5>
<ul class="list-unstyled">
<li class="mb-2"><a href="https://getbootstrap.com/docs/5.2/getting-started/">Getting started</a></li>
<li class="mb-2"><a href="https://getbootstrap.com/docs/5.2/examples/starter-template/">Starter template</a></li>
<li class="mb-2"><a href="https://getbootstrap.com/docs/5.2/getting-started/webpack/">Webpack</a></li>
<li class="mb-2"><a href="https://getbootstrap.com/docs/5.2/getting-started/parcel/">Parcel</a></li>
<li class="mb-2"><a href="https://getbootstrap.com/docs/5.2/getting-started/vite/">Vite</a></li>
</ul>
</div>
<div class="col-6 col-lg-2 mb-3">
<h5>Projects</h5>
<ul class="list-unstyled">
<li class="mb-2"><a href="https://github.com/twbs/bootstrap">Bootstrap 5</a></li>
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/tree/v4-dev">Bootstrap 4</a></li>
<li class="mb-2"><a href="https://github.com/twbs/icons">Icons</a></li>
<li class="mb-2"><a href="https://github.com/twbs/rfs">RFS</a></li>
<li class="mb-2"><a href="https://github.com/twbs/bootstrap-npm-starter">npm starter</a></li>
</ul>
</div>
<div class="col-6 col-lg-2 mb-3">
<h5>Community</h5>
<ul class="list-unstyled">
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/issues">Issues</a></li>
<li class="mb-2"><a href="https://github.com/twbs/bootstrap/discussions">Discussions</a></li>
<li class="mb-2"><a href="https://github.com/sponsors/twbs">Corporate sponsors</a></li>
<li class="mb-2"><a href="https://opencollective.com/bootstrap">Open Collective</a></li>
<li class="mb-2"><a href="https://stackoverflow.com/questions/tagged/bootstrap-5">Stack Overflow</a></li>
</ul>
</div>
</div>
</div>
</footer>
<script async src="/js/bootstrap.min.js"></script>
<script>
(function(w, d) {
var b = d.getElementsByTagName('body')[0];
var s = d.createElement('script');
var io = 'IntersectionObserver' in w && 'IntersectionObserverEntry' in w &&
'intersectionRatio' in w.IntersectionObserverEntry.prototype &&
'isIntersecting' in w.IntersectionObserverEntry.prototype;
var v = io ? '17.x' : '8.x';
s.async = true;
s.src = '/assets/js/vendor/lazyload.' + v + '.iife.min.js';
w.lazyLoadOptions = {
elements_selector: '.lazy',
threshold: 150
};
b.appendChild(s);
}(window, document));
</script>
</body>
</html>
|
