root
/
bootstrap
mirror of https://github.com/twbs/bootstrap.git
1
0
Fork 0
Code Issues Actions 1 Packages Projects Releases Wiki Activity

Deprecate the Sass var and remove any occurence of the `.text-muted` (#37890)

This commit is contained in:
Louis-Maxime Piton 2023-01-17 00:55:28 +01:00 committed by GitHub
parent 934d7a0c1a
commit 9042efd0f8
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
52 changed files with 238 additions and 236 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
js/tests/visual/toast.html
View File

@ -41,7 +41,7 @@
<div class="toast-header"> <div class="toast-header">
<span class="d-block bg-primary rounded me-2" style="width: 20px; height: 20px;"></span> <span class="d-block bg-primary rounded me-2" style="width: 20px; height: 20px;"></span>
<strong class="me-auto">Bootstrap</strong> <strong class="me-auto">Bootstrap</strong>
<small class="text-muted">2 seconds ago</small> <small class="text-body-secondary">2 seconds ago</small>
<button type="button" class="ms-2 mb-1 btn-close" data-bs-dismiss="toast" aria-label="Close"></button> <button type="button" class="ms-2 mb-1 btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div> </div>
<div class="toast-body"> <div class="toast-body">

2
js/tests/visual/tooltip.html
View File

@ -20,7 +20,7 @@
<div class="container"> <div class="container">
<h1>Tooltip <small>Bootstrap Visual Test</small></h1> <h1>Tooltip <small>Bootstrap Visual Test</small></h1>
<p class="text-muted">Tight pants next level keffiyeh <a href="#" data-bs-toggle="tooltip" title="Default tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" data-bs-toggle="tooltip" title="Another tooltip">have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan <a href="#" data-bs-toggle="tooltip" title="Another one here too">whatever keytar</a>, scenester farm-to-table banksy Austin <a href="#" data-bs-toggle="tooltip" title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral.</p> <p class="text-body-secondary">Tight pants next level keffiyeh <a href="#" data-bs-toggle="tooltip" title="Default tooltip">you probably</a> haven't heard of them. Photo booth beard raw denim letterpress vegan messenger bag stumptown. Farm-to-table seitan, mcsweeney's fixie sustainable quinoa 8-bit american apparel <a href="#" data-bs-toggle="tooltip" title="Another tooltip">have a</a> terry richardson vinyl chambray. Beard stumptown, cardigans banh mi lomo thundercats. Tofu biodiesel williamsburg marfa, four loko mcsweeney's cleanse vegan chambray. A really ironic artisan <a href="#" data-bs-toggle="tooltip" title="Another one here too">whatever keytar</a>, scenester farm-to-table banksy Austin <a href="#" data-bs-toggle="tooltip" title="The last tip!">twitter handle</a> freegan cred raw denim single-origin coffee viral.</p>
<hr> <hr>

2
scss/_utilities.scss
View File

@ -583,7 +583,7 @@ $utilities: map-merge(
values: map-merge( values: map-merge(
$utilities-text-colors, $utilities-text-colors,
( (
"muted": $text-muted, // deprecated "muted": var(--#{$prefix}secondary-color), // deprecated
"black-50": rgba($black, .5), // deprecated "black-50": rgba($black, .5), // deprecated
"white-50": rgba($white, .5), // deprecated "white-50": rgba($white, .5), // deprecated
"body-secondary": var(--#{$prefix}secondary-color), "body-secondary": var(--#{$prefix}secondary-color),

8
scss/_variables.scss
View File

@ -667,7 +667,9 @@ $small-font-size: .875em !default;
$sub-sup-font-size: .75em !default; $sub-sup-font-size: .75em !default;
$text-muted: var(--#{$prefix}secondary-color) !default; // fusv-disable
$text-muted: var(--#{$prefix}secondary-color) !default; // Deprecated in 5.3.0
// fusv-enable
$initialism-font-size: $small-font-size !default; $initialism-font-size: $small-font-size !default;
@ -740,7 +742,7 @@ $table-striped-columns-order: even !default;
$table-group-separator-color: currentcolor !default; $table-group-separator-color: currentcolor !default;
$table-caption-color: $text-muted !default; $table-caption-color: var(--#{$prefix}secondary-color) !default;
$table-bg-scale: -80% !default; $table-bg-scale: -80% !default;
// scss-docs-end table-variables // scss-docs-end table-variables
@ -846,7 +848,7 @@ $form-text-margin-top: .25rem !default;
$form-text-font-size: $small-font-size !default; $form-text-font-size: $small-font-size !default;
$form-text-font-style: null !default; $form-text-font-style: null !default;
$form-text-font-weight: null !default; $form-text-font-weight: null !default;
$form-text-color: $text-muted !default; $form-text-color: var(--#{$prefix}secondary-color) !default;
// scss-docs-end form-text-variables // scss-docs-end form-text-variables
// scss-docs-start form-label-variables // scss-docs-start form-label-variables

2
site/assets/scss/_search.scss
View File

@ -44,7 +44,7 @@
} }
.DocSearch-Container { .DocSearch-Container {
--docsearch-muted-color: #{$text-muted}; --docsearch-muted-color: var(--bs-secondary-color);
--docsearch-hit-shadow: none; --docsearch-hit-shadow: none;
z-index: 2000; // Make sure to be over all components showcased in the documentation z-index: 2000; // Make sure to be over all components showcased in the documentation

2
site/content/docs/5.3/about/brand.md
View File

@ -37,7 +37,7 @@ Bootstrap should always be referred to as just **Bootstrap**. No capital _s_.
<strong class="text-success">Correct</strong> <strong class="text-success">Correct</strong>
</div> </div>
<div class="bd-brand-item w-100 px-2 py-5"> <div class="bd-brand-item w-100 px-2 py-5">
<div class="h3 text-muted">BootStrap</div> <div class="h3 text-body-secondary">BootStrap</div>
<strong class="text-danger">Incorrect</strong> <strong class="text-danger">Incorrect</strong>
</div> </div>
</div> </div>

28
site/content/docs/5.3/components/card.md
View File

@ -53,7 +53,7 @@ Subtitles are used by adding a `.card-subtitle` to a `<h*>` tag. If the `.card-t
<div class="card" style="width: 18rem;"> <div class="card" style="width: 18rem;">
<div class="card-body"> <div class="card-body">
<h5 class="card-title">Card title</h5> <h5 class="card-title">Card title</h5>
<h6 class="card-subtitle mb-2 text-muted">Card subtitle</h6> <h6 class="card-subtitle mb-2 text-body-secondary">Card subtitle</h6>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="card-link">Card link</a> <a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a> <a href="#" class="card-link">Another link</a>
@ -191,7 +191,7 @@ Card headers can be styled by adding `.card-header` to `<h*>` elements.
<p class="card-text">With supporting text below as a natural lead-in to additional content.</p> <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a> <a href="#" class="btn btn-primary">Go somewhere</a>
</div> </div>
<div class="card-footer text-muted"> <div class="card-footer text-body-secondary">
2 days ago 2 days ago
</div> </div>
</div> </div>
@ -358,14 +358,14 @@ Similar to headers and footers, cards can include top and bottom "image caps"—
<div class="card-body"> <div class="card-body">
<h5 class="card-title">Card title</h5> <h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
</div> </div>
</div> </div>
<div class="card"> <div class="card">
<div class="card-body"> <div class="card-body">
<h5 class="card-title">Card title</h5> <h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
</div> </div>
{{< placeholder width="100%" height="180" class="card-img-bottom" text="Image cap" >}} {{< placeholder width="100%" height="180" class="card-img-bottom" text="Image cap" >}}
</div> </div>
@ -404,7 +404,7 @@ Using a combination of grid and utility classes, cards can be made horizontal in
<div class="card-body"> <div class="card-body">
<h5 class="card-title">Card title</h5> <h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
</div> </div>
</div> </div>
</div> </div>
@ -487,7 +487,7 @@ Use card groups to render cards as a single, attached element with equal width a
<div class="card-body"> <div class="card-body">
<h5 class="card-title">Card title</h5> <h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
</div> </div>
</div> </div>
<div class="card"> <div class="card">
@ -495,7 +495,7 @@ Use card groups to render cards as a single, attached element with equal width a
<div class="card-body"> <div class="card-body">
<h5 class="card-title">Card title</h5> <h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p> <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
</div> </div>
</div> </div>
<div class="card"> <div class="card">
@ -503,7 +503,7 @@ Use card groups to render cards as a single, attached element with equal width a
<div class="card-body"> <div class="card-body">
<h5 class="card-title">Card title</h5> <h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
</div> </div>
</div> </div>
</div> </div>
@ -520,7 +520,7 @@ When using card groups with footers, their content will automatically line up.
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div> </div>
<div class="card-footer"> <div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small> <small class="text-body-secondary">Last updated 3 mins ago</small>
</div> </div>
</div> </div>
<div class="card"> <div class="card">
@ -530,7 +530,7 @@ When using card groups with footers, their content will automatically line up.
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p> <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
</div> </div>
<div class="card-footer"> <div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small> <small class="text-body-secondary">Last updated 3 mins ago</small>
</div> </div>
</div> </div>
<div class="card"> <div class="card">
@ -540,7 +540,7 @@ When using card groups with footers, their content will automatically line up.
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
</div> </div>
<div class="card-footer"> <div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small> <small class="text-body-secondary">Last updated 3 mins ago</small>
</div> </div>
</div> </div>
</div> </div>
@ -689,7 +689,7 @@ Just like with card groups, card footers will automatically line up.
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
</div> </div>
<div class="card-footer"> <div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small> <small class="text-body-secondary">Last updated 3 mins ago</small>
</div> </div>
</div> </div>
</div> </div>
@ -701,7 +701,7 @@ Just like with card groups, card footers will automatically line up.
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p> <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
</div> </div>
<div class="card-footer"> <div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small> <small class="text-body-secondary">Last updated 3 mins ago</small>
</div> </div>
</div> </div>
</div> </div>
@ -713,7 +713,7 @@ Just like with card groups, card footers will automatically line up.
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
</div> </div>
<div class="card-footer"> <div class="card-footer">
<small class="text-muted">Last updated 3 mins ago</small> <small class="text-body-secondary">Last updated 3 mins ago</small>
</div> </div>
</div> </div>
</div> </div>

2
site/content/docs/5.3/components/dropdowns.md
View File

@ -841,7 +841,7 @@ Separate groups of related menu items with a divider.
Place any freeform text within a dropdown menu with text and use [spacing utilities]({{< docsref "/utilities/spacing" >}}). Note that you'll likely need additional sizing styles to constrain the menu width. Place any freeform text within a dropdown menu with text and use [spacing utilities]({{< docsref "/utilities/spacing" >}}). Note that you'll likely need additional sizing styles to constrain the menu width.
{{< example >}} {{< example >}}
<div class="dropdown-menu p-4 text-muted" style="max-width: 200px;"> <div class="dropdown-menu p-4 text-body-secondary" style="max-width: 200px;">
<p> <p>
Some example text that's free-flowing within the dropdown menu. Some example text that's free-flowing within the dropdown menu.
</p> </p>

8
site/content/docs/5.3/components/list-group.md
View File

@ -230,18 +230,18 @@ Add nearly any HTML within, even for linked list groups like the one below, with
<a href="#" class="list-group-item list-group-item-action"> <a href="#" class="list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-between"> <div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">List group item heading</h5> <h5 class="mb-1">List group item heading</h5>
<small class="text-muted">3 days ago</small> <small class="text-body-secondary">3 days ago</small>
</div> </div>
<p class="mb-1">Some placeholder content in a paragraph.</p> <p class="mb-1">Some placeholder content in a paragraph.</p>
<small class="text-muted">And some muted small print.</small> <small class="text-body-secondary">And some muted small print.</small>
</a> </a>
<a href="#" class="list-group-item list-group-item-action"> <a href="#" class="list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-between"> <div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">List group item heading</h5> <h5 class="mb-1">List group item heading</h5>
<small class="text-muted">3 days ago</small> <small class="text-body-secondary">3 days ago</small>
</div> </div>
<p class="mb-1">Some placeholder content in a paragraph.</p> <p class="mb-1">Some placeholder content in a paragraph.</p>
<small class="text-muted">And some muted small print.</small> <small class="text-body-secondary">And some muted small print.</small>
</a> </a>
</div> </div>
{{< /example >}} {{< /example >}}

2
site/content/docs/5.3/components/modal.md
View File

@ -576,7 +576,7 @@ Modals have three optional sizes, available via modifier classes to be placed on
| Size | Class | Modal max-width | Size | Class | Modal max-width
| --- | --- | --- | | --- | --- | --- |
| Small | `.modal-sm` | `300px` | | Small | `.modal-sm` | `300px` |
| Default | <span class="text-muted">None</span> | `500px` | | Default | <span class="text-body-secondary">None</span> | `500px` |
| Large | `.modal-lg` | `800px` | | Large | `.modal-lg` | `800px` |
| Extra large | `.modal-xl` | `1140px` | | Extra large | `.modal-xl` | `1140px` |
{{< /bs-table >}} {{< /bs-table >}}

2
site/content/docs/5.3/components/navbar.md
View File

@ -658,7 +658,7 @@ Sometimes you want to use the collapse plugin to trigger a container element for
<div class="collapse" id="navbarToggleExternalContent"> <div class="collapse" id="navbarToggleExternalContent">
<div class="bg-dark p-4"> <div class="bg-dark p-4">
<h5 class="text-white h4">Collapsed content</h5> <h5 class="text-white h4">Collapsed content</h5>
<span class="text-muted">Toggleable via the navbar brand.</span> <span class="text-body-secondary">Toggleable via the navbar brand.</span>
</div> </div>
</div> </div>
<nav class="navbar navbar-dark bg-dark"> <nav class="navbar navbar-dark bg-dark">

10
site/content/docs/5.3/components/toasts.md
View File

@ -108,7 +108,7 @@ Toasts are slightly translucent to blend in with what's below them.
<div class="toast-header"> <div class="toast-header">
{{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}} {{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}}
<strong class="me-auto">Bootstrap</strong> <strong class="me-auto">Bootstrap</strong>
<small class="text-muted">11 mins ago</small> <small class="text-body-secondary">11 mins ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button> <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div> </div>
<div class="toast-body"> <div class="toast-body">
@ -127,7 +127,7 @@ You can stack toasts by wrapping them in a toast container, which will verticall
<div class="toast-header"> <div class="toast-header">
{{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}} {{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}}
<strong class="me-auto">Bootstrap</strong> <strong class="me-auto">Bootstrap</strong>
<small class="text-muted">just now</small> <small class="text-body-secondary">just now</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button> <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div> </div>
<div class="toast-body"> <div class="toast-body">
@ -139,7 +139,7 @@ You can stack toasts by wrapping them in a toast container, which will verticall
<div class="toast-header"> <div class="toast-header">
{{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}} {{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}}
<strong class="me-auto">Bootstrap</strong> <strong class="me-auto">Bootstrap</strong>
<small class="text-muted">2 seconds ago</small> <small class="text-body-secondary">2 seconds ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button> <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div> </div>
<div class="toast-body"> <div class="toast-body">
@ -246,7 +246,7 @@ For systems that generate more notifications, consider using a wrapping element
<div class="toast-header"> <div class="toast-header">
{{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}} {{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}}
<strong class="me-auto">Bootstrap</strong> <strong class="me-auto">Bootstrap</strong>
<small class="text-muted">just now</small> <small class="text-body-secondary">just now</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button> <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div> </div>
<div class="toast-body"> <div class="toast-body">
@ -258,7 +258,7 @@ For systems that generate more notifications, consider using a wrapping element
<div class="toast-header"> <div class="toast-header">
{{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}} {{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}}
<strong class="me-auto">Bootstrap</strong> <strong class="me-auto">Bootstrap</strong>
<small class="text-muted">2 seconds ago</small> <small class="text-body-secondary">2 seconds ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button> <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div> </div>
<div class="toast-body"> <div class="toast-body">

2
site/content/docs/5.3/content/typography.md
View File

@ -60,7 +60,7 @@ Use the included utility classes to recreate the small secondary heading text fr
{{< example >}} {{< example >}}
<h3> <h3>
Fancy display heading Fancy display heading
<small class="text-muted">With faded secondary text</small> <small class="text-body-secondary">With faded secondary text</small>
</h3> </h3>
{{< /example >}} {{< /example >}}

4
site/content/docs/5.3/examples/_index.md
View File

@ -30,7 +30,7 @@ aliases: "/examples/"
{{ $example.name }} {{ $example.name }}
</a> </a>
</h3> </h3>
<p class="text-muted">{{ $example.description }}</p> <p class="text-body-secondary">{{ $example.description }}</p>
<p> <p>
<a class="icon-link small link-secondary link-offset-1" href="https://stackblitz.com/github/twbs{{ $example.url }}?file=index.html" target="_blank"> <a class="icon-link small link-secondary link-offset-1" href="https://stackblitz.com/github/twbs{{ $example.url }}?file=index.html" target="_blank">
<svg class="bi flex-shrink-0"><use xlink:href="#lightning-charge-fill"></use></svg> <svg class="bi flex-shrink-0"><use xlink:href="#lightning-charge-fill"></use></svg>
@ -52,7 +52,7 @@ aliases: "/examples/"
{{ $example.name }} {{ $example.name }}
</h3> </h3>
</a> </a>
<p class="text-muted">{{ $example.description }}</p> <p class="text-body-secondary">{{ $example.description }}</p>
</div> </div>
{{ end }} {{ end }}
{{ if (eq (add $i 1) $len) }}</div>{{ end }} {{ if (eq (add $i 1) $len) }}</div>{{ end }}

24
site/content/docs/5.3/examples/album-rtl/index.html
View File

@ -10,7 +10,7 @@ direction: rtl
<div class="row"> <div class="row">
<div class="col-sm-8 col-md-7 py-4"> <div class="col-sm-8 col-md-7 py-4">
<h4 class="text-white">حول</h4> <h4 class="text-white">حول</h4>
<p class="text-muted">أضف بعض المعلومات حول الألبوم، المؤلف، أو أي سياق خلفية آخر. اجعلها بضع جمل حتى يتمكن الزوار من التقاط بعض التلميحات المفيدة. ثم اربطها ببعض مواقع التواصل الاجتماعي أو معلومات الاتصال.</p> <p class="text-body-secondary">أضف بعض المعلومات حول الألبوم، المؤلف، أو أي سياق خلفية آخر. اجعلها بضع جمل حتى يتمكن الزوار من التقاط بعض التلميحات المفيدة. ثم اربطها ببعض مواقع التواصل الاجتماعي أو معلومات الاتصال.</p>
</div> </div>
<div class="col-sm-4 offset-md-1 py-4"> <div class="col-sm-4 offset-md-1 py-4">
<h4 class="text-white">تواصل معي</h4> <h4 class="text-white">تواصل معي</h4>
@ -42,7 +42,7 @@ direction: rtl
<div class="row py-lg-5"> <div class="row py-lg-5">
<div class="col-lg-6 col-md-8 mx-auto"> <div class="col-lg-6 col-md-8 mx-auto">
<h1 class="fw-light">مثال الألبوم</h1> <h1 class="fw-light">مثال الألبوم</h1>
<p class="lead text-muted">وصف قصير حول الألبوم أدناه (محتوياته ، ومنشؤه ، وما إلى ذلك). اجعله قصير ولطيف، ولكن ليست قصير جدًا حتى لا يتخطى الناس هذا الألبوم تمامًا.</p> <p class="lead text-body-secondary">وصف قصير حول الألبوم أدناه (محتوياته ، ومنشؤه ، وما إلى ذلك). اجعله قصير ولطيف، ولكن ليست قصير جدًا حتى لا يتخطى الناس هذا الألبوم تمامًا.</p>
<p> <p>
<a href="#" class="btn btn-primary my-2">الدعوة الرئيسية للعمل</a> <a href="#" class="btn btn-primary my-2">الدعوة الرئيسية للعمل</a>
<a href="#" class="btn btn-secondary my-2">عمل ثانوي</a> <a href="#" class="btn btn-secondary my-2">عمل ثانوي</a>
@ -65,7 +65,7 @@ direction: rtl
<button type="button" class="btn btn-sm btn-outline-secondary">عرض</button> <button type="button" class="btn btn-sm btn-outline-secondary">عرض</button>
<button type="button" class="btn btn-sm btn-outline-secondary">تعديل</button> <button type="button" class="btn btn-sm btn-outline-secondary">تعديل</button>
</div> </div>
<small class="text-muted">9 دقائق</small> <small class="text-body-secondary">9 دقائق</small>
</div> </div>
</div> </div>
</div> </div>
@ -80,7 +80,7 @@ direction: rtl
<button type="button" class="btn btn-sm btn-outline-secondary">عرض</button> <button type="button" class="btn btn-sm btn-outline-secondary">عرض</button>
<button type="button" class="btn btn-sm btn-outline-secondary">تعديل</button> <button type="button" class="btn btn-sm btn-outline-secondary">تعديل</button>
</div> </div>
<small class="text-muted">9 دقائق</small> <small class="text-body-secondary">9 دقائق</small>
</div> </div>
</div> </div>
</div> </div>
@ -95,7 +95,7 @@ direction: rtl
<button type="button" class="btn btn-sm btn-outline-secondary">عرض</button> <button type="button" class="btn btn-sm btn-outline-secondary">عرض</button>
<button type="button" class="btn btn-sm btn-outline-secondary">تعديل</button> <button type="button" class="btn btn-sm btn-outline-secondary">تعديل</button>
</div> </div>
<small class="text-muted">9 دقائق</small> <small class="text-body-secondary">9 دقائق</small>
</div> </div>
</div> </div>
</div> </div>
@ -111,7 +111,7 @@ direction: rtl
<button type="button" class="btn btn-sm btn-outline-secondary">عرض</button> <button type="button" class="btn btn-sm btn-outline-secondary">عرض</button>
<button type="button" class="btn btn-sm btn-outline-secondary">تعديل</button> <button type="button" class="btn btn-sm btn-outline-secondary">تعديل</button>
</div> </div>
<small class="text-muted">9 دقائق</small> <small class="text-body-secondary">9 دقائق</small>
</div> </div>
</div> </div>
</div> </div>
@ -126,7 +126,7 @@ direction: rtl
<button type="button" class="btn btn-sm btn-outline-secondary">عرض</button> <button type="button" class="btn btn-sm btn-outline-secondary">عرض</button>
<button type="button" class="btn btn-sm btn-outline-secondary">تعديل</button> <button type="button" class="btn btn-sm btn-outline-secondary">تعديل</button>
</div> </div>
<small class="text-muted">9 دقائق</small> <small class="text-body-secondary">9 دقائق</small>
</div> </div>
</div> </div>
</div> </div>
@ -141,7 +141,7 @@ direction: rtl
<button type="button" class="btn btn-sm btn-outline-secondary">عرض</button> <button type="button" class="btn btn-sm btn-outline-secondary">عرض</button>
<button type="button" class="btn btn-sm btn-outline-secondary">تعديل</button> <button type="button" class="btn btn-sm btn-outline-secondary">تعديل</button>
</div> </div>
<small class="text-muted">9 دقائق</small> <small class="text-body-secondary">9 دقائق</small>
</div> </div>
</div> </div>
</div> </div>
@ -157,7 +157,7 @@ direction: rtl
<button type="button" class="btn btn-sm btn-outline-secondary">عرض</button> <button type="button" class="btn btn-sm btn-outline-secondary">عرض</button>
<button type="button" class="btn btn-sm btn-outline-secondary">تعديل</button> <button type="button" class="btn btn-sm btn-outline-secondary">تعديل</button>
</div> </div>
<small class="text-muted">9 دقائق</small> <small class="text-body-secondary">9 دقائق</small>
</div> </div>
</div> </div>
</div> </div>
@ -172,7 +172,7 @@ direction: rtl
<button type="button" class="btn btn-sm btn-outline-secondary">عرض</button> <button type="button" class="btn btn-sm btn-outline-secondary">عرض</button>
<button type="button" class="btn btn-sm btn-outline-secondary">تعديل</button> <button type="button" class="btn btn-sm btn-outline-secondary">تعديل</button>
</div> </div>
<small class="text-muted">9 دقائق</small> <small class="text-body-secondary">9 دقائق</small>
</div> </div>
</div> </div>
</div> </div>
@ -187,7 +187,7 @@ direction: rtl
<button type="button" class="btn btn-sm btn-outline-secondary">عرض</button> <button type="button" class="btn btn-sm btn-outline-secondary">عرض</button>
<button type="button" class="btn btn-sm btn-outline-secondary">تعديل</button> <button type="button" class="btn btn-sm btn-outline-secondary">تعديل</button>
</div> </div>
<small class="text-muted">9 دقائق</small> <small class="text-body-secondary">9 دقائق</small>
</div> </div>
</div> </div>
</div> </div>
@ -198,7 +198,7 @@ direction: rtl
</main> </main>
<footer class="text-muted py-5"> <footer class="text-body-secondary py-5">
<div class="container"> <div class="container">
<p class="float-end mb-1"> <p class="float-end mb-1">
<a href="#">عد إلى الأعلى</a> <a href="#">عد إلى الأعلى</a>

24
site/content/docs/5.3/examples/album/index.html
View File

@ -9,7 +9,7 @@ title: Album example
<div class="row"> <div class="row">
<div class="col-sm-8 col-md-7 py-4"> <div class="col-sm-8 col-md-7 py-4">
<h4 class="text-white">About</h4> <h4 class="text-white">About</h4>
<p class="text-muted">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> <p class="text-body-secondary">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>
</div> </div>
<div class="col-sm-4 offset-md-1 py-4"> <div class="col-sm-4 offset-md-1 py-4">
<h4 class="text-white">Contact</h4> <h4 class="text-white">Contact</h4>
@ -41,7 +41,7 @@ title: Album example
<div class="row py-lg-5"> <div class="row py-lg-5">
<div class="col-lg-6 col-md-8 mx-auto"> <div class="col-lg-6 col-md-8 mx-auto">
<h1 class="fw-light">Album example</h1> <h1 class="fw-light">Album example</h1>
<p class="lead text-muted">Something short and leading about the collection below—its contents, the creator, etc. Make it short and sweet, but not too short so folks don’t simply skip over it entirely.</p> <p class="lead text-body-secondary">Something short and leading about the collection below—its contents, the creator, etc. Make it short and sweet, but not too short so folks don’t simply skip over it entirely.</p>
<p> <p>
<a href="#" class="btn btn-primary my-2">Main call to action</a> <a href="#" class="btn btn-primary my-2">Main call to action</a>
<a href="#" class="btn btn-secondary my-2">Secondary action</a> <a href="#" class="btn btn-secondary my-2">Secondary action</a>
@ -64,7 +64,7 @@ title: Album example
<button type="button" class="btn btn-sm btn-outline-secondary">View</button> <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button> <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
</div> </div>
<small class="text-muted">9 mins</small> <small class="text-body-secondary">9 mins</small>
</div> </div>
</div> </div>
</div> </div>
@ -79,7 +79,7 @@ title: Album example
<button type="button" class="btn btn-sm btn-outline-secondary">View</button> <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button> <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
</div> </div>
<small class="text-muted">9 mins</small> <small class="text-body-secondary">9 mins</small>
</div> </div>
</div> </div>
</div> </div>
@ -94,7 +94,7 @@ title: Album example
<button type="button" class="btn btn-sm btn-outline-secondary">View</button> <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button> <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
</div> </div>
<small class="text-muted">9 mins</small> <small class="text-body-secondary">9 mins</small>
</div> </div>
</div> </div>
</div> </div>
@ -110,7 +110,7 @@ title: Album example
<button type="button" class="btn btn-sm btn-outline-secondary">View</button> <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button> <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
</div> </div>
<small class="text-muted">9 mins</small> <small class="text-body-secondary">9 mins</small>
</div> </div>
</div> </div>
</div> </div>
@ -125,7 +125,7 @@ title: Album example
<button type="button" class="btn btn-sm btn-outline-secondary">View</button> <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button> <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
</div> </div>
<small class="text-muted">9 mins</small> <small class="text-body-secondary">9 mins</small>
</div> </div>
</div> </div>
</div> </div>
@ -140,7 +140,7 @@ title: Album example
<button type="button" class="btn btn-sm btn-outline-secondary">View</button> <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button> <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
</div> </div>
<small class="text-muted">9 mins</small> <small class="text-body-secondary">9 mins</small>
</div> </div>
</div> </div>
</div> </div>
@ -156,7 +156,7 @@ title: Album example
<button type="button" class="btn btn-sm btn-outline-secondary">View</button> <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button> <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
</div> </div>
<small class="text-muted">9 mins</small> <small class="text-body-secondary">9 mins</small>
</div> </div>
</div> </div>
</div> </div>
@ -171,7 +171,7 @@ title: Album example
<button type="button" class="btn btn-sm btn-outline-secondary">View</button> <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button> <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
</div> </div>
<small class="text-muted">9 mins</small> <small class="text-body-secondary">9 mins</small>
</div> </div>
</div> </div>
</div> </div>
@ -186,7 +186,7 @@ title: Album example
<button type="button" class="btn btn-sm btn-outline-secondary">View</button> <button type="button" class="btn btn-sm btn-outline-secondary">View</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button> <button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
</div> </div>
<small class="text-muted">9 mins</small> <small class="text-body-secondary">9 mins</small>
</div> </div>
</div> </div>
</div> </div>
@ -197,7 +197,7 @@ title: Album example
</main> </main>
<footer class="text-muted py-5"> <footer class="text-body-secondary py-5">
<div class="container"> <div class="container">
<p class="float-end mb-1"> <p class="float-end mb-1">
<a href="#">Back to top</a> <a href="#">Back to top</a>

4
site/content/docs/5.3/examples/blog-rtl/index.html
View File

@ -59,7 +59,7 @@ include_js: false
<div class="col p-4 d-flex flex-column position-static"> <div class="col p-4 d-flex flex-column position-static">
<strong class="d-inline-block mb-2 text-primary">العالم</strong> <strong class="d-inline-block mb-2 text-primary">العالم</strong>
<h3 class="mb-0">مشاركة مميزة</h3> <h3 class="mb-0">مشاركة مميزة</h3>
<div class="mb-1 text-muted">نوفمبر 12</div> <div class="mb-1 text-body-secondary">نوفمبر 12</div>
<p class="card-text mb-auto">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي.</p> <p class="card-text mb-auto">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي.</p>
<a href="#" class="stretched-link">أكمل القراءة</a> <a href="#" class="stretched-link">أكمل القراءة</a>
</div> </div>
@ -73,7 +73,7 @@ include_js: false
<div class="col p-4 d-flex flex-column position-static"> <div class="col p-4 d-flex flex-column position-static">
<strong class="d-inline-block mb-2 text-success">التصميم</strong> <strong class="d-inline-block mb-2 text-success">التصميم</strong>
<h3 class="mb-0">عنوان الوظيفة</h3> <h3 class="mb-0">عنوان الوظيفة</h3>
<div class="mb-1 text-muted">نوفمبر 11</div> <div class="mb-1 text-body-secondary">نوفمبر 11</div>
<p class="mb-auto">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي.</p> <p class="mb-auto">هذه بطاقة أوسع مع نص داعم أدناه كمقدمة طبيعية لمحتوى إضافي.</p>
<a href="#" class="stretched-link">أكمل القراءة</a> <a href="#" class="stretched-link">أكمل القراءة</a>
</div> </div>

4
site/content/docs/5.3/examples/blog/index.html
View File

@ -58,7 +58,7 @@ include_js: false
<div class="col p-4 d-flex flex-column position-static"> <div class="col p-4 d-flex flex-column position-static">
<strong class="d-inline-block mb-2 text-primary">World</strong> <strong class="d-inline-block mb-2 text-primary">World</strong>
<h3 class="mb-0">Featured post</h3> <h3 class="mb-0">Featured post</h3>
<div class="mb-1 text-muted">Nov 12</div> <div class="mb-1 text-body-secondary">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> <p class="card-text mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="stretched-link">Continue reading</a> <a href="#" class="stretched-link">Continue reading</a>
</div> </div>
@ -72,7 +72,7 @@ include_js: false
<div class="col p-4 d-flex flex-column position-static"> <div class="col p-4 d-flex flex-column position-static">
<strong class="d-inline-block mb-2 text-success">Design</strong> <strong class="d-inline-block mb-2 text-success">Design</strong>
<h3 class="mb-0">Post title</h3> <h3 class="mb-0">Post title</h3>
<div class="mb-1 text-muted">Nov 11</div> <div class="mb-1 text-body-secondary">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> <p class="mb-auto">This is a wider card with supporting text below as a natural lead-in to additional content.</p>
<a href="#" class="stretched-link">Continue reading</a> <a href="#" class="stretched-link">Continue reading</a>
</div> </div>

6
site/content/docs/5.3/examples/carousel-rtl/index.html
View File

@ -120,7 +120,7 @@ extra_css:
<div class="row featurette"> <div class="row featurette">
<div class="col-md-7"> <div class="col-md-7">
<h2 class="featurette-heading fw-normal lh-1">العنوان الأول المميز. <span class="text-muted"> سيذهل عقلك. </span></h2> <h2 class="featurette-heading fw-normal lh-1">العنوان الأول المميز. <span class="text-body-secondary"> سيذهل عقلك. </span></h2>
<p class="lead">وجه الإنسان هو جزء معقَّد ومتميِّز للغاية من جسمه. وفي الواقع، إنه أحد أكثر أنظمة الإشارات المتاحة تعقيداً لدينا؛ فهو يتضمَّن أكثر من 40 عضلة مستقلة هيكلياً ووظيفياً، بحيث يمكن تشغيل كل منها بشكل مستقل عن البعض الآخر؛ وتشكِّل أحد أقوى مؤشرات العواطف.</p> <p class="lead">وجه الإنسان هو جزء معقَّد ومتميِّز للغاية من جسمه. وفي الواقع، إنه أحد أكثر أنظمة الإشارات المتاحة تعقيداً لدينا؛ فهو يتضمَّن أكثر من 40 عضلة مستقلة هيكلياً ووظيفياً، بحيث يمكن تشغيل كل منها بشكل مستقل عن البعض الآخر؛ وتشكِّل أحد أقوى مؤشرات العواطف.</p>
</div> </div>
<div class="col-md-5"> <div class="col-md-5">
@ -132,7 +132,7 @@ extra_css:
<div class="row featurette"> <div class="row featurette">
<div class="col-md-7 order-md-2"> <div class="col-md-7 order-md-2">
<h2 class="featurette-heading fw-normal lh-1">أوه نعم، هذا جيد. <span class="text-muted"> شاهد بنفسك. </span></h2> <h2 class="featurette-heading fw-normal lh-1">أوه نعم، هذا جيد. <span class="text-body-secondary"> شاهد بنفسك. </span></h2>
<p class="lead">عندما نضحك أو نبكي، فإننا نعرض عواطفنا، مما يسمح للآخرين بإلقاء نظرة خاطفة على أذهاننا أثناء "قراءة" وجوهنا بناءً على التغييرات في مكوّنات الوجه الرئيسة، مثل: العينين والحاجبين والجفنين والأنف والشفتين.</p> <p class="lead">عندما نضحك أو نبكي، فإننا نعرض عواطفنا، مما يسمح للآخرين بإلقاء نظرة خاطفة على أذهاننا أثناء "قراءة" وجوهنا بناءً على التغييرات في مكوّنات الوجه الرئيسة، مثل: العينين والحاجبين والجفنين والأنف والشفتين.</p>
</div> </div>
<div class="col-md-5 order-md-1"> <div class="col-md-5 order-md-1">
@ -144,7 +144,7 @@ extra_css:
<div class="row featurette"> <div class="row featurette">
<div class="col-md-7"> <div class="col-md-7">
<h2 class="featurette-heading fw-normal lh-1">وأخيرًا، هذا. <span class="text-muted"> كش ملك. </span></h2> <h2 class="featurette-heading fw-normal lh-1">وأخيرًا، هذا. <span class="text-body-secondary"> كش ملك. </span></h2>
<p class="lead">إن جميع العضلات في أجسامنا مدعمة بالأعصاب المتصلة من كافة أنحاء الجسم بالنخاع الشوكي والدماغ. وهذا الاتصال العصبي هو ثنائي الاتجاه، أي إن العصب يتسبَّب في تقلصات العضلات بناءً على إشارات الدماغ، ويقوم في الوقت نفسه بإرسال معلومات عن حالة العضلات إلى الدماغ</p> <p class="lead">إن جميع العضلات في أجسامنا مدعمة بالأعصاب المتصلة من كافة أنحاء الجسم بالنخاع الشوكي والدماغ. وهذا الاتصال العصبي هو ثنائي الاتجاه، أي إن العصب يتسبَّب في تقلصات العضلات بناءً على إشارات الدماغ، ويقوم في الوقت نفسه بإرسال معلومات عن حالة العضلات إلى الدماغ</p>
</div> </div>
<div class="col-md-5"> <div class="col-md-5">

6
site/content/docs/5.3/examples/carousel/index.html
View File

@ -119,7 +119,7 @@ extra_css:
<div class="row featurette"> <div class="row featurette">
<div class="col-md-7"> <div class="col-md-7">
<h2 class="featurette-heading fw-normal lh-1">First featurette heading. <span class="text-muted">It’ll blow your mind.</span></h2> <h2 class="featurette-heading fw-normal lh-1">First featurette heading. <span class="text-body-secondary">It’ll blow your mind.</span></h2>
<p class="lead">Some great placeholder content for the first featurette here. Imagine some exciting prose here.</p> <p class="lead">Some great placeholder content for the first featurette here. Imagine some exciting prose here.</p>
</div> </div>
<div class="col-md-5"> <div class="col-md-5">
@ -131,7 +131,7 @@ extra_css:
<div class="row featurette"> <div class="row featurette">
<div class="col-md-7 order-md-2"> <div class="col-md-7 order-md-2">
<h2 class="featurette-heading fw-normal lh-1">Oh yeah, it’s that good. <span class="text-muted">See for yourself.</span></h2> <h2 class="featurette-heading fw-normal lh-1">Oh yeah, it’s that good. <span class="text-body-secondary">See for yourself.</span></h2>
<p class="lead">Another featurette? Of course. More placeholder content here to give you an idea of how this layout would work with some actual real-world content in place.</p> <p class="lead">Another featurette? Of course. More placeholder content here to give you an idea of how this layout would work with some actual real-world content in place.</p>
</div> </div>
<div class="col-md-5 order-md-1"> <div class="col-md-5 order-md-1">
@ -143,7 +143,7 @@ extra_css:
<div class="row featurette"> <div class="row featurette">
<div class="col-md-7"> <div class="col-md-7">
<h2 class="featurette-heading fw-normal lh-1">And lastly, this one. <span class="text-muted">Checkmate.</span></h2> <h2 class="featurette-heading fw-normal lh-1">And lastly, this one. <span class="text-body-secondary">Checkmate.</span></h2>
<p class="lead">And yes, this is the last block of representative placeholder content. Again, not really intended to be actually read, simply here to give you a better view of what this would look like with some actual content. Your content.</p> <p class="lead">And yes, this is the last block of representative placeholder content. Again, not really intended to be actually read, simply here to give you a better view of what this would look like with some actual content. Your content.</p>
</div> </div>
<div class="col-md-5"> <div class="col-md-5">

8
site/content/docs/5.3/examples/cheatsheet-rtl/index.html
View File

@ -18,7 +18,7 @@ direction: rtl
<a href="{{< docsref "/examples/cheatsheet" >}}" class="ms-auto link-light" hreflang="en">جدول بيانات LTR</a> <a href="{{< docsref "/examples/cheatsheet" >}}" class="ms-auto link-light" hreflang="en">جدول بيانات LTR</a>
</div> </div>
</header> </header>
<aside class="bd-aside sticky-xl-top text-muted align-self-start mb-3 mb-xl-5 px-2"> <aside class="bd-aside sticky-xl-top text-body-secondary align-self-start mb-3 mb-xl-5 px-2">
<h2 class="h6 pt-4 pb-3 mb-4 border-bottom">على هذه الصفحة</h2> <h2 class="h6 pt-4 pb-3 mb-4 border-bottom">على هذه الصفحة</h2>
<nav class="small" id="toc"> <nav class="small" id="toc">
<ul class="list-unstyled"> <ul class="list-unstyled">
@ -821,7 +821,7 @@ direction: rtl
<p class="card-text">بعض الأمثلة السريعة للنصوص للبناء على عنوان البطاقة وتشكيل الجزء الأكبر من محتوى البطاقة.</p> <p class="card-text">بعض الأمثلة السريعة للنصوص للبناء على عنوان البطاقة وتشكيل الجزء الأكبر من محتوى البطاقة.</p>
<a href="#" class="btn btn-primary">اذهب لمكان ما</a> <a href="#" class="btn btn-primary">اذهب لمكان ما</a>
</div> </div>
<div class="card-footer text-muted"> <div class="card-footer text-body-secondary">
منذ يومان منذ يومان
</div> </div>
</div> </div>
@ -853,7 +853,7 @@ direction: rtl
<div class="card-body"> <div class="card-body">
<h5 class="card-title">عنوان البطاقة</h5> <h5 class="card-title">عنوان البطاقة</h5>
<p class="card-text">هذه بطاقة أعرض مع نص داعم تحتها كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.</p> <p class="card-text">هذه بطاقة أعرض مع نص داعم تحتها كمقدمة طبيعية لمحتوى إضافي. هذا المحتوى أطول قليلاً.</p>
<p class="card-text"><small class="text-muted">آخر تحديث منذ 3 دقائق</small></p> <p class="card-text"><small class="text-body-secondary">آخر تحديث منذ 3 دقائق</small></p>
</div> </div>
</div> </div>
</div> </div>
@ -1510,7 +1510,7 @@ direction: rtl
<div class="toast-header"> <div class="toast-header">
{{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}} {{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}}
<strong class="me-auto">Bootstrap</strong> <strong class="me-auto">Bootstrap</strong>
<small class="text-muted">قبل 11 دقيقة</small> <small class="text-body-secondary">قبل 11 دقيقة</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="قريب"></button> <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="قريب"></button>
</div> </div>
<div class="toast-body"> <div class="toast-body">

8
site/content/docs/5.3/examples/cheatsheet/index.html
View File

@ -17,7 +17,7 @@ body_class: "bg-body-tertiary"
<a href="{{< docsref "/examples/cheatsheet-rtl" >}}" class="ms-auto link-light" hreflang="ar">RTL cheatsheet</a> <a href="{{< docsref "/examples/cheatsheet-rtl" >}}" class="ms-auto link-light" hreflang="ar">RTL cheatsheet</a>
</div> </div>
</header> </header>
<aside class="bd-aside sticky-xl-top text-muted align-self-start mb-3 mb-xl-5 px-2"> <aside class="bd-aside sticky-xl-top text-body-secondary align-self-start mb-3 mb-xl-5 px-2">
<h2 class="h6 pt-4 pb-3 mb-4 border-bottom">On this page</h2> <h2 class="h6 pt-4 pb-3 mb-4 border-bottom">On this page</h2>
<nav class="small" id="toc"> <nav class="small" id="toc">
<ul class="list-unstyled"> <ul class="list-unstyled">
@ -820,7 +820,7 @@ body_class: "bg-body-tertiary"
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p> <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary">Go somewhere</a> <a href="#" class="btn btn-primary">Go somewhere</a>
</div> </div>
<div class="card-footer text-muted"> <div class="card-footer text-body-secondary">
2 days ago 2 days ago
</div> </div>
</div> </div>
@ -852,7 +852,7 @@ body_class: "bg-body-tertiary"
<div class="card-body"> <div class="card-body">
<h5 class="card-title">Card title</h5> <h5 class="card-title">Card title</h5>
<p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p> <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
</div> </div>
</div> </div>
</div> </div>
@ -1506,7 +1506,7 @@ body_class: "bg-body-tertiary"
<div class="toast-header"> <div class="toast-header">
{{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}} {{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}}
<strong class="me-auto">Bootstrap</strong> <strong class="me-auto">Bootstrap</strong>
<small class="text-muted">11 mins ago</small> <small class="text-body-secondary">11 mins ago</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button> <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div> </div>
<div class="toast-body"> <div class="toast-body">

22
site/content/docs/5.3/examples/checkout-rtl/index.html
View File

@ -20,30 +20,30 @@ body_class: "bg-body-tertiary"
<div class="row g-3"> <div class="row g-3">
<div class="col-md-5 col-lg-4 order-md-last"> <div class="col-md-5 col-lg-4 order-md-last">
<h4 class="d-flex justify-content-between align-items-center mb-3"> <h4 class="d-flex justify-content-between align-items-center mb-3">
<span class="text-muted">عربة التسوق</span> <span class="text-body-secondary">عربة التسوق</span>
<span class="badge bg-secondary rounded-pill">3</span> <span class="badge bg-secondary rounded-pill">3</span>
</h4> </h4>
<ul class="list-group mb-3"> <ul class="list-group mb-3">
<li class="list-group-item d-flex justify-content-between lh-sm"> <li class="list-group-item d-flex justify-content-between lh-sm">
<div> <div>
<h6 class="my-0">اسم المنتج</h6> <h6 class="my-0">اسم المنتج</h6>
<small class="text-muted">وصف مختصر</small> <small class="text-body-secondary">وصف مختصر</small>
</div> </div>
<span class="text-muted">$12</span> <span class="text-body-secondary">$12</span>
</li> </li>
<li class="list-group-item d-flex justify-content-between lh-sm"> <li class="list-group-item d-flex justify-content-between lh-sm">
<div> <div>
<h6 class="my-0">المنتج الثاني</h6> <h6 class="my-0">المنتج الثاني</h6>
<small class="text-muted">وصف مختصر</small> <small class="text-body-secondary">وصف مختصر</small>
</div> </div>
<span class="text-muted">$8</span> <span class="text-body-secondary">$8</span>
</li> </li>
<li class="list-group-item d-flex justify-content-between lh-sm"> <li class="list-group-item d-flex justify-content-between lh-sm">
<div> <div>
<h6 class="my-0">البند الثالث</h6> <h6 class="my-0">البند الثالث</h6>
<small class="text-muted">وصف مختصر</small> <small class="text-body-secondary">وصف مختصر</small>
</div> </div>
<span class="text-muted">$5</span> <span class="text-body-secondary">$5</span>
</li> </li>
<li class="list-group-item d-flex justify-content-between bg-body-tertiary"> <li class="list-group-item d-flex justify-content-between bg-body-tertiary">
<div class="text-success"> <div class="text-success">
@ -97,7 +97,7 @@ body_class: "bg-body-tertiary"
</div> </div>
<div class="col-12"> <div class="col-12">
<label for="email" class="form-label">البريد الإلكتروني <span class="text-muted">(اختياري)</span></label> <label for="email" class="form-label">البريد الإلكتروني <span class="text-body-secondary">(اختياري)</span></label>
<input type="email" class="form-control" id="email" placeholder="you@example.com"> <input type="email" class="form-control" id="email" placeholder="you@example.com">
<div class="invalid-feedback"> <div class="invalid-feedback">
يرجى إدخال عنوان بريد إلكتروني صحيح لتصلكم تحديثات الشحن. يرجى إدخال عنوان بريد إلكتروني صحيح لتصلكم تحديثات الشحن.
@ -113,7 +113,7 @@ body_class: "bg-body-tertiary"
</div> </div>
<div class="col-12"> <div class="col-12">
<label for="address2" class="form-label">عنوان 2 <span class="text-muted">(اختياري)</span></label> <label for="address2" class="form-label">عنوان 2 <span class="text-body-secondary">(اختياري)</span></label>
<input type="text" class="form-control" id="address2" placeholder="شقة 24"> <input type="text" class="form-control" id="address2" placeholder="شقة 24">
</div> </div>
@ -183,7 +183,7 @@ body_class: "bg-body-tertiary"
<div class="col-md-6"> <div class="col-md-6">
<label for="cc-name" class="form-label">الاسم على البطاقة</label> <label for="cc-name" class="form-label">الاسم على البطاقة</label>
<input type="text" class="form-control" id="cc-name" placeholder="" required> <input type="text" class="form-control" id="cc-name" placeholder="" required>
<small class="text-muted">الاسم الكامل كما هو معروض على البطاقة</small> <small class="text-body-secondary">الاسم الكامل كما هو معروض على البطاقة</small>
<div class="invalid-feedback"> <div class="invalid-feedback">
الاسم على البطاقة مطلوب الاسم على البطاقة مطلوب
</div> </div>
@ -221,7 +221,7 @@ body_class: "bg-body-tertiary"
</div> </div>
</div> </div>
</main> </main>
<footer class="my-5 pt-5 text-muted text-center text-small"> <footer class="my-5 pt-5 text-body-secondary text-center text-small">
<p class="mb-1">&copy; {{< year >}}-2017 اسم الشركة</p> <p class="mb-1">&copy; {{< year >}}-2017 اسم الشركة</p>
<ul class="list-inline"> <ul class="list-inline">
<li class="list-inline-item"><a href="#">سياسة الخصوصية</a></li> <li class="list-inline-item"><a href="#">سياسة الخصوصية</a></li>

20
site/content/docs/5.3/examples/checkout/index.html
View File

@ -26,23 +26,23 @@ body_class: "bg-body-tertiary"
<li class="list-group-item d-flex justify-content-between lh-sm"> <li class="list-group-item d-flex justify-content-between lh-sm">
<div> <div>
<h6 class="my-0">Product name</h6> <h6 class="my-0">Product name</h6>
<small class="text-muted">Brief description</small> <small class="text-body-secondary">Brief description</small>
</div> </div>
<span class="text-muted">$12</span> <span class="text-body-secondary">$12</span>
</li> </li>
<li class="list-group-item d-flex justify-content-between lh-sm"> <li class="list-group-item d-flex justify-content-between lh-sm">
<div> <div>
<h6 class="my-0">Second product</h6> <h6 class="my-0">Second product</h6>
<small class="text-muted">Brief description</small> <small class="text-body-secondary">Brief description</small>
</div> </div>
<span class="text-muted">$8</span> <span class="text-body-secondary">$8</span>
</li> </li>
<li class="list-group-item d-flex justify-content-between lh-sm"> <li class="list-group-item d-flex justify-content-between lh-sm">
<div> <div>
<h6 class="my-0">Third item</h6> <h6 class="my-0">Third item</h6>
<small class="text-muted">Brief description</small> <small class="text-body-secondary">Brief description</small>
</div> </div>
<span class="text-muted">$5</span> <span class="text-body-secondary">$5</span>
</li> </li>
<li class="list-group-item d-flex justify-content-between bg-body-tertiary"> <li class="list-group-item d-flex justify-content-between bg-body-tertiary">
<div class="text-success"> <div class="text-success">
@ -96,7 +96,7 @@ body_class: "bg-body-tertiary"
</div> </div>
<div class="col-12"> <div class="col-12">
<label for="email" class="form-label">Email <span class="text-muted">(Optional)</span></label> <label for="email" class="form-label">Email <span class="text-body-secondary">(Optional)</span></label>
<input type="email" class="form-control" id="email" placeholder="you@example.com"> <input type="email" class="form-control" id="email" placeholder="you@example.com">
<div class="invalid-feedback"> <div class="invalid-feedback">
Please enter a valid email address for shipping updates. Please enter a valid email address for shipping updates.
@ -112,7 +112,7 @@ body_class: "bg-body-tertiary"
</div> </div>
<div class="col-12"> <div class="col-12">
<label for="address2" class="form-label">Address 2 <span class="text-muted">(Optional)</span></label> <label for="address2" class="form-label">Address 2 <span class="text-body-secondary">(Optional)</span></label>
<input type="text" class="form-control" id="address2" placeholder="Apartment or suite"> <input type="text" class="form-control" id="address2" placeholder="Apartment or suite">
</div> </div>
@ -182,7 +182,7 @@ body_class: "bg-body-tertiary"
<div class="col-md-6"> <div class="col-md-6">
<label for="cc-name" class="form-label">Name on card</label> <label for="cc-name" class="form-label">Name on card</label>
<input type="text" class="form-control" id="cc-name" placeholder="" required> <input type="text" class="form-control" id="cc-name" placeholder="" required>
<small class="text-muted">Full name as displayed on card</small> <small class="text-body-secondary">Full name as displayed on card</small>
<div class="invalid-feedback"> <div class="invalid-feedback">
Name on card is required Name on card is required
</div> </div>
@ -221,7 +221,7 @@ body_class: "bg-body-tertiary"
</div> </div>
</main> </main>
<footer class="my-5 pt-5 text-muted text-center text-small"> <footer class="my-5 pt-5 text-body-secondary text-center text-small">
<p class="mb-1">&copy; 2017–{{< year >}} Company Name</p> <p class="mb-1">&copy; 2017–{{< year >}} Company Name</p>
<ul class="list-inline"> <ul class="list-inline">
<li class="list-inline-item"><a href="#">Privacy</a></li> <li class="list-inline-item"><a href="#">Privacy</a></li>

2
site/content/docs/5.3/examples/dashboard-rtl/index.html
View File

@ -68,7 +68,7 @@ extra_js:
</li> </li>
</ul> </ul>
<h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted text-uppercase"> <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-body-secondary text-uppercase">
<span>التقارير المحفوظة</span> <span>التقارير المحفوظة</span>
<a class="link-secondary" href="#" aria-label="إضافة تقرير جديد"> <a class="link-secondary" href="#" aria-label="إضافة تقرير جديد">
<span data-feather="plus-circle" class="align-text-bottom"></span> <span data-feather="plus-circle" class="align-text-bottom"></span>

2
site/content/docs/5.3/examples/dashboard/index.html
View File

@ -67,7 +67,7 @@ extra_js:
</li> </li>
</ul> </ul>
<h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-muted text-uppercase"> <h6 class="sidebar-heading d-flex justify-content-between align-items-center px-3 mt-4 mb-1 text-body-secondary text-uppercase">
<span>Saved reports</span> <span>Saved reports</span>
<a class="link-secondary" href="#" aria-label="Add a new report"> <a class="link-secondary" href="#" aria-label="Add a new report">
<span data-feather="plus-circle" class="align-text-bottom"></span> <span data-feather="plus-circle" class="align-text-bottom"></span>

4
site/content/docs/5.3/examples/dropdowns/index.html
View File

@ -230,7 +230,7 @@ body_class: ""
<svg class="bi" width="16" height="16"><use xlink:href="#arrow-right-short"/></svg> <svg class="bi" width="16" height="16"><use xlink:href="#arrow-right-short"/></svg>
</button> </button>
</div> </div>
<div class="cal-weekdays text-muted"> <div class="cal-weekdays text-body-secondary">
<div class="cal-weekday">Sun</div> <div class="cal-weekday">Sun</div>
<div class="cal-weekday">Mon</div> <div class="cal-weekday">Mon</div>
<div class="cal-weekday">Tue</div> <div class="cal-weekday">Tue</div>
@ -309,7 +309,7 @@ body_class: ""
<svg class="bi" width="16" height="16"><use xlink:href="#arrow-right-short"/></svg> <svg class="bi" width="16" height="16"><use xlink:href="#arrow-right-short"/></svg>
</button> </button>
</div> </div>
<div class="cal-weekdays text-muted"> <div class="cal-weekdays text-body-secondary">
<div class="cal-weekday">Sun</div> <div class="cal-weekday">Sun</div>
<div class="cal-weekday">Mon</div> <div class="cal-weekday">Mon</div>
<div class="cal-weekday">Tue</div> <div class="cal-weekday">Tue</div>

26
site/content/docs/5.3/examples/features/index.html
View File

@ -228,56 +228,56 @@ body_class: ""
<div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4 py-5"> <div class="row row-cols-1 row-cols-sm-2 row-cols-md-3 row-cols-lg-4 g-4 py-5">
<div class="col d-flex align-items-start"> <div class="col d-flex align-items-start">
<svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#bootstrap"/></svg> <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#bootstrap"/></svg>
<div> <div>
<h3 class="fw-bold mb-0 fs-4">Featured title</h3> <h3 class="fw-bold mb-0 fs-4">Featured title</h3>
<p>Paragraph of text beneath the heading to explain the heading.</p> <p>Paragraph of text beneath the heading to explain the heading.</p>
</div> </div>
</div> </div>
<div class="col d-flex align-items-start"> <div class="col d-flex align-items-start">
<svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#cpu-fill"/></svg> <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#cpu-fill"/></svg>
<div> <div>
<h3 class="fw-bold mb-0 fs-4">Featured title</h3> <h3 class="fw-bold mb-0 fs-4">Featured title</h3>
<p>Paragraph of text beneath the heading to explain the heading.</p> <p>Paragraph of text beneath the heading to explain the heading.</p>
</div> </div>
</div> </div>
<div class="col d-flex align-items-start"> <div class="col d-flex align-items-start">
<svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#calendar3"/></svg> <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#calendar3"/></svg>
<div> <div>
<h3 class="fw-bold mb-0 fs-4">Featured title</h3> <h3 class="fw-bold mb-0 fs-4">Featured title</h3>
<p>Paragraph of text beneath the heading to explain the heading.</p> <p>Paragraph of text beneath the heading to explain the heading.</p>
</div> </div>
</div> </div>
<div class="col d-flex align-items-start"> <div class="col d-flex align-items-start">
<svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#home"/></svg> <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#home"/></svg>
<div> <div>
<h3 class="fw-bold mb-0 fs-4">Featured title</h3> <h3 class="fw-bold mb-0 fs-4">Featured title</h3>
<p>Paragraph of text beneath the heading to explain the heading.</p> <p>Paragraph of text beneath the heading to explain the heading.</p>
</div> </div>
</div> </div>
<div class="col d-flex align-items-start"> <div class="col d-flex align-items-start">
<svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#speedometer2"/></svg> <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#speedometer2"/></svg>
<div> <div>
<h3 class="fw-bold mb-0 fs-4">Featured title</h3> <h3 class="fw-bold mb-0 fs-4">Featured title</h3>
<p>Paragraph of text beneath the heading to explain the heading.</p> <p>Paragraph of text beneath the heading to explain the heading.</p>
</div> </div>
</div> </div>
<div class="col d-flex align-items-start"> <div class="col d-flex align-items-start">
<svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#toggles2"/></svg> <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#toggles2"/></svg>
<div> <div>
<h3 class="fw-bold mb-0 fs-4">Featured title</h3> <h3 class="fw-bold mb-0 fs-4">Featured title</h3>
<p>Paragraph of text beneath the heading to explain the heading.</p> <p>Paragraph of text beneath the heading to explain the heading.</p>
</div> </div>
</div> </div>
<div class="col d-flex align-items-start"> <div class="col d-flex align-items-start">
<svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#geo-fill"/></svg> <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#geo-fill"/></svg>
<div> <div>
<h3 class="fw-bold mb-0 fs-4">Featured title</h3> <h3 class="fw-bold mb-0 fs-4">Featured title</h3>
<p>Paragraph of text beneath the heading to explain the heading.</p> <p>Paragraph of text beneath the heading to explain the heading.</p>
</div> </div>
</div> </div>
<div class="col d-flex align-items-start"> <div class="col d-flex align-items-start">
<svg class="bi text-muted flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#tools"/></svg> <svg class="bi text-body-secondary flex-shrink-0 me-3" width="1.75em" height="1.75em"><use xlink:href="#tools"/></svg>
<div> <div>
<h3 class="fw-bold mb-0 fs-4">Featured title</h3> <h3 class="fw-bold mb-0 fs-4">Featured title</h3>
<p>Paragraph of text beneath the heading to explain the heading.</p> <p>Paragraph of text beneath the heading to explain the heading.</p>
@ -294,7 +294,7 @@ body_class: ""
<div class="row row-cols-1 row-cols-md-2 align-items-md-center g-5 py-5"> <div class="row row-cols-1 row-cols-md-2 align-items-md-center g-5 py-5">
<div class="col d-flex flex-column align-items-start gap-2"> <div class="col d-flex flex-column align-items-start gap-2">
<h3 class="fw-bold">Left-aligned title explaining these awesome features</h3> <h3 class="fw-bold">Left-aligned title explaining these awesome features</h3>
<p class="text-muted">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> <p class="text-body-secondary">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>
<a href="#" class="btn btn-primary btn-lg">Primary button</a> <a href="#" class="btn btn-primary btn-lg">Primary button</a>
</div> </div>
@ -307,7 +307,7 @@ body_class: ""
</svg> </svg>
</div> </div>
<h4 class="fw-semibold mb-0">Featured title</h4> <h4 class="fw-semibold mb-0">Featured title</h4>
<p class="text-muted">Paragraph of text beneath the heading to explain the heading.</p> <p class="text-body-secondary">Paragraph of text beneath the heading to explain the heading.</p>
</div> </div>
<div class="col d-flex flex-column gap-2"> <div class="col d-flex flex-column gap-2">
@ -317,7 +317,7 @@ body_class: ""
</svg> </svg>
</div> </div>
<h4 class="fw-semibold mb-0">Featured title</h4> <h4 class="fw-semibold mb-0">Featured title</h4>
<p class="text-muted">Paragraph of text beneath the heading to explain the heading.</p> <p class="text-body-secondary">Paragraph of text beneath the heading to explain the heading.</p>
</div> </div>
<div class="col d-flex flex-column gap-2"> <div class="col d-flex flex-column gap-2">
@ -327,7 +327,7 @@ body_class: ""
</svg> </svg>
</div> </div>
<h4 class="fw-semibold mb-0">Featured title</h4> <h4 class="fw-semibold mb-0">Featured title</h4>
<p class="text-muted">Paragraph of text beneath the heading to explain the heading.</p> <p class="text-body-secondary">Paragraph of text beneath the heading to explain the heading.</p>
</div> </div>
<div class="col d-flex flex-column gap-2"> <div class="col d-flex flex-column gap-2">
@ -337,7 +337,7 @@ body_class: ""
</svg> </svg>
</div> </div>
<h4 class="fw-semibold mb-0">Featured title</h4> <h4 class="fw-semibold mb-0">Featured title</h4>
<p class="text-muted">Paragraph of text beneath the heading to explain the heading.</p> <p class="text-body-secondary">Paragraph of text beneath the heading to explain the heading.</p>
</div> </div>
</div> </div>
</div> </div>

96
site/content/docs/5.3/examples/footers/index.html
View File

@ -22,18 +22,18 @@ body_class: ""
<div class="container"> <div class="container">
<footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top"> <footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
<p class="col-md-4 mb-0 text-muted">&copy; {{< year >}} Company, Inc</p> <p class="col-md-4 mb-0 text-body-secondary">&copy; {{< year >}} Company, Inc</p>
<a href="/" class="col-md-4 d-flex align-items-center justify-content-center mb-3 mb-md-0 me-md-auto link-body-emphasis text-decoration-none"> <a href="/" class="col-md-4 d-flex align-items-center justify-content-center mb-3 mb-md-0 me-md-auto link-body-emphasis text-decoration-none">
<svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg> <svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
</a> </a>
<ul class="nav col-md-4 justify-content-end"> <ul class="nav col-md-4 justify-content-end">
<li class="nav-item"><a href="#" class="nav-link px-2 text-muted">Home</a></li> <li class="nav-item"><a href="#" class="nav-link px-2 text-body-secondary">Home</a></li>
<li class="nav-item"><a href="#" class="nav-link px-2 text-muted">Features</a></li> <li class="nav-item"><a href="#" class="nav-link px-2 text-body-secondary">Features</a></li>
<li class="nav-item"><a href="#" class="nav-link px-2 text-muted">Pricing</a></li> <li class="nav-item"><a href="#" class="nav-link px-2 text-body-secondary">Pricing</a></li>
<li class="nav-item"><a href="#" class="nav-link px-2 text-muted">FAQs</a></li> <li class="nav-item"><a href="#" class="nav-link px-2 text-body-secondary">FAQs</a></li>
<li class="nav-item"><a href="#" class="nav-link px-2 text-muted">About</a></li> <li class="nav-item"><a href="#" class="nav-link px-2 text-body-secondary">About</a></li>
</ul> </ul>
</footer> </footer>
</div> </div>
@ -43,16 +43,16 @@ body_class: ""
<div class="container"> <div class="container">
<footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top"> <footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
<div class="col-md-4 d-flex align-items-center"> <div class="col-md-4 d-flex align-items-center">
<a href="/" class="mb-3 me-2 mb-md-0 text-muted text-decoration-none lh-1"> <a href="/" class="mb-3 me-2 mb-md-0 text-body-secondary text-decoration-none lh-1">
<svg class="bi" width="30" height="24"><use xlink:href="#bootstrap"/></svg> <svg class="bi" width="30" height="24"><use xlink:href="#bootstrap"/></svg>
</a> </a>
<span class="mb-3 mb-md-0 text-muted">&copy; {{< year >}} Company, Inc</span> <span class="mb-3 mb-md-0 text-body-secondary">&copy; {{< year >}} Company, Inc</span>
</div> </div>
<ul class="nav col-md-4 justify-content-end list-unstyled d-flex"> <ul class="nav col-md-4 justify-content-end list-unstyled d-flex">
<li class="ms-3"><a class="text-muted" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#twitter"/></svg></a></li> <li class="ms-3"><a class="text-body-secondary" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#twitter"/></svg></a></li>
<li class="ms-3"><a class="text-muted" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#instagram"/></svg></a></li> <li class="ms-3"><a class="text-body-secondary" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#instagram"/></svg></a></li>
<li class="ms-3"><a class="text-muted" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#facebook"/></svg></a></li> <li class="ms-3"><a class="text-body-secondary" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#facebook"/></svg></a></li>
</ul> </ul>
</footer> </footer>
</div> </div>
@ -62,13 +62,13 @@ body_class: ""
<div class="container"> <div class="container">
<footer class="py-3 my-4"> <footer class="py-3 my-4">
<ul class="nav justify-content-center border-bottom pb-3 mb-3"> <ul class="nav justify-content-center border-bottom pb-3 mb-3">
<li class="nav-item"><a href="#" class="nav-link px-2 text-muted">Home</a></li> <li class="nav-item"><a href="#" class="nav-link px-2 text-body-secondary">Home</a></li>
<li class="nav-item"><a href="#" class="nav-link px-2 text-muted">Features</a></li> <li class="nav-item"><a href="#" class="nav-link px-2 text-body-secondary">Features</a></li>
<li class="nav-item"><a href="#" class="nav-link px-2 text-muted">Pricing</a></li> <li class="nav-item"><a href="#" class="nav-link px-2 text-body-secondary">Pricing</a></li>
<li class="nav-item"><a href="#" class="nav-link px-2 text-muted">FAQs</a></li> <li class="nav-item"><a href="#" class="nav-link px-2 text-body-secondary">FAQs</a></li>
<li class="nav-item"><a href="#" class="nav-link px-2 text-muted">About</a></li> <li class="nav-item"><a href="#" class="nav-link px-2 text-body-secondary">About</a></li>
</ul> </ul>
<p class="text-center text-muted">&copy; {{< year >}} Company, Inc</p> <p class="text-center text-body-secondary">&copy; {{< year >}} Company, Inc</p>
</footer> </footer>
</div> </div>
@ -80,7 +80,7 @@ body_class: ""
<a href="/" class="d-flex align-items-center mb-3 link-body-emphasis text-decoration-none"> <a href="/" class="d-flex align-items-center mb-3 link-body-emphasis text-decoration-none">
<svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg> <svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
</a> </a>
<p class="text-muted">&copy; {{< year >}}</p> <p class="text-body-secondary">&copy; {{< year >}}</p>
</div> </div>
<div class="col mb-3"> <div class="col mb-3">
@ -90,33 +90,33 @@ body_class: ""
<div class="col mb-3"> <div class="col mb-3">
<h5>Section</h5> <h5>Section</h5>
<ul class="nav flex-column"> <ul class="nav flex-column">
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Home</a></li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Home</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Features</a></li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Features</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Pricing</a></li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Pricing</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">FAQs</a></li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">FAQs</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">About</a></li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">About</a></li>
</ul> </ul>
</div> </div>
<div class="col mb-3"> <div class="col mb-3">
<h5>Section</h5> <h5>Section</h5>
<ul class="nav flex-column"> <ul class="nav flex-column">
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Home</a></li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Home</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Features</a></li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Features</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Pricing</a></li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Pricing</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">FAQs</a></li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">FAQs</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">About</a></li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">About</a></li>
</ul> </ul>
</div> </div>
<div class="col mb-3"> <div class="col mb-3">
<h5>Section</h5> <h5>Section</h5>
<ul class="nav flex-column"> <ul class="nav flex-column">
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Home</a></li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Home</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Features</a></li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Features</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Pricing</a></li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Pricing</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">FAQs</a></li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">FAQs</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">About</a></li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">About</a></li>
</ul> </ul>
</div> </div>
</footer> </footer>
@ -131,33 +131,33 @@ body_class: ""
<div class="col-6 col-md-2 mb-3"> <div class="col-6 col-md-2 mb-3">
<h5>Section</h5> <h5>Section</h5>
<ul class="nav flex-column"> <ul class="nav flex-column">
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Home</a></li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Home</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Features</a></li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Features</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Pricing</a></li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Pricing</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">FAQs</a></li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">FAQs</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">About</a></li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">About</a></li>
</ul> </ul>
</div> </div>
<div class="col-6 col-md-2 mb-3"> <div class="col-6 col-md-2 mb-3">
<h5>Section</h5> <h5>Section</h5>
<ul class="nav flex-column"> <ul class="nav flex-column">
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Home</a></li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Home</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Features</a></li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Features</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Pricing</a></li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Pricing</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">FAQs</a></li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">FAQs</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">About</a></li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">About</a></li>
</ul> </ul>
</div> </div>
<div class="col-6 col-md-2 mb-3"> <div class="col-6 col-md-2 mb-3">
<h5>Section</h5> <h5>Section</h5>
<ul class="nav flex-column"> <ul class="nav flex-column">
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Home</a></li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Home</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Features</a></li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Features</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">Pricing</a></li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">Pricing</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">FAQs</a></li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">FAQs</a></li>
<li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-muted">About</a></li> <li class="nav-item mb-2"><a href="#" class="nav-link p-0 text-body-secondary">About</a></li>
</ul> </ul>
</div> </div>

2
site/content/docs/5.3/examples/heroes/index.html
View File

@ -82,7 +82,7 @@ body_class: ""
</div> </div>
<button class="w-100 btn btn-lg btn-primary" type="submit">Sign up</button> <button class="w-100 btn btn-lg btn-primary" type="submit">Sign up</button>
<hr class="my-4"> <hr class="my-4">
<small class="text-muted">By clicking Sign up, you agree to the terms of use.</small> <small class="text-body-secondary">By clicking Sign up, you agree to the terms of use.</small>
</form> </form>
</div> </div>
</div> </div>

2
site/content/docs/5.3/examples/jumbotron/index.html
View File

@ -38,7 +38,7 @@ include_js: false
</div> </div>
</div> </div>
<footer class="pt-3 mt-4 text-muted border-top"> <footer class="pt-3 mt-4 text-body-secondary border-top">
&copy; {{< year >}} &copy; {{< year >}}
</footer> </footer>
</div> </div>

20
site/content/docs/5.3/examples/list-groups/index.html
View File

@ -70,21 +70,21 @@ body_class: ""
<input class="form-check-input flex-shrink-0" type="checkbox" value="" checked> <input class="form-check-input flex-shrink-0" type="checkbox" value="" checked>
<span> <span>
First checkbox First checkbox
<small class="d-block text-muted">With support text underneath to add more detail</small> <small class="d-block text-body-secondary">With support text underneath to add more detail</small>
</span> </span>
</label> </label>
<label class="list-group-item d-flex gap-2"> <label class="list-group-item d-flex gap-2">
<input class="form-check-input flex-shrink-0" type="checkbox" value=""> <input class="form-check-input flex-shrink-0" type="checkbox" value="">
<span> <span>
Second checkbox Second checkbox
<small class="d-block text-muted">Some other text goes here</small> <small class="d-block text-body-secondary">Some other text goes here</small>
</span> </span>
</label> </label>
<label class="list-group-item d-flex gap-2"> <label class="list-group-item d-flex gap-2">
<input class="form-check-input flex-shrink-0" type="checkbox" value=""> <input class="form-check-input flex-shrink-0" type="checkbox" value="">
<span> <span>
Third checkbox Third checkbox
<small class="d-block text-muted">And we end with another snippet of text</small> <small class="d-block text-body-secondary">And we end with another snippet of text</small>
</span> </span>
</label> </label>
</div> </div>
@ -94,21 +94,21 @@ body_class: ""
<input class="form-check-input flex-shrink-0" type="radio" name="listGroupRadios" id="listGroupRadios1" value="" checked> <input class="form-check-input flex-shrink-0" type="radio" name="listGroupRadios" id="listGroupRadios1" value="" checked>
<span> <span>
First radio First radio
<small class="d-block text-muted">With support text underneath to add more detail</small> <small class="d-block text-body-secondary">With support text underneath to add more detail</small>
</span> </span>
</label> </label>
<label class="list-group-item d-flex gap-2"> <label class="list-group-item d-flex gap-2">
<input class="form-check-input flex-shrink-0" type="radio" name="listGroupRadios" id="listGroupRadios2" value=""> <input class="form-check-input flex-shrink-0" type="radio" name="listGroupRadios" id="listGroupRadios2" value="">
<span> <span>
Second radio Second radio
<small class="d-block text-muted">Some other text goes here</small> <small class="d-block text-body-secondary">Some other text goes here</small>
</span> </span>
</label> </label>
<label class="list-group-item d-flex gap-2"> <label class="list-group-item d-flex gap-2">
<input class="form-check-input flex-shrink-0" type="radio" name="listGroupRadios" id="listGroupRadios3" value=""> <input class="form-check-input flex-shrink-0" type="radio" name="listGroupRadios" id="listGroupRadios3" value="">
<span> <span>
Third radio Third radio
<small class="d-block text-muted">And we end with another snippet of text</small> <small class="d-block text-body-secondary">And we end with another snippet of text</small>
</span> </span>
</label> </label>
</div> </div>
@ -122,7 +122,7 @@ body_class: ""
<input class="form-check-input flex-shrink-0" type="checkbox" value="" checked style="font-size: 1.375em;"> <input class="form-check-input flex-shrink-0" type="checkbox" value="" checked style="font-size: 1.375em;">
<span class="pt-1 form-checked-content"> <span class="pt-1 form-checked-content">
<strong>Finish sales report</strong> <strong>Finish sales report</strong>
<small class="d-block text-muted"> <small class="d-block text-body-secondary">
<svg class="bi me-1" width="1em" height="1em"><use xlink:href="#calendar-event"/></svg> <svg class="bi me-1" width="1em" height="1em"><use xlink:href="#calendar-event"/></svg>
1:00–2:00pm 1:00–2:00pm
</small> </small>
@ -132,7 +132,7 @@ body_class: ""
<input class="form-check-input flex-shrink-0" type="checkbox" value="" style="font-size: 1.375em;"> <input class="form-check-input flex-shrink-0" type="checkbox" value="" style="font-size: 1.375em;">
<span class="pt-1 form-checked-content"> <span class="pt-1 form-checked-content">
<strong>Weekly All Hands</strong> <strong>Weekly All Hands</strong>
<small class="d-block text-muted"> <small class="d-block text-body-secondary">
<svg class="bi me-1" width="1em" height="1em"><use xlink:href="#calendar-event"/></svg> <svg class="bi me-1" width="1em" height="1em"><use xlink:href="#calendar-event"/></svg>
2:00–2:30pm 2:00–2:30pm
</small> </small>
@ -142,7 +142,7 @@ body_class: ""
<input class="form-check-input flex-shrink-0" type="checkbox" value="" style="font-size: 1.375em;"> <input class="form-check-input flex-shrink-0" type="checkbox" value="" style="font-size: 1.375em;">
<span class="pt-1 form-checked-content"> <span class="pt-1 form-checked-content">
<strong>Out of office</strong> <strong>Out of office</strong>
<small class="d-block text-muted"> <small class="d-block text-body-secondary">
<svg class="bi me-1" width="1em" height="1em"><use xlink:href="#alarm"/></svg> <svg class="bi me-1" width="1em" height="1em"><use xlink:href="#alarm"/></svg>
Tomorrow Tomorrow
</small> </small>
@ -152,7 +152,7 @@ body_class: ""
<input class="form-check-input form-check-input-placeholder bg-body-tertiary flex-shrink-0 pe-none" disabled type="checkbox" value="" style="font-size: 1.375em;"> <input class="form-check-input form-check-input-placeholder bg-body-tertiary flex-shrink-0 pe-none" disabled type="checkbox" value="" style="font-size: 1.375em;">
<span class="pt-1 form-checked-content"> <span class="pt-1 form-checked-content">
<span contenteditable="true" class="w-100">Add new task...</span> <span contenteditable="true" class="w-100">Add new task...</span>
<small class="d-block text-muted"> <small class="d-block text-body-secondary">
<svg class="bi me-1" width="1em" height="1em"><use xlink:href="#list-check"/></svg> <svg class="bi me-1" width="1em" height="1em"><use xlink:href="#list-check"/></svg>
Choose list... Choose list...
</small> </small>

10
site/content/docs/5.3/examples/masonry/index.html
View File

@ -37,7 +37,7 @@ extra_js:
<blockquote class="blockquote"> <blockquote class="blockquote">
<p>A well-known quote, contained in a blockquote element.</p> <p>A well-known quote, contained in a blockquote element.</p>
</blockquote> </blockquote>
<figcaption class="blockquote-footer mb-0 text-muted"> <figcaption class="blockquote-footer mb-0 text-body-secondary">
Someone famous in <cite title="Source Title">Source Title</cite> Someone famous in <cite title="Source Title">Source Title</cite>
</figcaption> </figcaption>
</figure> </figure>
@ -49,7 +49,7 @@ extra_js:
<div class="card-body"> <div class="card-body">
<h5 class="card-title">Card title</h5> <h5 class="card-title">Card title</h5>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p> <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
</div> </div>
</div> </div>
</div> </div>
@ -70,7 +70,7 @@ extra_js:
<div class="card-body"> <div class="card-body">
<h5 class="card-title">Card title</h5> <h5 class="card-title">Card title</h5>
<p class="card-text">This card has a regular title and short paragraph of text below it.</p> <p class="card-text">This card has a regular title and short paragraph of text below it.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
</div> </div>
</div> </div>
</div> </div>
@ -85,7 +85,7 @@ extra_js:
<blockquote class="blockquote"> <blockquote class="blockquote">
<p>A well-known quote, contained in a blockquote element.</p> <p>A well-known quote, contained in a blockquote element.</p>
</blockquote> </blockquote>
<figcaption class="blockquote-footer mb-0 text-muted"> <figcaption class="blockquote-footer mb-0 text-body-secondary">
Someone famous in <cite title="Source Title">Source Title</cite> Someone famous in <cite title="Source Title">Source Title</cite>
</figcaption> </figcaption>
</figure> </figure>
@ -96,7 +96,7 @@ extra_js:
<div class="card-body"> <div class="card-body">
<h5 class="card-title">Card title</h5> <h5 class="card-title">Card title</h5>
<p class="card-text">This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.</p> <p class="card-text">This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.</p>
<p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p> <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
</div> </div>
</div> </div>
</div> </div>

4
site/content/docs/5.3/examples/modals/index.html
View File

@ -100,7 +100,7 @@ body_class: ""
<ul class="d-grid gap-4 my-5 list-unstyled small"> <ul class="d-grid gap-4 my-5 list-unstyled small">
<li class="d-flex gap-4"> <li class="d-flex gap-4">
<svg class="bi text-muted flex-shrink-0" width="48" height="48"><use xlink:href="#grid-fill"/></svg> <svg class="bi text-body-secondary flex-shrink-0" width="48" height="48"><use xlink:href="#grid-fill"/></svg>
<div> <div>
<h5 class="mb-0">Grid view</h5> <h5 class="mb-0">Grid view</h5>
Not into lists? Try the new grid view. Not into lists? Try the new grid view.
@ -148,7 +148,7 @@ body_class: ""
<label for="floatingPassword">Password</label> <label for="floatingPassword">Password</label>
</div> </div>
<button class="w-100 mb-2 btn btn-lg rounded-3 btn-primary" type="submit">Sign up</button> <button class="w-100 mb-2 btn btn-lg rounded-3 btn-primary" type="submit">Sign up</button>
<small class="text-muted">By clicking Sign up, you agree to the terms of use.</small> <small class="text-body-secondary">By clicking Sign up, you agree to the terms of use.</small>
<hr class="my-4"> <hr class="my-4">
<h2 class="fs-5 fw-bold mb-3">Or use a third-party</h2> <h2 class="fs-5 fw-bold mb-3">Or use a third-party</h2>
<button class="w-100 py-2 mb-2 btn btn-outline-secondary rounded-3" type="submit"> <button class="w-100 py-2 mb-2 btn btn-outline-secondary rounded-3" type="submit">

12
site/content/docs/5.3/examples/offcanvas-navbar/index.html
View File

@ -75,21 +75,21 @@ aliases: "/docs/5.3/examples/offcanvas/"
<div class="my-3 p-3 bg-body rounded shadow-sm"> <div class="my-3 p-3 bg-body rounded shadow-sm">
<h6 class="border-bottom pb-2 mb-0">Recent updates</h6> <h6 class="border-bottom pb-2 mb-0">Recent updates</h6>
<div class="d-flex text-muted pt-3"> <div class="d-flex text-body-secondary pt-3">
{{< placeholder width="32" height="32" background="#007bff" color="#007bff" class="flex-shrink-0 me-2 rounded" >}} {{< placeholder width="32" height="32" background="#007bff" color="#007bff" class="flex-shrink-0 me-2 rounded" >}}
<p class="pb-3 mb-0 small lh-sm border-bottom"> <p class="pb-3 mb-0 small lh-sm border-bottom">
<strong class="d-block text-gray-dark">@username</strong> <strong class="d-block text-gray-dark">@username</strong>
Some representative placeholder content, with some information about this user. Imagine this being some sort of status update, perhaps? Some representative placeholder content, with some information about this user. Imagine this being some sort of status update, perhaps?
</p> </p>
</div> </div>
<div class="d-flex text-muted pt-3"> <div class="d-flex text-body-secondary pt-3">
{{< placeholder width="32" height="32" background="#e83e8c" color="#e83e8c" class="flex-shrink-0 me-2 rounded" >}} {{< placeholder width="32" height="32" background="#e83e8c" color="#e83e8c" class="flex-shrink-0 me-2 rounded" >}}
<p class="pb-3 mb-0 small lh-sm border-bottom"> <p class="pb-3 mb-0 small lh-sm border-bottom">
<strong class="d-block text-gray-dark">@username</strong> <strong class="d-block text-gray-dark">@username</strong>
Some more representative placeholder content, related to this other user. Another status update, perhaps. Some more representative placeholder content, related to this other user. Another status update, perhaps.
</p> </p>
</div> </div>
<div class="d-flex text-muted pt-3"> <div class="d-flex text-body-secondary pt-3">
{{< placeholder width="32" height="32" background="#6f42c1" color="#6f42c1" class="flex-shrink-0 me-2 rounded" >}} {{< placeholder width="32" height="32" background="#6f42c1" color="#6f42c1" class="flex-shrink-0 me-2 rounded" >}}
<p class="pb-3 mb-0 small lh-sm border-bottom"> <p class="pb-3 mb-0 small lh-sm border-bottom">
<strong class="d-block text-gray-dark">@username</strong> <strong class="d-block text-gray-dark">@username</strong>
@ -103,7 +103,7 @@ aliases: "/docs/5.3/examples/offcanvas/"
<div class="my-3 p-3 bg-body rounded shadow-sm"> <div class="my-3 p-3 bg-body rounded shadow-sm">
<h6 class="border-bottom pb-2 mb-0">Suggestions</h6> <h6 class="border-bottom pb-2 mb-0">Suggestions</h6>
<div class="d-flex text-muted pt-3"> <div class="d-flex text-body-secondary pt-3">
{{< placeholder width="32" height="32" background="#007bff" color="#007bff" class="flex-shrink-0 me-2 rounded" >}} {{< placeholder width="32" height="32" background="#007bff" color="#007bff" class="flex-shrink-0 me-2 rounded" >}}
<div class="pb-3 mb-0 small lh-sm border-bottom w-100"> <div class="pb-3 mb-0 small lh-sm border-bottom w-100">
<div class="d-flex justify-content-between"> <div class="d-flex justify-content-between">
@ -113,7 +113,7 @@ aliases: "/docs/5.3/examples/offcanvas/"
<span class="d-block">@username</span> <span class="d-block">@username</span>
</div> </div>
</div> </div>
<div class="d-flex text-muted pt-3"> <div class="d-flex text-body-secondary pt-3">
{{< placeholder width="32" height="32" background="#007bff" color="#007bff" class="flex-shrink-0 me-2 rounded" >}} {{< placeholder width="32" height="32" background="#007bff" color="#007bff" class="flex-shrink-0 me-2 rounded" >}}
<div class="pb-3 mb-0 small lh-sm border-bottom w-100"> <div class="pb-3 mb-0 small lh-sm border-bottom w-100">
<div class="d-flex justify-content-between"> <div class="d-flex justify-content-between">
@ -123,7 +123,7 @@ aliases: "/docs/5.3/examples/offcanvas/"
<span class="d-block">@username</span> <span class="d-block">@username</span>
</div> </div>
</div> </div>
<div class="d-flex text-muted pt-3"> <div class="d-flex text-body-secondary pt-3">
{{< placeholder width="32" height="32" background="#007bff" color="#007bff" class="flex-shrink-0 me-2 rounded" >}} {{< placeholder width="32" height="32" background="#007bff" color="#007bff" class="flex-shrink-0 me-2 rounded" >}}
<div class="pb-3 mb-0 small lh-sm border-bottom w-100"> <div class="pb-3 mb-0 small lh-sm border-bottom w-100">
<div class="d-flex justify-content-between"> <div class="d-flex justify-content-between">

10
site/content/docs/5.3/examples/pricing/index.html
View File

@ -31,7 +31,7 @@ include_js: false
<div class="pricing-header p-3 pb-md-4 mx-auto text-center"> <div class="pricing-header p-3 pb-md-4 mx-auto text-center">
<h1 class="display-4 fw-normal">Pricing</h1> <h1 class="display-4 fw-normal">Pricing</h1>
<p class="fs-5 text-muted">Quickly build an effective pricing table for your potential customers with this Bootstrap example. It’s built with default Bootstrap components and utilities with little customization.</p> <p class="fs-5 text-body-secondary">Quickly build an effective pricing table for your potential customers with this Bootstrap example. It’s built with default Bootstrap components and utilities with little customization.</p>
</div> </div>
</header> </header>
@ -43,7 +43,7 @@ include_js: false
<h4 class="my-0 fw-normal">Free</h4> <h4 class="my-0 fw-normal">Free</h4>
</div> </div>
<div class="card-body"> <div class="card-body">
<h1 class="card-title pricing-card-title">$0<small class="text-muted fw-light">/mo</small></h1> <h1 class="card-title pricing-card-title">$0<small class="text-body-secondary fw-light">/mo</small></h1>
<ul class="list-unstyled mt-3 mb-4"> <ul class="list-unstyled mt-3 mb-4">
<li>10 users included</li> <li>10 users included</li>
<li>2 GB of storage</li> <li>2 GB of storage</li>
@ -60,7 +60,7 @@ include_js: false
<h4 class="my-0 fw-normal">Pro</h4> <h4 class="my-0 fw-normal">Pro</h4>
</div> </div>
<div class="card-body"> <div class="card-body">
<h1 class="card-title pricing-card-title">$15<small class="text-muted fw-light">/mo</small></h1> <h1 class="card-title pricing-card-title">$15<small class="text-body-secondary fw-light">/mo</small></h1>
<ul class="list-unstyled mt-3 mb-4"> <ul class="list-unstyled mt-3 mb-4">
<li>20 users included</li> <li>20 users included</li>
<li>10 GB of storage</li> <li>10 GB of storage</li>
@ -77,7 +77,7 @@ include_js: false
<h4 class="my-0 fw-normal">Enterprise</h4> <h4 class="my-0 fw-normal">Enterprise</h4>
</div> </div>
<div class="card-body"> <div class="card-body">
<h1 class="card-title pricing-card-title">$29<small class="text-muted fw-light">/mo</small></h1> <h1 class="card-title pricing-card-title">$29<small class="text-body-secondary fw-light">/mo</small></h1>
<ul class="list-unstyled mt-3 mb-4"> <ul class="list-unstyled mt-3 mb-4">
<li>30 users included</li> <li>30 users included</li>
<li>15 GB of storage</li> <li>15 GB of storage</li>
@ -151,7 +151,7 @@ include_js: false
<div class="row"> <div class="row">
<div class="col-12 col-md"> <div class="col-12 col-md">
<img class="mb-2" src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo.svg" alt="" width="24" height="19"> <img class="mb-2" src="/docs/{{< param docs_version >}}/assets/brand/bootstrap-logo.svg" alt="" width="24" height="19">
<small class="d-block mb-3 text-muted">&copy; 2017–{{< year >}}</small> <small class="d-block mb-3 text-body-secondary">&copy; 2017–{{< year >}}</small>
</div> </div>
<div class="col-6 col-md"> <div class="col-6 col-md">
<h5>Features</h5> <h5>Features</h5>

2
site/content/docs/5.3/examples/product/index.html
View File

@ -104,7 +104,7 @@ extra_css:
<div class="row"> <div class="row">
<div class="col-12 col-md"> <div class="col-12 col-md">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="d-block mb-2" role="img" viewBox="0 0 24 24"><title>Product</title><circle cx="12" cy="12" r="10"/><path d="M14.31 8l5.74 9.94M9.69 8h11.48M7.38 12l5.74-9.94M9.69 16L3.95 6.06M14.31 16H2.83m13.79-4l-5.74 9.94"/></svg> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="d-block mb-2" role="img" viewBox="0 0 24 24"><title>Product</title><circle cx="12" cy="12" r="10"/><path d="M14.31 8l5.74 9.94M9.69 8h11.48M7.38 12l5.74-9.94M9.69 16L3.95 6.06M14.31 16H2.83m13.79-4l-5.74 9.94"/></svg>
<small class="d-block mb-3 text-muted">&copy; 2017–{{< year >}}</small> <small class="d-block mb-3 text-body-secondary">&copy; 2017–{{< year >}}</small>
</div> </div>
<div class="col-6 col-md"> <div class="col-6 col-md">
<h5>Features</h5> <h5>Features</h5>

22
site/content/docs/5.3/examples/sidebars/index.html
View File

@ -309,14 +309,14 @@ body_class: ""
<a href="#" class="list-group-item list-group-item-action py-3 lh-sm"> <a href="#" class="list-group-item list-group-item-action py-3 lh-sm">
<div class="d-flex w-100 align-items-center justify-content-between"> <div class="d-flex w-100 align-items-center justify-content-between">
<strong class="mb-1">List group item heading</strong> <strong class="mb-1">List group item heading</strong>
<small class="text-muted">Tues</small> <small class="text-body-secondary">Tues</small>
</div> </div>
<div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div> <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
</a> </a>
<a href="#" class="list-group-item list-group-item-action py-3 lh-sm"> <a href="#" class="list-group-item list-group-item-action py-3 lh-sm">
<div class="d-flex w-100 align-items-center justify-content-between"> <div class="d-flex w-100 align-items-center justify-content-between">
<strong class="mb-1">List group item heading</strong> <strong class="mb-1">List group item heading</strong>
<small class="text-muted">Mon</small> <small class="text-body-secondary">Mon</small>
</div> </div>
<div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div> <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
</a> </a>
@ -324,63 +324,63 @@ body_class: ""
<a href="#" class="list-group-item list-group-item-action py-3 lh-sm" aria-current="true"> <a href="#" class="list-group-item list-group-item-action py-3 lh-sm" aria-current="true">
<div class="d-flex w-100 align-items-center justify-content-between"> <div class="d-flex w-100 align-items-center justify-content-between">
<strong class="mb-1">List group item heading</strong> <strong class="mb-1">List group item heading</strong>
<small class="text-muted">Wed</small> <small class="text-body-secondary">Wed</small>
</div> </div>
<div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div> <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
</a> </a>
<a href="#" class="list-group-item list-group-item-action py-3 lh-sm"> <a href="#" class="list-group-item list-group-item-action py-3 lh-sm">
<div class="d-flex w-100 align-items-center justify-content-between"> <div class="d-flex w-100 align-items-center justify-content-between">
<strong class="mb-1">List group item heading</strong> <strong class="mb-1">List group item heading</strong>
<small class="text-muted">Tues</small> <small class="text-body-secondary">Tues</small>
</div> </div>
<div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div> <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
</a> </a>
<a href="#" class="list-group-item list-group-item-action py-3 lh-sm"> <a href="#" class="list-group-item list-group-item-action py-3 lh-sm">
<div class="d-flex w-100 align-items-center justify-content-between"> <div class="d-flex w-100 align-items-center justify-content-between">
<strong class="mb-1">List group item heading</strong> <strong class="mb-1">List group item heading</strong>
<small class="text-muted">Mon</small> <small class="text-body-secondary">Mon</small>
</div> </div>
<div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div> <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
</a> </a>
<a href="#" class="list-group-item list-group-item-action py-3 lh-sm" aria-current="true"> <a href="#" class="list-group-item list-group-item-action py-3 lh-sm" aria-current="true">
<div class="d-flex w-100 align-items-center justify-content-between"> <div class="d-flex w-100 align-items-center justify-content-between">
<strong class="mb-1">List group item heading</strong> <strong class="mb-1">List group item heading</strong>
<small class="text-muted">Wed</small> <small class="text-body-secondary">Wed</small>
</div> </div>
<div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div> <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
</a> </a>
<a href="#" class="list-group-item list-group-item-action py-3 lh-sm"> <a href="#" class="list-group-item list-group-item-action py-3 lh-sm">
<div class="d-flex w-100 align-items-center justify-content-between"> <div class="d-flex w-100 align-items-center justify-content-between">
<strong class="mb-1">List group item heading</strong> <strong class="mb-1">List group item heading</strong>
<small class="text-muted">Tues</small> <small class="text-body-secondary">Tues</small>
</div> </div>
<div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div> <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
</a> </a>
<a href="#" class="list-group-item list-group-item-action py-3 lh-sm"> <a href="#" class="list-group-item list-group-item-action py-3 lh-sm">
<div class="d-flex w-100 align-items-center justify-content-between"> <div class="d-flex w-100 align-items-center justify-content-between">
<strong class="mb-1">List group item heading</strong> <strong class="mb-1">List group item heading</strong>
<small class="text-muted">Mon</small> <small class="text-body-secondary">Mon</small>
</div> </div>
<div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div> <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
</a> </a>
<a href="#" class="list-group-item list-group-item-action py-3 lh-sm" aria-current="true"> <a href="#" class="list-group-item list-group-item-action py-3 lh-sm" aria-current="true">
<div class="d-flex w-100 align-items-center justify-content-between"> <div class="d-flex w-100 align-items-center justify-content-between">
<strong class="mb-1">List group item heading</strong> <strong class="mb-1">List group item heading</strong>
<small class="text-muted">Wed</small> <small class="text-body-secondary">Wed</small>
</div> </div>
<div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div> <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
</a> </a>
<a href="#" class="list-group-item list-group-item-action py-3 lh-sm"> <a href="#" class="list-group-item list-group-item-action py-3 lh-sm">
<div class="d-flex w-100 align-items-center justify-content-between"> <div class="d-flex w-100 align-items-center justify-content-between">
<strong class="mb-1">List group item heading</strong> <strong class="mb-1">List group item heading</strong>
<small class="text-muted">Tues</small> <small class="text-body-secondary">Tues</small>
</div> </div>
<div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div> <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
</a> </a>
<a href="#" class="list-group-item list-group-item-action py-3 lh-sm"> <a href="#" class="list-group-item list-group-item-action py-3 lh-sm">
<div class="d-flex w-100 align-items-center justify-content-between"> <div class="d-flex w-100 align-items-center justify-content-between">
<strong class="mb-1">List group item heading</strong> <strong class="mb-1">List group item heading</strong>
<small class="text-muted">Mon</small> <small class="text-body-secondary">Mon</small>
</div> </div>
<div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div> <div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
</a> </a>

2
site/content/docs/5.3/examples/sign-in/index.html
View File

@ -27,6 +27,6 @@ include_js: false
</label> </label>
</div> </div>
<button class="w-100 btn btn-lg btn-primary" type="submit">Sign in</button> <button class="w-100 btn btn-lg btn-primary" type="submit">Sign in</button>
<p class="mt-5 mb-3 text-muted">&copy; 2017–{{< year >}}</p> <p class="mt-5 mb-3 text-body-secondary">&copy; 2017–{{< year >}}</p>
</form> </form>
</main> </main>

2
site/content/docs/5.3/examples/starter-template/index.html
View File

@ -101,7 +101,7 @@ title: Starter Template
</div> </div>
</div> </div>
</main> </main>
<footer class="pt-5 my-5 text-muted border-top"> <footer class="pt-5 my-5 text-body-secondary border-top">
Created by the Bootstrap team &middot; &copy; {{< year >}} Created by the Bootstrap team &middot; &copy; {{< year >}}
</footer> </footer>
</div> </div>

2
site/content/docs/5.3/examples/sticky-footer-navbar/index.html
View File

@ -47,6 +47,6 @@ body_class: "d-flex flex-column h-100"
<footer class="footer mt-auto py-3 bg-body-tertiary"> <footer class="footer mt-auto py-3 bg-body-tertiary">
<div class="container"> <div class="container">
<span class="text-muted">Place sticky footer content here.</span> <span class="text-body-secondary">Place sticky footer content here.</span>
</div> </div>
</footer> </footer>

2
site/content/docs/5.3/examples/sticky-footer/index.html
View File

@ -19,6 +19,6 @@ include_js: false
<footer class="footer mt-auto py-3 bg-body-tertiary"> <footer class="footer mt-auto py-3 bg-body-tertiary">
<div class="container"> <div class="container">
<span class="text-muted">Place sticky footer content here.</span> <span class="text-body-secondary">Place sticky footer content here.</span>
</div> </div>
</footer> </footer>

6
site/content/docs/5.3/getting-started/browsers-devices.md
View File

@ -29,8 +29,8 @@ Generally speaking, Bootstrap supports the latest versions of each major platfor
{{< bs-table "table" >}} {{< bs-table "table" >}}
| | Chrome | Firefox | Safari | Android Browser &amp; WebView | | | Chrome | Firefox | Safari | Android Browser &amp; WebView |
| --- | --- | --- | --- | --- | | --- | --- | --- | --- | --- |
| **Android** | Supported | Supported | <span class="text-muted">&mdash;</span> | v6.0+ | | **Android** | Supported | Supported | <span class="text-body-secondary">&mdash;</span> | v6.0+ |
| **iOS** | Supported | Supported | Supported | <span class="text-muted">&mdash;</span> | | **iOS** | Supported | Supported | Supported | <span class="text-body-secondary">&mdash;</span> |
{{< /bs-table >}} {{< /bs-table >}}
### Desktop browsers ### Desktop browsers
@ -41,7 +41,7 @@ Similarly, the latest versions of most desktop browsers are supported.
| | Chrome | Firefox | Microsoft Edge | Opera | Safari | | | Chrome | Firefox | Microsoft Edge | Opera | Safari |
| --- | --- | --- | --- | --- | --- | | --- | --- | --- | --- | --- | --- |
| **Mac** | Supported | Supported | Supported | Supported | Supported | | **Mac** | Supported | Supported | Supported | Supported | Supported |
| **Windows** | Supported | Supported | Supported | Supported | <span class="text-muted">&mdash;</span> | | **Windows** | Supported | Supported | Supported | Supported | <span class="text-body-secondary">&mdash;</span> |
{{< /bs-table >}} {{< /bs-table >}}
For Firefox, in addition to the latest normal stable release, we also support the latest [Extended Support Release (ESR)](https://www.mozilla.org/en-US/firefox/enterprise/) version of Firefox. For Firefox, in addition to the latest normal stable release, we also support the latest [Extended Support Release (ESR)](https://www.mozilla.org/en-US/firefox/enterprise/) version of Firefox.

14
site/content/docs/5.3/layout/containers.md
View File

@ -23,13 +23,13 @@ See them in action and compare them in our [Grid example]({{< docsref "/examples
{{< bs-table "table" >}} {{< bs-table "table" >}}
| | Extra small<div class="fw-normal">&lt;576px</div> | Small<div class="fw-normal">&ge;576px</div> | Medium<div class="fw-normal">&ge;768px</div> | Large<div class="fw-normal">&ge;992px</div> | X-Large<div class="fw-normal">&ge;1200px</div> | XX-Large<div class="fw-normal">&ge;1400px</div> | | | Extra small<div class="fw-normal">&lt;576px</div> | Small<div class="fw-normal">&ge;576px</div> | Medium<div class="fw-normal">&ge;768px</div> | Large<div class="fw-normal">&ge;992px</div> | X-Large<div class="fw-normal">&ge;1200px</div> | XX-Large<div class="fw-normal">&ge;1400px</div> |
| --- | --- | --- | --- | --- | --- | --- | | --- | --- | --- | --- | --- | --- | --- |
| `.container` | <span class="text-muted">100%</span> | 540px | 720px | 960px | 1140px | 1320px | | `.container` | <span class="text-body-secondary">100%</span> | 540px | 720px | 960px | 1140px | 1320px |
| `.container-sm` | <span class="text-muted">100%</span> | 540px | 720px | 960px | 1140px | 1320px | | `.container-sm` | <span class="text-body-secondary">100%</span> | 540px | 720px | 960px | 1140px | 1320px |
| `.container-md` | <span class="text-muted">100%</span> | <span class="text-muted">100%</span> | 720px | 960px | 1140px | 1320px | | `.container-md` | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | 720px | 960px | 1140px | 1320px |
| `.container-lg` | <span class="text-muted">100%</span> | <span class="text-muted">100%</span> | <span class="text-muted">100%</span> | 960px | 1140px | 1320px | | `.container-lg` | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | 960px | 1140px | 1320px |
| `.container-xl` | <span class="text-muted">100%</span> | <span class="text-muted">100%</span> | <span class="text-muted">100%</span> | <span class="text-muted">100%</span> | 1140px | 1320px | | `.container-xl` | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | 1140px | 1320px |
| `.container-xxl` | <span class="text-muted">100%</span> | <span class="text-muted">100%</span> | <span class="text-muted">100%</span> | <span class="text-muted">100%</span> | <span class="text-muted">100%</span> | 1320px | | `.container-xxl` | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | 1320px |
| `.container-fluid` | <span class="text-muted">100%</span> | <span class="text-muted">100%</span> | <span class="text-muted">100%</span> | <span class="text-muted">100%</span> | <span class="text-muted">100%</span> | <span class="text-muted">100%</span> | | `.container-fluid` | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> |
{{< /bs-table >}} {{< /bs-table >}}
## Default container ## Default container

4
site/content/docs/5.3/migration.md
View File

@ -132,9 +132,9 @@ We've also introduced a new `.progress-stacked` class to more logically wrap [mu
### Utilities ### Utilities
- <span class="badge text-warning-emphasis bg-warning-subtle">Deprecated</span> `.text-muted` will be be replaced by `.text-body-secondary` in v6. - <span class="badge text-warning-emphasis bg-warning-subtle">Deprecated</span> `.text-body-secondary` will be be replaced by `.text-body-secondary` in v6.
With the addition of the expanded theme colors and variables, the `.text-muted` variables and utility have been deprecated with v5.3.0. Its default value has also has been reassigned to the new `--bs-secondary-color` CSS variable to better support color modes. It will be removed in v6.0.0. With the addition of the expanded theme colors and variables, the `.text-body-secondary` variables and utility have been deprecated with v5.3.0. Its default value has also has been reassigned to the new `--bs-secondary-color` CSS variable to better support color modes. It will be removed in v6.0.0.
- Adds new `.overflow-x`, `.overflow-y`, and several `.object-fit-*` utilities. _The object-fit property is used to specify how an `<img>` or `<video>` should be resized to fit its container, giving us a responsive alternative to using `background-image` for a resizable fill/fit image._ - Adds new `.overflow-x`, `.overflow-y`, and several `.object-fit-*` utilities. _The object-fit property is used to specify how an `<img>` or `<video>` should be resized to fit its container, giving us a responsive alternative to using `background-image` for a resizable fill/fit image._

4
site/content/docs/5.3/utilities/colors.md
View File

@ -18,7 +18,7 @@ Colorize text with color utilities. If you want to colorize links, you can use t
{{- end -}} {{- end -}}
{{< /colors.inline >}} {{< /colors.inline >}}
<p class="text-body">.text-body</p> <p class="text-body">.text-body</p>
<p class="text-muted">.text-muted</p> <p class="text-body-secondary">.text-body-secondary</p>
<p class="text-body-emphasis">.text-body-emphasis</p> <p class="text-body-emphasis">.text-body-emphasis</p>
<p class="text-body-secondary">.text-body-secondary</p> <p class="text-body-secondary">.text-body-secondary</p>
@ -35,7 +35,7 @@ Colorize text with color utilities. If you want to colorize links, you can use t
{{< /callout >}} {{< /callout >}}
{{< callout warning >}} {{< callout warning >}}
**Deprecation:** With the addition of the expanded theme colors and variables, the `.text-muted` utility has been deprecated as of v5.3.0. Its default value has also has been reassigned to the new `--bs-secondary-color` CSS variable to better support color modes. It will be removed in v6.0.0. **Deprecation:** With the addition of the expanded theme colors and variables, the `.text-body-secondary` utility has been deprecated as of v5.3.0. Its default value has also has been reassigned to the new `--bs-secondary-color` CSS variable to better support color modes. It will be removed in v6.0.0.
{{< /callout >}} {{< /callout >}}
{{< callout info >}} {{< callout info >}}

2
site/content/docs/5.3/utilities/text.md
View File

@ -122,7 +122,7 @@ Change a selection to our monospace font stack with `.font-monospace`.
Reset a text or link's color with `.text-reset`, so that it inherits the color from its parent. Reset a text or link's color with `.text-reset`, so that it inherits the color from its parent.
{{< example >}} {{< example >}}
<p class="text-muted"> <p class="text-body-secondary">
Muted text with a <a href="#" class="text-reset">reset link</a>. Muted text with a <a href="#" class="text-reset">reset link</a>.
</p> </p>
{{< /example >}} {{< /example >}}

2
site/layouts/partials/home/components-utilities.html
View File

@ -3,7 +3,7 @@
<div class="masthead-followup-icon d-inline-block mb-3 me-2" style="--bg-rgb: var(--bs-danger-rgb);"> <div class="masthead-followup-icon d-inline-block mb-3 me-2" style="--bg-rgb: var(--bs-danger-rgb);">
<svg class="bi fs-1"><use xlink:href="#menu-button-wide-fill"></use></svg> <svg class="bi fs-1"><use xlink:href="#menu-button-wide-fill"></use></svg>
</div> </div>
<svg class="bi me-2 fs-2 text-muted"><use xlink:href="#plus"></use></svg> <svg class="bi me-2 fs-2 text-body-secondary"><use xlink:href="#plus"></use></svg>
<div class="masthead-followup-icon d-inline-block mb-3" style="--bg-rgb: var(--bs-info-rgb);"> <div class="masthead-followup-icon d-inline-block mb-3" style="--bg-rgb: var(--bs-info-rgb);">
<svg class="bi fs-1"><use xlink:href="#braces-asterisk"></use></svg> <svg class="bi fs-1"><use xlink:href="#braces-asterisk"></use></svg>
</div> </div>

10
site/layouts/partials/home/get-started.html
View File

@ -16,7 +16,7 @@
<section class="row g-3 g-md-5 mb-5 pb-5 justify-content-center"> <section class="row g-3 g-md-5 mb-5 pb-5 justify-content-center">
<div class="col-lg-6 py-lg-4 pe-lg-5"> <div class="col-lg-6 py-lg-4 pe-lg-5">
<svg class="bi mb-2 fs-2 text-muted"><use xlink:href="#box-seam"></use></svg> <svg class="bi mb-2 fs-2 text-body-secondary"><use xlink:href="#box-seam"></use></svg>
<h3 class="fw-semibold">Install via package manager</h3> <h3 class="fw-semibold">Install via package manager</h3>
<p class="pe-lg-5"> <p class="pe-lg-5">
Install Bootstrap’s source Sass and JavaScript files via npm, RubyGems, Composer, or Meteor. Package managed installs don’t include documentation or our full build scripts. You can also <a href="https://github.com/twbs/examples/">use any demo from our Examples repo</a> to quickly jumpstart Bootstrap projects. Install Bootstrap’s source Sass and JavaScript files via npm, RubyGems, Composer, or Meteor. Package managed installs don’t include documentation or our full build scripts. You can also <a href="https://github.com/twbs/examples/">use any demo from our Examples repo</a> to quickly jumpstart Bootstrap projects.
@ -28,7 +28,7 @@
</p> </p>
</div> </div>
<div class="col-lg-6 py-lg-4 ps-lg-5 border-lg-start"> <div class="col-lg-6 py-lg-4 ps-lg-5 border-lg-start">
<svg class="bi mb-2 fs-2 text-muted"><use xlink:href="#globe2"></use></svg> <svg class="bi mb-2 fs-2 text-body-secondary"><use xlink:href="#globe2"></use></svg>
<h3 class="fw-semibold">Include via CDN</h3> <h3 class="fw-semibold">Include via CDN</h3>
<p class="pe-lg-5"> <p class="pe-lg-5">
When you only need to include Bootstrap’s compiled CSS or JS, you can use <a href="https://www.jsdelivr.com/package/npm/bootstrap">jsDelivr</a>. See it in action with our simple <a href="/docs/{{ .Site.Params.docs_version }}/getting-started/introduction/#quick-start">quick start</a>, or <a href="/docs/{{ .Site.Params.docs_version }}/examples/">browse the examples</a> to jumpstart your next project. You can also choose to include Popper and our JS <a href="/docs/{{ .Site.Params.docs_version }}/getting-started/introduction/#separate">separately</a>. When you only need to include Bootstrap’s compiled CSS or JS, you can use <a href="https://www.jsdelivr.com/package/npm/bootstrap">jsDelivr</a>. See it in action with our simple <a href="/docs/{{ .Site.Params.docs_version }}/getting-started/introduction/#quick-start">quick start</a>, or <a href="/docs/{{ .Site.Params.docs_version }}/examples/">browse the examples</a> to jumpstart your next project. You can also choose to include Popper and our JS <a href="/docs/{{ .Site.Params.docs_version }}/getting-started/introduction/#separate">separately</a>.
@ -43,15 +43,15 @@
<div class="d-flex flex-wrap align-items-center justify-content-center gap-4 mt-4"> <div class="d-flex flex-wrap align-items-center justify-content-center gap-4 mt-4">
<a class="d-flex flex-column align-items-center text-decoration-none animate-img" href="/docs/{{ .Site.Params.docs_version }}/getting-started/webpack"> <a class="d-flex flex-column align-items-center text-decoration-none animate-img" href="/docs/{{ .Site.Params.docs_version }}/getting-started/webpack">
<img class="d-block mb-2" src="/docs/{{ .Site.Params.docs_version }}/assets/img/webpack.svg" alt="" width="72" height="72" loading="lazy"> <img class="d-block mb-2" src="/docs/{{ .Site.Params.docs_version }}/assets/img/webpack.svg" alt="" width="72" height="72" loading="lazy">
<span class="text-muted">Webpack</span> <span class="text-body-secondary">Webpack</span>
</a> </a>
<a class="d-flex flex-column align-items-center text-decoration-none animate-img" href="/docs/{{ .Site.Params.docs_version }}/getting-started/parcel"> <a class="d-flex flex-column align-items-center text-decoration-none animate-img" href="/docs/{{ .Site.Params.docs_version }}/getting-started/parcel">
<img class="d-block mb-2" src="/docs/{{ .Site.Params.docs_version }}/assets/img/parcel.png" alt="" width="72" height="72" loading="lazy"> <img class="d-block mb-2" src="/docs/{{ .Site.Params.docs_version }}/assets/img/parcel.png" alt="" width="72" height="72" loading="lazy">
<span class="text-muted">Parcel</span> <span class="text-body-secondary">Parcel</span>
</a> </a>
<a class="d-flex flex-column align-items-center text-decoration-none animate-img" href="/docs/{{ .Site.Params.docs_version }}/getting-started/vite"> <a class="d-flex flex-column align-items-center text-decoration-none animate-img" href="/docs/{{ .Site.Params.docs_version }}/getting-started/vite">
<img class="d-block mb-2" src="/docs/{{ .Site.Params.docs_version }}/assets/img/vite.svg" alt="" width="72" height="72" loading="lazy"> <img class="d-block mb-2" src="/docs/{{ .Site.Params.docs_version }}/assets/img/vite.svg" alt="" width="72" height="72" loading="lazy">
<span class="text-muted">Vite</span> <span class="text-body-secondary">Vite</span>
</a> </a>
</div> </div>
</div> </div>

4
site/layouts/partials/home/masthead.html
View File

@ -3,7 +3,7 @@
<div class="col-md-8 mx-auto text-center"> <div class="col-md-8 mx-auto text-center">
<a class="d-flex flex-column flex-lg-row justify-content-center align-items-center mb-4 text-dark lh-sm text-decoration-none" href="https://blog.getbootstrap.com/"> <a class="d-flex flex-column flex-lg-row justify-content-center align-items-center mb-4 text-dark lh-sm text-decoration-none" href="https://blog.getbootstrap.com/">
<strong class="d-sm-inline-block p-2 me-2 mb-2 mb-lg-0 rounded-3 masthead-notice">New in v5.3</strong> <strong class="d-sm-inline-block p-2 me-2 mb-2 mb-lg-0 rounded-3 masthead-notice">New in v5.3</strong>
<span class="text-muted">Color mode support, expanded color palette, and more!</span> <span class="text-body-secondary">Color mode support, expanded color palette, and more!</span>
</a> </a>
<img src="/docs/{{ .Site.Params.docs_version }}/assets/brand/bootstrap-logo-shadow.png" width="200" height="165" alt="Bootstrap" class="d-none d-sm-block mx-auto mb-3"> <img src="/docs/{{ .Site.Params.docs_version }}/assets/brand/bootstrap-logo-shadow.png" width="200" height="165" alt="Bootstrap" class="d-none d-sm-block mx-auto mb-3">
<h1 class="mb-3 fw-semibold lh-1">Build fast, responsive sites with&nbsp;Bootstrap</h1> <h1 class="mb-3 fw-semibold lh-1">Build fast, responsive sites with&nbsp;Bootstrap</h1>
@ -19,7 +19,7 @@
Read the docs Read the docs
</a> </a>
</div> </div>
<p class="text-muted mb-0"> <p class="text-body-secondary mb-0">
Currently <strong>v{{ .Site.Params.current_version }}</strong> Currently <strong>v{{ .Site.Params.current_version }}</strong>
<span class="px-1">&middot;</span> <span class="px-1">&middot;</span>
<a href="/docs/{{ .Site.Params.docs_version }}/getting-started/download/" class="link-secondary">Download</a> <a href="/docs/{{ .Site.Params.docs_version }}/getting-started/download/" class="link-secondary">Download</a>

2
site/layouts/partials/home/plugins.html
View File

@ -54,7 +54,7 @@
<div class="col-sm-6 mb-2"> <div class="col-sm-6 mb-2">
<a class="d-block pe-lg-4 text-decoration-none lh-sm" href="{{ $href }}"> <a class="d-block pe-lg-4 text-decoration-none lh-sm" href="{{ $href }}">
<h4 class="mb-0 fs-5 fw-semibold">{{ $plugin.name }}</h4> <h4 class="mb-0 fs-5 fw-semibold">{{ $plugin.name }}</h4>
<small class="text-muted">{{ $plugin.description }}</small> <small class="text-body-secondary">{{ $plugin.description }}</small>
</a> </a>
</div> </div>
{{- end }} {{- end }}

2
site/layouts/shortcodes/example.html
View File

@ -29,7 +29,7 @@
{{- if eq $show_markup true -}} {{- if eq $show_markup true -}}
{{- if eq $show_preview true -}} {{- if eq $show_preview true -}}
<div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-0 border-top border-bottom"> <div class="d-flex align-items-center highlight-toolbar ps-3 pe-2 py-1 border-0 border-top border-bottom">
<small class="font-monospace text-muted text-uppercase">{{- $lang -}}</small> <small class="font-monospace text-body-secondary text-uppercase">{{- $lang -}}</small>
<div class="d-flex ms-auto"> <div class="d-flex ms-auto">
<button type="button" class="btn-edit text-nowrap"{{ with $stackblitz_add_js }} data-sb-js-snippet="{{ $stackblitz_add_js }}"{{ end }} title="Try it on StackBlitz"> <button type="button" class="btn-edit text-nowrap"{{ with $stackblitz_add_js }} data-sb-js-snippet="{{ $stackblitz_add_js }}"{{ end }} title="Try it on StackBlitz">
<svg class="bi" aria-hidden="true"><use xlink:href="#lightning-charge-fill"/></svg> <svg class="bi" aria-hidden="true"><use xlink:href="#lightning-charge-fill"/></svg>