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
|
<!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/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">
<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 class="post">
<h1 class="post-title fw-600">
<a href="/2012/08/13/help-test-bootstrap-2-1/" class="text-decoration-none">
Help test Bootstrap 2.1
</a>
</h1>
<div class="d-flex align-items-center mb-4 text-muted author-info">
<a class="d-flex align-items-center text-muted text-decoration-none" href="https://github.com/mdo" target="_blank" rel="noopener">
<img class="mb-0 me-2 rounded-2" srcset="https://github.com/mdo.png?size=32, https://github.com/mdo.png?size=64 2x"
src="https://github.com/mdo.png?size=32"
alt="" width="32" height="32" loading="lazy">
<span>@mdo</span>
</a>
<span class="d-flex align-items-center ms-3" title="13 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 13, 2012
</span>
</div>
<p>We’re stoked to release Bootstrap 2.1 next week Monday at our <a href="https://twitter-bootstrap-birthday.eventbrite.com/">first birthday party</a>, but to make it a great release, we need your help testing it out.</p>
<p>While 2.0.4 was a smaller release, 2.1 is a much larger effort that closes nearly 100 issues and adds a handful of great features. You can see the full list of changes changes in 2.1 thus far by browsing the <a href="https://github.com/twbs/bootstrap/issues?milestone=7&q=is%3Aclosed">milestone on GitHub</a>.</p>
<h2 id="whats-included">What’s included</h2>
<p>At a broad level, we’ve got overhauled docs. They’re drastically streamlined, redesigned, and better than ever. They even include a new page for getting started with an overview of the framework. New framework features include <strong>submenu support on dropdowns</strong>, <strong>block level buttons</strong>, and the <strong>affix plugin</strong>. We’ve made many other key changes, so be sure to check it out.</p>
<p>We’ll have a more complete list of changes with our release next week.</p>
<h2 id="how-to-help">How to help</h2>
<p>Just like last time, we’re pushing out a release candidate of the 2.1 code and docs. <strong>Here’s how you can help us out:</strong></p>
<ul>
<li>Checkout the <code>2.1.0-wip</code> branch, or browse the release candidate docs so you can easily load it up on devices and such for testing.</li>
<li>Load up the new docs in your favorite, or your least favorite, browser or device and start testing.</li>
<li><a href="https://github.com/twbs/bootstrap/issues?sort=created&direction=desc&state=open">Open a new issue on GitHub</a> to report bugs. Please include as much context and information as possible. If it’s a visual bug, please include a screenshot. If it pertains to JavaScript, consider including a <a href="https://jsfiddle.net/">jsfiddle</a> or <a href="https://jsbin.com/">jsbin</a>.</li>
</ul>
<p>If you’re submitting a pull request against 2.1-wip, be sure to read the <a href="https://github.com/twbs/bootstrap/wiki/Contributing-to-Bootstrap">Contributing to Bootstrap</a> wiki page first.</p>
</div><div class="post">
<h1 class="post-title fw-600">
<a href="/2012/08/11/now-powered-by-jekyll-and-github-pages/" class="text-decoration-none">
Now powered by Jekyll and GitHub Pages
</a>
</h1>
<div class="d-flex align-items-center mb-4 text-muted author-info">
<a class="d-flex align-items-center text-muted text-decoration-none" href="https://github.com/mdo" target="_blank" rel="noopener">
<img class="mb-0 me-2 rounded-2" srcset="https://github.com/mdo.png?size=32, https://github.com/mdo.png?size=64 2x"
src="https://github.com/mdo.png?size=32"
alt="" width="32" height="32" loading="lazy">
<span>@mdo</span>
</a>
<span class="d-flex align-items-center ms-3" title="11 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 11, 2012
</span>
</div>
<p>Sorry about the database connection issues some of you may have seen in the last 24 hours. We’ve moved off WordPress for our blog and are now using GitHub pages and Jekyll. Jekyll is an amazingly lightweight and simple site generator from Tom Preston-Werner, cofounder of GitHub. Here’s why:</p>
<ul>
<li>Instead of a database, we have flat Markdown files.</li>
<li>Instead of hosting code on servers from Media Temple or another hosting provider, everything is on GitHub.</li>
<li>The posting process is as simple as writing a post and pushing the <code>gh-pages</code> branch.</li>
</ul>
<p>It’s simple, fast, and pain free. We love it and encourage you to check it out in the future. Stay tuned in the next two weeks or so for more information on our next release. Until then, enjoy the updated blog.</p>
</div><div class="post">
<h1 class="post-title fw-600">
<a href="/2012/06/01/bootstrap-2-0-4-released/" class="text-decoration-none">
Bootstrap 2.0.4 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="01 Jun 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>
June 01, 2012
</span>
</div>
<p>Following up on the large 2.0.3 release a few weeks ago, we have a fresh update to address some documentation issues and basic CSS bugs. 2.0.4 includes around thirty closed issues and is our first version under our updated release approach (shorter, more concise releases).</p>
<p>As always, here’s a quick overview of some of the top changes.</p>
<h2 id="docs">Docs</h2>
<ul>
<li>Added <code>type="button"</code> to all dismiss buttons in alerts and modals to avoid a bug in which they prevent their parent’s <code>form</code> from properly submitting.</li>
<li>Added simple documentation to Base CSS for <code>.lead</code>.</li>
<li>Added new CSS test to illustrate how the navbar, static and fixed, behaves.</li>
<li>Clarified grid sizing copy to include mention of responsive variations.</li>
<li>Reformatted the LESS docs page to prevent terrible table displays at smaller grid sizes.</li>
<li>Miscellaneous typos and tweaks.</li>
</ul>
<h2 id="css">CSS</h2>
<ul>
<li>Refactored forms.less to make our selectors more specific for fewer overrides and less code. Instead of a generic <code>input</code> selector and various resets, we target each type of input like <code>input[type="text"]</code>, <code>input[type="password"]</code>, etc.</li>
<li>Form field state (e.g., success or error) now applies to checkbox and radio labels.</li>
<li>Removed redundant CSS on <code>&lt;p&gt;</code> for <code>font-family</code>, <code>font-size</code>, and <code>line-height</code>.</li>
<li>Removed redundant <code>color</code> declaration from the <code>&lt;label&gt;</code> element.</li>
<li>Added variables for dropdown dividers border colors.</li>
<li><code>legend</code> and <code>.form-actions</code> share the same <code>border-color</code>, <code>#e5e5e5</code>.</li>
<li>Fixed some responsive issues with input-prepend and -append, notably with the fluid grid.</li>
<li>Added special CSS to prevent <code>max-width: 100%;</code> on images from messing up Google Maps rendering.</li>
<li>Scope opened dropdowns to only immediate children to avoid unintended cascade.</li>
<li>Similarly, scope floated-right dropdowns to immediate children with <code>.pull-right > .dropdown-menu</code>.</li>
<li>Updated <code>.placeholder()</code> mixin to use <code>&</code> operator in Less for proper output when compiling.</li>
<li>Added <code>-ms-input-placeholder</code> to <code>.placeholder()</code> mixin.</li>
<li>Added CSS3 hyphens mixin.</li>
<li>Fixed a bug in IE7/8 where certain form controls would not show text if the parent had a filter opacity set.</li>
</ul>
<p>For a full changelog, visit the now complete <a href="https://github.com/twbs/bootstrap/issues?milestone=11&q=is%3Aclosed">2.0.4 milestone on GitHub</a>.</p>
</div><div class="post">
<h1 class="post-title fw-600">
<a href="/2012/04/30/new-release-strategy/" class="text-decoration-none">
New release strategy
</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 Apr 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>
April 30, 2012
</span>
</div>
<p>After three large point releases focusing on massive amounts of bugfixes and documentation changes, we’re going to change up our release strategy to push out smaller, more frequent updates.</p>
<h2 id="why">Why?</h2>
<p>Releases with a hundred bugfixes are difficult to test, take much longer to ship, make changelogs super long and verbose, and have a tendency to introduce additional unforeseen bugs. In hindsight, our 2.0.3 release should have been a 2.1 given its sheer scope and the time it took to ship. Going forward, we’ll try to improve the frequency of the patches to get you better code faster.</p>
<h2 id="so-whats-next">So what’s next?</h2>
<p>At the Twitter UK Open House in London last week, we said 2.1 was our next priority. While that’s still true, we’re backing up and rethinking it’s scope. Bootstrap 2.1 may end up much narrower in focus to help us ship it earlier. We’ll still tackle all the same issues and new features we originally planned for, but across more releases. In addition, 2.1 might not be our very next release as some of those unforeseen bugs have already cropped up.</p>
<h2 id="tldr">tl;dr</h2>
<p>To keep up with the community and improve code quality, we’ll be shipping more releases more frequently.</p>
<hr>
<p>Questions? <a href="https://twitter.com/getbootstrap">Mention us on Twitter</a>.</p>
</div>
</div>
<div class="pagination"><a class="pagination-item older" href="/page/23/">Older</a>
<a class="pagination-item newer" href="/page/21/">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>
|
