Skip to content

Commit 9016780

Browse files
committed
Use fg-* color classes; tweak sidebar alignment
Replace instances of text-white/text-secondary with the fg-white/fg-secondary utility across example pages for consistent foreground color utilities. Updated: site/src/assets/examples/{cover,drawer-navbar,features,headers,sidebars}/index.astro. Also added align-items-start to sidebar <ul> elements to improve item alignment.
1 parent 763b0af commit 9016780

5 files changed

Lines changed: 18 additions & 18 deletions

File tree

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/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: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -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">

site/src/assets/examples/headers/index.astro

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -97,10 +97,10 @@ export const extra_css = ['headers.css']
9797

9898
<ul class="nav col-12 lg:col-auto lg:me-auto mb-2 justify-content-center md:mb-0">
9999
<li><a href="#" class="nav-link px-2 fg-secondary">Home</a></li>
100-
<li><a href="#" class="nav-link px-2 text-white">Features</a></li>
101-
<li><a href="#" class="nav-link px-2 text-white">Pricing</a></li>
102-
<li><a href="#" class="nav-link px-2 text-white">FAQs</a></li>
103-
<li><a href="#" class="nav-link px-2 text-white">About</a></li>
100+
<li><a href="#" class="nav-link px-2 fg-white">Features</a></li>
101+
<li><a href="#" class="nav-link px-2 fg-white">Pricing</a></li>
102+
<li><a href="#" class="nav-link px-2 fg-white">FAQs</a></li>
103+
<li><a href="#" class="nav-link px-2 fg-white">About</a></li>
104104
</ul>
105105

106106
<form class="col-12 lg:col-auto mb-3 lg:mb-0 lg:me-3" role="search">
@@ -249,25 +249,25 @@ export const extra_css = ['headers.css']
249249
</a>
250250
</li>
251251
<li>
252-
<a href="#" class="nav-link text-white">
252+
<a href="#" class="nav-link fg-white">
253253
<svg class="bi d-block mx-auto mb-1" width="24" height="24" aria-hidden="true"><use href="#speedometer2"/></svg>
254254
Dashboard
255255
</a>
256256
</li>
257257
<li>
258-
<a href="#" class="nav-link text-white">
258+
<a href="#" class="nav-link fg-white">
259259
<svg class="bi d-block mx-auto mb-1" width="24" height="24" aria-hidden="true"><use href="#table"/></svg>
260260
Orders
261261
</a>
262262
</li>
263263
<li>
264-
<a href="#" class="nav-link text-white">
264+
<a href="#" class="nav-link fg-white">
265265
<svg class="bi d-block mx-auto mb-1" width="24" height="24" aria-hidden="true"><use href="#grid"/></svg>
266266
Products
267267
</a>
268268
</li>
269269
<li>
270-
<a href="#" class="nav-link text-white">
270+
<a href="#" class="nav-link fg-white">
271271
<svg class="bi d-block mx-auto mb-1" width="24" height="24" aria-hidden="true"><use href="#people-circle"/></svg>
272272
Customers
273273
</a>

site/src/assets/examples/sidebars/index.astro

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -37,33 +37,33 @@ export const extra_js = [{src: 'sidebars.js'}]
3737
<span class="fs-xl">Sidebar</span>
3838
</a>
3939
<hr>
40-
<ul class="nav flex-column mb-auto">
40+
<ul class="nav flex-column align-items-start mb-auto">
4141
<li class="nav-item">
4242
<a href="#" class="nav-link active" aria-current="page">
4343
<svg class="bi pe-none me-2" width="16" height="16" aria-hidden="true"><use href="#home"/></svg>
4444
Home
4545
</a>
4646
</li>
4747
<li>
48-
<a href="#" class="nav-link text-white">
48+
<a href="#" class="nav-link fg-white">
4949
<svg class="bi pe-none me-2" width="16" height="16" aria-hidden="true"><use href="#speedometer2"/></svg>
5050
Dashboard
5151
</a>
5252
</li>
5353
<li>
54-
<a href="#" class="nav-link text-white">
54+
<a href="#" class="nav-link fg-white">
5555
<svg class="bi pe-none me-2" width="16" height="16" aria-hidden="true"><use href="#table"/></svg>
5656
Orders
5757
</a>
5858
</li>
5959
<li>
60-
<a href="#" class="nav-link text-white">
60+
<a href="#" class="nav-link fg-white">
6161
<svg class="bi pe-none me-2" width="16" height="16" aria-hidden="true"><use href="#grid"/></svg>
6262
Products
6363
</a>
6464
</li>
6565
<li>
66-
<a href="#" class="nav-link text-white">
66+
<a href="#" class="nav-link fg-white">
6767
<svg class="bi pe-none me-2" width="16" height="16" aria-hidden="true"><use href="#people-circle"/></svg>
6868
Customers
6969
</a>
@@ -93,7 +93,7 @@ export const extra_js = [{src: 'sidebars.js'}]
9393
<span class="fs-xl">Sidebar</span>
9494
</a>
9595
<hr>
96-
<ul class="nav flex-column mb-auto">
96+
<ul class="nav flex-column align-items-start mb-auto">
9797
<li class="nav-item">
9898
<a href="#" class="nav-link active" aria-current="page">
9999
<svg class="bi pe-none me-2" width="16" height="16" aria-hidden="true"><use href="#home"/></svg>

0 commit comments

Comments
 (0)