aboutsummaryrefslogtreecommitdiff
path: root/site/content/docs/5.1
diff options
context:
space:
mode:
authorMark Otto <[email protected]>2021-09-13 22:20:49 -0600
committerGitHub <[email protected]>2021-09-13 22:20:49 -0600
commit30bddc702f36a7a1b04771546f71033044d65b7a (patch)
tree710fd90333caba16634162125155fee7c7c8b93d /site/content/docs/5.1
parent8dbe58a54a117a9ad86b7d98ac9a2d3fb2851b3f (diff)
parent55a352d02304cb0012194c33b8b50f9426b53f94 (diff)
downloadbootstrap-css-vars-btn.tar.xz
bootstrap-css-vars-btn.zip
Merge branch 'main' into css-vars-btncss-vars-btn
Diffstat (limited to 'site/content/docs/5.1')
-rw-r--r--site/content/docs/5.1/components/list-group.md12
-rw-r--r--site/content/docs/5.1/components/offcanvas.md2
-rw-r--r--site/content/docs/5.1/content/images.md4
-rw-r--r--site/content/docs/5.1/content/reboot.md2
-rw-r--r--site/content/docs/5.1/customize/optimize.md4
-rw-r--r--site/content/docs/5.1/customize/sass.md2
-rw-r--r--site/content/docs/5.1/forms/checks-radios.md10
-rw-r--r--site/content/docs/5.1/helpers/text-truncation.md4
8 files changed, 20 insertions, 20 deletions
diff --git a/site/content/docs/5.1/components/list-group.md b/site/content/docs/5.1/components/list-group.md
index c47a05dd3..71e45245c 100644
--- a/site/content/docs/5.1/components/list-group.md
+++ b/site/content/docs/5.1/components/list-group.md
@@ -102,9 +102,9 @@ Numbers are generated by `counter-reset` on the `<ol>`, and then styled and plac
{{< example >}}
<ol class="list-group list-group-numbered">
- <li class="list-group-item">Cras justo odio</li>
- <li class="list-group-item">Cras justo odio</li>
- <li class="list-group-item">Cras justo odio</li>
+ <li class="list-group-item">A list item</li>
+ <li class="list-group-item">A list item</li>
+ <li class="list-group-item">A list item</li>
</ol>
{{< /example >}}
@@ -115,21 +115,21 @@ These work great with custom content as well.
<li class="list-group-item d-flex justify-content-between align-items-start">
<div class="ms-2 me-auto">
<div class="fw-bold">Subheading</div>
- Cras justo odio
+ Content for list item
</div>
<span class="badge bg-primary rounded-pill">14</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-start">
<div class="ms-2 me-auto">
<div class="fw-bold">Subheading</div>
- Cras justo odio
+ Content for list item
</div>
<span class="badge bg-primary rounded-pill">14</span>
</li>
<li class="list-group-item d-flex justify-content-between align-items-start">
<div class="ms-2 me-auto">
<div class="fw-bold">Subheading</div>
- Cras justo odio
+ Content for list item
</div>
<span class="badge bg-primary rounded-pill">14</span>
</li>
diff --git a/site/content/docs/5.1/components/offcanvas.md b/site/content/docs/5.1/components/offcanvas.md
index 72ba4be95..6be2cd64d 100644
--- a/site/content/docs/5.1/components/offcanvas.md
+++ b/site/content/docs/5.1/components/offcanvas.md
@@ -161,7 +161,7 @@ Scrolling the `<body>` element is disabled when an offcanvas and its backdrop ar
</div>
<div class="offcanvas offcanvas-start" data-bs-scroll="true" tabindex="-1" id="offcanvasWithBothOptions" aria-labelledby="offcanvasWithBothOptionsLabel">
<div class="offcanvas-header">
- <h5 class="offcanvas-title" id="offcanvasWithBothOptionsLabel">Backdroped with scrolling</h5>
+ <h5 class="offcanvas-title" id="offcanvasWithBothOptionsLabel">Backdrop with scrolling</h5>
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
</div>
<div class="offcanvas-body">
diff --git a/site/content/docs/5.1/content/images.md b/site/content/docs/5.1/content/images.md
index f1012efbf..9d13ef4fb 100644
--- a/site/content/docs/5.1/content/images.md
+++ b/site/content/docs/5.1/content/images.md
@@ -1,14 +1,14 @@
---
layout: docs
title: Images
-description: Documentation and examples for opting images into responsive behavior (so they never become larger than their parent elements) and add lightweight styles to them—all via classes.
+description: Documentation and examples for opting images into responsive behavior (so they never become wider than their parent) and add lightweight styles to them—all via classes.
group: content
toc: true
---
## Responsive images
-Images in Bootstrap are made responsive with `.img-fluid`. This applies `max-width: 100%;` and `height: auto;` to the image so that it scales with the parent element.
+Images in Bootstrap are made responsive with `.img-fluid`. This applies `max-width: 100%;` and `height: auto;` to the image so that it scales with the parent width.
{{< example >}}
{{< placeholder width="100%" height="250" class="bd-placeholder-img-lg img-fluid" text="Responsive image" >}}
diff --git a/site/content/docs/5.1/content/reboot.md b/site/content/docs/5.1/content/reboot.md
index f726a6635..63f892de2 100644
--- a/site/content/docs/5.1/content/reboot.md
+++ b/site/content/docs/5.1/content/reboot.md
@@ -433,7 +433,7 @@ The default `margin` on blockquotes is `1em 40px`, so we reset that to `0 0 1rem
The `<abbr>` element receives basic styling to make it stand out amongst paragraph text.
<div class="bd-example">
- Nulla <abbr title="attribute">attr</abbr> vitae elit libero, a pharetra augue.
+ The <abbr title="HyperText Markup Language">HTML</abbr> abbreviation element.
</div>
### Summary
diff --git a/site/content/docs/5.1/customize/optimize.md b/site/content/docs/5.1/customize/optimize.md
index 29b152154..fc61728ce 100644
--- a/site/content/docs/5.1/customize/optimize.md
+++ b/site/content/docs/5.1/customize/optimize.md
@@ -71,9 +71,9 @@ Lastly, this [CSS Tricks article on unused CSS](https://css-tricks.com/how-do-yo
Whenever possible, be sure to compress all the code you serve to your visitors. If you're using Bootstrap dist files, try to stick to the minified versions (indicated by the `.min.css` and `.min.js` extensions). If you're building Bootstrap from the source with your own build system, be sure to implement your own minifiers for HTML, CSS, and JS.
-## Nonblocking files
+## Non-blocking files
-While minifying and using compression might seem like enough, making your files nonblocking ones is also a big step in making your site well-optimized and fast enough.
+While minifying and using compression might seem like enough, making your files non-blocking ones is also a big step in making your site well-optimized and fast enough.
If you are using a [Lighthouse](https://developers.google.com/web/tools/lighthouse/) plugin in Google Chrome, you may have stumbled over FCP. [The First Contentful Paint](https://web.dev/fcp/) metric measures the time from when the page starts loading to when any part of the page's content is rendered on the screen.
diff --git a/site/content/docs/5.1/customize/sass.md b/site/content/docs/5.1/customize/sass.md
index 137f1cfd8..e00d1eeae 100644
--- a/site/content/docs/5.1/customize/sass.md
+++ b/site/content/docs/5.1/customize/sass.md
@@ -71,7 +71,7 @@ In your `custom.scss`, you'll import Bootstrap's source Sass files. You have two
@import "../node_modules/bootstrap/scss/grid";
@import "../node_modules/bootstrap/scss/helpers";
-// 5. Optionally include utilities API last to generate classes based on the Sass map in `_utililies.scss`
+// 5. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss`
@import "../node_modules/bootstrap/scss/utilities/api";
// 6. Add additional custom code here
diff --git a/site/content/docs/5.1/forms/checks-radios.md b/site/content/docs/5.1/forms/checks-radios.md
index 0f5507f54..efd040de0 100644
--- a/site/content/docs/5.1/forms/checks-radios.md
+++ b/site/content/docs/5.1/forms/checks-radios.md
@@ -102,23 +102,23 @@ Add the `disabled` attribute and the associated `<label>`s are automatically sty
## Switches
-A switch has the markup of a custom checkbox but uses the `.form-switch` class to render a toggle switch. Switches also support the `disabled` attribute.
+A switch has the markup of a custom checkbox but uses the `.form-switch` class to render a toggle switch. Consider using `role="switch"` to more accurately convey the nature of the control to assistive technologies that support this role. In older assistive technologies, it will simply be announced as a regular checkbox as a fallback. Switches also support the `disabled` attribute.
{{< example >}}
<div class="form-check form-switch">
- <input class="form-check-input" type="checkbox" id="flexSwitchCheckDefault">
+ <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDefault">
<label class="form-check-label" for="flexSwitchCheckDefault">Default switch checkbox input</label>
</div>
<div class="form-check form-switch">
- <input class="form-check-input" type="checkbox" id="flexSwitchCheckChecked" checked>
+ <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckChecked" checked>
<label class="form-check-label" for="flexSwitchCheckChecked">Checked switch checkbox input</label>
</div>
<div class="form-check form-switch">
- <input class="form-check-input" type="checkbox" id="flexSwitchCheckDisabled" disabled>
+ <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckDisabled" disabled>
<label class="form-check-label" for="flexSwitchCheckDisabled">Disabled switch checkbox input</label>
</div>
<div class="form-check form-switch">
- <input class="form-check-input" type="checkbox" id="flexSwitchCheckCheckedDisabled" checked disabled>
+ <input class="form-check-input" type="checkbox" role="switch" id="flexSwitchCheckCheckedDisabled" checked disabled>
<label class="form-check-label" for="flexSwitchCheckCheckedDisabled">Disabled checked switch checkbox input</label>
</div>
{{< /example >}}
diff --git a/site/content/docs/5.1/helpers/text-truncation.md b/site/content/docs/5.1/helpers/text-truncation.md
index a92a171fd..799f2059b 100644
--- a/site/content/docs/5.1/helpers/text-truncation.md
+++ b/site/content/docs/5.1/helpers/text-truncation.md
@@ -12,12 +12,12 @@ For longer content, you can add a `.text-truncate` class to truncate the text wi
<!-- Block level -->
<div class="row">
<div class="col-2 text-truncate">
- Praeterea iter est quasdam res quas ex communi.
+ This text is quite long, and will be truncated once displayed.
</div>
</div>
<!-- Inline level -->
<span class="d-inline-block text-truncate" style="max-width: 150px;">
- Praeterea iter est quasdam res quas ex communi.
+ This text is quite long, and will be truncated once displayed.
</span>
{{< /example >}}
generated by cgit v1.2.3 (git 2.25.1) at 2026-06-06 13:15:52 +0000