aboutsummaryrefslogtreecommitdiffstats
path: root/vendor/twbs/bootstrap/site/docs/4.5/components
diff options
context:
space:
mode:
authorMario Vavti <mario@mariovavti.com>2020-08-22 19:40:57 +0200
committerMario Vavti <mario@mariovavti.com>2020-08-22 19:40:57 +0200
commita9e19cb89ed08689dc58c92b3d5491318a703f0e (patch)
tree468e236e5cb4927a4fd01f650fab7ad9f6cfc895 /vendor/twbs/bootstrap/site/docs/4.5/components
parent48786119871aaf1029fac12a37d212afddafc757 (diff)
downloadvolse-hubzilla-a9e19cb89ed08689dc58c92b3d5491318a703f0e.tar.gz
volse-hubzilla-a9e19cb89ed08689dc58c92b3d5491318a703f0e.tar.bz2
volse-hubzilla-a9e19cb89ed08689dc58c92b3d5491318a703f0e.zip
composer update bootstrap
Diffstat (limited to 'vendor/twbs/bootstrap/site/docs/4.5/components')
-rw-r--r--vendor/twbs/bootstrap/site/docs/4.5/components/card.md42
-rw-r--r--vendor/twbs/bootstrap/site/docs/4.5/components/forms.md26
-rw-r--r--vendor/twbs/bootstrap/site/docs/4.5/components/input-group.md13
-rw-r--r--vendor/twbs/bootstrap/site/docs/4.5/components/modal.md36
-rw-r--r--vendor/twbs/bootstrap/site/docs/4.5/components/navbar.md8
-rw-r--r--vendor/twbs/bootstrap/site/docs/4.5/components/navs.md32
-rw-r--r--vendor/twbs/bootstrap/site/docs/4.5/components/toasts.md2
7 files changed, 102 insertions, 57 deletions
diff --git a/vendor/twbs/bootstrap/site/docs/4.5/components/card.md b/vendor/twbs/bootstrap/site/docs/4.5/components/card.md
index 818396127..18e1c0fab 100644
--- a/vendor/twbs/bootstrap/site/docs/4.5/components/card.md
+++ b/vendor/twbs/bootstrap/site/docs/4.5/components/card.md
@@ -107,6 +107,20 @@ Create lists of content in a card with a flush list group.
{% endcapture %}
{% include example.html content=example %}
+{% capture example %}
+<div class="card" style="width: 18rem;">
+ <ul class="list-group list-group-flush">
+ <li class="list-group-item">Cras justo odio</li>
+ <li class="list-group-item">Dapibus ac facilisis in</li>
+ <li class="list-group-item">Vestibulum at eros</li>
+ </ul>
+ <div class="card-footer">
+ Card footer
+ </div>
+</div>
+{% endcapture %}
+{% include example.html content=example %}
+
### Kitchen sink
Mix and match multiple content types to create the card you need, or throw everything in there. Shown below are image styles, blocks, text styles, and a list group—all wrapped in a fixed-width card.
@@ -356,9 +370,28 @@ Cards include a few options for working with images. Choose from appending "imag
Similar to headers and footers, cards can include top and bottom "image caps"—images at the top or bottom of a card.
-{% capture example %}
+<div class="bd-example">
+ <div class="card mb-3">
+ {% include icons/placeholder.svg width="100%" height="180" class="card-img-top" text="Image cap" %}
+ <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>
+ </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>
+ </div>
+ {% include icons/placeholder.svg width="100%" height="180" class="card-img-bottom" text="Image cap" %}
+ </div>
+</div>
+
+{% highlight html %}
<div class="card mb-3">
- {% include icons/placeholder.svg width="100%" height="180" class="card-img-top" text="Image cap" %}
+ <img src="..." class="card-img-top" alt="...">
<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>
@@ -371,10 +404,9 @@ Similar to headers and footers, cards can include top and bottom "image caps"—
<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>
</div>
- {% include icons/placeholder.svg width="100%" height="180" class="card-img-bottom" text="Image cap" %}
+ <img src="..." class="card-img-bottom" alt="...">
</div>
-{% endcapture %}
-{% include example.html content=example %}
+{% endhighlight %}
### Image overlays
diff --git a/vendor/twbs/bootstrap/site/docs/4.5/components/forms.md b/vendor/twbs/bootstrap/site/docs/4.5/components/forms.md
index 651046c27..4a8f62947 100644
--- a/vendor/twbs/bootstrap/site/docs/4.5/components/forms.md
+++ b/vendor/twbs/bootstrap/site/docs/4.5/components/forms.md
@@ -258,7 +258,7 @@ Group checkboxes or radios on the same horizontal row by adding `.form-check-inl
### Without labels
-Add `.position-static` to inputs within `.form-check` that don't have any label text. Remember to still provide some form of label for assistive technologies (for instance, using `aria-label`).
+Add `.position-static` to inputs within `.form-check` that don't have any label text. Remember to still provide some form of accessible name for assistive technologies (for instance, using `aria-label`).
{% capture example %}
<div class="form-check">
@@ -732,7 +732,9 @@ Add the `disabled` attribute to a `<fieldset>` to disable all the controls withi
{% capture callout %}
##### Caveat with anchors
-By default, browsers will treat all native form controls (`<input>`, `<select>` and `<button>` elements) inside a `<fieldset disabled>` as disabled, preventing both keyboard and mouse interactions on them. However, if your form also includes `<a ... class="btn btn-*">` elements, these will only be given a style of `pointer-events: none`. As noted in the section about [disabled state for buttons]({{ site.baseurl }}/docs/{{ site.docs_version }}/components/buttons/#disabled-state) (and specifically in the sub-section for anchor elements), this CSS property is not yet standardized and isn't fully supported in Internet Explorer 10, and won't prevent keyboard users from being able to focus or activate these links. So to be safe, use custom JavaScript to disable such links.
+Browsers treat all native form controls (`<input>`, `<select>`, and `<button>` elements) inside a `<fieldset disabled>` as disabled, preventing both keyboard and mouse interactions on them.
+
+However, if your form also includes custom button-like elements such as `<a ... class="btn btn-*">`, these will only be given a style of `pointer-events: none`. As noted in the section about [disabled state for buttons]({{ site.baseurl }}/docs/{{ site.docs_version }}/components/buttons/#disabled-state) (and specifically in the sub-section for anchor elements), this CSS property is not yet standardized and isn't fully supported in Internet Explorer 10. The anchor-based controls will also still be focusable and operable using the keyboard. You must manually modify these controls by adding `tabindex="-1"` to prevent them from receiving focus and `aria-disabled="disabled"` to signal their state to assistive technologies.
{% endcapture %}
{% include callout.html content=callout type="warning" %}
@@ -748,7 +750,7 @@ While Bootstrap will apply these styles in all browsers, Internet Explorer 11 an
Provide valuable, actionable feedback to your users with HTML5 form validation–[available in all our supported browsers](https://caniuse.com/#feat=form-validation). Choose from the browser default validation feedback, or implement custom messages with our built-in classes and starter JavaScript.
{% capture callout %}
-We currently recommend using custom validation styles, as native browser default validation messages are not consistently exposed to assistive technologies in all browsers (most notably, Chrome on desktop and mobile).
+We are aware that currently the client-side custom validation styles and tooltips are not accessible, since they are not exposed to assistive technologies. While we work on a solution, we'd recommend either using the server-side option or the default browser validation method.
{% endcapture %}
{% include callout.html content=callout type="warning" %}
@@ -912,6 +914,8 @@ While these feedback styles cannot be styled with CSS, you can still customize t
We recommend using client-side validation, but in case you require server-side validation, you can indicate invalid and valid form fields with `.is-invalid` and `.is-valid`. Note that `.invalid-feedback` is also supported with these classes.
+For invalid fields, ensure that the invalid feedback/error message is associated with the relevant form field using `aria-describedby`. This attribute allows more than one `id` to be referenced, in case the field already points to additional form text.
+
{% capture example %}
<form>
<div class="form-row">
@@ -933,36 +937,36 @@ We recommend using client-side validation, but in case you require server-side v
<div class="form-row">
<div class="col-md-6 mb-3">
<label for="validationServer03">City</label>
- <input type="text" class="form-control is-invalid" id="validationServer03" required>
- <div class="invalid-feedback">
+ <input type="text" class="form-control is-invalid" id="validationServer03" aria-describedby="validationServer03Feedback" required>
+ <div id="validationServer03Feedback" class="invalid-feedback">
Please provide a valid city.
</div>
</div>
<div class="col-md-3 mb-3">
<label for="validationServer04">State</label>
- <select class="custom-select is-invalid" id="validationServer04" required>
+ <select class="custom-select is-invalid" id="validationServer04" aria-describedby="validationServer04Feedback" required>
<option selected disabled value="">Choose...</option>
<option>...</option>
</select>
- <div class="invalid-feedback">
+ <div id="validationServer04Feedback" class="invalid-feedback">
Please select a valid state.
</div>
</div>
<div class="col-md-3 mb-3">
<label for="validationServer05">Zip</label>
- <input type="text" class="form-control is-invalid" id="validationServer05" required>
- <div class="invalid-feedback">
+ <input type="text" class="form-control is-invalid" id="validationServer05" aria-describedby="validationServer05Feedback" required>
+ <div id="validationServer05Feedback" class="invalid-feedback">
Please provide a valid zip.
</div>
</div>
</div>
<div class="form-group">
<div class="form-check">
- <input class="form-check-input is-invalid" type="checkbox" value="" id="invalidCheck3" required>
+ <input class="form-check-input is-invalid" type="checkbox" value="" id="invalidCheck3" aria-describedby="invalidCheck3Feedback" required>
<label class="form-check-label" for="invalidCheck3">
Agree to terms and conditions
</label>
- <div class="invalid-feedback">
+ <div id="invalidCheck3Feedback" class="invalid-feedback">
You must agree before submitting.
</div>
</div>
diff --git a/vendor/twbs/bootstrap/site/docs/4.5/components/input-group.md b/vendor/twbs/bootstrap/site/docs/4.5/components/input-group.md
index cdbfa794a..606bf4b75 100644
--- a/vendor/twbs/bootstrap/site/docs/4.5/components/input-group.md
+++ b/vendor/twbs/bootstrap/site/docs/4.5/components/input-group.md
@@ -370,6 +370,15 @@ Input groups include support for custom selects and custom file inputs. Browser
## Accessibility
-Screen readers will have trouble with your forms if you don't include a label for every input. For these input groups, ensure that any additional label or functionality is conveyed to assistive technologies.
+Ensure that all form controls have an appropriate accessible name so that their purpose can be conveyed to users of assistive technologies. The simplest way to achieve this is to use a `<label>` element, or—in the case of buttons—to include sufficiently descriptive text as part of the `<button>...</button>` content.
-The exact technique to be used (`<label>` elements hidden using the `.sr-only` class, or use of the `aria-label` and `aria-labelledby` attributes, possibly in combination with `aria-describedby`) and what additional information will need to be conveyed will vary depending on the exact type of interface widget you're implementing. The examples in this section provide a few suggested, case-specific approaches.
+For situations where it's not possible to include a visible `<label>` or appropriate text content, there are alternative ways of still providing an accessible name, such as:
+
+- `<label>` elements hidden using the `.visually-hidden` class
+- Pointing to an existing element that can act as a label using `aria-labelledby`
+- Providing a `title` attribute
+- Explicitly setting the accessible name on an element using `aria-label`
+
+If none of these are present, assistive technologies may resort to using the `placeholder` attribute as a fallback for the accessible name on `<input>` and `<textarea>` elements. The examples in this section provide a few suggested, case-specific approaches.
+
+While using visually hidden content (`.sr-only`, `aria-label`, and even `placeholder` content, which disappears once a form field has content) will benefit assistive technology users, a lack of visible label text may still be problematic for certain users. Some form of visible label is generally the best approach, both for accessibility and usability.
diff --git a/vendor/twbs/bootstrap/site/docs/4.5/components/modal.md b/vendor/twbs/bootstrap/site/docs/4.5/components/modal.md
index 9766766c7..9e1ac736f 100644
--- a/vendor/twbs/bootstrap/site/docs/4.5/components/modal.md
+++ b/vendor/twbs/bootstrap/site/docs/4.5/components/modal.md
@@ -34,7 +34,7 @@ Keep reading for demos and usage guidelines.
Below is a _static_ modal example (meaning its `position` and `display` have been overridden). Included are the modal header, modal body (required for `padding`), and modal footer (optional). We ask that you include modal headers with dismiss actions whenever possible, or provide another explicit dismiss action.
<div class="bd-example bd-example-modal">
- <div class="modal" tabindex="-1" role="dialog">
+ <div class="modal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
@@ -56,7 +56,7 @@ Below is a _static_ modal example (meaning its `position` and `display` have bee
</div>
{% highlight html %}
-<div class="modal" tabindex="-1" role="dialog">
+<div class="modal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
@@ -81,7 +81,7 @@ Below is a _static_ modal example (meaning its `position` and `display` have bee
Toggle a working modal demo by clicking the button below. It will slide down and fade in from the top of the page.
-<div class="modal fade" id="exampleModalLive" tabindex="-1" role="dialog" aria-labelledby="exampleModalLiveLabel" aria-hidden="true">
+<div class="modal fade" id="exampleModalLive" tabindex="-1" aria-labelledby="exampleModalLiveLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
@@ -114,7 +114,7 @@ Toggle a working modal demo by clicking the button below. It will slide down and
</button>
<!-- Modal -->
-<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
+<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
@@ -139,7 +139,7 @@ Toggle a working modal demo by clicking the button below. It will slide down and
When backdrop is set to static, the modal will not close when clicking outside it. Click the button below to try it.
-<div class="modal fade" id="staticBackdropLive" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLiveLabel" aria-hidden="true">
+<div class="modal fade" id="staticBackdropLive" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLiveLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
@@ -172,7 +172,7 @@ When backdrop is set to static, the modal will not close when clicking outside i
</button>
<!-- Modal -->
-<div class="modal fade" id="staticBackdrop" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog" aria-labelledby="staticBackdropLabel" aria-hidden="true">
+<div class="modal fade" id="staticBackdrop" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
@@ -198,7 +198,7 @@ When backdrop is set to static, the modal will not close when clicking outside i
When modals become too long for the user's viewport or device, they scroll independent of the page itself. Try the demo below to see what we mean.
-<div class="modal fade" id="exampleModalLong" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
+<div class="modal fade" id="exampleModalLong" tabindex="-1" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
@@ -243,7 +243,7 @@ When modals become too long for the user's viewport or device, they scroll indep
You can also create a scrollable modal that allows scroll the modal body by adding `.modal-dialog-scrollable` to `.modal-dialog`.
-<div class="modal fade" id="exampleModalScrollable" tabindex="-1" role="dialog" aria-labelledby="exampleModalScrollableTitle" aria-hidden="true">
+<div class="modal fade" id="exampleModalScrollable" tabindex="-1" aria-labelledby="exampleModalScrollableTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
@@ -297,7 +297,7 @@ You can also create a scrollable modal that allows scroll the modal body by addi
Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
-<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
+<div class="modal fade" id="exampleModalCenter" tabindex="-1" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
@@ -317,7 +317,7 @@ Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
</div>
</div>
-<div class="modal fade" id="exampleModalCenteredScrollable" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenteredScrollableTitle" aria-hidden="true">
+<div class="modal fade" id="exampleModalCenteredScrollable" tabindex="-1" aria-labelledby="exampleModalCenteredScrollableTitle" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-dialog-scrollable">
<div class="modal-content">
<div class="modal-header">
@@ -366,7 +366,7 @@ Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
[Tooltips]({{ site.baseurl }}/docs/{{ site.docs_version }}/components/tooltips/) and [popovers]({{ site.baseurl }}/docs/{{ site.docs_version }}/components/popovers/) can be placed within modals as needed. When modals are closed, any tooltips and popovers within are also automatically dismissed.
-<div class="modal fade" id="exampleModalPopovers" tabindex="-1" role="dialog" aria-labelledby="exampleModalPopoversLabel" aria-hidden="true">
+<div class="modal fade" id="exampleModalPopovers" tabindex="-1" aria-labelledby="exampleModalPopoversLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
@@ -410,7 +410,7 @@ Add `.modal-dialog-centered` to `.modal-dialog` to vertically center the modal.
Utilize the Bootstrap grid system within a modal by nesting `.container-fluid` within the `.modal-body`. Then, use the normal grid system classes as you would anywhere else.
-<div class="modal fade" id="gridSystemModal" tabindex="-1" role="dialog" aria-labelledby="gridModalLabel" aria-hidden="true">
+<div class="modal fade" id="gridSystemModal" tabindex="-1" aria-labelledby="gridModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
@@ -501,7 +501,7 @@ Below is a live demo followed by example HTML and JavaScript. For more informati
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@fat">Open modal for @fat</button>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@getbootstrap">Open modal for @getbootstrap</button>
-<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
+<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
@@ -555,7 +555,7 @@ If you want for example a zoom-in animation, you can set `$modal-fade-transform:
For modals that simply appear rather than fade in to view, remove the `.fade` class from your modal markup.
{% highlight html %}
-<div class="modal" tabindex="-1" role="dialog" aria-labelledby="..." aria-hidden="true">
+<div class="modal" tabindex="-1" aria-labelledby="..." aria-hidden="true">
...
</div>
{% endhighlight %}
@@ -566,7 +566,7 @@ If the height of a modal changes while it is open, you should call `$('#myModal'
### Accessibility
-Be sure to add `role="dialog"` and `aria-labelledby="..."`, referencing the modal title, to `.modal`. Additionally, you may give a description of your modal dialog with `aria-describedby` on `.modal`.
+Be sure to add `aria-labelledby="..."`, referencing the modal title, to `.modal`. Additionally, you may give a description of your modal dialog with `aria-describedby` on `.modal`. Note that you don't need to add `role="dialog"` since we already add it via JavaScript.
### Embedding YouTube videos
@@ -622,7 +622,7 @@ Our default modal without modifier class constitutes the "medium" size modal.
<div class="modal-dialog modal-sm">...</div>
{% endhighlight %}
-<div class="modal fade" id="exampleModalXl" tabindex="-1" role="dialog" aria-labelledby="exampleModalXlLabel" aria-hidden="true">
+<div class="modal fade" id="exampleModalXl" tabindex="-1" aria-labelledby="exampleModalXlLabel" aria-hidden="true">
<div class="modal-dialog modal-xl">
<div class="modal-content">
@@ -639,7 +639,7 @@ Our default modal without modifier class constitutes the "medium" size modal.
</div>
</div>
-<div class="modal fade" id="exampleModalLg" tabindex="-1" role="dialog" aria-labelledby="exampleModalLgLabel" aria-hidden="true">
+<div class="modal fade" id="exampleModalLg" tabindex="-1" aria-labelledby="exampleModalLgLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
@@ -656,7 +656,7 @@ Our default modal without modifier class constitutes the "medium" size modal.
</div>
</div>
-<div class="modal fade" id="exampleModalSm" tabindex="-1" role="dialog" aria-labelledby="exampleModalSmLabel" aria-hidden="true">
+<div class="modal fade" id="exampleModalSm" tabindex="-1" aria-labelledby="exampleModalSmLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
diff --git a/vendor/twbs/bootstrap/site/docs/4.5/components/navbar.md b/vendor/twbs/bootstrap/site/docs/4.5/components/navbar.md
index 69df11b34..4d26be319 100644
--- a/vendor/twbs/bootstrap/site/docs/4.5/components/navbar.md
+++ b/vendor/twbs/bootstrap/site/docs/4.5/components/navbar.md
@@ -157,10 +157,10 @@ And because we use classes for our navs, you can avoid the list-based approach e
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
- <a class="nav-item nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
- <a class="nav-item nav-link" href="#">Features</a>
- <a class="nav-item nav-link" href="#">Pricing</a>
- <a class="nav-item nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
+ <a class="nav-link active" href="#">Home <span class="sr-only">(current)</span></a>
+ <a class="nav-link" href="#">Features</a>
+ <a class="nav-link" href="#">Pricing</a>
+ <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</div>
</div>
</nav>
diff --git a/vendor/twbs/bootstrap/site/docs/4.5/components/navs.md b/vendor/twbs/bootstrap/site/docs/4.5/components/navs.md
index 0787632be..4bcf2e320 100644
--- a/vendor/twbs/bootstrap/site/docs/4.5/components/navs.md
+++ b/vendor/twbs/bootstrap/site/docs/4.5/components/navs.md
@@ -195,14 +195,14 @@ Force your `.nav`'s contents to extend the full available width one of two modif
{% endcapture %}
{% include example.html content=example %}
-When using a `<nav>`-based navigation, be sure to include `.nav-item` on the anchors.
+When using a `<nav>`-based navigation, you can safely omit `.nav-item` as only `.nav-link` is required for styling `<a>` elements.
{% capture example %}
<nav class="nav nav-pills nav-fill">
- <a class="nav-item nav-link active" href="#">Active</a>
- <a class="nav-item nav-link" href="#">Much longer nav link</a>
- <a class="nav-item nav-link" href="#">Link</a>
- <a class="nav-item nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
+ <a class="nav-link active" href="#">Active</a>
+ <a class="nav-link" href="#">Much longer nav link</a>
+ <a class="nav-link" href="#">Link</a>
+ <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>
{% endcapture %}
{% include example.html content=example %}
@@ -227,14 +227,14 @@ For equal-width elements, use `.nav-justified`. All horizontal space will be occ
{% endcapture %}
{% include example.html content=example %}
-Similar to the `.nav-fill` example using a `<nav>`-based navigation, be sure to include `.nav-item` on the anchors.
+Similar to the `.nav-fill` example using a `<nav>`-based navigation.
{% capture example %}
<nav class="nav nav-pills nav-justified">
- <a class="nav-item nav-link active" href="#">Active</a>
- <a class="nav-item nav-link" href="#">Much longer nav link</a>
- <a class="nav-item nav-link" href="#">Link</a>
- <a class="nav-item nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
+ <a class="nav-link active" href="#">Active</a>
+ <a class="nav-link" href="#">Much longer nav link</a>
+ <a class="nav-link" href="#">Link</a>
+ <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>
{% endcapture %}
@@ -376,9 +376,9 @@ To help fit your needs, this works with `<ul>`-based markup, as shown above, or
<div class="bd-example bd-example-tabs">
<nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
- <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
- <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
- <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>
+ <a class="nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
+ <a class="nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
+ <a class="nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>
</div>
</nav>
<div class="tab-content" id="nav-tabContent">
@@ -397,9 +397,9 @@ To help fit your needs, this works with `<ul>`-based markup, as shown above, or
{% highlight html %}
<nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
- <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
- <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
- <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>
+ <a class="nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
+ <a class="nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
+ <a class="nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>
</div>
</nav>
<div class="tab-content" id="nav-tabContent">
diff --git a/vendor/twbs/bootstrap/site/docs/4.5/components/toasts.md b/vendor/twbs/bootstrap/site/docs/4.5/components/toasts.md
index 58b5cb5ca..7ef36c7f7 100644
--- a/vendor/twbs/bootstrap/site/docs/4.5/components/toasts.md
+++ b/vendor/twbs/bootstrap/site/docs/4.5/components/toasts.md
@@ -167,7 +167,7 @@ You can also get fancy with flexbox utilities to align toasts horizontally and/o
{% capture example %}
<!-- Flexbox container for aligning the toasts -->
-<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center" style="min-height: 200px;">
+<div aria-live="polite" aria-atomic="true" class="d-flex justify-content-center align-items-center" style="height: 200px;">
<!-- Then put toasts within -->
<div class="toast" role="alert" aria-live="assertive" aria-atomic="true">