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
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
|
<!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="/2020/12/07/bootstrap-5-beta-1/" class="text-decoration-none">
Bootstrap 5 Beta 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="07 Dec 20 11: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>
December 07, 2020
</span>
</div>
<div class="ratio ratio-16x9">
<iframe src="https://www.youtube-nocookie.com/embed/y2bVIBwpCTA?rel=0" title="YouTube Video" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" width="760" height="570" allowfullscreen></iframe>
</div>
<p>With our first beta release of Bootstrap 5, we’re calling it on new features and breaking changes. From here on out, we’re only fine-tuning features, bugs, and documentation on our way to a stable v5 release. Woohoo!</p>
<p>Just like with the v4 development process, our docs for v5 have been temporarily hosted on a subdomain for the next major release. Starting today, those docs are being moved to the main domain and our old <code>v5.getbootstrap.com</code> domain will redirect.</p>
<p>There are some really awesome new features—RTL!—that have been added in this release, and they’ve come with some important changes. Keep reading for the lowdown and let us know what you think!</p>
<h2 id="rtl">RTL</h2>
<p><a href="https://getbootstrap.com/docs/5.0/getting-started/rtl/"><img src="/assets/img/2020/12/rtl-docs.png" class="d-block img-fluid mb-2 rounded border" alt="Bootstrap RTL docs" loading="lazy" width="1280" height="800">
</a></p>
<p>Our biggest addition to the project in years, we’ve finally added RTL support to Bootstrap! Please join me in giving @ffoodd—one of our newest contributors and author of the RTL pull request—a massive thank you. <a href="https://github.com/twbs/bootstrap/pull/30980">The pull request</a> includes nearly 50 references to existing issues and PRs that have tried to implement the feature into our core.</p>
<p>At a high level, our RTL approach includes a handful of changes:</p>
<ul>
<li>
<p><strong>New RTL versions of our CSS dist file</strong>, which includes our grid, Reboot, utilities, and standard bundles. <a href="https://getbootstrap.com/docs/5.0/getting-started/contents/">See the Contents page for a full list of files.</a></p>
</li>
<li>
<p><strong><a href="https://getbootstrap.com/docs/5.0/getting-started/rtl/">New RTL documentation</a></strong> to help you get started.</p>
</li>
<li>
<p><strong><a href="https://getbootstrap.com/docs/5.0/examples/#rtl">Five new RTL Examples</a></strong> that show our new RTL CSS in action, converting our Album, Checkout, Carousel, Blog, and Dashboard examples into all new right-to-left equivalents.</p>
</li>
<li>
<p><strong>Two new cheatsheet kitchen sink pages</strong>—the <a href="https://getbootstrap.com/docs/5.0/examples/cheatsheet/">default cheatsheet</a> for our standard CSS and the <a href="https://getbootstrap.com/docs/5.0/examples/cheatsheet-rtl/">RTL cheatsheet</a>.</p>
</li>
</ul>
<p>Our approach is built on <a href="https://rtlcss.com/">RTLCSS</a>, an awesome project that helps reprocess an existing LTR stylesheet for RTL. We’ve classified it as an experimental feature for now, anticipating that we’ll get some of this wrong. We’re looking to the community to help us round out the feature as we wrap up some remaining todos.</p>
<p><a href="https://github.com/twbs/bootstrap/issues/32330">This issue</a> has some outstanding todos already planned for our team to address. See something else we can improve? Please consider opening an issue or pull request.</p>
<p><a href="https://getbootstrap.com/docs/5.0/getting-started/rtl/">Read up on RTL in Bootstrap in our docs</a>, including required HTML changes, a starter template, details on our approach, and more.</p>
<h2 id="renamed-classes-for-logical-properties">Renamed classes for logical properties</h2>
<p>Part of our approach to adding RTL to Bootstrap was to add it in a way that felt future-friendly to ourselves and the web at large. As such, we’ve embraced the spirit of CSS logical properties and <strong>have renamed several classes and variables</strong>. It’s a risky change because of the size and impact of the change, but we hope you’ll appreciate it overall!</p>
<p>Most of you have already interacted with logical properties thanks to our flex utilities—they replace direction properties like <code>left</code> and <code>right</code> in favor <code>start</code> and <code>end</code>. Things like <code>align-items-end</code> have been welcomed additions. This makes horizontal directional class names appropriate for LTR and RTL without any additional overhead moving forward.</p>
<p>For example, in a LTR context, instead of <code>.ml-3</code> for <code>margin-left</code>, use <code>.ms-3</code>. Be sure to <a href="https://getbootstrap.com/docs/5.0/migration/#rtl">read the RTL Migration guide</a> for a full list of renamed classes and variables.</p>
<h2 id="popperjs-v2">Popper.js v2</h2>
<p><img src="/assets/img/2020/12/popper-header.png" class="d-block img-fluid mb-2 rounded border" alt="Popper.js" loading="lazy" width="1520" height="834">
</p>
<p>We’ve upgraded <a href="https://popper.js.org">Popper.js</a> from v1.x to v2.x, bringing with it some small breaking changes to our tooltips and popovers. These two changes are why we haven’t been able to update to v2.x sooner.</p>
<ul>
<li>Removed <code>offset</code> option from our Tooltip/Popover and Dropdown plugins; this can still be achieved using the <code>popperConfig</code> parameter.</li>
<li>The <code>fallbackPlacement</code> option has become <code>fallbackPlacements</code>.</li>
</ul>
<p>Popper.js v2 also comes with a smaller file size for our primary dependency, updated positioning calculations, and much more. Beyond that, our tooltips and popovers are unchanged and just as powerful.</p>
<h2 id="namespaced-data-attributes">Namespaced data attributes</h2>
<p>We’ve renamed all our <code>data</code> attributes to include <code>bs</code> as an infix, thereby namespacing all the HTML attributes that enable JavaScript behaviors from our plugins. <a href="https://github.com/twbs/bootstrap/pull/31827">See #31827</a> for details. It helps keep Bootstrap-required JavaScript triggers clearly identified throughout your projects.</p>
<p>Making this change is a tad annoying, but easy enough to remedy with a find and replace. The new attributes work just like the old ones, just a little more specific. For example, here’s a dropdown button and menu with the newly renamed <code>data-bs-toggle</code> attribute.</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown"</span><span class="p">></span>
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">button</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-secondary dropdown-toggle"</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">id</span><span class="o">=</span><span class="s">"dropdownMenuButton"</span> <span class="na">data-bs-toggle</span><span class="o">=</span><span class="s">"dropdown"</span> <span class="na">aria-expanded</span><span class="o">=</span><span class="s">"false"</span><span class="p">></span>
</span></span><span class="line"><span class="cl"> Dropdown button
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">button</span><span class="p">></span>
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">ul</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-menu"</span> <span class="na">aria-labelledby</span><span class="o">=</span><span class="s">"dropdownMenuButton"</span><span class="p">></span>
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-item"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">></span>Action<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">li</span><span class="p">></span>
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-item"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">></span>Another action<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">li</span><span class="p">></span>
</span></span><span class="line"><span class="cl"> <span class="p"><</span><span class="nt">li</span><span class="p">><</span><span class="nt">a</span> <span class="na">class</span><span class="o">=</span><span class="s">"dropdown-item"</span> <span class="na">href</span><span class="o">=</span><span class="s">"#"</span><span class="p">></span>Something else here<span class="p"></</span><span class="nt">a</span><span class="p">></</span><span class="nt">li</span><span class="p">></span>
</span></span><span class="line"><span class="cl"> <span class="p"></</span><span class="nt">ul</span><span class="p">></span>
</span></span><span class="line"><span class="cl"><span class="p"></</span><span class="nt">div</span><span class="p">></span>
</span></span></code></pre></div><h2 id="new-toast-positioning">New toast positioning</h2>
<p><img src="/assets/img/2020/12/toast-position-docs.png" class="d-block img-fluid mb-2 rounded border" alt="Popper.js" loading="lazy" width="1556" height="752">
</p>
<p>After dabbling in some JavaScript solutions to <a href="https://getbootstrap.com/docs/5.0/components/toasts/#placement">positioning toasts</a>, we’ve landed on a new CSS-only approach thanks to our <a href="https://getbootstrap.com/docs/5.0/utilities/position/">new positioning utilities</a>. This comes with some minor breaking changes—namely some changes to exact CSS properties and how we toggle visibility of the toasts—but largely keeps them intact.</p>
<p>Our docs have been updated to include a <a href="https://getbootstrap.com/docs/5.0/components/toasts/#placement">new position preview picker</a>, too, so you can see them in action. <a href="https://github.com/twbs/bootstrap/pull/32280/">See the pull request for more details.</a></p>
<h2 id="js-enhancements">JS enhancements</h2>
<p>Beyond the namespacing, we’ve been chipping away at a few other JavaScript improvements and bug fixes. Here’s a rundown of what’s new:</p>
<ul>
<li>Created a new base component to share logic across our components. <a href="https://github.com/twbs/bootstrap/pull/29370">See #29370.</a></li>
<li>Migrate to more modern APIs across our plugins. <a href="https://github.com/twbs/bootstrap/pull/32095">See #32095.</a></li>
<li>Tooltips and popovers can now have custom classes. <a href="https://github.com/twbs/bootstrap/pull/32217">See #32217.</a></li>
<li>Don’t hide modal when <code>config.keyboard</code> is false. <a href="https://github.com/twbs/bootstrap/pull/32179">See #32179.</a></li>
</ul>
<p>More JavaScript updates are coming soon, from performance and file-size improvements to new features.</p>
<h2 id="states-in-the-utilities-api">States in the utilities API</h2>
<p>One of the biggest new features of Bootstrap 5 is our utilities API, an extensible way to customize, add, or remove Bootstrap utilities. We’ve been iterating along the way and our newest improvement is the ability to add pseudo-class variants with the <code>state</code> option.</p>
<p>Use the <code>state</code> option to generate pseudo-class variations. Example pseudo-classes are <code>:hover</code> and <code>:focus</code>. When a list of states are provided, classnames are created for that pseudo-class. For example, to change opacity on hover, add <code>state: hover</code> and you’ll get <code>.opacity-hover:hover</code> in your compiled CSS.</p>
<p>Need multiple pseudo-classes? Use a space-separated list: <code>state: hover focus</code>.</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-scss" data-lang="scss"><span class="line"><span class="cl"><span class="nv">$utilities</span><span class="o">:</span> <span class="p">(</span>
</span></span><span class="line"><span class="cl"> <span class="s2">"opacity"</span><span class="o">:</span> <span class="p">(</span>
</span></span><span class="line"><span class="cl"> <span class="na">property</span><span class="o">:</span> <span class="ni">opacity</span><span class="o">,</span>
</span></span><span class="line"><span class="cl"> <span class="na">class</span><span class="o">:</span> <span class="ni">opacity</span><span class="o">,</span>
</span></span><span class="line"><span class="cl"> <span class="na">state</span><span class="o">:</span> <span class="n">hover</span><span class="o">,</span>
</span></span><span class="line"><span class="cl"> <span class="na">values</span><span class="o">:</span> <span class="p">(</span>
</span></span><span class="line"><span class="cl"> <span class="na">0</span><span class="o">:</span> <span class="mi">0</span><span class="o">,</span>
</span></span><span class="line"><span class="cl"> <span class="na">25</span><span class="o">:</span> <span class="mf">.25</span><span class="o">,</span>
</span></span><span class="line"><span class="cl"> <span class="na">50</span><span class="o">:</span> <span class="mf">.5</span><span class="o">,</span>
</span></span><span class="line"><span class="cl"> <span class="na">75</span><span class="o">:</span> <span class="mf">.75</span><span class="o">,</span>
</span></span><span class="line"><span class="cl"> <span class="na">100</span><span class="o">:</span> <span class="mi">1</span><span class="o">,</span>
</span></span><span class="line"><span class="cl"> <span class="p">)</span>
</span></span><span class="line"><span class="cl"> <span class="p">)</span>
</span></span><span class="line"><span class="cl"><span class="p">);</span>
</span></span></code></pre></div><p>Which outputs to:</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-css" data-lang="css"><span class="line"><span class="cl"><span class="p">.</span><span class="nc">opacity-0-hover</span><span class="p">:</span><span class="nd">hover</span> <span class="p">{</span> <span class="k">opacity</span><span class="p">:</span> <span class="mi">0</span><span class="p">;</span> <span class="p">}</span>
</span></span><span class="line"><span class="cl"><span class="p">.</span><span class="nc">opacity-25-hover</span><span class="p">:</span><span class="nd">hover</span> <span class="p">{</span> <span class="k">opacity</span><span class="p">:</span> <span class="mf">.25</span><span class="p">;</span> <span class="p">}</span>
</span></span><span class="line"><span class="cl"><span class="p">.</span><span class="nc">opacity-50-hover</span><span class="p">:</span><span class="nd">hover</span> <span class="p">{</span> <span class="k">opacity</span><span class="p">:</span> <span class="mf">.5</span><span class="p">;</span> <span class="p">}</span>
</span></span><span class="line"><span class="cl"><span class="p">.</span><span class="nc">opacity-75-hover</span><span class="p">:</span><span class="nd">hover</span> <span class="p">{</span> <span class="k">opacity</span><span class="p">:</span> <span class="mf">.75</span><span class="p">;</span> <span class="p">}</span>
</span></span><span class="line"><span class="cl"><span class="p">.</span><span class="nc">opacity-100-hover</span><span class="p">:</span><span class="nd">hover</span> <span class="p">{</span> <span class="k">opacity</span><span class="p">:</span> <span class="mi">1</span><span class="p">;</span> <span class="p">}</span>
</span></span></code></pre></div><p><a href="https://github.com/twbs/bootstrap/pull/31643">See #31643</a> for more context on the change.</p>
<h2 id="and-more">And more…</h2>
<p>Elsewhere we’ve made a handful of other breaking changes and improvements. The most notable updates include:</p>
<ul>
<li>
<p><strong>Breaking:</strong> Renamed <code>scale-color()</code> function to <code>shift-color()</code> . <a href="https://github.com/twbs/bootstrap/pull/32149">See #32149.</a></p>
</li>
<li>
<p><strong>Breaking:</strong> Simplified the <code>make-container()</code> mixin and <code>$container-padding-x</code>. <a href="https://github.com/twbs/bootstrap/pull/31735">See #31735.</a></p>
</li>
<li>
<p><strong>Fixed:</strong> Corners remain rounded now in vertical button groups. <a href="https://github.com/twbs/bootstrap/pull/31303">See #31303.</a></p>
</li>
<li>
<p><strong>Fixed:</strong> Removed default linear gradient on some table rows that caused undesirable performance. Still more work to do here FYI. <a href="https://github.com/twbs/bootstrap/pull/32277">See #32277.</a></p>
</li>
<li>
<p><strong>Updated:</strong> Breadcrumbs now have a simplified appearance. Use utilities to restore the <code>padding</code>, <code>background-color</code>, and <code>border-radius</code> as desired. <a href="https://github.com/twbs/bootstrap/pull/32249">See #32249.</a></p>
</li>
<li>
<p><strong>Updated:</strong> Finalized browserslist configuration to match our supported browsers. <a href="https://github.com/twbs/bootstrap/pull/30986">See #30986.</a></p>
</li>
</ul>
<p>For a more complete list of of changes, checkout the <a href="https://github.com/twbs/bootstrap/projects/26">v5 Beta project board</a> or <a href="https://github.com/twbs/bootstrap/issues?q=is%3Aclosed+project%3Atwbs%2Fbootstrap%2F26+">list of issues and PRs</a> in this <a href="https://github.com/twbs/bootstrap/releases/tag/v5.0.0-beta1">release</a>.</p>
<h2 id="get-started">Get started</h2>
<p><strong>Head to <a href="https://getbootstrap.com">https://getbootstrap.com</a> to explore the new release.</strong> We’ve also published this updated as a pre-release to npm, so if you’re feeling bold or are curious about what’s new, you can pull the latest in that way.</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@next
</span></span></code></pre></div><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="/2020/11/11/bootstrap-5-alpha-3/" class="text-decoration-none">
Bootstrap 5 Alpha 3
</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="11 Nov 20 11: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>
November 11, 2020
</span>
</div>
<div class="ratio ratio-16x9">
<iframe class="lazy" data-src="https://www.youtube-nocookie.com/embed/god7hAPv8f0?rel=0" title="YouTube Video" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" width="760" height="570" allowfullscreen></iframe>
</div>
<p>Our third alpha release has landed with tons of updates to our components, utilities, docs, forms, JavaScript, and more. This is a larger alpha release for us and sets us up for our first beta where we’ll introduce some final breaking changes and features.</p>
<p>We’re trying to move fast and keep the future of the project and the web in general in mind, so this release is an important milestone for us. We’re balancing practical migration from v4 with meaningful changes that reflect the ever-changing front-end community.</p>
<p>We think you’ll love this release, so keep on reading and let us know what you think!</p>
<h2 id="components">Components</h2>
<p>We’ve improved a handful of components in this release, and even dropped one for some new and improved utilities.</p>
<h3 id="new-accordion">New accordion</h3>
<p>We’ve dropped the <code>.card</code> based accordion for a brand new <code>.accordion</code> component, solving several bugs in the process. Our new accordion still uses the Collapse JavaScript plugin, but with custom HTML and CSS to support it, it’s better and easier than ever to use.</p>
<p><img src="/assets/img/2020/11/accordion.png" class="d-block img-fluid mb-2 rounded border" alt="New Bootstrap accordion" loading="lazy" width="1510" height="626">
</p>
<p>The new accordion includes Bootstrap Icons as chevron icons indicating state and click-ability. We’ve included support for a flush accordion (add <code>.accordion-flush</code>) to remove the outer borders, allowing for easier placement inside parent elements.</p>
<p><a href="https://github.com/twbs/bootstrap/pull/32013">See the PR</a> for extra details on what’s new, or <a href="https://v5.getbootstrap.com/docs/5.0/components/accordion/">visit the new docs page</a>.</p>
<h3 id="new-block-buttons">New block buttons</h3>
<p><img src="/assets/img/2020/11/block-buttons.png" class="d-block img-fluid mb-2 rounded border" alt="New block buttons" loading="lazy" width="1614" height="550">
</p>
<p>Block buttons are no more in v5—we’ve dropped the <code>.btn-block</code> class for <code>.d-grid</code> and <code>.gap-*</code> utilities. This allows for the same behavior and style, but with much greater control over spacing, alignment, and even responsive layout options.</p>
<p><a href="https://v5.getbootstrap.com/docs/5.0/components/buttons/#block-buttons">See the buttons docs page for details.</a></p>
<h2 id="docs-improvements">Docs improvements</h2>
<p>We’re always looking for new ways to improve our documentation, and this release is no different. We have a ton of changes big and small.</p>
<p><img src="/assets/img/2020/11/docs-search.png" class="d-block img-fluid mb-2 rounded border" alt="Docs search" loading="lazy" width="1480" height="900">
</p>
<p>We’ve added a keyboard shortcut to focus you on the search field. Hit <kbd>Ctrl</kbd> + <kbd>/</kbd> to trigger it.</p>
<p>We’ve also rewritten the docs sidebar to use actual <code><button></code> elements instead of anchors, and improved the focus styling.</p>
<p>Content-wise, we’ve renamed the “Navs” page to “Navs & Tabs” to help folks find our tab JavaScript features better. We’ve also made some style changes, improving the focus styles of heading anchor links and removing text wrapping from code snippets for shorter and easier to read code.</p>
<h2 id="sass">Sass</h2>
<p>Three important and helpful changes to our Sass source code:</p>
<ul>
<li>
<p>We’ve switched to Dart Sass with LibSass being deprecated. We’ve been testing our builds with Dart Sass for a while and decided to make the switch with LibSass being deprecated just a couple of weeks ago. We’re holding on the Sass modules for now.</p>
</li>
<li>
<p>The color system which worked with <code>color-level()</code> and <code>$theme-color-interval</code> was removed in favor of a new color system. All <code>lighten()</code> and <code>darken()</code> functions in our codebase are replaced by <code>tint-color()</code> and <code>shade-color()</code>. These functions will mix the color with either white or black instead of changing its lightness by a fixed amount. The <code>scale-color()</code> will either tint or shade a color depending on whether its weight parameter is positive or negative. <a href="https://github.com/twbs/bootstrap/pull/30622">See #30622</a> for more details.</p>
</li>
<li>
<p>We’ve added a Sass variable for CSS custom property prefixes.</p>
</li>
</ul>
<h2 id="js">JS</h2>
<p>Ahead of some larger and necessary JavaScript changes in Beta 1, we’ve shipped a few updates to our plugins.</p>
<ul>
<li>Simplified dropdown’s placement</li>
<li>Removed redundant polyfills since we dropped IE and Legacy Edge</li>
<li>Fixed the carousel <code>data-interval</code> bug by checking for <code>data-interval</code> on the first slide</li>
<li>Removed <code>Manipulator.toggleClass</code> to simplify some code since we only used it one place</li>
</ul>
<h2 id="utilities">Utilities</h2>
<p>Utility classes are incredibly powerful in Bootstrap, especially with our new <a href="https://v5.getbootstrap.com/docs/5.0/utilities/api/">utilities API</a>.</p>
<p><img src="/assets/img/2020/11/utilities-api-docs.png" class="d-block img-fluid mb-2 rounded border" alt="New utilities API docs" loading="lazy" width="3048" height="2064">
</p>
<p>With our first beta, we’ve overhauled our API docs to provide clearer examples and information on adding, modifying, removing, and extending our default utilities.</p>
<p>In addition, we’ve added some new default utilities to make life a little easier:</p>
<ul>
<li>Added <code>.d-grid</code> for <code>display: grid</code></li>
<li>Added <code>.fs</code> utilities for <code>font-size</code></li>
<li>Renamed <code>font-weight</code> utilities to <code>.fw</code></li>
<li>Added <code>.rounded-1</code>, <code>.rounded-2</code>, and <code>.rounded-3</code> for new small, medium, and large <code>border-radius</code> utilities</li>
<li>Added <code>.overflow-visible</code> and <code>.overflow-scroll</code> utilities</li>
</ul>
<p>Our next release will also add another powerful feature to our utilities, pseudo-class support!</p>
<h2 id="forms">Forms</h2>
<p>Forms have some exciting changes thanks to the addition of floating labels as a fully-fledged form layout option and a new file input.</p>
<h3 id="floating-labels">Floating labels</h3>
<p><img src="/assets/img/2020/11/floating-forms.png" class="d-block img-fluid mb-2 rounded border" alt="New floating labels" loading="lazy" width="1610" height="216">
</p>
<p><a href="https://v5.getbootstrap.com/docs/5.0/forms/floating-labels/">Floating labels</a> include support for textual inputs, selects, and textareas. We have one limitation with textareas where multiple lines of text can be obscured by the floating label. We’re working on fixes for this, so if you have ideas, please let us know!</p>
<h3 id="new-file-input">New file input</h3>
<p><img src="/assets/img/2020/11/file-input.png" class="d-block img-fluid mb-2 rounded border" alt="New file input" loading="lazy" width="1610" height="934">
</p>
<p>We’ve dropped our custom <code>.form-file</code> class for additional styles on the <code>.form-control</code> class. This means we no longer require additional JavaScript to make our file input styles functional—the <a href="https://v5.getbootstrap.com/docs/5.0/forms/form-control/#file-input">new form file</a> is all CSS!</p>
<h3 id="input-group-rounded-corners">Input group rounded corners</h3>
<p>Beyond that, we’ve finally resolved ourselves to adding a new class to fix the rounded corners on input groups when using validation. Add the <code>.has-feedback</code> class to the <code>.input-group</code> to enable validation messages inside input groups without any visual regressions. The good news is this is also being <a href="https://github.com/twbs/bootstrap/pull/31953">backported to v4</a> in our next release.</p>
<h3 id="and-more">And more</h3>
<p>In addition, we’ve made a few other form-related improvements:</p>
<ul>
<li>Removed explicit <code>height</code> from most of our form controls.</li>
<li>Fixed the disabled checkbox toggle buttons</li>
<li>Added docs examples for disabled <code>.form-control</code>, <code>.form-select</code>, and <code>.form-range</code> elements</li>
</ul>
<p>Have some form feature requests or improvements we should consider? Please open an issue!</p>
<h2 id="quality-of-life">Quality of life</h2>
<p>Lastly, across the board we’ve made some minor updates to browser support, Reboot styling, components, and more</p>
<ul>
<li>Moved our preferred CDN from BootstrapCDN to jsDelivr</li>
<li>Dropped support for Legacy Edge (woohoo!)</li>
<li>Updated to Node.js 14 and PostCSS 8.x</li>
<li>Removed obsolete prefixes in our CSS</li>
<li>Added <code>cursor: pointer</code> and heights to color inputs</li>
<li>Removed <code>background-clip</code> on <code>.btn-close</code> so the <code>background-image</code> is no longer clipped</li>
<li>Improved <code>sans-serif</code> font selection in Ubuntu</li>
<li>Spinners now slow down when reduced motion is enabled rather than stopping outright</li>
<li>Fix inconsistent whitespace in breadcrumbs</li>
</ul>
<p>See all the changes in the <a href="https://github.com/twbs/bootstrap/projects/22">v5 Alpha 3 project board</a> and <a href="https://github.com/twbs/bootstrap/releases/tag/v5.0.0-alpha3">v5 alpha 3 release changelog</a>. Be sure to <a href="https://v5.getbootstrap.com/docs/5.0/migration/">read the Migration guide</a> for details on what’s changed since Alpha 2.</p>
<h2 id="coming-in-beta-1">Coming in Beta 1</h2>
<p>Beta 1 will be a more narrowly focused release and we’re hoping to ship these final breaking changes as part of it.</p>
<ul>
<li>
<p><strong>RTL!</strong> <a href="https://github.com/twbs/bootstrap/pull/30980">RTL is still coming!</a> The PR is being reviewed by our team would like it to land in Beta 1 to ensure we can get some testing from the community.</p>
</li>
<li>
<p><strong>Updating to Popper.js v2.</strong> Still on our radar, but moving slower than we anticipated due to some of the differences in the major release. <a href="https://github.com/twbs/bootstrap/pull/31178">See the PR for details.</a></p>
</li>
<li>
<p><strong>Namespaced data attributes</strong> to help keep our functionality clearly separated from your own. <a href="https://github.com/twbs/bootstrap/pull/31827">See the PR.</a></p>
</li>
<li>
<p><strong>Updated utilities API with pseudo-classes support via a <code>state</code> option.</strong> Add any space-separated list of states to get additional utilities for that pseudo-class. <a href="https://github.com/twbs/bootstrap/pull/31643">See the work-in-progress PR for details.</a></p>
</li>
</ul>
<p>For a more up to date list of changes, be sure to follow along with the <a href="https://github.com/twbs/bootstrap/projects/26">v5 Beta project board</a>.</p>
<h2 id="get-started">Get started</h2>
<p><strong>Head to <a href="https://v5.getbootstrap.com">https://v5.getbootstrap.com</a> to explore the new release.</strong> We’ve also published this updated as a pre-release to npm, so if you’re feeling bold or are curious about what’s new, you can pull the latest in that way.</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@next
</span></span></code></pre></div><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="/2020/10/28/bootstrap-icons-1-1-0/" class="text-decoration-none">
Bootstrap Icons v1.1.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="28 Oct 20 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, 2020
</span>
</div>
<div class="ratio ratio-16x9">
<iframe class="lazy" data-src="https://www.youtube-nocookie.com/embed/04854XqcfCY?rel=0" title="YouTube Video" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" width="760" height="570" allowfullscreen></iframe>
</div>
<p>Our first minor release for Bootstrap Icons is here, with over 30 new icons and a few bug fixes. New icons include fill variations for our emoji icons, including a few new emojis, and several new file type icons.</p>
<h2 id="30-new-icons">30+ new icons</h2>
<p>Here’s a look at our file and emoji icons as of v1.1.0. New in this release for emojis are the wink and heart eyes, along with fill versions for the full set. In addition, we’ve added icons for Word, Excel, PowerPoint, and a general bar chart file type.</p>
<p><img src="/assets/img/2020/10/icons-emoji.png" class="d-block img-fluid mb-2 rounded border" alt="Emoji icons" loading="lazy" width="1560" height="540">
</p>
<p><img src="/assets/img/2020/10/icons-files-folders.png" class="d-block img-fluid mb-2 rounded border" alt="File and folder icons" loading="lazy" width="3070" height="1684">
</p>
<h2 id="changes">Changes</h2>
<p>Here’s a more complete look at what’s changed in this release.</p>
<ul>
<li>Fixed <a href="https://github.com/twbs/icons/issues/415">#415</a>: Properly name <code>grip-horizontal</code> and <code>grip-vertical</code></li>
<li>Fixed <a href="https://github.com/twbs/icons/issues/423">#423</a>: Update <code>arrow-up-square-fill</code></li>
<li>Fixed <a href="https://github.com/twbs/icons/issues/437">#437</a>: Make <code>file-earmark</code> variations consistent</li>
<li>New: Added 18 filetype icons <a href="https://github.com/twbs/icons/pull/465">#465</a></li>
<li>New: Added 13 emoji icons <a href="https://github.com/twbs/icons/pull/466">#66</a></li>
</ul>
<h2 id="install">Install</h2>
<p>To get started, install 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>You can also <a href="https://github.com/twbs/icons/releases/tag/v1.1.0">download the release from GitHub</a>, or <a href="https://github.com/twbs/icons/releases/download/v1.1.0/bootstrap-icons-1.1.0.zip">download just the SVGs</a> (without the rest of the repository files).</p>
<h2 id="figma">Figma</h2>
<p>For the Figma users out there, you can also snag the <a href="https://www.figma.com/file/6jIgJymnRpMjGSMG2BKNRe/Bootstrap-Icons-v1.1.0?node-id=0%3A1">icons from Figma</a>.</p>
</div><div class="post">
<h1 class="post-title fw-600">
<a href="/2020/10/13/bootstrap-4-5-3/" class="text-decoration-none">
Bootstrap 4.5.3
</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 20 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, 2020
</span>
</div>
<div class="ratio ratio-16x9">
<iframe class="lazy" data-src="https://www.youtube-nocookie.com/embed/Y3ywicffOj4?rel=0" title="YouTube Video" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" width="760" height="570" allowfullscreen></iframe>
</div>
<p>We’ve updated Bootstrap 4 with a new patch release to fix some bugs, backport some iterative changes from v5, and more. Enjoy!</p>
<p>As you may already know, we’re alternating between v4 and v5 releases to keep both versions moving in tandem. This helps us close the gap between v4 and v5 and make updating to v5 as easy as possible.</p>
<p>Read on for the highlighted changes.</p>
<h2 id="changes">Changes</h2>
<p>Also available in the <a href="https://github.com/twbs/bootstrap/releases/tag/v4.5.3">v4.5.3 release on GitHub</a>.</p>
<h3 id="css">CSS</h3>
<ul>
<li><a href="https://github.com/twbs/bootstrap/pull/31653">#31653</a>: Add a comment to our <code>escape-svg</code> function to note that data URIs must be quoted.</li>
<li><a href="https://github.com/twbs/bootstrap/pull/31693">#31693</a>: Use the <code>custom-control</code> shadow variable instead of the generic <code>input-focus-box-shadow</code>.</li>
<li><a href="https://github.com/twbs/bootstrap/pull/31793">#31793</a>: Backport some v5 changes (improved <code>th</code> styling in Reboot, custom form field styling when printing, and improvements to <code>.text-break</code>).
<ul>
<li><a href="https://github.com/twbs/bootstrap/pull/29714">#29714</a>: Keep custom check, radio, and switch theme when printing.</li>
<li><a href="https://github.com/twbs/bootstrap/pull/30781">#30781</a>: Reboot’s <code>th</code> updates: Inherit <code>font-weight: bold</code> that comes from user agent stylesheets.</li>
<li><a href="https://github.com/twbs/bootstrap/pull/30932">#30932</a>: <code>.text-break</code> changes to drop <code>overflow-wrap</code> and use <code>word-wrap</code> once again</li>
<li><a href="https://github.com/twbs/bootstrap/pull/31754">#31754</a>: Improve versions page rendering (also reversed the order while I was here)</li>
</ul>
</li>
<li><a href="https://github.com/twbs/bootstrap/pull/31846">#31846</a>: Backports the z-index change to <code>.close</code> buttons in dismissible <code>.alert</code>s.</li>
</ul>
<h3 id="js">JS</h3>
<ul>
<li><a href="https://github.com/twbs/bootstrap/pull/31000">#31000</a>: Avoid multiple change event trigger in buttons plugin. <em>Not applicable to v5 since our button JS plugin has been mostly replaced with pure CSS.</em></li>
<li><a href="https://github.com/twbs/bootstrap/pull/31673">#31673</a>: Fix dropdown variable always evaluating to true.</li>
<li><a href="https://github.com/twbs/bootstrap/pull/31696">#31696</a>: Ensure <code>hidePrevented.bs.modal</code> can be prevented.</li>
<li><a href="https://github.com/twbs/bootstrap/pull/31718">#31718</a>: Backports new <code>$dropdown-padding-x</code> variable from v5.</li>
</ul>
<h3 id="docs">Docs</h3>
<ul>
<li><a href="https://github.com/twbs/bootstrap/pull/30811">#30811</a>: Mention GPU acceleration fix in docs callout for popovers. <em>Doesn’t apply to v5 since we’re updating to Popper v2.</em></li>
<li><a href="https://github.com/twbs/bootstrap/pull/30838">#30838</a>: Explain the <code>dispose</code> method more appropriately.</li>
<li><a href="https://github.com/twbs/bootstrap/pull/31706">#31706</a>: Backports updated margins for code snippets for improved readability.</li>
<li><a href="https://github.com/twbs/bootstrap/pull/31769">#31769</a>: Backports JS bundle guidance from v5.</li>
<li><a href="https://github.com/twbs/bootstrap/pull/31851">#31851</a>: Backports mention of missing <code>to</code> and <code>nextwhenvisible</code> methods.</li>
</ul>
<h3 id="misc">Misc</h3>
<ul>
<li><a href="https://github.com/twbs/bootstrap/pull/31297">#31297</a>: Switch to xo ESLint config</li>
<li>Updated devDependencies versions</li>
</ul>
<h2 id="next-up">Next up</h2>
<p>We’ll be back to v5 with our third alpha release coming in a couple of weeks. After that, we’ll ship another v4 update with v4.6.0 that continues the v5 backports and feature development. 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="/2020/09/29/bootstrap-5-alpha-2/" class="text-decoration-none">
Bootstrap 5 Alpha 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="29 Sep 20 11: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 29, 2020
</span>
</div>
<div class="ratio ratio-16x9">
<iframe class="lazy" data-src="https://www.youtube-nocookie.com/embed/Gs069dndIYk?rel=0" title="YouTube Video" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" width="760" height="570" allowfullscreen></iframe>
</div>
<p>We’re back at it again with a brand new alpha release of Bootstrap 5! Our second alpha has brought some new and improved features, color contrast improvements, improved helpers and utilities, and some documentation design updates.</p>
<p>Check out the latest in the docs at <a href="https://v5.getbootstrap.com">https://v5.getbootstrap.com</a>. <a href="https://github.com/twbs/bootstrap/releases/tag/v5.0.0-alpha2">Read the release notes</a> for a full list of changes since Alpha 1. Our <a href="https://v5.getbootstrap.com/docs/5.0/migration/">migration guide</a> has also been updated with a new section for Alpha 2.</p>
<h2 id="updated-docs-nav">Updated docs nav</h2>
<p>We’ve cleaned up the navigation in our docs to make things a little easier to use while on a mobile device or a narrow viewport. We’ve redesigned the main navbar to hide links on small devices, and when expanded, those navigation links now have larger tap targets.</p>
<p><img src="/assets/img/2020/09/v5a2-nav-home.png" class="d-block img-fluid mb-2 rounded border" alt="Updated Bootstrap nav home" loading="lazy" width="1242" height="600">
</p>
<p>Our subnav has also be streamlined to take up a single horizontal bad on mobile, giving more space for documentation. We’ve also differentiated the expanding and collapsing menu icons between the two navs.</p>
<p><img src="/assets/img/2020/09/v5a2-nav-docs.png" class="d-block img-fluid mb-2 rounded border" alt="Updated Bootstrap nav docs" loading="lazy" width="1242" height="600">
</p>
<p>Together this should make it a little faster and easier to navigate our docs, and serve as a fun little demo for others.</p>
<h2 id="dark-carousel">Dark carousel</h2>
<p>Add <code>.carousel-dark</code> to any <code>.carousel</code> to switch from the default white text, controls, and indicators to black.</p>
<p><a href="https://v5.getbootstrap.com/docs/5.0/components/carousel/#dark-variant"><img src="/assets/img/2020/09/v5a2-carousel-dark.png" class="d-block img-fluid mb-2 rounded border" alt="Example dark carousel" loading="lazy" width="1610" height="900">
</a></p>
<p>Values are configurable via Sass variables. To save on filesize, we’re using a CSS <code>filter</code> to invert out SVGs for the carouse controls. Pretty neat if you ask us!</p>
<h2 id="dark-dropdowns">Dark dropdowns</h2>
<p>For the first time since Bootstrap v1 nearly nine years ago, we have dark dropdown menus! Add <code>.dropdown-menu-dark</code> to any dropdown menu to change the appearance. Dark dropdowns are opt-in, so you’ll need to add the class as you go.</p>
<p><a href="https://v5.getbootstrap.com/docs/5.0/components/dropdowns/#dark-dropdowns"><img src="/assets/img/2020/09/v5a2-dropdowns-dark.png" class="d-block img-fluid mb-2 rounded border" alt="Example dark dropdowns" loading="lazy" width="1610" height="506">
</a></p>
<p>We’d like to revisit some of this later in v5 with minor releases that advance dark mode throughout the entire project. Until then, enjoy the new classes!</p>
<h2 id="redesigned-close-button">Redesigned close button</h2>
<p>Our close button has been renamed, redesigned, new focus state, and a new color option.</p>
<p><a href="https://v5.getbootstrap.com/docs/5.0/components/close-button/"><img src="/assets/img/2020/09/v5a2-close-btn.png" class="d-block img-fluid mb-2 rounded border" alt="Example close button" loading="lazy" width="1610" height="276">
</a></p>
<p>We’ve renamed the class from the rather generic <code>.close</code> to <code>.btn-close</code>. In addition, we’ve dropped the use of <code>&times;</code> in our HTML for an SVG <code>background-image</code> via CSS. With updated styling all around, the close button has a clearer focus state and even an all-new white variant (also powered by a CSS <code>filter</code>).</p>
<h2 id="position-utilities">Position utilities</h2>
<p>Thanks to our contributors, we’ve added new directional positioning utilities. Quickly position an element with our new <code>top</code>, <code>right</code>, <code>bottom</code>, and <code>left</code> utilities with support for <code>0</code>, <code>50%</code>, and <code>100%</code> by default.</p>
<p><a href="https://v5.getbootstrap.com/docs/5.0/utilities/position/"><img src="/assets/img/2020/09/v5a2-position-utils.png" class="d-block img-fluid mb-2 rounded border" alt="Example position utilities" loading="lazy" width="1598" height="672">
</a></p>
<p>Combine with new translate utilities to center elements on an edge or corner, too! The new utilities are configurable and extensible thanks to the utilities API and some smart Sass map defaults.</p>
<h2 id="more-highlights">More highlights</h2>
<p>Some other incremental changes to a few components and changes include:</p>
<ul>
<li>Container horizontal <code>padding</code> has been updated to match the row gutters variables and values.</li>
<li>Checkboxes and radios downsized to <code>1em</code> from <code>1.25em</code> for improved font scaling support.</li>
<li>Improved colors with green and cyan getting new values, plus higher contrast ratios all around.</li>
<li>Improved toast styling, now without <code>overflow: hidden</code>.</li>
<li>Badge padding increased a smidge.</li>
<li>Revamped “responsive embed” helpers, now called ratio helpers. New class names across the board, more flexible styles, and a new CSS variable for custom dynamic and responsive ratios.</li>
<li>Screen reader classes are now “visually hidden” classes.</li>
<li>New <code>.border-width</code> utility.</li>
</ul>
<p>See all the changes in the <a href="https://github.com/twbs/bootstrap/projects/21">v5 Alpha 2 project board</a> and be sure to <a href="https://v5.getbootstrap.com/docs/5.0/migration/">read the Migration guide</a> for details on what’s changed since Alpha 1.</p>
<h2 id="coming-in-alpha-3">Coming in Alpha 3</h2>
<p>We’ve pushed some additional breaking changes and important component updates to Alpha 3. To give you a heads up, here are some important upcoming moves:</p>
<ul>
<li>Offcanvas support is coming thanks to <a href="https://github.com/twbs/bootstrap/pull/31285">new side modals</a>!</li>
<li>We’re <a href="https://github.com/twbs/bootstrap/pull/31666">revamping the input group component</a>, dropping support for quite a few variations. It’s too complex, supports too many variations, and has had the most annoying <code>border-radius</code> bug through all of v4. (I’m so sorry about that!)</li>
<li>We’re <a href="https://github.com/twbs/bootstrap/pull/30449">upgrading floating labels</a> from a docs Example into a fully fledge form layout option, with support for textual inputs, selects, and textareas.</li>
<li>We’re <a href="https://github.com/twbs/bootstrap/pull/30571">adding font-size utilities</a> and updating our font-weight utilities.</li>
<li><a href="https://github.com/twbs/bootstrap/pull/30980">RTL is still coming!</a> The PR is being reviewed by our team and we’re hoping to land it in Alpha 3 so we can get some folks testing with it.</li>
</ul>
<p>For a more up to date list of changes, be sure to follow along with the <a href="https://github.com/twbs/bootstrap/projects/22">v5 Alpha 3 project board</a>. More docs improvements are planned with the potential for more breaking changes as well. From there it’s onto final breaking changes in Beta 3.</p>
<h2 id="release-expectations">Release expectations</h2>
<p>We’ll be alternating releases across v4 and v5 to keep the momentum up. We’re shipping v4.5.3 next and then moving right back to v5 for Alpha 3. We’ve noted our intended <a href="https://github.com/twbs/release#upcoming-release-schedule">release schedule in our release repo</a>. We’ll also keep updating that repo’s readme as we go.</p>
<h2 id="get-started">Get started</h2>
<p><strong>Head to <a href="https://v5.getbootstrap.com">https://v5.getbootstrap.com</a> to explore the new release.</strong> We’ve also published this updated as a pre-release to npm, so if you’re feeling bold or are curious about what’s new, you can pull the latest in that way.</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@next
</span></span></code></pre></div><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>
<div class="pagination"><a class="pagination-item older" href="/page/8/">Older</a>
<a class="pagination-item newer" href="/page/6/">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>
|
