Skip to content

v6: docs updates #42394

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
coliff wants to merge 3 commits into
base: v6-dev
Choose a base branch
from
Open

v6: docs updates #42394

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f332abe
v6: docs updates
coliff May 7, 2026
3e8cd25
add .btn-icon to navbar-toggler
coliff May 8, 2026
f38b882
add .btn-icon to navbar toggler
coliff May 8, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions site/src/assets/examples/blog/index.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ import Placeholder from "@shortcodes/Placeholder.astro"
<div class="md:col-6">
<div class="row g-0 border rounded overflow-hidden md:flex-row mb-4 shadow-sm h-md-250 position-relative">
<div class="col p-4 d-flex flex-column position-static">
<strong class="d-inline-block mb-2 text-primary-emphasis">World</strong>
<strong class="d-inline-block mb-2 fg-emphasis-primary">World</strong>
<h3 class="mb-0">Featured post</h3>
<div class="mb-1 fg-2">Nov 12</div>
<p class="card-text mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
Expand All @@ -83,7 +83,7 @@ import Placeholder from "@shortcodes/Placeholder.astro"
<div class="md:col-6">
<div class="row g-0 border rounded overflow-hidden md:flex-row mb-4 shadow-sm h-md-250 position-relative">
<div class="col p-4 d-flex flex-column position-static">
<strong class="d-inline-block mb-2 text-success-emphasis">Design</strong>
<strong class="d-inline-block mb-2 fg-emphasis-success">Design</strong>
<h3 class="mb-0">Post title</h3>
<div class="mb-1 fg-2">Nov 11</div>
<p class="mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
Expand Down
2 changes: 1 addition & 1 deletion site/src/assets/examples/carousel/index.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import Placeholder from "@shortcodes/Placeholder.astro"
<nav class="navbar md:navbar-expand navbar-dark fixed-top bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Carousel</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<button class="btn-icon navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<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>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
Expand Down
6 changes: 3 additions & 3 deletions site/src/assets/examples/checkout/index.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ export const body_class = 'bg-body-tertiary'
<div class="row g-5">
<div class="md:col-5 lg:col-4 md:order-last">
<h4 class="d-flex justify-content-between align-items-center mb-3">
<span class="text-primary">Your cart</span>
<span class="fg-primary">Your cart</span>
<span class="badge bg-primary rounded-pill">3</span>
</h4>
<ul class="list-group mb-3">
Expand All @@ -44,11 +44,11 @@ export const body_class = 'bg-body-tertiary'
<span class="fg-2">$5</span>
</li>
<li class="list-group-item d-flex justify-content-between bg-body-tertiary">
<div class="text-success">
<div class="fg-success">
<h6 class="my-0">Promo code</h6>
<small>EXAMPLECODE</small>
</div>
<span class="text-success">−$5</span>
<span class="fg-success">−$5</span>
</li>
<li class="list-group-item d-flex justify-content-between">
<span>Total (USD)</span>
Expand Down
2 changes: 1 addition & 1 deletion site/src/assets/examples/cover/index.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ export const body_class = 'd-flex h-100 text-center text-bg-dark'
</p>
</main>

<footer class="mt-auto text-white-50">
<footer class="mt-auto fg-secondary">
<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>
</footer>
</div>
4 changes: 2 additions & 2 deletions site/src/assets/examples/dialogs/index.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,8 +52,8 @@ export const extra_css = ['dialogs.css']
<p class="fg-2 mb-0">You can always change your mind in your account settings.</p>
</div>
<div class="dialog-footer p-0 border-top">
<button type="button" class="btn btn-link text-primary flex-fill py-3 m-0 rounded-0 border-end text-decoration-none fw-semibold">Yes, enable</button>
<button type="button" class="btn btn-link text-primary flex-fill py-3 m-0 rounded-0 text-decoration-none">No thanks</button>
<button type="button" class="btn btn-link fg-primary flex-fill py-3 m-0 rounded-0 border-end text-decoration-none fw-semibold">Yes, enable</button>
<button type="button" class="btn btn-link fg-primary flex-fill py-3 m-0 rounded-0 text-decoration-none">No thanks</button>
</div>
</dialog>
</div>
Expand Down
2 changes: 1 addition & 1 deletion site/src/assets/examples/navbar-bottom/index.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ export const title = 'Bottom navbar example'
<nav class="navbar fixed-bottom sm:navbar-expand navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Bottom navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<button class="btn-icon navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<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>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
Expand Down
2 changes: 1 addition & 1 deletion site/src/assets/examples/navbar-static/index.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ export const extra_css = ['navbar-static.css']
<nav class="navbar md:navbar-expand navbar-dark bg-dark mb-4">
<div class="container-fluid">
<a class="navbar-brand" href="#">Top navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<button class="btn-icon navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
<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>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
Expand Down
26 changes: 13 additions & 13 deletions site/src/assets/examples/navbars/index.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ export const extra_css = ['navbars.css']
<nav class="navbar navbar-dark bg-dark" aria-label="First navbar example">
<div class="container-fluid">
<a class="navbar-brand" href="#">Never expand</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample01" aria-controls="navbarsExample01" aria-expanded="false" aria-label="Toggle navigation">
<button class="btn-icon navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample01" aria-controls="navbarsExample01" aria-expanded="false" aria-label="Toggle navigation">
<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>
</button>

Expand Down Expand Up @@ -43,7 +43,7 @@ export const extra_css = ['navbars.css']
<nav class="navbar navbar-expand navbar-dark bg-dark" aria-label="Second navbar example">
<div class="container-fluid">
<a class="navbar-brand" href="#">Always expand</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample02" aria-controls="navbarsExample02" aria-expanded="false" aria-label="Toggle navigation">
<button class="btn-icon navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample02" aria-controls="navbarsExample02" aria-expanded="false" aria-label="Toggle navigation">
<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>
</button>

Expand All @@ -66,7 +66,7 @@ export const extra_css = ['navbars.css']
<nav class="navbar sm:navbar-expand navbar-dark bg-dark" aria-label="Third navbar example">
<div class="container-fluid">
<a class="navbar-brand" href="#">Expand at sm</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation">
<button class="btn-icon navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample03" aria-controls="navbarsExample03" aria-expanded="false" aria-label="Toggle navigation">
<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>
</button>

Expand Down Expand Up @@ -100,7 +100,7 @@ export const extra_css = ['navbars.css']
<nav class="navbar md:navbar-expand navbar-dark bg-dark" aria-label="Fourth navbar example">
<div class="container-fluid">
<a class="navbar-brand" href="#">Expand at md</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample04" aria-controls="navbarsExample04" aria-expanded="false" aria-label="Toggle navigation">
<button class="btn-icon navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample04" aria-controls="navbarsExample04" aria-expanded="false" aria-label="Toggle navigation">
<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>
</button>

Expand Down Expand Up @@ -134,7 +134,7 @@ export const extra_css = ['navbars.css']
<nav class="navbar lg:navbar-expand navbar-dark bg-dark" aria-label="Fifth navbar example">
<div class="container-fluid">
<a class="navbar-brand" href="#">Expand at lg</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample05" aria-controls="navbarsExample05" aria-expanded="false" aria-label="Toggle navigation">
<button class="btn-icon navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample05" aria-controls="navbarsExample05" aria-expanded="false" aria-label="Toggle navigation">
<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>
</button>

Expand Down Expand Up @@ -168,7 +168,7 @@ export const extra_css = ['navbars.css']
<nav class="navbar xl:navbar-expand navbar-dark bg-dark" aria-label="Sixth navbar example">
<div class="container-fluid">
<a class="navbar-brand" href="#">Expand at xl</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample06" aria-controls="navbarsExample06" aria-expanded="false" aria-label="Toggle navigation">
<button class="btn-icon navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample06" aria-controls="navbarsExample06" aria-expanded="false" aria-label="Toggle navigation">
<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>
</button>

Expand Down Expand Up @@ -202,7 +202,7 @@ export const extra_css = ['navbars.css']
<nav class="navbar 2xl:navbar-expand navbar-dark bg-dark" aria-label="Seventh navbar example">
<div class="container-fluid">
<a class="navbar-brand" href="#">Expand at 2xl</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample2xl" aria-controls="navbarsExample2xl" aria-expanded="false" aria-label="Toggle navigation">
<button class="btn-icon navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample2xl" aria-controls="navbarsExample2xl" aria-expanded="false" aria-label="Toggle navigation">
<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>
</button>

Expand Down Expand Up @@ -236,7 +236,7 @@ export const extra_css = ['navbars.css']
<nav class="navbar lg:navbar-expand navbar-dark bg-dark" aria-label="Eighth navbar example">
<div class="container">
<a class="navbar-brand" href="#">Container</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample07" aria-controls="navbarsExample07" aria-expanded="false" aria-label="Toggle navigation">
<button class="btn-icon navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample07" aria-controls="navbarsExample07" aria-expanded="false" aria-label="Toggle navigation">
<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>
</button>

Expand Down Expand Up @@ -270,7 +270,7 @@ export const extra_css = ['navbars.css']
<nav class="navbar lg:navbar-expand navbar-dark bg-dark" aria-label="Ninth navbar example">
<div class="xl:container">
<a class="navbar-brand" href="#">Container XL</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample07XL" aria-controls="navbarsExample07XL" aria-expanded="false" aria-label="Toggle navigation">
<button class="btn-icon navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample07XL" aria-controls="navbarsExample07XL" aria-expanded="false" aria-label="Toggle navigation">
<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>
</button>

Expand Down Expand Up @@ -307,7 +307,7 @@ export const extra_css = ['navbars.css']

<nav class="navbar lg:navbar-expand navbar-dark bg-dark" aria-label="Tenth navbar example">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample08" aria-controls="navbarsExample08" aria-expanded="false" aria-label="Toggle navigation">
<button class="btn-icon navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample08" aria-controls="navbarsExample08" aria-expanded="false" aria-label="Toggle navigation">
<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>
</button>

Expand Down Expand Up @@ -339,7 +339,7 @@ export const extra_css = ['navbars.css']
<nav class="navbar lg:navbar-expand bg-body-tertiary rounded" aria-label="Eleventh navbar example">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample09" aria-controls="navbarsExample09" aria-expanded="false" aria-label="Toggle navigation">
<button class="btn-icon navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample09" aria-controls="navbarsExample09" aria-expanded="false" aria-label="Toggle navigation">
<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>
</button>

Expand Down Expand Up @@ -372,7 +372,7 @@ export const extra_css = ['navbars.css']

<nav class="navbar lg:navbar-expand bg-body-tertiary rounded" aria-label="Twelfth navbar example">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample10" aria-controls="navbarsExample10" aria-expanded="false" aria-label="Toggle navigation">
<button class="btn-icon navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample10" aria-controls="navbarsExample10" aria-expanded="false" aria-label="Toggle navigation">
<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>
</button>

Expand Down Expand Up @@ -402,7 +402,7 @@ export const extra_css = ['navbars.css']

<nav class="navbar lg:navbar-expand bg-body-tertiary rounded" aria-label="Thirteenth navbar example">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample11" aria-controls="navbarsExample11" aria-expanded="false" aria-label="Toggle navigation">
<button class="btn-icon navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample11" aria-controls="navbarsExample11" aria-expanded="false" aria-label="Toggle navigation">
<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>
</button>

Expand Down
6 changes: 3 additions & 3 deletions site/src/assets/examples/pricing/index.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ export const extra_css = ['pricing.css']
</div>
<div class="card-body">
<h1 class="card-title pricing-card-title">$0<small class="fg-2 fw-light">/mo</small></h1>
<ul class="list-unstyled mt-3 mb-4">
<ul class="list-unstyled mt-3 mb-4 w-100">
<li>10 users included</li>
<li>2 GB of storage</li>
<li>Email support</li>
Expand All @@ -60,7 +60,7 @@ export const extra_css = ['pricing.css']
</div>
<div class="card-body">
<h1 class="card-title pricing-card-title">$15<small class="fg-2 fw-light">/mo</small></h1>
<ul class="list-unstyled mt-3 mb-4">
<ul class="list-unstyled mt-3 mb-4 w-100">
<li>20 users included</li>
<li>10 GB of storage</li>
<li>Priority email support</li>
Expand All @@ -77,7 +77,7 @@ export const extra_css = ['pricing.css']
</div>
<div class="card-body">
<h1 class="card-title pricing-card-title">$29<small class="fg-2 fw-light">/mo</small></h1>
<ul class="list-unstyled mt-3 mb-4">
<ul class="list-unstyled mt-3 mb-4 w-100">
<li>30 users included</li>
<li>15 GB of storage</li>
<li>Phone and email support</li>
Expand Down
2 changes: 1 addition & 1 deletion site/src/assets/examples/product/index.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ export const extra_css = ['product.css']
<svg class="bi" width="24" height="24" aria-hidden="true"><use href="#aperture"/></svg>
Aperture
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="drawer" data-bs-target="#drawer" aria-controls="drawer" aria-label="Toggle navigation">
<button class="btn-icon navbar-toggler" type="button" data-bs-toggle="drawer" data-bs-target="#drawer" aria-controls="drawer" aria-label="Toggle navigation">
<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>
</button>
<dialog class="drawer drawer-end" tabindex="-1" id="drawer" aria-labelledby="drawerLabel">
Expand Down
Loading