Skip to content

v5: examples: Replace deprecated classes #42423

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 1 commit into
base: main
Choose a base branch
from
Open

v5: examples: Replace deprecated classes #42423

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
2 changes: 1 addition & 1 deletion site/src/assets/examples/album-rtl/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 direction = 'rtl'
</div>
</div>
</div>
<div class="navbar navbar-dark bg-dark shadow-sm">
<div class="navbar bg-dark shadow-sm">
<div class="container">
<a href="#" class="navbar-brand d-flex align-items-center">
<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>
Expand Down
2 changes: 1 addition & 1 deletion site/src/assets/examples/album/index.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ import Placeholder from "@shortcodes/Placeholder.astro"
</div>
</div>
</div>
<div class="navbar navbar-dark bg-dark shadow-sm">
<div class="navbar bg-dark shadow-sm">
<div class="container">
<a href="#" class="navbar-brand d-flex align-items-center">
<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>
Expand Down
2 changes: 1 addition & 1 deletion site/src/assets/examples/carousel-rtl/index.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import Placeholder from "@shortcodes/Placeholder.astro"
---

<header data-bs-theme="dark">
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<nav class="navbar navbar-expand-md fixed-top bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">شرائح العرض</a>
Comment thread
coliff marked this conversation as resolved.
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="تبديل التنقل">
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 @@ -5,7 +5,7 @@ import Placeholder from "@shortcodes/Placeholder.astro"
---

<header data-bs-theme="dark">
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<nav class="navbar navbar-expand-md fixed-top bg-dark">
<div class="container-fluid">
Comment thread
coliff marked this conversation as resolved.
<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">
Expand Down
2 changes: 1 addition & 1 deletion site/src/assets/examples/cheatsheet-rtl/index.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1245,7 +1245,7 @@ import Placeholder from "@shortcodes/Placeholder.astro"
</div>
</nav>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary mt-5">
<nav class="navbar navbar-expand-lg bg-primary mt-5" data-bs-theme="dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="${getVersionedDocsPath('/assets/brand/bootstrap-logo-white.svg')}" width="38" height="30" class="d-inline-block align-top" alt="Bootstrap" loading="lazy">
Expand Down
2 changes: 1 addition & 1 deletion site/src/assets/examples/cheatsheet/index.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1223,7 +1223,7 @@ export const body_class = 'bg-body-tertiary'
</div>
</nav>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary mt-5">
<nav class="navbar navbar-expand-lg bg-primary mt-5" data-bs-theme="dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<img src="${getVersionedDocsPath('/assets/brand/bootstrap-logo-white.svg')}" width="38" height="30" class="d-inline-block align-top" alt="Bootstrap" loading="lazy">
Expand Down
2 changes: 1 addition & 1 deletion site/src/assets/examples/dashboard-rtl/index.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@ export const extra_js = [

<div class="container-fluid">
<div class="row">
<div class="sidebar border border-right col-md-3 col-lg-2 p-0 bg-body-tertiary">
<div class="sidebar border border-end col-md-3 col-lg-2 p-0 bg-body-tertiary">
<div class="offcanvas-md offcanvas-end bg-body-tertiary" tabindex="-1" id="sidebarMenu" aria-labelledby="sidebarMenuLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="sidebarMenuLabel">Company name</h5>
Expand Down
2 changes: 1 addition & 1 deletion site/src/assets/examples/dashboard/index.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ export const extra_js = [

<div class="container-fluid">
<div class="row">
<div class="sidebar border border-right col-md-3 col-lg-2 p-0 bg-body-tertiary">
<div class="sidebar border border-end col-md-3 col-lg-2 p-0 bg-body-tertiary">
<div class="offcanvas-md offcanvas-end bg-body-tertiary" tabindex="-1" id="sidebarMenu" aria-labelledby="sidebarMenuLabel">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="sidebarMenuLabel">Company name</h5>
Expand Down
4 changes: 2 additions & 2 deletions site/src/assets/examples/jumbotrons/index.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ export const extra_css = ['jumbotrons.css']
<div class="p-5 text-center bg-body-tertiary rounded-3">
<svg class="bi mt-4 mb-3" style="color: var(--bs-indigo);" width="100" height="100" aria-hidden="true"><use xlink:href="#bootstrap"/></svg>
<h1 class="text-body-emphasis">Jumbotron with icon</h1>
<p class="col-lg-8 mx-auto fs-5 text-muted">
<p class="col-lg-8 mx-auto fs-5 text-body-secondary">
This is a custom jumbotron featuring an SVG image at the top, some longer text that wraps early thanks to a responsive <code>.col-*</code> class, and a customized call to action.
</p>
<div class="d-inline-flex gap-2 mb-5">
Expand All @@ -39,7 +39,7 @@ export const extra_css = ['jumbotrons.css']
<div class="b-example-divider"></div>

<div class="container my-5">
<div class="position-relative p-5 text-center text-muted bg-body border border-dashed rounded-5">
<div class="position-relative p-5 text-center text-body-secondary bg-body border border-dashed rounded-5">
<button type="button" class="position-absolute top-0 end-0 p-3 m-3 btn-close bg-secondary bg-opacity-10 rounded-pill" aria-label="Close"></button>
<svg class="bi mt-5 mb-3" width="48" height="48" aria-hidden="true"><use xlink:href="#check2-circle"/></svg>
<h1 class="text-body-emphasis">Placeholder jumbotron</h1>
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 @@ -11,7 +11,7 @@ export const title = 'Bottom navbar example'
<a class="btn btn-lg btn-primary" href={getVersionedDocsPath('/components/navbar')} role="button">View navbar docs &raquo;</a>
</div>
</main>
<nav class="navbar fixed-bottom navbar-expand-sm navbar-dark bg-dark">
<nav class="navbar fixed-bottom navbar-expand-sm bg-dark" data-bs-theme="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">
Expand Down
2 changes: 1 addition & 1 deletion site/src/assets/examples/navbar-fixed/index.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ export const title = 'Fixed top navbar example'
export const extra_css = ['navbar-fixed.css']
---

<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<nav class="navbar navbar-expand-md fixed-top bg-dark" data-bs-theme="dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Fixed 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">
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 @@ -5,7 +5,7 @@ export const title = 'Top navbar example'
export const extra_css = ['navbar-static.css']
---

<nav class="navbar navbar-expand-md navbar-dark bg-dark mb-4">
<nav class="navbar navbar-expand-md bg-dark mb-4" data-bs-theme="dark">
<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">
Expand Down
12 changes: 6 additions & 6 deletions site/src/assets/examples/navbars-offcanvas/index.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,16 +6,16 @@ export const extra_css = ['navbars-offcanvas.css']
---

<main>
<nav class="navbar navbar-dark bg-dark" aria-label="Dark offcanvas navbar">
<nav class="navbar bg-dark" data-bs-theme="dark" aria-label="Dark offcanvas navbar">
<div class="container-fluid">
<a class="navbar-brand" href="#">Dark offcanvas navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbarDark" aria-controls="offcanvasNavbarDark" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="offcanvas offcanvas-end text-bg-dark" tabindex="-1" id="offcanvasNavbarDark" aria-labelledby="offcanvasNavbarDarkLabel">
<div class="offcanvas offcanvas-end text-bg-dark" tabindex="-1" id="offcanvasNavbarDark" aria-labelledby="offcanvasNavbarDarkLabel" data-bs-theme="dark">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasNavbarDarkLabel">Offcanvas</h5>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
Expand Down Expand Up @@ -90,16 +90,16 @@ export const extra_css = ['navbars-offcanvas.css']
</div>
</nav>

<nav class="navbar navbar-expand-lg navbar-dark bg-dark" aria-label="Offcanvas navbar large">
<nav class="navbar navbar-expand-lg bg-dark" data-bs-theme="dark" aria-label="Offcanvas navbar large">
<div class="container-fluid">
<a class="navbar-brand" href="#">Responsive offcanvas navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar2" aria-controls="offcanvasNavbar2" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="offcanvas offcanvas-end text-bg-dark" tabindex="-1" id="offcanvasNavbar2" aria-labelledby="offcanvasNavbar2Label">
<div class="offcanvas offcanvas-end text-bg-dark" tabindex="-1" id="offcanvasNavbar2" aria-labelledby="offcanvasNavbar2Label" data-bs-theme="dark">
<div class="offcanvas-header">
<h5 class="offcanvas-title" id="offcanvasNavbar2Label">Offcanvas</h5>
<button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" aria-label="Close"></button>
<button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
<ul class="navbar-nav justify-content-end flex-grow-1 pe-3">
Expand Down
20 changes: 10 additions & 10 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 @@ -6,7 +6,7 @@ export const extra_css = ['navbars.css']
---

<main>
<nav class="navbar navbar-dark bg-dark" aria-label="First navbar example">
<nav class="navbar bg-dark" data-bs-theme="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">
Expand Down Expand Up @@ -40,7 +40,7 @@ export const extra_css = ['navbars.css']
</div>
</nav>

<nav class="navbar navbar-expand navbar-dark bg-dark" aria-label="Second navbar example">
<nav class="navbar navbar-expand bg-dark" data-bs-theme="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">
Expand All @@ -63,7 +63,7 @@ export const extra_css = ['navbars.css']
</div>
</nav>

<nav class="navbar navbar-expand-sm navbar-dark bg-dark" aria-label="Third navbar example">
<nav class="navbar navbar-expand-sm bg-dark" data-bs-theme="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">
Expand Down Expand Up @@ -97,7 +97,7 @@ export const extra_css = ['navbars.css']
</div>
</nav>

<nav class="navbar navbar-expand-md navbar-dark bg-dark" aria-label="Fourth navbar example">
<nav class="navbar navbar-expand-md bg-dark" data-bs-theme="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">
Expand Down Expand Up @@ -131,7 +131,7 @@ export const extra_css = ['navbars.css']
</div>
</nav>

<nav class="navbar navbar-expand-lg navbar-dark bg-dark" aria-label="Fifth navbar example">
<nav class="navbar navbar-expand-lg bg-dark" data-bs-theme="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">
Expand Down Expand Up @@ -165,7 +165,7 @@ export const extra_css = ['navbars.css']
</div>
</nav>

<nav class="navbar navbar-expand-xl navbar-dark bg-dark" aria-label="Sixth navbar example">
<nav class="navbar navbar-expand-xl bg-dark" data-bs-theme="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">
Expand Down Expand Up @@ -199,7 +199,7 @@ export const extra_css = ['navbars.css']
</div>
</nav>

<nav class="navbar navbar-expand-xxl navbar-dark bg-dark" aria-label="Seventh navbar example">
<nav class="navbar navbar-expand-xxl bg-dark" data-bs-theme="dark" aria-label="Seventh navbar example">
<div class="container-fluid">
<a class="navbar-brand" href="#">Expand at xxl</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExampleXxl" aria-controls="navbarsExampleXxl" aria-expanded="false" aria-label="Toggle navigation">
Expand Down Expand Up @@ -233,7 +233,7 @@ export const extra_css = ['navbars.css']
</div>
</nav>

<nav class="navbar navbar-expand-lg navbar-dark bg-dark" aria-label="Eighth navbar example">
<nav class="navbar navbar-expand-lg bg-dark" data-bs-theme="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">
Expand Down Expand Up @@ -267,7 +267,7 @@ export const extra_css = ['navbars.css']
</div>
</nav>

<nav class="navbar navbar-expand-lg navbar-dark bg-dark" aria-label="Ninth navbar example">
<nav class="navbar navbar-expand-lg bg-dark" data-bs-theme="dark" aria-label="Ninth navbar example">
<div class="container-xl">
<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">
Expand Down Expand Up @@ -305,7 +305,7 @@ export const extra_css = ['navbars.css']
<p>Matching .container-xl...</p>
</div>

<nav class="navbar navbar-expand-lg navbar-dark bg-dark" aria-label="Tenth navbar example">
<nav class="navbar navbar-expand-lg bg-dark" data-bs-theme="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">
<span class="navbar-toggler-icon"></span>
Expand Down
2 changes: 1 addition & 1 deletion site/src/assets/examples/offcanvas-navbar/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 aliases = '/docs/[[config:docs_version]]/examples/offcanvas/'
import Placeholder from "@shortcodes/Placeholder.astro"
---

<nav class="navbar navbar-expand-lg fixed-top navbar-dark bg-dark" aria-label="Main navigation">
<nav class="navbar navbar-expand-lg fixed-top bg-dark" data-bs-theme="dark" aria-label="Main navigation">
<div class="container-fluid">
<a class="navbar-brand" href="#">Offcanvas navbar</a>
<button class="navbar-toggler p-0 border-0" type="button" id="navbarSideCollapse" aria-label="Toggle navigation">
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 @@ -54,7 +54,7 @@ export const extra_css = ['product.css']
<div class="position-relative overflow-hidden p-3 p-md-5 m-md-3 text-center bg-body-tertiary">
<div class="col-md-6 p-lg-5 mx-auto my-5">
<h1 class="display-3 fw-bold">Designed for engineers</h1>
<h3 class="fw-normal text-muted mb-3">Build anything you want with Aperture</h3>
<h3 class="fw-normal text-body-secondary mb-3">Build anything you want with Aperture</h3>
<div class="d-flex gap-3 justify-content-center lead fw-normal">
<a class="icon-link" href="#">
Learn more
Expand Down
2 changes: 1 addition & 1 deletion site/src/assets/examples/sidebars/index.astro
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ export const extra_js = [{src: 'sidebars.js'}]
<img src="https://github.com/mdo.png" alt="" width="32" height="32" class="rounded-circle me-2">
<strong>mdo</strong>
</a>
<ul class="dropdown-menu dropdown-menu-dark text-small shadow">
<ul class="dropdown-menu text-small shadow" data-bs-theme="dark">
Comment thread
coliff marked this conversation as resolved.
<li><a class="dropdown-item" href="#">New project...</a></li>
<li><a class="dropdown-item" href="#">Settings</a></li>
<li><a class="dropdown-item" href="#">Profile</a></li>
Expand Down
2 changes: 1 addition & 1 deletion site/src/assets/examples/sticky-footer-navbar/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 body_class = 'd-flex flex-column h-100'

<header>
<!-- Fixed navbar -->
<nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
<nav class="navbar navbar-expand-md fixed-top bg-dark" data-bs-theme="dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Fixed 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">
Expand Down
Loading