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
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
|
<!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="/2014/03/05/ratchet-2-0-1-released/" class="text-decoration-none">
Ratchet 2.0.1 released
</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/connors" target="_blank" rel="noopener">
<img class="mb-0 me-2 rounded-2" srcset="https://github.com/connors.png?size=32, https://github.com/connors.png?size=64 2x"
src="https://github.com/connors.png?size=32"
alt="" width="32" height="32">
<span>@connors</span>
</a>
<span class="d-flex align-items-center ms-3" title="05 Mar 14 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>
March 05, 2014
</span>
</div>
<div class="ratio ratio-16x9">
<iframe src="https://www.youtube-nocookie.com/embed/otCpCn0l4Wo?rel=0" title="YouTube Video" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" width="760" height="570" allowfullscreen></iframe>
</div>
<p>Today we’re pumped to release Ratchet 2.0.1. This release focuses on CSS bug fixes and further improvements to our docs and build tools. Be sure to check out the detailed <a href="https://github.com/twbs/ratchet/releases/tag/v2.0.1">changelog</a> on the release page.</p>
<p>Download Ratchet right from GitHub or, go to the <a href="https://github.com/twbs/ratchet">project repository</a>.</p>
<p><a class="btn-link btn-link-ratchet" href="https://github.com/twbs/ratchet/archive/v2.0.1.zip">Download Ratchet 2.0.1</a></p>
<p>For a complete list of changes, see the <a href="https://github.com/twbs/ratchet/issues?q=state%3Aclosed+type%3Aissue+milestone%3A2.0.1">v2.0.1 milestone</a>.</p>
<h2 id="in-other-news">In other news</h2>
<p>Since releasing Ratchet 2.0.0 we’ve reached over <strong>7,000 stars</strong> and over <strong>650 forks on GitHub</strong>! Thanks to all our contributors and the rest of the community for helping make this thing awesome.</p>
</div><div class="post">
<h1 class="post-title fw-600">
<a href="/2014/02/25/ratchet-2/" class="text-decoration-none">
Introducing Ratchet 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="25 Feb 14 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>
February 25, 2014
</span>
</div>
<div class="ratio ratio-16x9">
<iframe class="lazy" data-src="https://www.youtube-nocookie.com/embed/vimZj8HW0Kg?rel=0" title="YouTube Video" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" width="760" height="570" allowfullscreen></iframe>
</div>
<p>Today we’re stoked to introduce the brand spanking new <a href="http://goratchet.com/">Ratchet 2.0</a>. The mobile-only framework for building mobile apps with HTML, CSS, and JavaScript has been overhauled with new features, documentation, and a brand new home.</p>
<h2 id="new-home">New home</h2>
<p>First, you’re not crazy—Ratchet has moved! It’s now a part of the <a href="https://github.com/twbs">Bootstrap organization</a> on GitHub. Ratchet 2 was lovingly crafted by <a href="https://twitter.com/connors">@connors</a>, a good friend to Bootstrap’s creators. Given our collaboration in person and the ideas we have for the future of both frameworks, it makes perfect sense.</p>
<h2 id="new-docs">New docs</h2>
<p>Second, the Ratchet docs have a new look!</p>
<p><a href="http://goratchet.com/"><img src="/assets/img/2014/02/ratchet-docs.png" class="d-block img-fluid mb-2 rounded border" alt="Ratchet docs" loading="lazy" width="2648" height="1664">
</a></p>
<p>Things should seem pretty familiar, but we’ve added a bunch of new content and some key new features. Chief among them are the ability to show Ratchet on an iPhone and Android and three awesome examples to show it all off.</p>
<p><a href="http://goratchet.com/examples/"><img src="/assets/img/2014/02/ratchet-examples-sm.png" class="d-block img-fluid mb-2 rounded border" alt="Ratchet examples" loading="lazy" width="1200" height="750">
</a></p>
<p>See them in action on your phone:</p>
<ul>
<li><a href="http://goratchet.com/examples/app-movies/">Movie finder</a></li>
<li><a href="http://goratchet.com/examples/app-ios-mail/">iOS Mail app</a></li>
<li><a href="http://goratchet.com/examples/app-android-notes/">Android Notes app</a></li>
</ul>
<p>Feel free to download, remix, and extend these example apps—they’re all part of the new Ratchet docs.</p>
<h2 id="really-whats-new">Really, what’s new?</h2>
<p>We’ve got tons of new and improved features for Ratchet. Here’s the rundown:</p>
<ul>
<li><strong>New Ratchicons!</strong> An icon font dedicated to Ratchet, with support for both iOS and Android.</li>
<li><strong>New themes for iOS and Android!</strong> That’s right, Ratchet has a brand new base coat with optional themes for iOS and Android. Now your app can look right at home on either platform.</li>
<li><strong>New card wrapper.</strong> Wrap any content or Ratchet component in a card for that classic inset card look.</li>
<li>CSS has been rewritten to utilize Sass, compiled via Gruntfile.</li>
<li>Docs have been overhauled to run on <a href="https://jekyllrb.com/">Jekyll</a>.</li>
<li>Improved table views, now with support for lists featuring images and icons.</li>
<li>Updated class names for buttons, badges, and more to match the Bootstrap nomenclature.</li>
</ul>
<p>It’s a huge release that’s been a long time coming. <a href="http://goratchet.com/">Head to the new Ratchet docs</a> to check it all out in person, and be sure to view those new examples from your favorite iOS or Android phone.</p>
<p><em>Looking for Ratchet v1.x docs? No problem—we’re hosting those at <a href="http://goratchet.com/1.0.2/">http://goratchet.com/1.0.2/</a>.</em></p>
<h2 id="download">Download</h2>
<p>Ratchet 2 is available today for download from GitHub.</p>
<p><a class="btn-link btn-link-ratchet" href="https://github.com/twbs/ratchet/archive/v2.0.0.zip">Download Ratchet 2.0.0</a></p>
<p>Be sure to check out the <a href="https://github.com/twbs/ratchet/issues?milestone=1&q=is%3Aclosed">GitHub milestone</a> to see a more complete changelog of what’s new.</p>
<h2 id="whats-next">What’s next?</h2>
<p>Just like Bootstrap releases, up next for Ratchet will be documentation improvements and bug fixes as feedback rolls in. Without committing to a date, we also want to add support for iPad and Android tablets.</p>
<p>As always, if you find a bug or want to suggest a feature, just <a href="https://github.com/twbs/ratchet/issues/new">open an issue</a> or a pull request on <a href="https://github.com/twbs/ratchet/">GitHub</a>.</p>
</div><div class="post">
<h1 class="post-title fw-600">
<a href="/2014/02/13/bootstrap-3-1-1-released/" class="text-decoration-none">
Bootstrap 3.1.1 released
</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 Feb 14 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>
February 13, 2014
</span>
</div>
<div class="ratio ratio-16x9">
<iframe class="lazy" data-src="https://www.youtube-nocookie.com/embed/WMPM1q_Uyxc?rel=0" title="YouTube Video" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" width="760" height="570" allowfullscreen></iframe>
</div>
<p>Today we’re releasing Bootstrap v3.1.1. As our first patch release for the v3.1.x release series, we’ve focused on CSS bug fixes, documentation improvements, and further refinements to our build tools. See the included changelog for more details.</p>
<h2 id="download-bootstrap">Download Bootstrap</h2>
<p>Download Bootstrap directly from GitHub:</p>
<p><a class="btn-link" href="https://github.com/twbs/bootstrap/archive/v3.1.1.zip">Download Bootstrap 3.1.1</a></p>
<p>Hit the <a href="https://github.com/twbs/bootstrap">project repository</a> or <a href="https://github.com/twbs/bootstrap-sass">Sass repository</a> for more options.</p>
<h2 id="bootstrap-cdn">Bootstrap CDN</h2>
<p>Update your CDN links to point to the v3.1.1 files:</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="c"><!-- Latest compiled and minified CSS --></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"</span><span class="p">></span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="c"><!-- Optional theme --></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css"</span><span class="p">></span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="c"><!-- Latest compiled and minified JavaScript --></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
</span></span></code></pre></div><h2 id="full-changelog">Full changelog</h2>
<h3 id="css">CSS</h3>
<ul>
<li><a href="https://github.com/twbs/bootstrap/issues/11659">#11659</a>, <a href="https://github.com/twbs/bootstrap/issues/12349">#12349</a>, <a href="https://github.com/twbs/bootstrap/issues/12698">#12698</a>: Always show the input above appended buttons in input groups for proper focus and disabled state borders.</li>
<li><a href="https://github.com/twbs/bootstrap/pull/12025">#12025</a>: Ensure responsive utility classes can be combined with one another.</li>
<li><a href="https://github.com/twbs/bootstrap/pull/12195">#12195</a>: Apply <code>.btn:focused</code> styles to <code>.btn.active:focused</code> for improved accessibility.</li>
<li><a href="https://github.com/twbs/bootstrap/pull/12412">#12412</a>: Refactored and renamed our internal grid mixins for generating custom number of grid columns.</li>
<li><a href="https://github.com/twbs/bootstrap/pull/12433">#12433</a>: Use negative <code>margin</code> on <code>.list-inline</code>s so we don’t override the <code>padding-left</code> on the first list item.</li>
<li><a href="https://github.com/twbs/bootstrap/pull/12448">#12448</a>: Use <code>@navbar-height</code> instead on <code>.navbar-brand</code> to prevent element from being shorter than navbar height. Corrects a change introduced in v3.1.0.</li>
<li><a href="https://github.com/twbs/bootstrap/pull/12462">#12462</a>: Add <code>border-radius</code> to tables when in panels for proper rounding with all background settings.</li>
<li><a href="https://github.com/twbs/bootstrap/pull/12470">#12470</a>: Scope large modal styles to minimum viewport width.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/12486">#12486</a>: Restore full-width inputs for input groups in inline forms and navbars.</li>
<li><a href="https://github.com/twbs/bootstrap/pull/12502">#12502</a>: Remove long-deprecated <code>:-moz-placeholder</code> styles.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/12532">#12532</a>: Scope popover arrow styles to immediate children.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/12552">#12552</a>: Fixes two typos in <code>carousel.less</code> for the Glyphicon classes.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/12620">#12620</a>, <a href="https://github.com/twbs/bootstrap/issues/12621">#12621</a>: Use <code>:extend(.img-responsive)</code> instead of mixin in thumbnail and carousel.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/12625">#12625</a>: Only remove top and bottom borders on list groups in panels if the list group is the first or last element.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/12629">#12629</a>: Override the default rounded corners in iOS’s search input with <code>-webkit-appearance: none;</code>.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/12633">#12633</a>: Properly reset borders on table cells in panels.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/12639">#12639</a>: Drop the unsupported by Opera <code>-o-user-select</code>.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/12659">#12659</a>: Add <code>@blockquote-font-size</code> variable for calculated text size.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/12673">#12673</a>: Use <code>@popover-arrow-width</code> for popover offsets.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/12674">#12674</a>: Update popover <code>border</code> colors to use computed values rather than static ones.</li>
</ul>
<h3 id="sass">Sass</h3>
<ul>
<li><a href="https://github.com/twbs/bootstrap-sass/issues/523">#523</a>: Rails 3.2 compatibility</li>
<li><a href="https://github.com/twbs/bootstrap-sass/issues/518">#518</a>: <code>scale</code> mixin Sass compatibility issue</li>
<li>Updated Bower docs</li>
</ul>
<h3 id="javascript">JavaScript</h3>
<ul>
<li><a href="https://github.com/twbs/bootstrap/issues/12436">#12436</a>: Update docs, examples, and tests to use jQuery v1.11.0.</li>
</ul>
<h3 id="docs">Docs</h3>
<ul>
<li><a href="https://github.com/twbs/bootstrap/issues/12437">#12437</a>: Note specific versions of IE where progress bar animation is supported.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/12439">#12439</a>: Correct docs error about available grid resets.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/12477">#12477</a>: Clarify supported versions of Internet Explorer (we do v8-11) in browser support docs.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/12494">#12494</a>: Update docs to reflect modal remote change from <a href="https://github.com/twbs/bootstrap/pull/11933">#11933</a>.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/12497">#12497</a>: Remove manual full-width container callout now that there’s <code>.container-fluid</code>.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/12512">#12512</a>: Improve alignment of the Dashboard example placeholder images.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/12519">#12519</a>: Add Bower badge to README.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/12527">#12527</a>: Clarify that dropdowns always require <code>data-toggle="dropdown"</code>.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/12543">#12543</a>, <a href="https://github.com/twbs/bootstrap/issues/12544">#12544</a>, <a href="https://github.com/twbs/bootstrap/issues/12545">#12545</a>, <a href="https://github.com/twbs/bootstrap/issues/12546">#12546</a>: Various fixes to the v2.x to v3.x migration docs.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/12555">#12555</a>: Rearrange variables to place grids and containers closer together in Customizer.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/12564">#12564</a>: Distribution zip folder renamed to be more descriptive.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/12589">#12589</a>: Add “Back to top” link to bottom of sidenav.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/12590">#12590</a>: Add link to Korean translation.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/12610">#12610</a>: Better and more consistent prefixing of docs CSS with <code>.bs-docs-</code>.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/12611">#12611</a>: Mention limitation of one JavaScript plugin’s data attributes per element.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/12614">#12614</a>: Add progress bar example with visible label.</li>
<li><a href="https://github.com/twbs/bootstrap/pull/12645">#12645</a>: Omit semicolons consistently in JS examples.</li>
<li><a href="https://github.com/twbs/bootstrap/pull/12655">#12655</a>: Upgrade holder.js to v2.3.1 so docs images are rendered properly in Internet Explorer >=9.</li>
</ul>
<h3 id="examples">Examples</h3>
<ul>
<li><a href="https://github.com/twbs/bootstrap/issues/12455">#12455</a>: Fix typo in Dashboard example’s CSS.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/12512">#12512</a>: Improve alignment of the Dashboard example’s placeholder images.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/12526">#12526</a>: Add scrollbars when necessary to the Dashboard example’s sidebar.</li>
<li><a href="https://github.com/twbs/bootstrap/pull/12579">#12579</a>: Improve sticky footer examples to avoid any wrappers and improve rendering in IE8.</li>
<li><a href="https://github.com/twbs/bootstrap/pull/12695">#12695</a>: Fixed transitions on offcanvas example by adding initial left and right values.</li>
</ul>
<h3 id="build-tools">Build tools</h3>
<ul>
<li><a href="https://github.com/twbs/bootstrap/issues/12466">#12466</a>: Add the examples’ CSS to the <code>csslint</code> task.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/12531">#12531</a>: Add <code>/docs/dist/</code> to the <code>clean</code> task.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/12534">#12534</a>: Allow the bootstrap package in npm to directly expose CSS and Less files.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/12568">#12568</a>: Add the examples’ CSS to the <code>csscomb</code> task.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/12581">#12581</a>, <a href="https://github.com/twbs/bootstrap/issues/12583">#12583</a>: Reorganize all Grunt tasks into one directory so that <code>grunt</code> runs properly in Bower installations.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/12605">#12605</a>: Use license object instead of licenses array in Grunt.</li>
</ul>
<p>For an even more complete list of changes, see the <a href="https://github.com/twbs/bootstrap/issues?milestone=25&page=1&state=closed">v3.1.1 milestone</a>.</p>
<p><3</p>
</div><div class="post">
<h1 class="post-title fw-600">
<a href="/2014/01/30/bootstrap-3-1-0-released/" class="text-decoration-none">
Bootstrap 3.1.0 released
</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="30 Jan 14 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>
January 30, 2014
</span>
</div>
<div class="ratio ratio-16x9">
<iframe class="lazy" data-src="https://www.youtube-nocookie.com/embed/phOW-CZJWT0?rel=0" title="YouTube Video" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" width="760" height="570" allowfullscreen></iframe>
</div>
<p>Today we’re stoked to ship Bootstrap v3.1. We’ve got a handful of new features, plenty of bug fixes and improvements, and updated build tools.</p>
<h3 id="new-docs">New docs</h3>
<p><a href="https://getbootstrap.com/getting-started/"><img src="/assets/img/2014/01/docs.png" class="d-block img-fluid mb-2 rounded border" alt="New Bootstrap docs" loading="lazy" width="2800" height="2200">
</a></p>
<p>We’ve made tons of changes across the board, most notably to our documentation. Just like v2.1 brought a brand new design, v3.1 overhauls the docs to refocus on the actual documentation rather than the chrome around it. Our new homepage restores the quick run through of key features and showcases some awesome examples from the Expo.</p>
<h3 id="official-sass-port">Official Sass port</h3>
<p><a href="https://github.com/twbs/bootstrap-sass"><img src="/assets/img/2014/01/sass.png" class="d-block img-fluid mb-2 rounded border" alt="Bootstrap for Sass" loading="lazy" width="2300" height="1150">
</a></p>
<p>The best part about v3.1 is that we’re shipping with an official Sass port. A few weeks ago we moved over the most popular port on GitHub and made it official—Bootstrap is now available in Sass. Rather than bloat the main project with support for Less and Sass—and all the documentation for both—we’ve kept them separate for the time being. Prominent links in the docs are included though, so enjoy!</p>
<h3 id="new-examples">New examples</h3>
<p><img src="/assets/img/2014/01/examples.jpg" class="d-block img-fluid mb-2 rounded border" alt="New examples" loading="lazy" width="1200" height="600">
</p>
<p>We’ve added three new examples: Blog, Cover, and Dashboard. Each example provides a single page of awesomeness for you to quickly get started on a project built with Bootstrap. They’re responsive and ready to go.</p>
<h3 id="improved-features">Improved features</h3>
<p>A handful of features that aren’t exactly new to Bootstrap have seen an update in v3.1:</p>
<ul>
<li>Modals now include optional sizes</li>
<li>Dropdowns now have their own alignment classes for easier customization</li>
<li>Form feedback styles for validation states now include optional icons to reinforce color changes</li>
</ul>
<p>All-in-all these make components more focused, more durable, and easier to work with. See the changelog included with <a href="https://github.com/twbs/bootstrap/releases/tag/v3.1.0">the GitHub release</a> for the complete list of new features.</p>
<h3 id="remote-modal-content">Remote modal content</h3>
<p>One of the more important improved features is for our modals. If you currently use the modal’s <code>remote</code> option, be aware this release may break your modals. Yes, this is a breaking change, but it’s first and foremost a <strong>bug fix</strong> that corrects a rather longstanding and overlooked error. Our apologies for any headaches it may cause, but it’s been missed in the last few patch releases.</p>
<p>See the <a href="https://github.com/twbs/bootstrap/pull/11933">#11933</a> pull request for details on the code changes.</p>
<h3 id="new-license">New license</h3>
<p>We’ve been talking about it for what seems like forever, but thanks to all our contributors and the core team, we’ve finally done it. As of v3.1, Bootstrap ships under the MIT license to allow as many people to utilize Bootstrap as possible. Thanks to all our contributors for helping make it happen.</p>
<h3 id="improved-build-tools">Improved build tools</h3>
<p>We’re constantly trying to improve our tools for developing Bootstrap and v3.1 brings a slew of updates to do just that.</p>
<ul>
<li>We’ve switched from Recess to grunt-contrib-less for our compiler, giving us access to Less 1.6.x (as opposed to 1.3.x with Recess).</li>
<li>Our compiled code is virtually identical in formatting and organization thanks to <a href="https://github.com/csscomb/csscomb.js">CSScomb</a> and some other Grunt-fu.</li>
<li>Tests also run a tad faster with the help of some magical caching and parallelization.</li>
<li>The web Customizer is now generated from a Grunt task, meaning we’ll never miss updating or adding a variable again. If you contribute to Bootstrap regularly, just run <code>grunt</code> and commit to update the page.</li>
</ul>
<p><strong>Heads up!</strong> If you develop Bootstrap locally, be sure to nuke your <code>node_modules/</code> directory and run <code>npm install</code> before getting started with v3.1.</p>
<h3 id="download-bootstrap">Download Bootstrap</h3>
<p>Get downloading now, or see the list below for more information on what’s new in this release. Download it from GitHub or snag it from the CDN:</p>
<p><a class="btn-link" href="https://github.com/twbs/bootstrap/archive/v3.1.0.zip">Download Bootstrap 3.1.0</a></p>
<p>Or, hit the <a href="https://github.com/twbs/bootstrap">project repository</a> or <a href="https://github.com/twbs/bootstrap-sass">Sass repository</a>.</p>
<div class="highlight"><pre tabindex="0" class="chroma"><code class="language-html" data-lang="html"><span class="line"><span class="cl"><span class="c"><!-- Latest compiled and minified CSS --></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css"</span><span class="p">></span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="c"><!-- Optional theme --></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">"stylesheet"</span> <span class="na">href</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap-theme.min.css"</span><span class="p">></span>
</span></span><span class="line"><span class="cl">
</span></span><span class="line"><span class="cl"><span class="c"><!-- Latest compiled and minified JavaScript --></span>
</span></span><span class="line"><span class="cl"><span class="p"><</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">"https://maxcdn.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"</span><span class="p">></</span><span class="nt">script</span><span class="p">></span>
</span></span></code></pre></div><hr>
<h2 id="full-changelog">Full changelog</h2>
<h3 id="new-features">New features</h3>
<ul>
<li>Three new templates: Blog, Cover, and Dashboard.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/10884">#10884</a>: Add <code>.info</code> variant to contextual table classes.</li>
<li><a href="https://github.com/twbs/bootstrap/pull/11138">#11138</a>: Add contextual styles to list groups.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/11162">#11162</a>: Add new sizes, <code>.modal-lg</code> and <code>.modal-sm</code>, to modals for quicker settings on modals. Only applies to modals above the small breakpoint.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/11193">#11193</a>: Add <code><kbd></code> element styles to indicate user input via keyboard.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/11244">#11244</a>: Add <code>.animation()</code> mixins.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/11572">#11572</a>: Add contextual <code>background-color</code> classes to match our existing text classes. (This also moves both sets of classes to the Helper Classes section of the CSS docs.)</li>
<li><a href="https://github.com/twbs/bootstrap/issues/11675">#11675</a>: Add <code>.text-justify</code> class to round out the text alignment classes.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/11836">#11836</a>: Add new form control feedback classes to toggle icons for each validation state. Works on regular forms, horizontal, and inline.</li>
</ul>
<p>While we originally wanted v3.1 to include RTL support, we decided to hold back on that for some potentially beneficial unreleased tooling. We’ll share more on that when we know more, but suffice to say it’s been bumped to v3.2.</p>
<h3 id="css-changes">CSS changes</h3>
<ul>
<li><a href="https://github.com/twbs/bootstrap/issues/10951">#10951</a>: Add <code>outline: 0</code> to <code>.modal</code> to prevent a focus outline from appearing in Chrome for Windows.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/11107">#11107</a>: Add <code>@modal-backdrop-opacity</code> variable for customizable modal backdrop.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/11266">#11266</a>: Apply a pixel-based <code>line-height</code> that matches the <code>height</code> to date inputs for iOS 7 for proper vertical alignment of text in the form control.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/11286">#11286</a>: Add <code>@well-border</code> variable.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/11302">#11302</a>: Refactor the responsive utility classes to cut a few hundred lines of CSS (more context in #11214).</li>
<li><a href="https://github.com/twbs/bootstrap/issues/11435">#11435</a>: Prevent the double borders between multiple buttons in an input group.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/11561">#11561</a>: Add <code>float: left;</code> to <code>.form-control</code>s within input groups to prevent IE9 from screwing up placeholder text and select menu arrows.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/11588">#11588</a>: Scope <code>font-size</code> to only <code><p></code> elements in <code>.jumbotron</code>s and remove the super-sized <code>line-height</code> from the base class to avoid interference with sub-components.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/11676">#11676</a>: Add <code>-webkit-overflow-scrolling: touch;</code> to modals for smooth scrolling on iOS devices.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/11744">#11744</a>: Clean up some incompatible properties in <code>forms.less</code>: block level inputs no longer receive <code>vertical-align: middle;</code> unless necessary, e.g. in inline forms.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/11748">#11748</a>: Updated <code>.scale()</code> mixin so that it accepts optional vertical scale as second parameter.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/11750">#11750</a>: Reverts v3.0.3’s refactor to contextual table classes to ensure they work with striped tables.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/11757">#11757</a>: Darken default navbar toggle bars to meet WCAG criteria.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/11766">#11766</a>: Use <code>@color</code> variable in <code>.button-variant()</code> mixin to set <code>background-color</code> on <code>.badge</code>s in buttons for proper default button badge styles.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/11741">#11741</a>: Don’t set <code>@headings-font-family</code> to the same font stack as the <code><body></code>; instead, just use <code>inherit</code> for same default CSS.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/11786">#11786</a>: Nest media queries within print utilities for mixin-friendliness.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/11790">#11790</a>: With upgrade to Less v1.6.0, remove duplicate CSS generated from the nested <code>.clearfix</code> class and mixin by switching to <code>&:extend(.clearfix all)</code>.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/11801">#11801</a>: Use correct variables for grid containers.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/11817">#11817</a>: Rework input groups to use the <code>font-size: 0;</code> and <code>white-space: nowrap</code> hack for a more durable component with regards to code formatting and custom font size changes.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/11829">#11829</a>: Add <code>.make-xs-column</code> mixins to complement the recently added extra small predefined grid classes.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/11836">#11836</a>: Along with the form validation update, we reset some key form and icon styles:
<ul>
<li>All <code>.form-control</code>s within inline forms are set to <code>width: auto;</code> to prevent stacking of <code>.form-label</code> within a <code>.form-group</code>.</li>
<li>Removes all <code>select.form-control</code> settings since those are now inherited by the above change</li>
<li>Removes the <code>width: 1em;</code> from the Glyphicons because it was virtually impossible to override.</li>
</ul>
</li>
<li><a href="https://github.com/twbs/bootstrap/issues/11841">#11841</a>: Breadcrumb padding values now use variables.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/11859">#11859</a>: Restore <code>@dropdown-caret-color</code> variable, but deprecate it.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/11861">#11861</a>: Add <code>@list-group-active-text-color</code> variable for improved customization on active list group items.</li>
<li><a href="https://github.com/twbs/bootstrap/pull/11868">#11868</a>: Cleanup modal <code>z-index</code> values in <code>modals.less</code>.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/11990">#11990</a>, #12159: Make range inputs block level and 100% wide by default.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/12073">#12073</a>: Make order of component variations consistent throughout the repo.</li>
<li><a href="https://github.com/twbs/bootstrap/pull/12164">#12164</a>: Fix value of SVG font ID and removed hard coded value.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/12171">#12171</a>: Ensure panel groups have a bottom margin since we nuke it on child panels.</li>
<li><a href="https://github.com/twbs/bootstrap/pull/12247">#12247</a>: Add and use <code>.text-emphasis-variant()</code> mixin for emphasis classes. Also updated emphasis classes to only apply <code>:hover</code> styles to linked content.</li>
<li><a href="https://github.com/twbs/bootstrap/pull/12248">#12248</a>: Add and use <code>.bg-variant()</code> mixin to generate background classes.</li>
<li><a href="https://github.com/twbs/bootstrap/pull/12249">#12249</a>: Add and use <code>@modal-md</code> Less variable for uniformity.</li>
<li><a href="https://github.com/twbs/bootstrap/pull/12250">#12250</a>: Remove print <code>margin</code>s per upstream H5BP change, thus deferring to browser defaults, or users’ custom values should they set them.</li>
<li><a href="https://github.com/twbs/bootstrap/pull/12286">#12286</a>: Only remove appropriate <code>border-radius</code> from first and last tables or list groups in panels.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/12353">#12353</a>: Scope table border reset in panels to first-child rows.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/12359">#12359</a>: Reset <code>min-width</code> on <code><fieldset></code>s so they don’t break responsive tables and behave more like standard block level elements.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/12406">#12406</a>: Upgrade to Normalize v3.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/12422">#12422</a>: Reset height on <code>select[multiple]</code> in <code>.input-size()</code> mixin.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/12424">#12424</a>: Given Normalize v3 upgrade, account for change on <code><figure></code> element so that we don’t cause backward compatibility issues.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/12388">#12388</a>: Apply a fixed <code>height</code> to <code>.navbar-brand</code> to ensure adding a Glyphicon doesn’t increase it’s height.</li>
<li>Updated <code><blockquote></code> to no longer thin text or modify <code>line-height</code> for improved readability.</li>
</ul>
<h3 id="javascript-changes">JavaScript changes</h3>
<ul>
<li><a href="https://github.com/twbs/bootstrap/issues/9318">#9318</a>, <a href="https://github.com/twbs/bootstrap/issues/9459">#9459</a>, <a href="https://github.com/twbs/bootstrap/issues/10105">#10105</a>: Properly place remote content within the <code>.modal-content</code> instead of <code>.modal-body</code> (see note above).</li>
<li><a href="https://github.com/twbs/bootstrap/issues/10044">#10044</a>: Check that <code>href</code> id’s are followed by valid characters in dropdowns.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/10134">#10134</a>: Don’t use jQuery <code>offset</code> directly because it uses sub pixel rendering.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/10199">#10199</a>: Correct <code>hidden.bs</code> and <code>shown.bs</code> events firing too early in tooltips and popovers.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/10205">#10205</a>: Enable support of arbitrary characters in Scrollspy targets.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/10236">#10236</a>: Properly calculate offset positioning for affix plugin when reloading a scrolled window.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/10260">#10260</a>, #10568, #10740: Properly hide tooltips and popovers if no animation is set.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/10283">#10283</a>: Prevent IE8 from complaining about <code>$.support.transition.end</code>.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/10327">#10327</a>: Correctly reset carousel when the slide event is prevented.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/10359">#10359</a>: Pass <code>$element</code> to offset top/bottom calc funcs for better dynamic offsets.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/10658">#10658</a>: Don’t let popover content lose bound events on second <code>setContent</code> call.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/10675">#10675</a>: Ensure scrollspy target in tab content works properly.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/10709">#10709</a>: Be consistent about type of quotes in our JS—switches double quotes to single quotes throughout.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/10761">#10761</a>: Don’t create new tooltip/popover objects just to destroy them immediately.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/10798">#10798</a>: Modal namespacing.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/10801">#10801</a>: Restore <code>.collapse</code> to <code>.in</code> after collapsing animation finishes in collapse plugin.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/10834">#10834</a>: Only <code>preventDefault</code> on click on <code>[data-toggle="modal"]</code> when the element is a link.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/10890">#10890</a>: Calling <code>$().button(state)</code> shouldn’t enable a disabled button.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/10911">#10911</a>: Add <code>loaded</code> event for use with modal’s <code>remote</code> option.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/10921">#10921</a>: Input groups within button toolbars are now supported.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/11203">#11203</a>: Improve scrollspy’s handling of hidden targets.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/11288">#11288</a>: Save vertical scroll position of modal between openings.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/11362">#11362</a>: Update affix and scrollspy on speedy scroll to top of page.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/11373">#11373</a>: Add related target to dropdown events.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/11379">#11379</a>: Fix carousel <code>this.sliding</code> not getting reset if <code>$next.hasClass('active')</code>.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/11416">#11416</a>: Use the transition duration from the CSS for the carousel.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/11496">#11496</a>: Clear tooltip timeout on destroy.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/11555">#11555</a>: Add <code>@tooltip-opacity</code> variable.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/11720">#11720</a>: Add events (affix, affixed, affix-top, etc) to affix plugin.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/11722">#11722</a>: Use document scroll height instead of offset height in affix plugin.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/11788">#11788</a>: Use <code>focusin</code>/<code>focusout</code> instead of <code>focus</code>/<code>blur</code> for tooltip and popover focus trigger for Firefox and Safari.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/11825">#11825</a>: Add dropdown ARIA roles.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/12270">#12270</a>: Add namespace <code>.bs</code> also to the event <code>dismiss.modal</code>.</li>
</ul>
<h3 id="deprecations">Deprecations</h3>
<ul>
<li><a href="https://github.com/twbs/bootstrap/issues/10370">#10370</a>: Deprecated the <code>.pull-right</code> method for aligning dropdown menus. Includes the following changes:
<ul>
<li>Removed an old and unused pair of selectors that didn’t properly target the right-aligned navbar alignment of dropdown menus.</li>
<li>Deprecates the <code>.pull-right</code> alignment in favor of a more specific and unique class name.</li>
<li>Adds <code>.dropdown-menu-right</code> as the new alignment class. This is then mixin-ed into the <code>.navbar-right.navbar-nav</code> dropdown menus for auto-alignment (keeping the current behavior we have today).</li>
<li>Adds new ability to override that auto-alignment though with the new <code>.dropdown-menu-left</code>, which is mixin-ed in the same way to provide the appropriate specificity of an override. This should never need to be used except for within right-aligned <code>.navbar-nav</code> components.</li>
</ul>
</li>
<li><a href="https://github.com/twbs/bootstrap/issues/11660">#11660</a>: Deprecate <code>small</code> and <code>.small</code> in <code>blockquote</code> citation in favor of <code>footer</code> element.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/12398">#12398</a>: Deprecate <code>.box-shadow()</code> mixin.</li>
</ul>
<h3 id="documentation">Documentation</h3>
<ul>
<li><a href="https://github.com/twbs/bootstrap/issues/10486">#10486</a>: Add note about <code>data-toggle</code> dropdown dependency.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/10505">#10505</a>: Document more of our Less variables and mixins (not all, but the commonly used ones).</li>
<li><a href="https://github.com/twbs/bootstrap/issues/11158">#11158</a>: Customizer’s variables are now generated via Grunt task from the <code>variables.less</code> file.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/11447">#11447</a>: Document that modal remote URL is only loaded once.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/11655">#11655</a>: Normalize disabled inputs and buttons in iOS with <code>opacity: 1;</code>.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/11723">#11723</a>: Mention removal of <code>.pill-content</code> and <code>.pill-pane</code> in the migration guide.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/11738">#11738</a>, <a href="https://github.com/twbs/bootstrap/issues/11765">#11765</a>: Load minified assets in the docs to improve performance.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/11742">#11742</a>: Add link to French translation in About page (v3.0.3 saw Ukrainian added as well).</li>
<li><a href="https://github.com/twbs/bootstrap/issues/11760">#11760</a>: Remove mailing list links from readme and about pages.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/11764">#11764</a>: Add <code>meta</code> tags to docs for description, keywords, and authors.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/11770">#11770</a>: Move component-animations.less to the utility section of import list to match Customizer</li>
<li><a href="https://github.com/twbs/bootstrap/issues/11830">#11830</a>, <a href="https://github.com/twbs/bootstrap/issues/11832">#11832</a>: More help for Windows users installing Jekyll with requirement of Python and link to <a href="https://github.com/juthilo">@juthilo</a>’s guide, <a href="https://github.com/juthilo/run-jekyll-on-windows/">Run Jekyll on Windows</a>.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/11876">#11876</a>: Enable <code>failHard</code> grunt-html-validation option.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/11977">#11977</a>: Concatenate and minify all docs assets.</li>
<li><a href="https://github.com/twbs/bootstrap/pull/12037">#12037</a>: Move docs <code>.html</code> pages and assets into <code>docs/</code> subfolder to clean up project root directory. Also moves <code>.csscomb.json</code> and <code>.csslintrc</code> to <code>less/</code> to further clean up project root.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/12073">#12073</a>: Make order of component variations consistent throughout the repo.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/12244">#12244</a>: Move v2.x to v3.x migration docs to a separate page.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/12311">#12311</a>: Expand information on how to handle overflowing content in navbars.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/12314">#12314</a>: Add warning about modal markup placement affecting modal appearance/functionality.</li>
<li><a href="https://github.com/twbs/bootstrap/pull/12345">#12345</a>: Add note about printer viewport weirdness.</li>
<li><a href="https://github.com/twbs/bootstrap/pull/12380">#12380</a>: Add link to unofficial German translation, <a href="http://holdirbootstrap.de/">http://holdirbootstrap.de/</a>.</li>
<li>Updated browser and device support documentation:
<ul>
<li><a href="https://github.com/twbs/bootstrap/issues/11055">#11055</a>: add mention of select menu styling on Android stock browsers with included optional fix.</li>
<li>Update IDs and docs nav to include bookmark links to each section.</li>
<li>Add callout to navbar docs about fixed position, inputs, and virtual keyboard.</li>
</ul>
</li>
</ul>
<h3 id="build-system--packaging">Build system & packaging</h3>
<ul>
<li><a href="https://github.com/twbs/bootstrap/pull/11761">#11761</a>: Add JavaScript Code Style checker integration.</li>
<li><a href="https://github.com/twbs/bootstrap/pull/11739">#11739</a>: Lint <code>docs-assets/js/application.js</code> and <code>docs-assets/js/customizer.js</code>.</li>
<li><a href="https://github.com/twbs/bootstrap/pull/11780">#11780</a>: Don’t ignore <code>Gruntfile.js</code> or <code>package.json</code> in <code>bower.json</code> as they’re required for compilation.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/11790">#11790</a>: Switch from Recess to grunt-contrib-less.
<ul>
<li>Dropped <code>grunt-recess</code> for <code>grunt-contrib-less</code> to get the latest version of Less (v1.6.x) since Recess was still quite behind.</li>
<li>Adds CSScomb to take place of Recess’s CSS linting. Includes custom <code>.csscomb.json</code> in project root with basically the same property order as Recess.</li>
<li>Fixes duplicate CSS generation from the nested <code>.clearfix</code> class and mixin by switching to <code>&:extend(.mixin all)</code> (also mentioned in changes section).</li>
<li>Compiled CSS looks only slightly different—yay!</li>
</ul>
</li>
<li><a href="https://github.com/twbs/bootstrap/issues/11804">#11804</a>: Enable CSS source maps in <code>grunt-contrib-less</code>.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/12003">#12003</a>: Customizer now compiles <code>theme.less</code> with updated values.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/12315">#12315</a>: Add npm caching based on <code>npm-shrinkwrap.canonical.json</code>.</li>
</ul>
</div><div class="post">
<h1 class="post-title fw-600">
<a href="/2013/12/05/bootstrap-3-0-3-released/" class="text-decoration-none">
Bootstrap 3.0.3 released
</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 Dec 13 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>
December 05, 2013
</span>
</div>
<div class="ratio ratio-16x9">
<iframe class="lazy" data-src="https://www.youtube-nocookie.com/embed/xy4FXhkm6Nw?rel=0" title="YouTube Video" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" width="760" height="570" allowfullscreen></iframe>
</div>
<p>Today we’re shipping another patch release, v3.0.3, to fix a few dozen bugs and improve our documentation.</p>
<p><a class="btn-link" href="https://github.com/twbs/bootstrap/archive/v3.0.3.zip">Download Bootstrap 3.0.3</a> or hit the <a href="https://github.com/twbs/bootstrap">GitHub repository</a></p>
<hr>
<h3 id="key-changes">Key changes</h3>
<p>There are a few dozen bug fixes and changes in this release, but we’ve called out the ones we think matter most:</p>
<ul>
<li>Padding of <code>.navbar-collapse</code> and alignment of <code>.navbar-right:last-child</code> elements has been reworked.</li>
<li>Added a <code>max-width: 100%;</code> to <code>.container</code>s.</li>
<li>Restored the twelfth column’s <code>float: left;</code> at all grid tiers.</li>
</ul>
<p>See the list below for more information on those changes and more.</p>
<h3 id="specific-bug-fixes-and-changes">Specific bug fixes and changes</h3>
<ul>
<li><a href="https://github.com/twbs/bootstrap/issues/9927">#9927</a>: Update non-responsive example to prevent <code>.navbar-collapse</code> border from increasing height and increase specificity of nav selectors to keep dropdowns looking the same.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/10147">#10147</a>: Remove outline from carousel controls on focus.</li>
<li><a href="https://github.com/twbs/bootstrap/pull/10353">#10353</a>: Tell Bower to ignore development and documentation files.</li>
<li><a href="https://github.com/twbs/bootstrap/pull/10483">#10483</a>, <a href="https://github.com/twbs/bootstrap/issues/10357">#10357</a>: Make .container mixin-friendly by moving the width declarations within one class.</li>
<li><a href="https://github.com/twbs/bootstrap/pull/10662">#10662</a>: Enable individually linked images within thumbnails.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/10744">#10744</a>: Use <code>border-style: solid;</code> on <code>.caret</code>s to undo a previous Firefox fix that appears to no longer work.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/10936">#10936</a>: Increase height of large inputs to fix Firefox inconsistencies by using <code>ceil()</code> instead of <code>floor()</code>.</li>
<li><a href="https://github.com/twbs/bootstrap/pull/10941">#10941</a>: Fix Glyphicons path for those importing <code>bootstrap.less</code> from another directory.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/10979">#10979</a>: Don’t use <code>.img-thumbnail</code> as a mixin for <code>.thumbnail</code> to avoid duplicate and unnecessary styles.</li>
<li><a href="https://github.com/twbs/bootstrap/pull/11217">#11217</a>: Fix vertical alignment of labels within buttons, just like badges in buttons.</li>
<li><a href="https://github.com/twbs/bootstrap/pull/11268">#11268</a>: Account for badges within buttons by matching background to text color and text color to background.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/11277">#11277</a>: Drop the <code>abbr</code> element from the <code>.initialism</code> selector.</li>
<li><a href="https://github.com/twbs/bootstrap/pull/11299">#11299</a>: Support <code>.h1</code> in jumbotrons.</li>
<li><a href="https://github.com/twbs/bootstrap/pull/11351">#11351</a>: Correct grid class reset on input groups by using attribute selector, not an old class from v3 betas.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/11357">#11357</a>: Vertically center <code>.btn-sm</code> and <code>.btn-xs</code> variations of <code>.navbar-btn</code>s in the navbar.</li>
<li><a href="https://github.com/twbs/bootstrap/pull/11376">#11376</a>: Don’t deselect radio buttons when double clicking.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/11387">#11387</a>: Improve nesting on table classes to enable easier use of mixins.</li>
<li><a href="https://github.com/twbs/bootstrap/pull/11388">#11388</a>: Simplify contextual table styles mixin (also drops the <code>border</code> parameter since we longer apply that anyway).</li>
<li><a href="https://github.com/twbs/bootstrap/issues/11390">#11390</a>: Add <code>max-width: 100%;</code> to containers within jumbotrons to avoid horizontal scrollbar.</li>
<li><a href="https://github.com/twbs/bootstrap/pull/11402">#11402</a>: Set <code>width: auto;</code> on <code>select.form-control</code> within <code>.form-inline</code>.</li>
<li><a href="https://github.com/twbs/bootstrap/pull/11414">#11414</a>: Add <code>.small</code> support to blockquote citations.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/11425">#11425</a>: Use <code>margin</code> instead of <code>padding</code> on <code>.modal-dialog</code> to click-thru to <code>.modal-backdrop</code>.</li>
<li><a href="https://github.com/twbs/bootstrap/pull/11432">#11432</a>: Corrected color contrast to WCAG 2.0 AA for <code>@state-</code> variables (applies to forms and labels).</li>
<li><a href="https://github.com/twbs/bootstrap/issues/11444">#11444</a>: Use <code>@navbar-padding-vertical</code> for nav links vertical padding.</li>
<li><a href="https://github.com/twbs/bootstrap/pull/11449">#11449</a>: Prefer Menlo over Monaco for monospaced fonts.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/11468">#11468</a>: Prevent default gradient <code>background-image</code> on <code>.navbar-toggle</code> in Firefox for Android.</li>
<li><a href="https://github.com/twbs/bootstrap/pull/11476">#11476</a>: Remove unnecessary prefixed keyframe declarations for animated progress bars. Given our browser support requirements, we can drop the <code>-moz-</code> prefix as the last several versions don’t require it.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/11477">#11477</a>: Use namespace events for dropdowns and carousel.</li>
<li><a href="https://github.com/twbs/bootstrap/pull/11493">#11493</a>: Ensure proper width of dropdown buttons within vertical button groups.</li>
<li><a href="https://github.com/twbs/bootstrap/pull/11499">#11499</a>: Switch from <code>overflow-y: auto;</code> to <code>overflow-y: visible;</code> to prevent vertical scrollbar in some navbar situations.</li>
<li><a href="https://github.com/twbs/bootstrap/pull/11502">#11502</a>: Add missing data namespace for dropdown plugin.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/11513">#11513</a>: Float <code>navbar-text</code> elements only when screen width is above <code>@grid-float-breakpoint</code>.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/11515">#11515</a>: Reorder the headings with body text and text emphasis classes.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/11516">#11516</a>: Invert dropdown divider border in navbars.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/11530">#11530</a>: Reworked <code>padding</code> on <code>.navbar-collapse</code> and negative <code>margin</code> for right-aligned navbar content to ensure proper alignment on the right side.</li>
<li><a href="https://github.com/twbs/bootstrap/pull/11536">#11536</a>: Add support for button dropdowns within justified button groups.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/11544">#11544</a>: Add <code>color: inherit;</code> to <code>.panel-title</code> to ensure proper text color when customizing <code>@headings-color</code>.</li>
<li><a href="https://github.com/twbs/bootstrap/pull/11551">#11551</a>: Remove color from <code>outline</code> reset for improved outlines on focus.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/11553">#11553</a>: Prevent double border on tables in panels without <code>thead</code> content.</li>
<li><a href="https://github.com/twbs/bootstrap/pull/11598">#11598</a>: Remove line breaks in minified CSS.</li>
<li><a href="https://github.com/twbs/bootstrap/pull/11599">#11599</a>: Explicitly call out font files in <code>bower.json</code> to avoid npm errors.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/11610">#11610</a>: Add <code>@grid-float-breakpoint-max</code> to better link navbar behavior across viewports and improve customization when setting <code>@grid-float-breakpoint</code>.</li>
<li><a href="https://github.com/twbs/bootstrap/pull/11614">#11614</a>: Account for responsive tables within panels.</li>
<li><a href="https://github.com/twbs/bootstrap/pull/11617">#11617</a>: Include jspm package configuration in <code>package.json</code>.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/11623">#11623</a>: Reset <code>position</code> to <code>static</code> for grid columns within tables to prevent borders from hiding in IE9, IE10, and Firefox.</li>
<li><a href="https://github.com/twbs/bootstrap/pull/11648">#11648</a>: Restore twelfth column’s float.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/11658">#11658</a>: Increase <code>min-height</code> of <code>.radio</code>/<code>.checkbox</code> for horizontal forms to ensure alignment of content below.</li>
<li><a href="https://github.com/twbs/bootstrap/pull/11693">#11693</a>: Adds <code>.table</code> to responsive visibility mixin.</li>
<li><a href="https://github.com/twbs/bootstrap/pull/11694">#11694</a>: Remove unnecessary prefixes for gradient mixins given our stated browser support.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/11712">#11712</a>: Better support for .table-responsive within .panel’s.</li>
<li>Removed browser default top margin from <code>dl</code>s. <a href="https://github.com/twbs/bootstrap/commit/841da88f3fc93740cca07b6e4581a333d77964f0">Commit</a></li>
</ul>
<h3 id="docs-changes">Docs changes</h3>
<p>Be sure to run <code>npm install</code> if you’re running <code>grunt</code> locally—we’ve updated our build process and have some new dependencies.</p>
<ul>
<li><a href="https://github.com/twbs/bootstrap/issues/9898">#9898</a>: Improve scrollspy and affix plugin documentation.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/10716">#10716</a>: Update “What’s included” docs section with info on full source code download directory structure.</li>
<li><a href="https://github.com/twbs/bootstrap/pull/11303">#11303</a>: Add link to the docs site in compiled assets, and remove personal usernames.</li>
<li><a href="https://github.com/twbs/bootstrap/pull/11330">#11330</a>: Add <code>overflow-x: hidden;</code> to <code>body</code> in offcanvas example to prevent horizontal scrolling.</li>
<li><a href="https://github.com/twbs/bootstrap/pull/11369">#11369</a>: Speed up jQuery and Twitter widgets on docs pages by using Google’s CDN for jQuery and the async snippet from the Twitter dev site for the widgets.</li>
<li><a href="https://github.com/twbs/bootstrap/pull/11385">#11385</a>: Warn about Webkit bug for justified nav example.</li>
<li><a href="https://github.com/twbs/bootstrap/pull/11409">#11409</a>: Add release checklist to contributing guidelines.</li>
<li><a href="https://github.com/twbs/bootstrap/pull/11412">#11412</a>: Add <code>word-wrap: break-word;</code> to docs Glyphicons class names to ensure proper wrapping in IE10-11.</li>
<li><a href="https://github.com/twbs/bootstrap/pull/11434">#11434</a>: Mention form validation class changes in migration docs.</li>
<li><a href="https://github.com/twbs/bootstrap/pull/11534">#11534</a>: Document that modal <code>show()</code> and <code>hide()</code> return before animation finishes.</li>
<li><a href="https://github.com/twbs/bootstrap/issues/11634">#11634</a>: Add warning to docs to not combine icon classes with other elements.</li>
<li><a href="https://github.com/twbs/bootstrap/pull/11671">#11671</a>: Updated third party asset libraries (for Customizer and Holder, our thumbnail utility).</li>
<li><a href="https://github.com/twbs/bootstrap/pull/11701">#11701</a>: Switch to Sauce Labs for our cross-browser JS unit testing needs.</li>
<li>Removed mention of Chrome from Webkit rendering bug for justified nav. <a href="https://github.com/twbs/bootstrap/commit/4cbc8d49b10f707029019aaa5eba50e56390a3c5">Commit</a></li>
</ul>
<p>As always, get the details from the <a href="https://github.com/twbs/bootstrap/issues?milestone=24&q=is%3Aclosed">v3.0.3 milestone</a>.</p>
<h2 id="up-next">Up next</h2>
<p>Next up is v3.1.0, the first new feature release for Bootstrap 3. Stay tuned for more information on what’ll be in that release as we continue to plan out subsequent releases.</p>
</div>
</div>
<div class="pagination"><a class="pagination-item older" href="/page/18/">Older</a>
<a class="pagination-item newer" href="/page/16/">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>
|
