<div class="toast-header">
<span class="d-block bg-primary rounded me-2" style="width: 20px; height: 20px;"></span>
<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>
</div>
<div class="toast-body">
<div class="container">
<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>
values: map-merge(
$utilities-text-colors,
(
- "muted": $text-muted, // deprecated
+ "muted": var(--#{$prefix}secondary-color), // deprecated
"black-50": rgba($black, .5), // deprecated
"white-50": rgba($white, .5), // deprecated
"body-secondary": var(--#{$prefix}secondary-color),
$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;
$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;
// scss-docs-end table-variables
$form-text-font-size: $small-font-size !default;
$form-text-font-style: 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-start form-label-variables
}
.DocSearch-Container {
- --docsearch-muted-color: #{$text-muted};
+ --docsearch-muted-color: var(--bs-secondary-color);
--docsearch-hit-shadow: none;
z-index: 2000; // Make sure to be over all components showcased in the documentation
<strong class="text-success">Correct</strong>
</div>
<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>
</div>
</div>
<div class="card" style="width: 18rem;">
<div class="card-body">
<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>
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
<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>
</div>
- <div class="card-footer text-muted">
+ <div class="card-footer text-body-secondary">
2 days ago
</div>
</div>
<div class="card-body">
<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"><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 class="card">
<div class="card-body">
<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"><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>
{{< placeholder width="100%" height="180" class="card-img-bottom" text="Image cap" >}}
</div>
<div class="card-body">
<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"><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 class="card-body">
<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"><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 class="card">
<div class="card-body">
<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"><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 class="card">
<div class="card-body">
<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"><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>
<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 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 class="card">
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
</div>
<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 class="card">
<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 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>
<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 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>
<p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
</div>
<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>
<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 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>
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 >}}
-<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>
Some example text that's free-flowing within the dropdown menu.
</p>
<a href="#" class="list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-between">
<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>
<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 href="#" class="list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-between">
<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>
<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>
</div>
{{< /example >}}
| Size | Class | Modal max-width
| --- | --- | --- |
| 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` |
| Extra large | `.modal-xl` | `1140px` |
{{< /bs-table >}}
<div class="collapse" id="navbarToggleExternalContent">
<div class="bg-dark p-4">
<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>
<nav class="navbar navbar-dark bg-dark">
<div class="toast-header">
{{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}}
<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>
</div>
<div class="toast-body">
<div class="toast-header">
{{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}}
<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>
</div>
<div class="toast-body">
<div class="toast-header">
{{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}}
<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>
</div>
<div class="toast-body">
<div class="toast-header">
{{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}}
<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>
</div>
<div class="toast-body">
<div class="toast-header">
{{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}}
<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>
</div>
<div class="toast-body">
{{< example >}}
<h3>
Fancy display heading
- <small class="text-muted">With faded secondary text</small>
+ <small class="text-body-secondary">With faded secondary text</small>
</h3>
{{< /example >}}
{{ $example.name }}
</a>
</h3>
- <p class="text-muted">{{ $example.description }}</p>
+ <p class="text-body-secondary">{{ $example.description }}</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">
<svg class="bi flex-shrink-0"><use xlink:href="#lightning-charge-fill"></use></svg>
{{ $example.name }}
</h3>
</a>
- <p class="text-muted">{{ $example.description }}</p>
+ <p class="text-body-secondary">{{ $example.description }}</p>
</div>
{{ end }}
{{ if (eq (add $i 1) $len) }}</div>{{ end }}
<div class="row">
<div class="col-sm-8 col-md-7 py-4">
<h4 class="text-white">حول</h4>
- <p class="text-muted">أضف بعض المعلومات حول الألبوم، المؤلف، أو أي سياق خلفية آخر. اجعلها بضع جمل حتى يتمكن الزوار من التقاط بعض التلميحات المفيدة. ثم اربطها ببعض مواقع التواصل الاجتماعي أو معلومات الاتصال.</p>
+ <p class="text-body-secondary">أضف بعض المعلومات حول الألبوم، المؤلف، أو أي سياق خلفية آخر. اجعلها بضع جمل حتى يتمكن الزوار من التقاط بعض التلميحات المفيدة. ثم اربطها ببعض مواقع التواصل الاجتماعي أو معلومات الاتصال.</p>
</div>
<div class="col-sm-4 offset-md-1 py-4">
<h4 class="text-white">تواصل معي</h4>
<div class="row py-lg-5">
<div class="col-lg-6 col-md-8 mx-auto">
<h1 class="fw-light">مثال الألبوم</h1>
- <p class="lead text-muted">وصف قصير حول الألبوم أدناه (محتوياته ، ومنشؤه ، وما إلى ذلك). اجعله قصير ولطيف، ولكن ليست قصير جدًا حتى لا يتخطى الناس هذا الألبوم تمامًا.</p>
+ <p class="lead text-body-secondary">وصف قصير حول الألبوم أدناه (محتوياته ، ومنشؤه ، وما إلى ذلك). اجعله قصير ولطيف، ولكن ليست قصير جدًا حتى لا يتخطى الناس هذا الألبوم تمامًا.</p>
<p>
<a href="#" class="btn btn-primary my-2">الدعوة الرئيسية للعمل</a>
<a href="#" class="btn btn-secondary my-2">عمل ثانوي</a>
<button type="button" class="btn btn-sm btn-outline-secondary">عرض</button>
<button type="button" class="btn btn-sm btn-outline-secondary">تعديل</button>
</div>
- <small class="text-muted">9 دقائق</small>
+ <small class="text-body-secondary">9 دقائق</small>
</div>
</div>
</div>
<button type="button" class="btn btn-sm btn-outline-secondary">عرض</button>
<button type="button" class="btn btn-sm btn-outline-secondary">تعديل</button>
</div>
- <small class="text-muted">9 دقائق</small>
+ <small class="text-body-secondary">9 دقائق</small>
</div>
</div>
</div>
<button type="button" class="btn btn-sm btn-outline-secondary">عرض</button>
<button type="button" class="btn btn-sm btn-outline-secondary">تعديل</button>
</div>
- <small class="text-muted">9 دقائق</small>
+ <small class="text-body-secondary">9 دقائق</small>
</div>
</div>
</div>
<button type="button" class="btn btn-sm btn-outline-secondary">عرض</button>
<button type="button" class="btn btn-sm btn-outline-secondary">تعديل</button>
</div>
- <small class="text-muted">9 دقائق</small>
+ <small class="text-body-secondary">9 دقائق</small>
</div>
</div>
</div>
<button type="button" class="btn btn-sm btn-outline-secondary">عرض</button>
<button type="button" class="btn btn-sm btn-outline-secondary">تعديل</button>
</div>
- <small class="text-muted">9 دقائق</small>
+ <small class="text-body-secondary">9 دقائق</small>
</div>
</div>
</div>
<button type="button" class="btn btn-sm btn-outline-secondary">عرض</button>
<button type="button" class="btn btn-sm btn-outline-secondary">تعديل</button>
</div>
- <small class="text-muted">9 دقائق</small>
+ <small class="text-body-secondary">9 دقائق</small>
</div>
</div>
</div>
<button type="button" class="btn btn-sm btn-outline-secondary">عرض</button>
<button type="button" class="btn btn-sm btn-outline-secondary">تعديل</button>
</div>
- <small class="text-muted">9 دقائق</small>
+ <small class="text-body-secondary">9 دقائق</small>
</div>
</div>
</div>
<button type="button" class="btn btn-sm btn-outline-secondary">عرض</button>
<button type="button" class="btn btn-sm btn-outline-secondary">تعديل</button>
</div>
- <small class="text-muted">9 دقائق</small>
+ <small class="text-body-secondary">9 دقائق</small>
</div>
</div>
</div>
<button type="button" class="btn btn-sm btn-outline-secondary">عرض</button>
<button type="button" class="btn btn-sm btn-outline-secondary">تعديل</button>
</div>
- <small class="text-muted">9 دقائق</small>
+ <small class="text-body-secondary">9 دقائق</small>
</div>
</div>
</div>
</main>
-<footer class="text-muted py-5">
+<footer class="text-body-secondary py-5">
<div class="container">
<p class="float-end mb-1">
<a href="#">عد إلى الأعلى</a>
<div class="row">
<div class="col-sm-8 col-md-7 py-4">
<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 class="col-sm-4 offset-md-1 py-4">
<h4 class="text-white">Contact</h4>
<div class="row py-lg-5">
<div class="col-lg-6 col-md-8 mx-auto">
<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>
<a href="#" class="btn btn-primary my-2">Main call to action</a>
<a href="#" class="btn btn-secondary my-2">Secondary action</a>
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
</div>
- <small class="text-muted">9 mins</small>
+ <small class="text-body-secondary">9 mins</small>
</div>
</div>
</div>
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
</div>
- <small class="text-muted">9 mins</small>
+ <small class="text-body-secondary">9 mins</small>
</div>
</div>
</div>
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
</div>
- <small class="text-muted">9 mins</small>
+ <small class="text-body-secondary">9 mins</small>
</div>
</div>
</div>
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
</div>
- <small class="text-muted">9 mins</small>
+ <small class="text-body-secondary">9 mins</small>
</div>
</div>
</div>
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
</div>
- <small class="text-muted">9 mins</small>
+ <small class="text-body-secondary">9 mins</small>
</div>
</div>
</div>
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
</div>
- <small class="text-muted">9 mins</small>
+ <small class="text-body-secondary">9 mins</small>
</div>
</div>
</div>
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
</div>
- <small class="text-muted">9 mins</small>
+ <small class="text-body-secondary">9 mins</small>
</div>
</div>
</div>
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
</div>
- <small class="text-muted">9 mins</small>
+ <small class="text-body-secondary">9 mins</small>
</div>
</div>
</div>
<button type="button" class="btn btn-sm btn-outline-secondary">View</button>
<button type="button" class="btn btn-sm btn-outline-secondary">Edit</button>
</div>
- <small class="text-muted">9 mins</small>
+ <small class="text-body-secondary">9 mins</small>
</div>
</div>
</div>
</main>
-<footer class="text-muted py-5">
+<footer class="text-body-secondary py-5">
<div class="container">
<p class="float-end mb-1">
<a href="#">Back to top</a>
<div class="col p-4 d-flex flex-column position-static">
<strong class="d-inline-block mb-2 text-primary">العالم</strong>
<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>
<a href="#" class="stretched-link">أكمل القراءة</a>
</div>
<div class="col p-4 d-flex flex-column position-static">
<strong class="d-inline-block mb-2 text-success">التصميم</strong>
<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>
<a href="#" class="stretched-link">أكمل القراءة</a>
</div>
<div class="col p-4 d-flex flex-column position-static">
<strong class="d-inline-block mb-2 text-primary">World</strong>
<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>
<a href="#" class="stretched-link">Continue reading</a>
</div>
<div class="col p-4 d-flex flex-column position-static">
<strong class="d-inline-block mb-2 text-success">Design</strong>
<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>
<a href="#" class="stretched-link">Continue reading</a>
</div>
<div class="row featurette">
<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>
</div>
<div class="col-md-5">
<div class="row featurette">
<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>
</div>
<div class="col-md-5 order-md-1">
<div class="row featurette">
<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>
</div>
<div class="col-md-5">
<div class="row featurette">
<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>
</div>
<div class="col-md-5">
<div class="row featurette">
<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>
</div>
<div class="col-md-5 order-md-1">
<div class="row featurette">
<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>
</div>
<div class="col-md-5">
<a href="{{< docsref "/examples/cheatsheet" >}}" class="ms-auto link-light" hreflang="en">جدول بيانات LTR</a>
</div>
</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>
<nav class="small" id="toc">
<ul class="list-unstyled">
<p class="card-text">بعض الأمثلة السريعة للنصوص للبناء على عنوان البطاقة وتشكيل الجزء الأكبر من محتوى البطاقة.</p>
<a href="#" class="btn btn-primary">اذهب لمكان ما</a>
</div>
- <div class="card-footer text-muted">
+ <div class="card-footer text-body-secondary">
منذ يومان
</div>
</div>
<div class="card-body">
<h5 class="card-title">عنوان البطاقة</h5>
<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 class="toast-header">
{{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}}
<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>
</div>
<div class="toast-body">
<a href="{{< docsref "/examples/cheatsheet-rtl" >}}" class="ms-auto link-light" hreflang="ar">RTL cheatsheet</a>
</div>
</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>
<nav class="small" id="toc">
<ul class="list-unstyled">
<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>
</div>
- <div class="card-footer text-muted">
+ <div class="card-footer text-body-secondary">
2 days ago
</div>
</div>
<div class="card-body">
<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"><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 class="toast-header">
{{< placeholder width="20" height="20" background="#007aff" class="rounded me-2" text="false" title="false" >}}
<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>
</div>
<div class="toast-body">
<div class="row g-3">
<div class="col-md-5 col-lg-4 order-md-last">
<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>
</h4>
<ul class="list-group mb-3">
<li class="list-group-item d-flex justify-content-between lh-sm">
<div>
<h6 class="my-0">اسم المنتج</h6>
- <small class="text-muted">وصف مختصر</small>
+ <small class="text-body-secondary">وصف مختصر</small>
</div>
- <span class="text-muted">$12</span>
+ <span class="text-body-secondary">$12</span>
</li>
<li class="list-group-item d-flex justify-content-between lh-sm">
<div>
<h6 class="my-0">المنتج الثاني</h6>
- <small class="text-muted">وصف مختصر</small>
+ <small class="text-body-secondary">وصف مختصر</small>
</div>
- <span class="text-muted">$8</span>
+ <span class="text-body-secondary">$8</span>
</li>
<li class="list-group-item d-flex justify-content-between lh-sm">
<div>
<h6 class="my-0">البند الثالث</h6>
- <small class="text-muted">وصف مختصر</small>
+ <small class="text-body-secondary">وصف مختصر</small>
</div>
- <span class="text-muted">$5</span>
+ <span class="text-body-secondary">$5</span>
</li>
<li class="list-group-item d-flex justify-content-between bg-body-tertiary">
<div class="text-success">
</div>
<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">
<div class="invalid-feedback">
يرجى إدخال عنوان بريد إلكتروني صحيح لتصلكم تحديثات الشحن.
</div>
<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">
</div>
<div class="col-md-6">
<label for="cc-name" class="form-label">الاسم على البطاقة</label>
<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>
</div>
</div>
</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">© {{< year >}}-2017 اسم الشركة</p>
<ul class="list-inline">
<li class="list-inline-item"><a href="#">سياسة الخصوصية</a></li>
<li class="list-group-item d-flex justify-content-between lh-sm">
<div>
<h6 class="my-0">Product name</h6>
- <small class="text-muted">Brief description</small>
+ <small class="text-body-secondary">Brief description</small>
</div>
- <span class="text-muted">$12</span>
+ <span class="text-body-secondary">$12</span>
</li>
<li class="list-group-item d-flex justify-content-between lh-sm">
<div>
<h6 class="my-0">Second product</h6>
- <small class="text-muted">Brief description</small>
+ <small class="text-body-secondary">Brief description</small>
</div>
- <span class="text-muted">$8</span>
+ <span class="text-body-secondary">$8</span>
</li>
<li class="list-group-item d-flex justify-content-between lh-sm">
<div>
<h6 class="my-0">Third item</h6>
- <small class="text-muted">Brief description</small>
+ <small class="text-body-secondary">Brief description</small>
</div>
- <span class="text-muted">$5</span>
+ <span class="text-body-secondary">$5</span>
</li>
<li class="list-group-item d-flex justify-content-between bg-body-tertiary">
<div class="text-success">
</div>
<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">
<div class="invalid-feedback">
Please enter a valid email address for shipping updates.
</div>
<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">
</div>
<div class="col-md-6">
<label for="cc-name" class="form-label">Name on card</label>
<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">
Name on card is required
</div>
</div>
</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">© 2017–{{< year >}} Company Name</p>
<ul class="list-inline">
<li class="list-inline-item"><a href="#">Privacy</a></li>
</li>
</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>
<a class="link-secondary" href="#" aria-label="إضافة تقرير جديد">
<span data-feather="plus-circle" class="align-text-bottom"></span>
</li>
</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>
<a class="link-secondary" href="#" aria-label="Add a new report">
<span data-feather="plus-circle" class="align-text-bottom"></span>
<svg class="bi" width="16" height="16"><use xlink:href="#arrow-right-short"/></svg>
</button>
</div>
- <div class="cal-weekdays text-muted">
+ <div class="cal-weekdays text-body-secondary">
<div class="cal-weekday">Sun</div>
<div class="cal-weekday">Mon</div>
<div class="cal-weekday">Tue</div>
<svg class="bi" width="16" height="16"><use xlink:href="#arrow-right-short"/></svg>
</button>
</div>
- <div class="cal-weekdays text-muted">
+ <div class="cal-weekdays text-body-secondary">
<div class="cal-weekday">Sun</div>
<div class="cal-weekday">Mon</div>
<div class="cal-weekday">Tue</div>
<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">
- <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>
<h3 class="fw-bold mb-0 fs-4">Featured title</h3>
<p>Paragraph of text beneath the heading to explain the heading.</p>
</div>
</div>
<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>
<h3 class="fw-bold mb-0 fs-4">Featured title</h3>
<p>Paragraph of text beneath the heading to explain the heading.</p>
</div>
</div>
<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>
<h3 class="fw-bold mb-0 fs-4">Featured title</h3>
<p>Paragraph of text beneath the heading to explain the heading.</p>
</div>
</div>
<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>
<h3 class="fw-bold mb-0 fs-4">Featured title</h3>
<p>Paragraph of text beneath the heading to explain the heading.</p>
</div>
</div>
<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>
<h3 class="fw-bold mb-0 fs-4">Featured title</h3>
<p>Paragraph of text beneath the heading to explain the heading.</p>
</div>
</div>
<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>
<h3 class="fw-bold mb-0 fs-4">Featured title</h3>
<p>Paragraph of text beneath the heading to explain the heading.</p>
</div>
</div>
<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>
<h3 class="fw-bold mb-0 fs-4">Featured title</h3>
<p>Paragraph of text beneath the heading to explain the heading.</p>
</div>
</div>
<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>
<h3 class="fw-bold mb-0 fs-4">Featured title</h3>
<p>Paragraph of text beneath the heading to explain the heading.</p>
<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">
<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>
</div>
</svg>
</div>
<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 class="col d-flex flex-column gap-2">
</svg>
</div>
<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 class="col d-flex flex-column gap-2">
</svg>
</div>
<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 class="col d-flex flex-column gap-2">
</svg>
</div>
<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 class="container">
<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">© {{< year >}} Company, Inc</p>
+ <p class="col-md-4 mb-0 text-body-secondary">© {{< 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">
<svg class="bi me-2" width="40" height="32"><use xlink:href="#bootstrap"/></svg>
</a>
<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-muted">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-muted">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">Home</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-body-secondary">Pricing</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-body-secondary">About</a></li>
</ul>
</footer>
</div>
<div class="container">
<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">
- <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>
</a>
- <span class="mb-3 mb-md-0 text-muted">© {{< year >}} Company, Inc</span>
+ <span class="mb-3 mb-md-0 text-body-secondary">© {{< year >}} Company, Inc</span>
</div>
<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-muted" 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="#twitter"/></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-body-secondary" href="#"><svg class="bi" width="24" height="24"><use xlink:href="#facebook"/></svg></a></li>
</ul>
</footer>
</div>
<div class="container">
<footer class="py-3 my-4">
<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-muted">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-muted">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">Home</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-body-secondary">Pricing</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-body-secondary">About</a></li>
</ul>
- <p class="text-center text-muted">© {{< year >}} Company, Inc</p>
+ <p class="text-center text-body-secondary">© {{< year >}} Company, Inc</p>
</footer>
</div>
<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>
</a>
- <p class="text-muted">© {{< year >}}</p>
+ <p class="text-body-secondary">© {{< year >}}</p>
</div>
<div class="col mb-3">
<div class="col mb-3">
<h5>Section</h5>
<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-muted">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-muted">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">Home</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-body-secondary">Pricing</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-body-secondary">About</a></li>
</ul>
</div>
<div class="col mb-3">
<h5>Section</h5>
<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-muted">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-muted">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">Home</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-body-secondary">Pricing</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-body-secondary">About</a></li>
</ul>
</div>
<div class="col mb-3">
<h5>Section</h5>
<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-muted">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-muted">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">Home</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-body-secondary">Pricing</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-body-secondary">About</a></li>
</ul>
</div>
</footer>
<div class="col-6 col-md-2 mb-3">
<h5>Section</h5>
<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-muted">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-muted">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">Home</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-body-secondary">Pricing</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-body-secondary">About</a></li>
</ul>
</div>
<div class="col-6 col-md-2 mb-3">
<h5>Section</h5>
<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-muted">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-muted">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">Home</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-body-secondary">Pricing</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-body-secondary">About</a></li>
</ul>
</div>
<div class="col-6 col-md-2 mb-3">
<h5>Section</h5>
<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-muted">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-muted">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">Home</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-body-secondary">Pricing</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-body-secondary">About</a></li>
</ul>
</div>
</div>
<button class="w-100 btn btn-lg btn-primary" type="submit">Sign up</button>
<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>
</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">
© {{< year >}}
</footer>
</div>
<input class="form-check-input flex-shrink-0" type="checkbox" value="" checked>
<span>
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>
</label>
<label class="list-group-item d-flex gap-2">
<input class="form-check-input flex-shrink-0" type="checkbox" value="">
<span>
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>
</label>
<label class="list-group-item d-flex gap-2">
<input class="form-check-input flex-shrink-0" type="checkbox" value="">
<span>
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>
</label>
</div>
<input class="form-check-input flex-shrink-0" type="radio" name="listGroupRadios" id="listGroupRadios1" value="" checked>
<span>
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>
</label>
<label class="list-group-item d-flex gap-2">
<input class="form-check-input flex-shrink-0" type="radio" name="listGroupRadios" id="listGroupRadios2" value="">
<span>
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>
</label>
<label class="list-group-item d-flex gap-2">
<input class="form-check-input flex-shrink-0" type="radio" name="listGroupRadios" id="listGroupRadios3" value="">
<span>
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>
</label>
</div>
<input class="form-check-input flex-shrink-0" type="checkbox" value="" checked style="font-size: 1.375em;">
<span class="pt-1 form-checked-content">
<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>
1:00–2:00pm
</small>
<input class="form-check-input flex-shrink-0" type="checkbox" value="" style="font-size: 1.375em;">
<span class="pt-1 form-checked-content">
<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>
2:00–2:30pm
</small>
<input class="form-check-input flex-shrink-0" type="checkbox" value="" style="font-size: 1.375em;">
<span class="pt-1 form-checked-content">
<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>
Tomorrow
</small>
<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 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>
Choose list...
</small>
<blockquote class="blockquote">
<p>A well-known quote, contained in a blockquote element.</p>
</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>
</figcaption>
</figure>
<div class="card-body">
<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"><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 class="card-body">
<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"><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>
<blockquote class="blockquote">
<p>A well-known quote, contained in a blockquote element.</p>
</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>
</figcaption>
</figure>
<div class="card-body">
<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"><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>
<ul class="d-grid gap-4 my-5 list-unstyled small">
<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>
<h5 class="mb-0">Grid view</h5>
Not into lists? Try the new grid view.
<label for="floatingPassword">Password</label>
</div>
<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">
<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">
<div class="my-3 p-3 bg-body rounded shadow-sm">
<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" >}}
<p class="pb-3 mb-0 small lh-sm border-bottom">
<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?
</p>
</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" >}}
<p class="pb-3 mb-0 small lh-sm border-bottom">
<strong class="d-block text-gray-dark">@username</strong>
Some more representative placeholder content, related to this other user. Another status update, perhaps.
</p>
</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" >}}
<p class="pb-3 mb-0 small lh-sm border-bottom">
<strong class="d-block text-gray-dark">@username</strong>
<div class="my-3 p-3 bg-body rounded shadow-sm">
<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" >}}
<div class="pb-3 mb-0 small lh-sm border-bottom w-100">
<div class="d-flex justify-content-between">
<span class="d-block">@username</span>
</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" >}}
<div class="pb-3 mb-0 small lh-sm border-bottom w-100">
<div class="d-flex justify-content-between">
<span class="d-block">@username</span>
</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" >}}
<div class="pb-3 mb-0 small lh-sm border-bottom w-100">
<div class="d-flex justify-content-between">
<div class="pricing-header p-3 pb-md-4 mx-auto text-center">
<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>
</header>
<h4 class="my-0 fw-normal">Free</h4>
</div>
<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">
<li>10 users included</li>
<li>2 GB of storage</li>
<h4 class="my-0 fw-normal">Pro</h4>
</div>
<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">
<li>20 users included</li>
<li>10 GB of storage</li>
<h4 class="my-0 fw-normal">Enterprise</h4>
</div>
<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">
<li>30 users included</li>
<li>15 GB of storage</li>
<div class="row">
<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">
- <small class="d-block mb-3 text-muted">© 2017–{{< year >}}</small>
+ <small class="d-block mb-3 text-body-secondary">© 2017–{{< year >}}</small>
</div>
<div class="col-6 col-md">
<h5>Features</h5>
<div class="row">
<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>
- <small class="d-block mb-3 text-muted">© 2017–{{< year >}}</small>
+ <small class="d-block mb-3 text-body-secondary">© 2017–{{< year >}}</small>
</div>
<div class="col-6 col-md">
<h5>Features</h5>
<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">
<strong class="mb-1">List group item heading</strong>
- <small class="text-muted">Tues</small>
+ <small class="text-body-secondary">Tues</small>
</div>
<div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
</a>
<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">
<strong class="mb-1">List group item heading</strong>
- <small class="text-muted">Mon</small>
+ <small class="text-body-secondary">Mon</small>
</div>
<div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
</a>
<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">
<strong class="mb-1">List group item heading</strong>
- <small class="text-muted">Wed</small>
+ <small class="text-body-secondary">Wed</small>
</div>
<div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
</a>
<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">
<strong class="mb-1">List group item heading</strong>
- <small class="text-muted">Tues</small>
+ <small class="text-body-secondary">Tues</small>
</div>
<div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
</a>
<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">
<strong class="mb-1">List group item heading</strong>
- <small class="text-muted">Mon</small>
+ <small class="text-body-secondary">Mon</small>
</div>
<div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
</a>
<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">
<strong class="mb-1">List group item heading</strong>
- <small class="text-muted">Wed</small>
+ <small class="text-body-secondary">Wed</small>
</div>
<div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
</a>
<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">
<strong class="mb-1">List group item heading</strong>
- <small class="text-muted">Tues</small>
+ <small class="text-body-secondary">Tues</small>
</div>
<div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
</a>
<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">
<strong class="mb-1">List group item heading</strong>
- <small class="text-muted">Mon</small>
+ <small class="text-body-secondary">Mon</small>
</div>
<div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
</a>
<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">
<strong class="mb-1">List group item heading</strong>
- <small class="text-muted">Wed</small>
+ <small class="text-body-secondary">Wed</small>
</div>
<div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
</a>
<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">
<strong class="mb-1">List group item heading</strong>
- <small class="text-muted">Tues</small>
+ <small class="text-body-secondary">Tues</small>
</div>
<div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
</a>
<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">
<strong class="mb-1">List group item heading</strong>
- <small class="text-muted">Mon</small>
+ <small class="text-body-secondary">Mon</small>
</div>
<div class="col-10 mb-1 small">Some placeholder content in a paragraph below the heading and date.</div>
</a>
</label>
</div>
<button class="w-100 btn btn-lg btn-primary" type="submit">Sign in</button>
- <p class="mt-5 mb-3 text-muted">© 2017–{{< year >}}</p>
+ <p class="mt-5 mb-3 text-body-secondary">© 2017–{{< year >}}</p>
</form>
</main>
</div>
</div>
</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 · © {{< year >}}
</footer>
</div>
<footer class="footer mt-auto py-3 bg-body-tertiary">
<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>
</footer>
<footer class="footer mt-auto py-3 bg-body-tertiary">
<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>
</footer>
{{< bs-table "table" >}}
| | Chrome | Firefox | Safari | Android Browser & WebView |
| --- | --- | --- | --- | --- |
-| **Android** | Supported | Supported | <span class="text-muted">—</span> | v6.0+ |
-| **iOS** | Supported | Supported | Supported | <span class="text-muted">—</span> |
+| **Android** | Supported | Supported | <span class="text-body-secondary">—</span> | v6.0+ |
+| **iOS** | Supported | Supported | Supported | <span class="text-body-secondary">—</span> |
{{< /bs-table >}}
### Desktop browsers
| | Chrome | Firefox | Microsoft Edge | Opera | Safari |
| --- | --- | --- | --- | --- | --- |
| **Mac** | Supported | Supported | Supported | Supported | Supported |
-| **Windows** | Supported | Supported | Supported | Supported | <span class="text-muted">—</span> |
+| **Windows** | Supported | Supported | Supported | Supported | <span class="text-body-secondary">—</span> |
{{< /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.
{{< bs-table "table" >}}
| | Extra small<div class="fw-normal"><576px</div> | Small<div class="fw-normal">≥576px</div> | Medium<div class="fw-normal">≥768px</div> | Large<div class="fw-normal">≥992px</div> | X-Large<div class="fw-normal">≥1200px</div> | XX-Large<div class="fw-normal">≥1400px</div> |
| --- | --- | --- | --- | --- | --- | --- |
-| `.container` | <span class="text-muted">100%</span> | 540px | 720px | 960px | 1140px | 1320px |
-| `.container-sm` | <span class="text-muted">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-lg` | <span class="text-muted">100%</span> | <span class="text-muted">100%</span> | <span class="text-muted">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-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-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` | <span class="text-body-secondary">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-body-secondary">100%</span> | <span class="text-body-secondary">100%</span> | 720px | 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-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-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-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 >}}
## Default container
### 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._
{{- end -}}
{{< /colors.inline >}}
<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-secondary">.text-body-secondary</p>
{{< /callout >}}
{{< 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 info >}}
Reset a text or link's color with `.text-reset`, so that it inherits the color from its parent.
{{< example >}}
-<p class="text-muted">
+<p class="text-body-secondary">
Muted text with a <a href="#" class="text-reset">reset link</a>.
</p>
{{< /example >}}
<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>
</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);">
<svg class="bi fs-1"><use xlink:href="#braces-asterisk"></use></svg>
</div>
<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">
- <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>
<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.
</p>
</div>
<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>
<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>.
<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">
<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 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">
- <span class="text-muted">Parcel</span>
+ <span class="text-body-secondary">Parcel</span>
</a>
<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">
- <span class="text-muted">Vite</span>
+ <span class="text-body-secondary">Vite</span>
</a>
</div>
</div>
<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/">
<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>
<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 Bootstrap</h1>
Read the docs
</a>
</div>
- <p class="text-muted mb-0">
+ <p class="text-body-secondary mb-0">
Currently <strong>v{{ .Site.Params.current_version }}</strong>
<span class="px-1">·</span>
<a href="/docs/{{ .Site.Params.docs_version }}/getting-started/download/" class="link-secondary">Download</a>
<div class="col-sm-6 mb-2">
<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>
- <small class="text-muted">{{ $plugin.description }}</small>
+ <small class="text-body-secondary">{{ $plugin.description }}</small>
</a>
</div>
{{- end }}
{{- if eq $show_markup 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">
- <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">
<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>
projects / thirdparty / bootstrap.git / commitdiff
