Skip to content

Commit d836c38

Browse files
coliffcursoragent
coliff
and
cursoragent
authored
v6: Refine examples - headings, themes, and layout (twbs#42432)
Reduce heading sizes and remove emphasis in feature examples. Unify dark-theme styling, improve accessibility and layout, update Chart.js, and replace text-white/text-secondary with fg-* utilities across example pages. Co-authored-by: Cursor <cursoragent@cursor.com>
1 parent dd5d0d7 commit d836c38

12 files changed

Lines changed: 65 additions & 69 deletions

File tree

‎site/src/assets/examples/album/index.astro‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -6,15 +6,15 @@ import Placeholder from "@shortcodes/Placeholder.astro"
66
---
77

88
<header data-bs-theme="dark">
9-
<div class="collapse text-bg-dark" id="navbarHeader">
9+
<div class="collapse bg-black" id="navbarHeader">
1010
<div class="container">
1111
<div class="row">
1212
<div class="sm:col-8 md:col-7 py-4">
13-
<h4>About</h4>
13+
<h4 class="fg-white">About</h4>
1414
<p class="fg-2">Add some information about the album below, the author, or any other background context. Make it a few sentences long so folks can pick up some informative tidbits. Then, link them off to some social networking sites or contact information.</p>
1515
</div>
1616
<div class="sm:col-4 md:offset-1 py-4">
17-
<h4>Contact</h4>
17+
<h4 class="fg-white">Contact</h4>
1818
<ul class="list-unstyled">
1919
<li><a href="#" class="fg-white">Follow on X</a></li>
2020
<li><a href="#" class="fg-white">Like on Facebook</a></li>
@@ -24,7 +24,7 @@ import Placeholder from "@shortcodes/Placeholder.astro"
2424
</div>
2525
</div>
2626
</div>
27-
<div class="navbar navbar-dark bg-dark shadow-sm">
27+
<nav class="navbar navbar-dark bg-dark shadow-sm" aria-label="Album navigation">
2828
<div class="container">
2929
<a href="#" class="navbar-brand d-flex align-items-center">
3030
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" aria-hidden="true" class="me-2" viewBox="0 0 24 24"><path d="M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z"/><circle cx="12" cy="13" r="4"/></svg>
@@ -34,7 +34,7 @@ import Placeholder from "@shortcodes/Placeholder.astro"
3434
<svg class="navbar-toggler-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1" stroke-linecap="round"><path d="M1 3.5h14M1 8h14M1 12.5h14"/></svg>
3535
</button>
3636
</div>
37-
</div>
37+
</nav>
3838
</header>
3939

4040
<main>

‎site/src/assets/examples/cover/index.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,6 @@ export const body_class = 'd-flex h-100 text-center text-bg-dark'
2626
</main>
2727

2828
<footer class="mt-auto fg-secondary">
29-
<p>Cover template for <a href="https://getbootstrap.com/" class="text-white">Bootstrap</a>, by <a href="https://x.com/mdo" class="text-white">@mdo</a>.</p>
29+
<p>Cover template for <a href="https://getbootstrap.com/" class="fg-white">Bootstrap</a>, by <a href="https://x.com/mdo" class="fg-white">@mdo</a>.</p>
3030
</footer>
3131
</div>

‎site/src/assets/examples/dashboard/index.astro‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
export const title = 'Dashboard Template'
33
export const extra_css = ['dashboard.css']
44
export const extra_js = [
5-
{ src: 'https://cdn.jsdelivr.net/npm/chart.js@4.3.2/dist/chart.umd.js', integrity: 'sha384-eI7PSr3L1XLISH8JdDII5YN/njoSsxfbrkCTnJrzXt+ENP5MOVBxD+l6sEG4zoLp'},
5+
{ src: 'https://cdn.jsdelivr.net/npm/chart.js@4.5.1/dist/chart.umd.js', integrity: 'sha256-7MPNHuuMNNIXjj9Z/WPsWj2ENYwRcwrwuZWNyIbXZSo='},
66
{ src: 'dashboard.js'}
77
]
88
---
@@ -74,13 +74,13 @@ export const extra_js = [
7474
</ul>
7575

7676
<div id="navbarSearch" class="navbar-search w-100 collapse">
77-
<input class="form-control w-100 rounded-0 border-0" type="text" placeholder="Search" aria-label="Search">
77+
<input class="form-control w-100 rounded-0 border-0" type="search" placeholder="Search" aria-label="Search">
7878
</div>
7979
</header>
8080

8181
<div class="container-fluid">
8282
<div class="row">
83-
<div class="sidebar border border-right md:col-3 lg:col-2 p-0 bg-body-tertiary">
83+
<div class="sidebar border border-end md:col-3 lg:col-2 p-0 bg-body-tertiary">
8484
<dialog class="md:drawer drawer-end bg-body-tertiary" tabindex="-1" id="sidebarMenu" aria-labelledby="sidebarMenuLabel">
8585
<div class="drawer-header">
8686
<h5 class="drawer-title" id="sidebarMenuLabel">Company name</h5>

‎site/src/assets/examples/dialogs/index.astro‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ export const extra_css = ['dialogs.css']
2727

2828
<!-- Modal sheet style -->
2929
<div class="d-flex flex-column p-4 gap-4 md:py-5 align-items-center justify-content-center">
30-
<dialog class="dialog dialog-example rounded-4 shadow w-340px" open data-bs-theme="light">
30+
<dialog class="dialog dialog-example rounded-4 shadow w-340px" open>
3131
<div class="dialog-header border-0">
3232
<h1 class="dialog-title">Modal title</h1>
3333
<button type="button" class="btn-close" aria-label="Close"></button>
@@ -46,7 +46,7 @@ export const extra_css = ['dialogs.css']
4646

4747
<!-- Confirmation dialog -->
4848
<div class="d-flex flex-column p-4 gap-4 md:py-5 align-items-center justify-content-center">
49-
<dialog class="dialog dialog-example rounded-4 shadow w-340px" open data-bs-theme="light">
49+
<dialog class="dialog dialog-example rounded-4 shadow w-340px" open>
5050
<div class="dialog-body text-center py-4">
5151
<h5 class="fw-bold mb-2">Enable this setting?</h5>
5252
<p class="fg-2 mb-0">You can always change your mind in your account settings.</p>
@@ -62,9 +62,9 @@ export const extra_css = ['dialogs.css']
6262

6363
<!-- What's new dialog -->
6464
<div class="d-flex flex-column p-4 gap-4 md:py-5 align-items-center justify-content-center">
65-
<dialog class="dialog dialog-example rounded-4 shadow w-340px" open data-bs-theme="light">
65+
<dialog class="dialog dialog-example rounded-4 shadow w-340px" open>
6666
<div class="dialog-header border-0 pt-4">
67-
<h1 class="dialog-title fs-3xl fw-bold">What's new</h1>
67+
<h1 class="dialog-title fs-2xl fw-bold">What's new</h1>
6868
</div>
6969
<div class="dialog-body">
7070
<ul class="list-unstyled mb-0">
@@ -101,9 +101,9 @@ export const extra_css = ['dialogs.css']
101101

102102
<!-- Sign up dialog -->
103103
<div class="d-flex flex-column p-4 gap-4 md:py-5 align-items-center justify-content-center">
104-
<dialog class="dialog dialog-example rounded-4 shadow w-340px" open data-bs-theme="light">
104+
<dialog class="dialog dialog-example rounded-4 shadow w-340px" open>
105105
<div class="dialog-header border-0">
106-
<h1 class="dialog-title">Sign up for free</h1>
106+
<h1 class="dialog-title fs-xl fw-bold">Sign up for free</h1>
107107
<button type="button" class="btn-close" aria-label="Close"></button>
108108
</div>
109109
<div class="dialog-body pt-0">

‎site/src/assets/examples/drawer-navbar/index.astro‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ import Placeholder from "@shortcodes/Placeholder.astro"
6565
</div>
6666

6767
<main class="container">
68-
<div class="d-flex align-items-center p-3 my-3 text-white bg-purple rounded shadow-sm">
68+
<div class="d-flex align-items-center p-3 my-3 fg-white bg-purple rounded shadow-sm">
6969
<img class="me-3" src={getVersionedDocsPath('/assets/brand/bootstrap-logo-white.svg')} alt="" width="48" height="38">
7070
<div class="lh-1">
7171
<h1 class="h6 mb-0 fg-white lh-1">Bootstrap</h1>

‎site/src/assets/examples/features/index.astro‎

Lines changed: 24 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ export const extra_css = ['features.css']
6565
<div class="feature-icon d-inline-flex align-items-center justify-content-center theme-primary theme-contrast bg-gradient fs-3xl mb-3">
6666
<svg class="bi" width="1em" height="1em" aria-hidden="true"><use href="#collection"/></svg>
6767
</div>
68-
<h3 class="fs-3xl text-body-emphasis">Featured title</h3>
68+
<h3 class="fs-2xl">Featured title</h3>
6969
<p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
7070
<a href="#" class="icon-link">
7171
Call to action
@@ -76,7 +76,7 @@ export const extra_css = ['features.css']
7676
<div class="feature-icon d-inline-flex align-items-center justify-content-center theme-primary theme-contrast bg-gradient fs-3xl mb-3">
7777
<svg class="bi" width="1em" height="1em" aria-hidden="true"><use href="#people-circle"/></svg>
7878
</div>
79-
<h3 class="fs-3xl text-body-emphasis">Featured title</h3>
79+
<h3 class="fs-2xl">Featured title</h3>
8080
<p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
8181
<a href="#" class="icon-link">
8282
Call to action
@@ -87,7 +87,7 @@ export const extra_css = ['features.css']
8787
<div class="feature-icon d-inline-flex align-items-center justify-content-center theme-primary theme-contrast bg-gradient fs-3xl mb-3">
8888
<svg class="bi" width="1em" height="1em" aria-hidden="true"><use href="#toggles2"/></svg>
8989
</div>
90-
<h3 class="fs-3xl text-body-emphasis">Featured title</h3>
90+
<h3 class="fs-2xl">Featured title</h3>
9191
<p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
9292
<a href="#" class="icon-link">
9393
Call to action
@@ -103,35 +103,35 @@ export const extra_css = ['features.css']
103103
<h2 class="pb-2 border-bottom">Hanging icons</h2>
104104
<div class="row g-4 py-5 row-cols-1 lg:row-cols-3">
105105
<div class="col d-flex align-items-start">
106-
<div class="icon-square text-body-emphasis bg-body-secondary d-inline-flex align-items-center justify-content-center fs-xl flex-shrink-0 me-3">
106+
<div class="icon-square bg-body-secondary d-inline-flex align-items-center justify-content-center fs-xl flex-shrink-0 me-3">
107107
<svg class="bi" width="1em" height="1em" aria-hidden="true"><use href="#toggles2"/></svg>
108108
</div>
109109
<div>
110-
<h3 class="fs-3xl text-body-emphasis">Featured title</h3>
110+
<h3 class="fs-2xl">Featured title</h3>
111111
<p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
112112
<a href="#" class="btn-solid theme-primary">
113113
Primary button
114114
</a>
115115
</div>
116116
</div>
117117
<div class="col d-flex align-items-start">
118-
<div class="icon-square text-body-emphasis bg-body-secondary d-inline-flex align-items-center justify-content-center fs-xl flex-shrink-0 me-3">
118+
<div class="icon-square bg-body-secondary d-inline-flex align-items-center justify-content-center fs-xl flex-shrink-0 me-3">
119119
<svg class="bi" width="1em" height="1em" aria-hidden="true"><use href="#cpu-fill"/></svg>
120120
</div>
121121
<div>
122-
<h3 class="fs-3xl text-body-emphasis">Featured title</h3>
122+
<h3 class="fs-2xl">Featured title</h3>
123123
<p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
124124
<a href="#" class="btn-solid theme-primary">
125125
Primary button
126126
</a>
127127
</div>
128128
</div>
129129
<div class="col d-flex align-items-start">
130-
<div class="icon-square text-body-emphasis bg-body-secondary d-inline-flex align-items-center justify-content-center fs-xl flex-shrink-0 me-3">
130+
<div class="icon-square bg-body-secondary d-inline-flex align-items-center justify-content-center fs-xl flex-shrink-0 me-3">
131131
<svg class="bi" width="1em" height="1em" aria-hidden="true"><use href="#tools"/></svg>
132132
</div>
133133
<div>
134-
<h3 class="fs-3xl text-body-emphasis">Featured title</h3>
134+
<h3 class="fs-2xl">Featured title</h3>
135135
<p>Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
136136
<a href="#" class="btn-solid theme-primary">
137137
Primary button
@@ -149,7 +149,7 @@ export const extra_css = ['features.css']
149149
<div class="row row-cols-1 lg:row-cols-3 align-items-stretch g-4 py-5">
150150
<div class="col">
151151
<div class="card card-cover h-100 overflow-hidden text-bg-dark rounded-4 shadow-lg" style="background-image: url('unsplash-photo-1.jpg');">
152-
<div class="d-flex flex-column h-100 p-5 pb-3 text-white text-shadow-1">
152+
<div class="d-flex flex-column h-100 p-5 pb-3 fg-white text-shadow-1">
153153
<h3 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold">Short title, long jacket</h3>
154154
<ul class="d-flex list-unstyled mt-auto">
155155
<li class="me-auto">
@@ -170,7 +170,7 @@ export const extra_css = ['features.css']
170170

171171
<div class="col">
172172
<div class="card card-cover h-100 overflow-hidden text-bg-dark rounded-4 shadow-lg" style="background-image: url('unsplash-photo-2.jpg');">
173-
<div class="d-flex flex-column h-100 p-5 pb-3 text-white text-shadow-1">
173+
<div class="d-flex flex-column h-100 p-5 pb-3 fg-white text-shadow-1">
174174
<h3 class="pt-5 mt-5 mb-4 display-6 lh-1 fw-bold">Much longer title that wraps to multiple lines</h3>
175175
<ul class="d-flex list-unstyled mt-auto">
176176
<li class="me-auto">
@@ -221,56 +221,56 @@ export const extra_css = ['features.css']
221221
<div class="col d-flex align-items-start">
222222
<svg class="bi fg-2 flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use href="#bootstrap"/></svg>
223223
<div>
224-
<h3 class="fw-bold mb-0 fs-xl text-body-emphasis">Featured title</h3>
224+
<h3 class="fw-bold mb-0 fs-xl">Featured title</h3>
225225
<p>Paragraph of text beneath the heading to explain the heading.</p>
226226
</div>
227227
</div>
228228
<div class="col d-flex align-items-start">
229229
<svg class="bi fg-2 flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use href="#cpu-fill"/></svg>
230230
<div>
231-
<h3 class="fw-bold mb-0 fs-xl text-body-emphasis">Featured title</h3>
231+
<h3 class="fw-bold mb-0 fs-xl">Featured title</h3>
232232
<p>Paragraph of text beneath the heading to explain the heading.</p>
233233
</div>
234234
</div>
235235
<div class="col d-flex align-items-start">
236236
<svg class="bi fg-2 flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use href="#calendar3"/></svg>
237237
<div>
238-
<h3 class="fw-bold mb-0 fs-xl text-body-emphasis">Featured title</h3>
238+
<h3 class="fw-bold mb-0 fs-xl">Featured title</h3>
239239
<p>Paragraph of text beneath the heading to explain the heading.</p>
240240
</div>
241241
</div>
242242
<div class="col d-flex align-items-start">
243243
<svg class="bi fg-2 flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use href="#home"/></svg>
244244
<div>
245-
<h3 class="fw-bold mb-0 fs-xl text-body-emphasis">Featured title</h3>
245+
<h3 class="fw-bold mb-0 fs-xl">Featured title</h3>
246246
<p>Paragraph of text beneath the heading to explain the heading.</p>
247247
</div>
248248
</div>
249249
<div class="col d-flex align-items-start">
250250
<svg class="bi fg-2 flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use href="#speedometer2"/></svg>
251251
<div>
252-
<h3 class="fw-bold mb-0 fs-xl text-body-emphasis">Featured title</h3>
252+
<h3 class="fw-bold mb-0 fs-xl">Featured title</h3>
253253
<p>Paragraph of text beneath the heading to explain the heading.</p>
254254
</div>
255255
</div>
256256
<div class="col d-flex align-items-start">
257257
<svg class="bi fg-2 flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use href="#toggles2"/></svg>
258258
<div>
259-
<h3 class="fw-bold mb-0 fs-xl text-body-emphasis">Featured title</h3>
259+
<h3 class="fw-bold mb-0 fs-xl">Featured title</h3>
260260
<p>Paragraph of text beneath the heading to explain the heading.</p>
261261
</div>
262262
</div>
263263
<div class="col d-flex align-items-start">
264264
<svg class="bi fg-2 flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use href="#geo-fill"/></svg>
265265
<div>
266-
<h3 class="fw-bold mb-0 fs-xl text-body-emphasis">Featured title</h3>
266+
<h3 class="fw-bold mb-0 fs-xl">Featured title</h3>
267267
<p>Paragraph of text beneath the heading to explain the heading.</p>
268268
</div>
269269
</div>
270270
<div class="col d-flex align-items-start">
271271
<svg class="bi fg-2 flex-shrink-0 me-3" width="1.75em" height="1.75em" aria-hidden="true"><use href="#tools"/></svg>
272272
<div>
273-
<h3 class="fw-bold mb-0 fs-xl text-body-emphasis">Featured title</h3>
273+
<h3 class="fw-bold mb-0 fs-xl">Featured title</h3>
274274
<p>Paragraph of text beneath the heading to explain the heading.</p>
275275
</div>
276276
</div>
@@ -284,7 +284,7 @@ export const extra_css = ['features.css']
284284

285285
<div class="row row-cols-1 md:row-cols-2 md:align-items-center g-5 py-5">
286286
<div class="col d-flex flex-column align-items-start gap-2">
287-
<h2 class="fw-bold text-body-emphasis">Left-aligned title explaining these awesome features</h2>
287+
<h2 class="fw-bold">Left-aligned title explaining these awesome features</h2>
288288
<p class="fg-2">Paragraph of text beneath the heading to explain the heading. We'll add onto it with another sentence and probably just keep going until we run out of words.</p>
289289
<a href="#" class="btn-solid theme-primary btn-lg">Primary button</a>
290290
</div>
@@ -297,7 +297,7 @@ export const extra_css = ['features.css']
297297
<use href="#collection" />
298298
</svg>
299299
</div>
300-
<h4 class="fw-semibold mb-0 text-body-emphasis">Featured title</h4>
300+
<h4 class="fw-semibold mb-0">Featured title</h4>
301301
<p class="fg-2">Paragraph of text beneath the heading to explain the heading.</p>
302302
</div>
303303

@@ -307,7 +307,7 @@ export const extra_css = ['features.css']
307307
<use href="#gear-fill" />
308308
</svg>
309309
</div>
310-
<h4 class="fw-semibold mb-0 text-body-emphasis">Featured title</h4>
310+
<h4 class="fw-semibold mb-0">Featured title</h4>
311311
<p class="fg-2">Paragraph of text beneath the heading to explain the heading.</p>
312312
</div>
313313

@@ -317,7 +317,7 @@ export const extra_css = ['features.css']
317317
<use href="#speedometer" />
318318
</svg>
319319
</div>
320-
<h4 class="fw-semibold mb-0 text-body-emphasis">Featured title</h4>
320+
<h4 class="fw-semibold mb-0">Featured title</h4>
321321
<p class="fg-2">Paragraph of text beneath the heading to explain the heading.</p>
322322
</div>
323323

@@ -327,7 +327,7 @@ export const extra_css = ['features.css']
327327
<use href="#table" />
328328
</svg>
329329
</div>
330-
<h4 class="fw-semibold mb-0 text-body-emphasis">Featured title</h4>
330+
<h4 class="fw-semibold mb-0">Featured title</h4>
331331
<p class="fg-2">Paragraph of text beneath the heading to explain the heading.</p>
332332
</div>
333333
</div>

‎site/src/assets/examples/grid/index.astro‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -172,7 +172,6 @@ export const body_class = 'py-4'
172172
<hr class="my-4">
173173

174174
<h2 class="mt-4">Containers</h2>
175-
<p>Additional classes added in Bootstrap v4.4 allow containers that are 100% wide until a particular breakpoint. v5 adds a new <code>2xl</code> breakpoint.</p>
176175
</div>
177176

178177
<div class="container themed-container text-center">.container</div>

0 commit comments

Comments
 (0)