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
|
<!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="/2012/10/29/bootstrap-2-2-0-released/" class="text-decoration-none">
Bootstrap 2.2.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">
<span>@mdo</span>
</a>
<span class="d-flex align-items-center ms-3" title="29 Oct 12 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 29, 2012
</span>
</div>
<p>Aww yeah, our first release since leaving Twitter is here with Bootstrap 2.2.0! We originally planned to release this as 2.1.2, but given the timing and scope we’re bumping the version. Included in this release are dozens of bug fixes, documentation enhancements, and a few new and improved features.</p>
<h2 id="tldr">tl;dr</h2>
<p>2.1.2 is now 2.2.0: four new example templates, added media component, new typographic scale, fixed that box-shadow mixin bug, fixed z-index issues, and <a href="https://github.com/twbs/bootstrap/issues?milestone=15&q=is%3Aclosed">more</a>.</p>
<h2 id="highlights">Highlights</h2>
<ul>
<li><strong>Added four new example templates</strong> to the docs, including a narrow marketing page, sign in form, sticky footer, and a fancy carousel (created for an upcoming .net magazine article).</li>
<li><strong>Added the media component</strong>, to create larger common components like comments, Tweets, etc.</li>
<li><strong>New variable-driven typographic scale</strong> based on <code>@baseFontSize</code> and <code>@baseLineHeight</code>.</li>
<li>Revamped mini, small, and large padding via new variables for inputs and buttons so everything is the same size.</li>
<li>Reverted 2.1.1’s <code>.box-shadow();</code> mixin change that caused compiler errors.</li>
<li>Improved dropdown submenus to support dropups and left-aligned submenus.</li>
<li>Fixed z-index issues with tooltips and popovers in modals.</li>
<li>Hero unit now sets basic type styles for the entire component, rather than on <code>.hero-unit p { ... }</code>.</li>
<li>Updated JavaScript plugins and docs to jQuery 1.8.1.</li>
<li>Added Contributing.md file.</li>
<li>Added support for installing Bootstrap via <a href="https://bower.io/">Bower</a>.</li>
<li>Miscellaneous variable improvements across the board.</li>
<li>Miscellaneous documentation typos fixed.</li>
</ul>
<p>For the full list of issues included in this release, visit the <a href="https://github.com/twbs/bootstrap/issues?milestone=15&q=is%3Aclosed">2.2.0 milestone on GitHub</a>. Otherwise, be sure to <a href="https://getbootstrap.com/">visit the docs</a> or download the latest to get your hands on 2.2.0.</p>
<p><a class="btn-link" href="https://github.com/twbs/bootstrap/archive/v2.2.0.zip">Download Bootstrap 2.2.0</a> <span class="muted">(latest master ZIP)</span></p>
<h2 id="next-steps">Next steps</h2>
<p>As a quick side note, we’re still working on moving Bootstrap to its own organization on GitHub. That will come with a couple other big changes, but more on that soon. We’ll be jumping on the next release shortly for more bugfixes, but until then enjoy the fixes and new hotness!</p>
<p>Lastly, thanks everyone again for submitting issues and contributing—you rock!</p>
</div><div class="post">
<h1 class="post-title fw-600">
<a href="/2012/09/29/onward/" class="text-decoration-none">
Onward
</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 12 00:00 UTC">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="me-2" viewBox="0 0 16 16" role="img" fill="currentColor">
<path d="M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1z"/>
<path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/>
</svg>
September 29, 2012
</span>
</div>
<p>Working at Twitter the last two and a half years has been incredible. Both Jacob and I have worked with a lot of amazing people on some pretty amazing projects, but nothing has been more enjoyable or rewarding than working on Bootstrap. Despite us leaving Twitter to go our <a href="https://www.youtube.com/watch?v=LatorN4P9aA">separate ways</a>, we’ll both be continuing our work on the project.</p>
<p>Bootstrap will remain a Twitter project on GitHub for the time being, but we’ve realized the project has grown beyond us and the Twitter brand. It’s a huge project playing a pretty awesome role in the web development industry, and we’re excited to see it continue to grow. To that end, we’ve begun working to move Bootstrap into its own open source organization. It will take time, but we’re dedicated to making it happen.</p>
<p>In the coming weeks, we’ll release another bugfix update (2.1.2) to address a few things, and then it’s full steam ahead on improving some key areas of the framework (modals, carousels, customizer, etc). We’ll share more info on those updates as plans take shape.</p>
<p>Until then, we have nothing but love for Twitter and the web development community. Thank you all so much for everything.</p>
</div><div class="post">
<h1 class="post-title fw-600">
<a href="/2012/09/04/bootstrap-2-1-1-released/" class="text-decoration-none">
Bootstrap 2.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="04 Sep 12 00:00 UTC">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="me-2" viewBox="0 0 16 16" role="img" fill="currentColor">
<path d="M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1z"/>
<path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/>
</svg>
September 04, 2012
</span>
</div>
<p><a href="/2012/08/20/bootstrap-2-1-0-released/">Two weeks later</a>, we’ve closed another 500 issues against Bootstrap. That includes all the dupes—you nerds like reporting typos—and invalid issues that don’t end up making it on the official release milestone. But, what’s awesome is that we have 2.1.1 ready to rock with 73 bugfixes.</p>
<h2 id="get-it">Get it</h2>
<p>Head on over to <a href="https://getbootstrap.com">https://getbootstrap.com</a> and get your fix, or download the <a href="https://github.com/twbs/bootstrap/archive/v2.1.1.zip">latest master ZIP right from GitHub</a>.</p>
<h2 id="whats-changed">What’s changed</h2>
<p>Here’s the rundown:</p>
<ul>
<li>New feature: alert text. We documented these new classes, like <code>.text-success</code>, at the bottom of the <a href="https://getbootstrap.com/2.3.2/base-css.html#typography">Typography section</a> along with the long undocumented <code>.muted</code>.</li>
<li>Fixed a lot of typos in the docs. Spelling is hard.</li>
<li>Made the <code>.box-shadow()</code> mixin more durable. It no longer requires escaping for multiple shadows, meaning you can easily use variables and functions in them once again.</li>
<li>Widened <code>.dl-horizontal dt</code> and <code>.horizontal-form .control-group</code> to better handle the increased font-size.</li>
<li>Dropdown submenus improved: now you only see the next level, not all levels, on hover of the submenu toggle.</li>
<li>Clarified jQuery and Bootstrap template requirements in Getting Started section.</li>
<li><code>select</code> now utilizes <code>@inputBorder</code>.</li>
<li><code>.lead</code> now scales up from <code>@baseFontSize</code> instead of being a fixed font-size and line-height.</li>
<li>Fixed the vertical three color gradient in latest Firefox.</li>
<li>Reordered some variables that caused errors in certain Less compilers.</li>
</ul>
<p>There’s a bunch more, so do run through the <a href="https://github.com/twbs/bootstrap/issues?milestone=14&q=is%3Aclosed">2.1.1 milestone</a> when you can, but those are the big ones.</p>
<h2 id="next-up">Next up</h2>
<p><strong>More bug fixes, more feature improvements.</strong> 2.1.2 will be coming shortly and we’ll work to improve a handful of issues that we punted on for 2.1.1. Beyond that, we’ve scoped out the <a href="https://github.com/twbs/bootstrap/issues/milestones">next few releases</a> around a set of key components like modals and carousels.</p>
<p>We’ll continue to add new features as appropriate, but we’re primarily focused on improving current functionality in the next few months.</p>
</div><div class="post">
<h1 class="post-title fw-600">
<a href="/2012/08/22/new-rss-feed/" class="text-decoration-none">
New RSS feed
</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="22 Aug 12 00:00 UTC">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="me-2" viewBox="0 0 16 16" role="img" fill="currentColor">
<path d="M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1z"/>
<path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/>
</svg>
August 22, 2012
</span>
</div>
<p>Roughly two weeks ago we upgraded the blog to use Jekyll and GitHub Pages instead of WordPress. When we did that, we forgot about the RSS feed. A few awesome folks noted we were missing it and so we’ve added it back. Unfortunately it’s not the same URL, but it’s there nonetheless.</p>
<p>Here’s the URL for the new feed: <a href="https://blog.getbootstrap.com/feed.xml">https://blog.getbootstrap.com/feed.xml</a>.</p>
<p>It’s also in the <code><head></code> of the blog’s pages, so entering just the root URL should resolve fine for you in most RSS apps. Again, sorry for the oversight and please continue to let us know if we can do anything else to improve the blog.</p>
<p>Thanks!</p>
</div><div class="post">
<h1 class="post-title fw-600">
<a href="/2012/08/20/bootstrap-2-1-0-released/" class="text-decoration-none">
Bootstrap 2.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="20 Aug 12 00:00 UTC">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" class="me-2" viewBox="0 0 16 16" role="img" fill="currentColor">
<path d="M11 6.5a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v1a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5v-1z"/>
<path d="M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/>
</svg>
August 20, 2012
</span>
</div>
<p>After a smaller 2.0.4 release, we’ve got another huge update that resolves tons of bugs, improves the flexibility and durability of our code, and introduces a few awesome new features. It’s a big release wrapped in a brand new set of docs and we couldn’t be more stoked to launch it.</p>
<h2 id="tldr">tl;dr</h2>
<p>New docs, affix plugin, submenus on dropdowns, block buttons, image styles, fluid grid offsets, new navbar, increased font-size and line-height, 120+ closed bugs, and more. <a href="https://getbootstrap.com/">Go get it.</a></p>
<h2 id="improved-documentation">Improved documentation</h2>
<p>In addition to sporting a fresh visual style, the content of our docs has been overhauled once again. Good-bye long-winded marketing copy and multiple columns, hello succinct and directive single-column documentation. We’ve got a new tagline, new layout and navigation, and (more) clearer examples.</p>
<h2 id="key-changes-and-new-features">Key changes and new features</h2>
<p>We had higher expectations for the number of new features in 2.1, but we toned it back to get this release out the door in a manageable form. We’ve still added some great new features and fixed tones of bugs, so here’s a brief overview of what’s new.</p>
<ul>
<li><strong>Submenu support on dropdowns.</strong> We avoided this for some time as we thought it would unnecessarily complicate things, but we’ve backtracked on that and opted to add them in. See the docs for more info.</li>
<li><strong>Affix JavaScript plugin.</strong> Make anything stick to the top of the viewport as you scroll with our newest plugin, built to power our new docs navigation.</li>
<li><strong>Block level buttons.</strong> Add <code>.btn-block</code> to a button to make it full-width.</li>
<li><strong>State classes on table rows.</strong> Better convey success, warning, and error messages in tables.</li>
<li><strong>Improved disabled states on navs and dropdowns.</strong> Where by “improve” we mean actually present—just add <code>.disabled</code> to the <code>li</code>.</li>
<li><strong>The navbar component is now white by default, with an optional class to darken it.</strong> In order to have two options for the navbar, light and dark, we needed to have better defaults. Having a lighter default navbar means fewer lines of code as we don’t need to override anything for the basic navbar functionality and the override it again to restore the default styles. Missing the black? Just add <code>.navbar-inverse</code> to get the dark gray navbar back.</li>
<li><strong>Improved prepended and appended inputs.</strong> No need to place the <code>input</code> and <code>.add-on</code> on the same line of code (sorry about that by the way). Break them up as you like and they’ll still stick together with some crafty <code>font-size</code> working.</li>
<li><strong>New base font-size and line-height.</strong> 13px/18px is out, 14px/20px is in. This also has changed the size, line-height, and margin of our heading elements, buttons, and more.</li>
<li><strong>Added variable for navbar collapse trigger point.</strong> Instead of a fixed pixel width of <code>980px</code> for triggering the collapsed navbar, we now use a variable so you can customize it for your projects.</li>
<li><strong>Fluid grid offsets.</strong> Thanks to our contributors, the fluid grid now has offset support to match our fixed (pixel) grid.</li>
<li><strong>Fluid grid system variables are no longer fixed percentages.</strong> Instead, they are calculated in LESS with <code>percentage()</code> based on the default, fixed-width grid variables. Math!</li>
<li><strong>Removed LESS docs page.</strong> We will no longer document variables and mixins in two places—rewriting that stuff was painful and took too much time. Instead, just checkout the .less files.</li>
</ul>
<h2 id="thanks-nerds">Thanks, nerds</h2>
<p>Once again, we couldn’t have done this without all you nerds out there supporting us with your contributions, bugfixes, and feature requests. You keep this project going strong and we thank you deeply for your support.</p>
<p><3</p>
<hr>
<p>For the full changelog, visit the <a href="https://github.com/twbs/bootstrap/wiki/Changelog">GitHub wiki page</a> and the <a href="https://github.com/twbs/bootstrap/issues?milestone=7&q=is%3Aclosed">2.1.0 milestone</a>. We’ve already begun slating things for 2.2, but currently have no estimates on when that will be released or what exactly will make it in. We also may do a 2.1.1, but again, no promises at this point. <a href="https://www.youtube.com/watch?v=1vaQ-Y6kLOM&t=4s">Live in the now!</a></p>
</div>
</div>
<div class="pagination"><a class="pagination-item older" href="/page/22/">Older</a>
<a class="pagination-item newer" href="/page/20/">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>
|
