-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathblog-post.html
More file actions
248 lines (228 loc) · 13.1 KB
/
Copy pathblog-post.html
File metadata and controls
248 lines (228 loc) · 13.1 KB
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
<!doctype html>
<html lang="en" data-bs-theme="light">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>What changed in Bootstrap 6 — Stratos blog</title>
<meta name="description" content="A long-form article laid out with Bootstrap 6's new .prose typography scope, breadcrumbs, table of contents and pagination.">
<link rel="stylesheet" href="assets/vendor/bootstrap6/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/css/style.css">
</head>
<body data-bs-spy="scroll" data-bs-target="#tocNav" data-bs-top-margin="120px" data-bs-smooth-scroll="true">
<a class="visually-hidden-focusable btn-solid theme-primary m-2" href="#main">Skip to main content</a>
<header class="site-header" id="siteHeader">
<nav class="navbar lg:navbar-expand" aria-label="Main">
<div class="container">
<a class="navbar-brand d-flex align-items-center gap-2 fw-semibold" href="index.html">
<span class="brand-mark" aria-hidden="true">S</span> Stratos
</a>
<dialog class="drawer drawer-end" tabindex="-1" id="navDrawer" aria-labelledby="navDrawerLabel">
<div class="drawer-header">
<h5 class="drawer-title" id="navDrawerLabel">Menu</h5>
<button type="button" class="btn-close" data-bs-dismiss="drawer" aria-label="Close"></button>
</div>
<div class="drawer-body mb-2 lg:mb-0">
<ul class="nav navbar-nav me-auto">
<li class="nav-item"><a class="nav-link" href="index.html">Home</a></li>
<li class="nav-item"><a class="nav-link" href="components.html">Components</a></li>
<li class="nav-item"><a class="nav-link" href="forms.html">Forms</a></li>
<li class="nav-item"><a class="nav-link" href="dashboard.html">Dashboard</a></li>
<li class="nav-item"><a class="nav-link" href="pricing.html">Pricing</a></li>
<li class="nav-item"><a class="nav-link active" aria-current="page" href="blog-post.html">Blog</a></li>
</ul>
</div>
</dialog>
<div class="d-flex align-items-center gap-2 ms-auto">
<button class="btn-icon" type="button" id="themeToggle" aria-label="Toggle color mode">
<svg class="theme-icon-light" width="18" height="18" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" aria-hidden="true"><circle cx="8" cy="8" r="3.25"/><path d="M8 1v1.5M8 13.5V15M15 8h-1.5M2.5 8H1m11-4-1 1M5 11l-1 1m0-8 1 1m6 6 1 1"/></svg>
<svg class="theme-icon-dark" width="18" height="18" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M6 .278a.77.77 0 0 1 .08.858 7.2 7.2 0 0 0-.878 3.46c0 4.021 3.278 7.277 7.318 7.277q.792-.001 1.533-.16a.79.79 0 0 1 .81.316.73.73 0 0 1-.031.893A8.35 8.35 0 0 1 8.344 16C3.734 16 0 12.286 0 7.71 0 4.266 2.114 1.312 5.124.06A.75.75 0 0 1 6 .278"/></svg>
</button>
<button class="btn-icon navbar-toggler" type="button" data-bs-toggle="drawer" data-bs-target="#navDrawer" aria-controls="navDrawer" aria-label="Open navigation">
<span class="navbar-toggler-icon" aria-hidden="true"></span>
</button>
</div>
</div>
</nav>
</header>
<main id="main" class="section">
<div class="container">
<nav aria-label="breadcrumb" class="mb-4">
<ol class="breadcrumb fs-sm">
<li class="breadcrumb-item"><a class="breadcrumb-link" href="index.html">Home</a></li>
<li class="breadcrumb-divider">/</li>
<li class="breadcrumb-item"><a class="breadcrumb-link" href="#">Blog</a></li>
<li class="breadcrumb-divider">/</li>
<li class="breadcrumb-item" aria-current="page"><a class="breadcrumb-link active" href="#">Bootstrap 6</a></li>
</ol>
</nav>
<div class="shell">
<aside class="shell-aside">
<p class="eyebrow fs-xs fg-3 mb-2">Contents</p>
<ul class="shell-nav nav" id="tocNav">
<li><a class="nav-link" href="#why">Why a major version</a></li>
<li><a class="nav-link" href="#prefixes">Prefix syntax</a></li>
<li><a class="nav-link" href="#tokens">Theme tokens</a></li>
<li><a class="nav-link" href="#native">Native elements</a></li>
<li><a class="nav-link" href="#esm">ESM only</a></li>
<li><a class="nav-link" href="#should">Should you upgrade</a></li>
</ul>
</aside>
<div>
<article>
<header class="mb-6">
<div class="d-flex flex-wrap align-items-center gap-2 mb-3">
<span class="chip">Engineering</span>
<span class="chip">Frontend</span>
</div>
<h1 class="fs-5xl fw-bold mb-4" style="letter-spacing:-.03em;text-wrap:balance">
What actually changed in Bootstrap 6
</h1>
<div class="d-flex align-items-center gap-3">
<span class="avatar"><span class="avatar-initials">PN</span></span>
<div>
<p class="fw-semibold fs-sm mb-0">Priya Nadkarni</p>
<p class="fg-3 fs-xs mb-0">27 July 2026 · 9 min read</p>
</div>
</div>
</header>
<div class="alert theme-info mb-6" role="alert">
<strong>Note.</strong> Bootstrap 6 is still an alpha and has not been published
to npm. Everything here is written against the <code>v6-dev</code> branch.
</div>
<!-- .prose scopes rich typography without touching the rest of the page -->
<div class="prose">
<h2 id="why">Why a major version</h2>
<p>
Bootstrap 5 shipped in 2021, and the platform moved a long way underneath it.
Cascade layers landed. <code>color-mix()</code> and <code>oklch()</code> became
broadly usable. <code><dialog></code> grew a real top layer, a focus trap
and a backdrop. Bootstrap 6 is largely the framework catching up to all of it —
and deleting the JavaScript it no longer needs.
</p>
<p>
The upgrade is not a rename pass. Grid classes, colour utilities, three component
names and the entire JavaScript entry point all change. Budget for a rewrite of
your markup, not a find-and-replace.
</p>
<h2 id="prefixes">Responsive prefixes move to the front</h2>
<p>
The infix is gone. Breakpoints and pseudo-states are now prefixes with a colon,
which reads much closer to Tailwind:
</p>
<ul>
<li><code>.d-md-none</code> becomes <code>.md:d-none</code></li>
<li><code>.col-md-6</code> becomes <code>.md:col-6</code></li>
<li><code>.opacity-50-hover</code> becomes <code>.hover:opacity-50</code></li>
<li><code>xxl</code> is renamed <code>2xl</code></li>
</ul>
<p>
Breakpoint values moved too — <code>lg</code> from 992px to 1024px,
<code>xl</code> from 1200px to 1280px, and <code>2xl</code> to 1536px. If your
layout was tuned to the old numbers, it will shift.
</p>
<h2 id="tokens">Per-colour classes become theme tokens</h2>
<p>
This is the change with the widest blast radius. Every
<code>.btn-primary</code>, <code>.alert-success</code> and
<code>.bg-danger</code> variant collapses into a composition:
</p>
<blockquote>
<p>
A component picks its <em>shape</em>, and a <code>.theme-*</code> class supplies
the colour. <code>.btn-primary</code> is now <code>.btn-solid .theme-primary</code>.
</p>
</blockquote>
<p>
Adding <code>.theme-primary</code> sets <code>--theme-bg</code>,
<code>--theme-fg</code>, <code>--theme-border</code> and friends, which the
component reads. The upside is that one token works across buttons, badges,
alerts, tables, cards and accordions — and your own components can read the same
variables.
</p>
<h2 id="native">Three components became native elements</h2>
<p>
Modal is now Dialog, built on <code><dialog></code>. Offcanvas is now Drawer,
also a <code><dialog></code>. Accordion is now
<code><details></code>/<code><summary></code>, with the
<code>name</code> attribute replacing <code>data-bs-parent</code>.
</p>
<p>
The practical effect is that Bootstrap deleted <code>util/backdrop</code>,
<code>util/focustrap</code> and <code>util/scrollbar</code> outright. The browser
does that work now, and it does it better — find-in-page can open a closed
<code><details></code>, which no div-based accordion ever managed.
</p>
<h2 id="esm">The JavaScript is ESM-only</h2>
<p>
No more UMD bundle, and therefore no more <code>window.bootstrap</code>. Script
tags need <code>type="module"</code>, and global calls become imports:
</p>
<pre><code>import { Tooltip } from 'bootstrap'
const tip = Tooltip.getOrCreateInstance(el)</code></pre>
<p>
Data attributes are untouched. If you only ever wrote
<code>data-bs-toggle="modal"</code>, the migration is renaming that to
<code>dialog</code> and adding <code>type="module"</code>.
</p>
<h2 id="should">Should you upgrade yet</h2>
<p>
Not for production. There is no npm release, the branch is taking several commits
a day, and the alpha still has rough edges — a closed <code>.dialog</code>
currently keeps its layout space, and Combobox logs a console error on every
instance.
</p>
<p>
It is worth building something now, though. The component set is genuinely ahead
of v5 — Combobox, Datepicker, OTP, password strength and nav overflow have no v5
equivalent — and the markup changes are large enough that you want the learning
done before the real alpha lands.
</p>
</div>
<hr class="my-6">
<div class="d-flex flex-wrap justify-content-between align-items-center gap-3">
<div class="d-flex align-items-center gap-2">
<span class="fs-sm fg-3">Share</span>
<a class="btn-icon" href="#" aria-label="Share on X"><svg width="15" height="15" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M12.6 1h2.3l-5 5.7L15.8 15h-4.6l-3.6-4.7L3.4 15H1.1l5.4-6.1L1 1h4.7l3.3 4.3zm-.8 12.6h1.3L5.2 2.3H3.8z"/></svg></a>
<a class="btn-icon" href="#" aria-label="Share on LinkedIn"><svg width="15" height="15" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true"><path d="M0 1.15C0 .52.53 0 1.18 0h13.64C15.47 0 16 .52 16 1.15v13.7c0 .63-.53 1.15-1.18 1.15H1.18C.53 16 0 15.48 0 14.85zm4.94 12.22V6.17H2.54v7.2zm-1.2-8.18c.84 0 1.36-.55 1.36-1.24-.02-.71-.52-1.25-1.34-1.25s-1.36.54-1.36 1.25c0 .69.52 1.24 1.32 1.24zm4.31 8.18V9.36c0-.22.02-.43.08-.58.17-.43.56-.87 1.21-.87.86 0 1.2.65 1.2 1.6v3.86h2.4V9.23c0-2.22-1.18-3.25-2.76-3.25-1.28 0-1.85.7-2.17 1.2v.02h-.02l.02-.02V6.17h-2.4c.03.68 0 7.2 0 7.2z"/></svg></a>
</div>
<nav aria-label="Post navigation">
<ul class="pagination mb-0">
<li class="page-item"><a class="page-link" href="#">← Previous post</a></li>
<li class="page-item"><a class="page-link" href="#">Next post →</a></li>
</ul>
</nav>
</div>
</article>
<!-- Related -->
<section class="mt-9">
<h2 class="fs-2xl fw-bold mb-4">Related reading</h2>
<div class="row g-4">
<div class="md:col-6">
<article class="feature-card">
<span class="chip mb-3">Engineering</span>
<h3 class="fs-lg fw-semibold mb-2">Measuring cycle time honestly</h3>
<p class="fg-2 fs-sm mb-0">Why board columns lie, and what to instrument instead.</p>
</article>
</div>
<div class="md:col-6">
<article class="feature-card">
<span class="chip mb-3">Product</span>
<h3 class="fs-lg fw-semibold mb-2">Release notes nobody reads</h3>
<p class="fg-2 fs-sm mb-0">A format that survives contact with actual customers.</p>
</article>
</div>
</div>
</section>
</div>
</div>
</div>
</main>
<footer class="site-footer bg-2 py-6 mt-9">
<div class="container d-flex flex-wrap justify-content-between align-items-center gap-3">
<p class="fg-3 fs-xs mb-0">© <span id="year">2026</span> Stratos. A free template for uicookies.</p>
<p class="fg-3 fs-xs mb-0">Built with Bootstrap 6.0.0-alpha1</p>
</div>
</footer>
<script type="module" src="assets/js/main.js"></script>
</body>
</html>