aboutsummaryrefslogtreecommitdiff
path: root/docs/components
diff options
context:
space:
mode:
Diffstat (limited to 'docs/components')
-rw-r--r--docs/components/button-dropdown.md130
-rw-r--r--docs/components/button-group.md20
-rw-r--r--docs/components/buttons.md4
-rw-r--r--docs/components/carousel.md2
-rw-r--r--docs/components/dropdowns.md74
-rw-r--r--docs/components/forms.md3
-rw-r--r--docs/components/input-group.md28
-rw-r--r--docs/components/list-group.md14
-rw-r--r--docs/components/modal.md16
-rw-r--r--docs/components/navs.md82
-rw-r--r--docs/components/popovers.md24
-rw-r--r--docs/components/scrollspy.md16
-rw-r--r--docs/components/tables.md2
-rw-r--r--docs/components/tooltips.md28
14 files changed, 230 insertions, 213 deletions
diff --git a/docs/components/button-dropdown.md b/docs/components/button-dropdown.md
index 2e7b9d8de..be54bff7f 100644
--- a/docs/components/button-dropdown.md
+++ b/docs/components/button-dropdown.md
@@ -22,62 +22,62 @@ Turn a button into a dropdown toggle with some basic markup changes.
<div class="bd-example">
<div class="btn-group">
- <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Default</button>
- <ul class="dropdown-menu" role="menu">
+ <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Default</button>
+ <ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
- <li class="divider"></li>
+ <li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<div class="btn-group">
- <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Primary</button>
- <ul class="dropdown-menu" role="menu">
+ <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Primary</button>
+ <ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
- <li class="divider"></li>
+ <li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<div class="btn-group">
- <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Success</button>
- <ul class="dropdown-menu" role="menu">
+ <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Success</button>
+ <ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
- <li class="divider"></li>
+ <li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<div class="btn-group">
- <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Info</button>
- <ul class="dropdown-menu" role="menu">
+ <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Info</button>
+ <ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
- <li class="divider"></li>
+ <li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<div class="btn-group">
- <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Warning</button>
- <ul class="dropdown-menu" role="menu">
+ <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Warning</button>
+ <ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
- <li class="divider"></li>
+ <li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<div class="btn-group">
- <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Danger</button>
- <ul class="dropdown-menu" role="menu">
+ <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Danger</button>
+ <ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
- <li class="divider"></li>
+ <li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
@@ -86,14 +86,14 @@ Turn a button into a dropdown toggle with some basic markup changes.
{% highlight html %}
<!-- Single button -->
<div class="btn-group">
- <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
+ <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Action
</button>
- <ul class="dropdown-menu" role="menu">
+ <ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
- <li class="divider"></li>
+ <li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
@@ -106,79 +106,79 @@ Similarly, create split button dropdowns with the same markup changes, only with
<div class="bd-example">
<div class="btn-group">
<button type="button" class="btn btn-secondary">Default</button>
- <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
+ <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
- <ul class="dropdown-menu" role="menu">
+ <ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
- <li class="divider"></li>
+ <li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<div class="btn-group">
<button type="button" class="btn btn-primary">Primary</button>
- <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
+ <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
- <ul class="dropdown-menu" role="menu">
+ <ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
- <li class="divider"></li>
+ <li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<div class="btn-group">
<button type="button" class="btn btn-success">Success</button>
- <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
+ <button type="button" class="btn btn-success dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
- <ul class="dropdown-menu" role="menu">
+ <ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
- <li class="divider"></li>
+ <li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<div class="btn-group">
<button type="button" class="btn btn-info">Info</button>
- <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
+ <button type="button" class="btn btn-info dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
- <ul class="dropdown-menu" role="menu">
+ <ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
- <li class="divider"></li>
+ <li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<div class="btn-group">
<button type="button" class="btn btn-warning">Warning</button>
- <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
+ <button type="button" class="btn btn-warning dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
- <ul class="dropdown-menu" role="menu">
+ <ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
- <li class="divider"></li>
+ <li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<div class="btn-group">
<button type="button" class="btn btn-danger">Danger</button>
- <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
+ <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
- <ul class="dropdown-menu" role="menu">
+ <ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
- <li class="divider"></li>
+ <li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
@@ -188,14 +188,14 @@ Similarly, create split button dropdowns with the same markup changes, only with
<!-- Split button -->
<div class="btn-group">
<button type="button" class="btn btn-danger">Action</button>
- <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
+ <button type="button" class="btn btn-danger dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
- <ul class="dropdown-menu" role="menu">
+ <ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
- <li class="divider"></li>
+ <li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
@@ -208,42 +208,42 @@ Button dropdowns work with buttons of all sizes.
<div class="bd-example">
<div class="btn-toolbar" role="toolbar">
<div class="btn-group">
- <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
+ <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Large button
</button>
- <ul class="dropdown-menu" role="menu">
+ <ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
- <li class="divider"></li>
+ <li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
</div><!-- /btn-toolbar -->
<div class="btn-toolbar" role="toolbar">
<div class="btn-group">
- <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
+ <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Small button
</button>
- <ul class="dropdown-menu" role="menu">
+ <ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
- <li class="divider"></li>
+ <li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
</div><!-- /btn-toolbar -->
<div class="btn-toolbar" role="toolbar">
<div class="btn-group">
- <button class="btn btn-secondary btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
+ <button class="btn btn-secondary btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Extra small button
</button>
- <ul class="dropdown-menu" role="menu">
+ <ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
- <li class="divider"></li>
+ <li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
@@ -253,30 +253,30 @@ Button dropdowns work with buttons of all sizes.
{% highlight html %}
<!-- Large button group -->
<div class="btn-group">
- <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
+ <button class="btn btn-secondary btn-lg dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Large button
</button>
- <ul class="dropdown-menu" role="menu">
+ <ul class="dropdown-menu">
...
</ul>
</div>
<!-- Small button group -->
<div class="btn-group">
- <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
+ <button class="btn btn-secondary btn-sm dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Small button
</button>
- <ul class="dropdown-menu" role="menu">
+ <ul class="dropdown-menu">
...
</ul>
</div>
<!-- Extra small button group -->
<div class="btn-group">
- <button class="btn btn-secondary btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
+ <button class="btn btn-secondary btn-xs dropdown-toggle" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Extra small button
</button>
- <ul class="dropdown-menu" role="menu">
+ <ul class="dropdown-menu">
...
</ul>
</div>
@@ -290,27 +290,27 @@ Trigger dropdown menus above elements by adding `.dropup` to the parent.
<div class="btn-toolbar" role="toolbar">
<div class="btn-group dropup">
<button type="button" class="btn btn-secondary">Dropup</button>
- <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
+ <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
- <ul class="dropdown-menu" role="menu">
+ <ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
- <li class="divider"></li>
+ <li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
<div class="btn-group dropup">
<button type="button" class="btn btn-primary">Right dropup</button>
- <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
+ <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
- <ul class="dropdown-menu dropdown-menu-right" role="menu">
+ <ul class="dropdown-menu dropdown-menu-right">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
- <li class="divider"></li>
+ <li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div><!-- /btn-group -->
@@ -320,10 +320,10 @@ Trigger dropdown menus above elements by adding `.dropup` to the parent.
{% highlight html %}
<div class="btn-group dropup">
<button type="button" class="btn btn-secondary">Dropup</button>
- <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
+ <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
- <ul class="dropdown-menu" role="menu">
+ <ul class="dropdown-menu">
<!-- Dropdown menu links -->
</ul>
</div>
diff --git a/docs/components/button-group.md b/docs/components/button-group.md
index 979dac1c1..6629ce6f4 100644
--- a/docs/components/button-group.md
+++ b/docs/components/button-group.md
@@ -106,10 +106,10 @@ Place a `.btn-group` within another `.btn-group` when you want dropdown menus mi
<button type="button" class="btn btn-secondary">2</button>
<div class="btn-group" role="group">
- <button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
+ <button id="btnGroupDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
- <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupDrop1">
+ <ul class="dropdown-menu" aria-labelledby="btnGroupDrop1">
<li><a href="#">Dropdown link</a></li>
<li><a href="#">Dropdown link</a></li>
</ul>
@@ -126,10 +126,10 @@ Make a set of buttons appear vertically stacked rather than horizontally. **Spli
<button type="button" class="btn btn-secondary">Button</button>
<button type="button" class="btn btn-secondary">Button</button>
<div class="btn-group" role="group">
- <button id="btnGroupVerticalDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
+ <button id="btnGroupVerticalDrop1" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
- <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop1">
+ <ul class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop1">
<li><a href="#">Dropdown link</a></li>
<li><a href="#">Dropdown link</a></li>
</ul>
@@ -137,28 +137,28 @@ Make a set of buttons appear vertically stacked rather than horizontally. **Spli
<button type="button" class="btn btn-secondary">Button</button>
<button type="button" class="btn btn-secondary">Button</button>
<div class="btn-group" role="group">
- <button id="btnGroupVerticalDrop2" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
+ <button id="btnGroupVerticalDrop2" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
- <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop2">
+ <ul class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop2">
<li><a href="#">Dropdown link</a></li>
<li><a href="#">Dropdown link</a></li>
</ul>
</div>
<div class="btn-group" role="group">
- <button id="btnGroupVerticalDrop3" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
+ <button id="btnGroupVerticalDrop3" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
- <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop3">
+ <ul class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop3">
<li><a href="#">Dropdown link</a></li>
<li><a href="#">Dropdown link</a></li>
</ul>
</div>
<div class="btn-group" role="group">
- <button id="btnGroupVerticalDrop4" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
+ <button id="btnGroupVerticalDrop4" type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
- <ul class="dropdown-menu" role="menu" aria-labelledby="btnGroupVerticalDrop4">
+ <ul class="dropdown-menu" aria-labelledby="btnGroupVerticalDrop4">
<li><a href="#">Dropdown link</a></li>
<li><a href="#">Dropdown link</a></li>
</ul>
diff --git a/docs/components/buttons.md b/docs/components/buttons.md
index 4d2fc47be..a345dffdf 100644
--- a/docs/components/buttons.md
+++ b/docs/components/buttons.md
@@ -130,6 +130,8 @@ Do more with buttons. Control button states or create groups of buttons for more
Use JavaScript to change the text and "state" of a particular button. For the sake of this demonstration, we are using `data-loading-text` and `$().button('loading')`, but that's not the only state you can use. [Custom strings of text](#buttons-methods) can also be used with `$().button(string)`.
+**This feature is deprecated since v3.3.5 and will be removed in v4.**
+
**Heads up!** You'll likely need to work around Firefox's [persisted form control states across page loads bug](https://github.com/twbs/bootstrap/issues/793) (e.g., disabled and checked states) with `autocomplete="off"`. See [Mozilla bug #654072](https://bugzilla.mozilla.org/show_bug.cgi?id=654072) for details.
{% example html %}
@@ -199,7 +201,7 @@ Toggles push state. Gives the button the appearance that it has been activated.
#### $().button('reset')
-Resets button state—swaps text to original text.
+Resets button state—swaps text to original text. **This method is asynchronous and returns before the resetting has actually completed.**
#### $().button(string)
diff --git a/docs/components/carousel.md b/docs/components/carousel.md
index 0beb89f1c..573c6ab79 100644
--- a/docs/components/carousel.md
+++ b/docs/components/carousel.md
@@ -80,7 +80,7 @@ Add captions to your slides easily with the `.carousel-caption` element within a
</div>
</div>
<div class="carousel-item">
- <img data-src="holder.js/900x500/auto/#555:#5555" alt="Third slide image">
+ <img data-src="holder.js/900x500/auto/#555:#555" alt="Third slide image">
<div class="carousel-caption">
<h3>Third slide label</h3>
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
diff --git a/docs/components/dropdowns.md b/docs/components/dropdowns.md
index f806f9256..c0b6b73f0 100644
--- a/docs/components/dropdowns.md
+++ b/docs/components/dropdowns.md
@@ -16,18 +16,18 @@ Wrap the dropdown's trigger and the dropdown menu within `.dropdown`, or another
{% example html %}
<div class="dropdown">
- <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown">
+ <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</button>
- <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
- <li role="presentation">
- <a role="menuitem" tabindex="-1" href="#">Action</a>
+ <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
+ <li>
+ <a href="#">Action</a>
</li>
- <li role="presentation">
- <a role="menuitem" tabindex="-1" href="#">Another action</a>
+ <li>
+ <a href="#">Another action</a>
</li>
- <li role="presentation">
- <a role="menuitem" tabindex="-1" href="#">Something else here</a>
+ <li>
+ <a href="#">Something else here</a>
</li>
</ul>
</div>
@@ -44,7 +44,7 @@ Dropdowns are automatically positioned via CSS within the normal flow of the doc
{% endcallout %}
{% highlight html %}
-<ul class="dropdown-menu dropdown-menu-right" role="menu" aria-labelledby="dLabel">
+<ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dLabel">
...
</ul>
{% endhighlight %}
@@ -54,13 +54,13 @@ Dropdowns are automatically positioned via CSS within the normal flow of the doc
Add a header to label sections of actions in any dropdown menu.
{% example html %}
-<ul class="dropdown-menu" role="menu">
- <li role="presentation" class="dropdown-header">Dropdown header</li>
- <li role="presentation">
- <a role="menuitem" tabindex="-1" href="#">Action</a>
+<ul class="dropdown-menu">
+ <li class="dropdown-header">Dropdown header</li>
+ <li>
+ <a href="#">Action</a>
</li>
- <li role="presentation">
- <a role="menuitem" tabindex="-1" href="#">Another action</a>
+ <li>
+ <a href="#">Another action</a>
</li>
</ul>
{% endexample %}
@@ -70,19 +70,19 @@ Add a header to label sections of actions in any dropdown menu.
Separate groups of related menu items with a divider.
{% example html %}
-<ul class="dropdown-menu" role="menu">
- <li role="presentation">
- <a role="menuitem" tabindex="-1" href="#">Action</a>
+<ul class="dropdown-menu">
+ <li>
+ <a href="#">Action</a>
</li>
- <li role="presentation">
- <a role="menuitem" tabindex="-1" href="#">Another action</a>
+ <li>
+ <a href="#">Another action</a>
</li>
- <li role="presentation">
- <a role="menuitem" tabindex="-1" href="#">Something else here</a>
+ <li>
+ <a href="#">Something else here</a>
</li>
- <li role="presentation" class="dropdown-divider"></li>
- <li role="presentation">
- <a role="menuitem" tabindex="-1" href="#">Separated link</a>
+ <li class="dropdown-divider"></li>
+ <li>
+ <a href="#">Separated link</a>
</li>
</ul>
{% endexample %}
@@ -92,15 +92,15 @@ Separate groups of related menu items with a divider.
Add `.disabled` to a `<li>` in the dropdown to disable the link.
{% example html %}
-<ul class="dropdown-menu" role="menu">
- <li role="presentation">
- <a role="menuitem" tabindex="-1" href="#">Regular link</a>
+<ul class="dropdown-menu">
+ <li>
+ <a href="#">Regular link</a>
</li>
- <li role="presentation" class="disabled">
- <a role="menuitem" tabindex="-1" href="#">Disabled link</a>
+ <li class="disabled">
+ <a href="#">Disabled link</a>
</li>
- <li role="presentation">
- <a role="menuitem" tabindex="-1" href="#">Another link</a>
+ <li>
+ <a href="#">Another link</a>
</li>
</ul>
{% endexample %}
@@ -119,11 +119,10 @@ Add `data-toggle="dropdown"` to a link or button to toggle a dropdown.
{% highlight html %}
<div class="dropdown">
- <button id="dLabel" type="button" data-toggle="dropdown">
+ <button id="dLabel" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown trigger
- <span class="caret"></span>
</button>
- <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
+ <ul class="dropdown-menu" aria-labelledby="dLabel">
...
</ul>
</div>
@@ -133,12 +132,11 @@ To keep URLs intact with link buttons, use the `data-target` attribute instead o
{% highlight html %}
<div class="dropdown">
- <a id="dLabel" data-target="#" href="http://example.com" data-toggle="dropdown">
+ <a id="dLabel" data-target="#" href="http://example.com" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown trigger
- <span class="caret"></span>
</a>
- <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
+ <ul class="dropdown-menu" aria-labelledby="dLabel">
...
</ul>
</div>
diff --git a/docs/components/forms.md b/docs/components/forms.md
index 2c4e3979d..0b28128b4 100644
--- a/docs/components/forms.md
+++ b/docs/components/forms.md
@@ -306,7 +306,7 @@ For more structured form layouts, you can utilize Bootstrap's predefined grid cl
Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many.
-A checkbox or radio with the `disabled` attribute will be styled appropriately. To have the `<label>` for the checkbox or radio also display a "not-allowed" cursor when the user hovers over the label, add the `.disabled` class to your `.radio`, `.radio-inline`, `.checkbox`, `.checkbox-inline`, or `<fieldset>`.
+Disabled checkboxes and radios are supported, but to provide a "not-allowed" cursor on hover of the parent `<label>`, you'll need to add the <code>.disabled</code> class to the parent `.radio`, `.radio-inline`, `.checkbox`, or `.checkbox-inline`.
### Default (stacked)
@@ -806,4 +806,3 @@ The file input is the most gnarly of the bunch. Here's how it works:
In other words, it's an entirely custom element, all generated via CSS.
**Heads up!** The custom file input is currently unable to update the *Choose file...* text with the filename. Without JavaScript, this might not be possible to change, but I'm open to ideas.
-
diff --git a/docs/components/input-group.md b/docs/components/input-group.md
index 3c933b862..da5dcd954 100644
--- a/docs/components/input-group.md
+++ b/docs/components/input-group.md
@@ -110,12 +110,14 @@ Buttons in input groups are a bit different and require one extra level of nesti
<div class="col-lg-6">
<div class="input-group">
<div class="input-group-btn">
- <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Action</button>
- <ul class="dropdown-menu" role="menu">
+ <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+ Action
+ </button>
+ <ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
- <li class="divider"></li>
+ <li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
@@ -126,12 +128,14 @@ Buttons in input groups are a bit different and require one extra level of nesti
<div class="input-group">
<input type="text" class="form-control" aria-label="Text input with dropdown button">
<div class="input-group-btn">
- <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Action</button>
- <ul class="dropdown-menu dropdown-menu-right" role="menu">
+ <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+ Action
+ </button>
+ <ul class="dropdown-menu dropdown-menu-right">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
- <li class="divider"></li>
+ <li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
@@ -148,14 +152,14 @@ Buttons in input groups are a bit different and require one extra level of nesti
<div class="input-group">
<div class="input-group-btn">
<button type="button" class="btn btn-secondary">Action</button>
- <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
+ <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
- <ul class="dropdown-menu" role="menu">
+ <ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
- <li class="divider"></li>
+ <li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
@@ -167,14 +171,14 @@ Buttons in input groups are a bit different and require one extra level of nesti
<input type="text" class="form-control" aria-label="Text input with segmented button dropdown">
<div class="input-group-btn">
<button type="button" class="btn btn-secondary">Action</button>
- <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-expanded="false">
+ <button type="button" class="btn btn-secondary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
- <ul class="dropdown-menu dropdown-menu-right" role="menu">
+ <ul class="dropdown-menu dropdown-menu-right">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
- <li class="divider"></li>
+ <li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</div>
diff --git a/docs/components/list-group.md b/docs/components/list-group.md
index 6e6faf75f..3291b8836 100644
--- a/docs/components/list-group.md
+++ b/docs/components/list-group.md
@@ -60,6 +60,20 @@ Linkify list group items by using anchor tags instead of list items (that also m
</div>
{% endexample %}
+## Button items
+
+List group items may be buttons instead of list items (that also means a parent `<div>` instead of an `<ul>`). No need for individual parents around each element. **Don't use the standard `.btn` classes here.**
+
+{% example html %}
+<div class="list-group">
+ <button type="button" class="list-group-item">Cras justo odio</button>
+ <button type="button" class="list-group-item">Dapibus ac facilisis in</button>
+ <button type="button" class="list-group-item">Morbi leo risus</button>
+ <button type="button" class="list-group-item">Porta ac consectetur ac</button>
+ <button type="button" class="list-group-item">Vestibulum at eros</button>
+</div>
+{% endexample %}
+
## Disabled items
Add `.disabled` to a `.list-group-item` to gray it out to appear disabled.
diff --git a/docs/components/modal.md b/docs/components/modal.md
index 80d0820fc..5a618d8a6 100644
--- a/docs/components/modal.md
+++ b/docs/components/modal.md
@@ -19,7 +19,7 @@ $('#myModal').on('shown.bs.modal', function () {
{% endhighlight %}
{% callout warning %}
-#### Overlapping modals not supported
+#### Multiple open modals not supported
Be sure not to open a modal while another is still visible. Showing more than one modal at a time requires custom code.
{% endcallout %}
@@ -42,7 +42,7 @@ A rendered modal with header, body, and set of actions in the footer.</p>
<div class="bd-example bd-example-modal">
<div class="modal">
- <div class="modal-dialog">
+ <div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
@@ -65,7 +65,7 @@ A rendered modal with header, body, and set of actions in the footer.</p>
{% highlight html %}
<div class="modal fade">
- <div class="modal-dialog">
+ <div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
@@ -91,7 +91,7 @@ A rendered modal with header, body, and set of actions in the footer.</p>
Toggle a modal via JavaScript by clicking the button below. It will slide down and fade in from the top of the page.
<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
- <div class="modal-dialog">
+ <div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
@@ -147,7 +147,7 @@ Toggle a modal via JavaScript by clicking the button below. It will slide down a
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
- <div class="modal-dialog">
+ <div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
@@ -171,7 +171,7 @@ Toggle a modal via JavaScript by clicking the button below. It will slide down a
{% callout warning %}
#### Make modals accessible
-Be sure to add `role="dialog"` to `.modal`, `aria-labelledby="myModalLabel"` attribute to reference the modal title, and `aria-hidden="true"` to tell assistive technologies to skip the modal's DOM elements.
+Be sure to add `role="dialog"` and `aria-labelledby="..."``, referencing the modal title, to `.modal`, and `role="document"` to the `.modal-dialog` itself.
Additionally, you may give a description of your modal dialog with `aria-describedby` on `.modal`.
{% endcallout %}
@@ -267,7 +267,7 @@ To take advantage of the Bootstrap grid system within a modal, just nest `.conta
{% example html %}
<div id="gridSystemModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="gridModalLabel" aria-hidden="true">
- <div class="modal-dialog">
+ <div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
@@ -325,7 +325,7 @@ Have a bunch of buttons that all trigger the same modal, just with slightly diff
<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-dialog">
+ <div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
diff --git a/docs/components/navs.md b/docs/components/navs.md
index 9096dcdce..8a34eaadd 100644
--- a/docs/components/navs.md
+++ b/docs/components/navs.md
@@ -52,16 +52,16 @@ Takes the basic nav from above and adds the `.nav-tabs` class to generate a tabb
{% example html %}
<ul class="nav nav-tabs">
- <li class="nav-item active" role="presentation">
+ <li class="nav-item active">
<a href="#" class="nav-link">Active</a>
</li>
- <li class="nav-item" role="presentation">
+ <li class="nav-item">
<a href="#" class="nav-link">Link</a>
</li>
- <li class="nav-item" role="presentation">
+ <li class="nav-item">
<a href="#" class="nav-link">Another link</a>
</li>
- <li class="nav-item disabled" role="presentation">
+ <li class="nav-item disabled">
<a href="#" class="nav-link">Disabled</a>
</li>
</ul>
@@ -73,16 +73,16 @@ Take that same HTML, but use `.nav-pills` instead:
{% example html %}
<ul class="nav nav-pills">
- <li class="nav-item active" role="presentation">
+ <li class="nav-item active">
<a href="#" class="nav-link">Active</a>
</li>
- <li class="nav-item" role="presentation">
+ <li class="nav-item">
<a href="#" class="nav-link">Link</a>
</li>
- <li class="nav-item" role="presentation">
+ <li class="nav-item">
<a href="#" class="nav-link">Another link</a>
</li>
- <li class="nav-item disabled" role="presentation">
+ <li class="nav-item disabled">
<a href="#" class="nav-link">Disabled</a>
</li>
</ul>
@@ -94,16 +94,16 @@ Just add `.nav-stacked` to the `.nav.nav-pills`.
{% example html %}
<ul class="nav nav-pills nav-stacked">
- <li class="nav-item active" role="presentation">
+ <li class="nav-item active">
<a href="#" class="nav-link">Active</a>
</li>
- <li class="nav-item" role="presentation">
+ <li class="nav-item">
<a href="#" class="nav-link">Link</a>
</li>
- <li class="nav-item" role="presentation">
+ <li class="nav-item">
<a href="#" class="nav-link">Another link</a>
</li>
- <li class="nav-item disabled" role="presentation">
+ <li class="nav-item disabled">
<a href="#" class="nav-link">Disabled</a>
</li>
</ul>
@@ -117,23 +117,23 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin
{% example html %}
<ul class="nav nav-tabs">
- <li class="nav-item active" role="presentation">
+ <li class="nav-item active">
<a href="#" class="nav-link">Active</a>
</li>
- <li class="nav-item" role="presentation">
- <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
- <ul class="dropdown-menu" role="menu">
+ <li class="nav-item">
+ <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
+ <ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
- <li class="divider"></li>
+ <li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
- <li class="nav-item" role="presentation">
+ <li class="nav-item">
<a href="#" class="nav-link">Another link</a>
</li>
- <li class="nav-item disabled" role="presentation">
+ <li class="nav-item disabled">
<a href="#" class="nav-link">Disabled</a>
</li>
</ul>
@@ -143,23 +143,23 @@ Add dropdown menus with a little extra HTML and the [dropdowns JavaScript plugin
{% example html %}
<ul class="nav nav-pills">
- <li class="nav-item active" role="presentation">
+ <li class="nav-item active">
<a href="#" class="nav-link">Active</a>
</li>
- <li class="nav-item" role="presentation">
- <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">Dropdown</a>
- <ul class="dropdown-menu" role="menu">
+ <li class="nav-item">
+ <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
+ <ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
- <li class="divider"></li>
+ <li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
- <li class="nav-item" role="presentation">
+ <li class="nav-item">
<a href="#" class="nav-link">Another link</a>
</li>
- <li class="nav-item disabled" role="presentation">
+ <li class="nav-item disabled">
<a href="#" class="nav-link">Disabled</a>
</li>
</ul>
@@ -171,20 +171,19 @@ Use the tab JavaScript plugin—include it individually or through the compiled
<div class="bd-example bd-example-tabs" role="tabpanel">
<ul id="myTab" class="nav nav-tabs" role="tablist">
- <li role="presentation" class="active">
+ <li class="active">
<a href="#home" id="home-tab" role="tab" data-toggle="tab" aria-controls="home" aria-expanded="true">Home</a>
</li>
- <li role="presentation">
+ <li>
<a href="#profile" role="tab" id="profile-tab" data-toggle="tab" aria-controls="profile">Profile</a>
</li>
- <li role="presentation" class="dropdown">
+ <li class="dropdown">
<a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown" aria-controls="myTabDrop1-contents">
Dropdown
- <span class="caret"></span>
</a>
- <ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1" id="myTabDrop1-contents">
- <li><a href="#dropdown1" tabindex="-1" role="tab" id="dropdown1-tab" data-toggle="tab" aria-controls="dropdown1">@fat</a></li>
- <li><a href="#dropdown2" tabindex="-1" role="tab" id="dropdown2-tab" data-toggle="tab" aria-controls="dropdown2">@mdo</a></li>
+ <ul class="dropdown-menu" aria-labelledby="myTabDrop1" id="myTabDrop1-contents">
+ <li><a href="#dropdown1" role="tab" id="dropdown1-tab" data-toggle="tab" aria-controls="dropdown1">@fat</a></li>
+ <li><a href="#dropdown2" role="tab" id="dropdown2-tab" data-toggle="tab" aria-controls="dropdown2">@mdo</a></li>
</ul>
</li>
</ul>
@@ -212,10 +211,10 @@ You can activate a tab or pill navigation without writing any JavaScript by simp
{% highlight html %}
<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
- <li role="presentation" class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
- <li role="presentation"><a href="#profile" role="tab" data-toggle="tab">Profile</a></li>
- <li role="presentation"><a href="#messages" role="tab" data-toggle="tab">Messages</a></li>
- <li role="presentation"><a href="#settings" role="tab" data-toggle="tab">Settings</a></li>
+ <li class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
+ <li><a href="#profile" role="tab" data-toggle="tab">Profile</a></li>
+ <li><a href="#messages" role="tab" data-toggle="tab">Messages</a></li>
+ <li><a href="#settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>
<!-- Tab panes -->
@@ -269,16 +268,16 @@ Activates a tab element and content container. Tab should have either a `data-ta
{% highlight html %}
<ul class="nav nav-tabs" role="tablist" id="myTab">
- <li role="presentation" class="active">
+ <li class="active">
<a href="#home" role="tab" data-toggle="tab" aria-controls="home">Home</a>
</li>
- <li role="presentation">
+ <li>
<a href="#profile" role="tab" data-toggle="tab" aria-controls="profile">Profile</a>
</li>
- <li role="presentation">
+ <li>
<a href="#messages" role="tab" data-toggle="tab" aria-controls="messages">Messages</a>
</li>
- <li role="presentation">
+ <li>
<a href="#settings" role="tab" data-toggle="tab" aria-controls="settings">Settings</a>
</li>
</ul>
@@ -343,4 +342,3 @@ $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
e.relatedTarget // previous active tab
})
{% endhighlight %}
-
diff --git a/docs/components/popovers.md b/docs/components/popovers.md
index 3a3946d81..2f153401f 100644
--- a/docs/components/popovers.md
+++ b/docs/components/popovers.md
@@ -93,37 +93,37 @@ Four options are available: top, right, bottom, and left aligned.
<div class="bd-example popover-demo">
<div class="bd-example-popovers">
- <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
- Popover on left
- </button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on top
</button>
+ <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
+ Popover on right
+ </button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on bottom
</button>
- <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
- Popover on right
+ <button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
+ Popover on left
</button>
</div>
</div>
{% highlight html %}
-<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
- Popover on left
-</button>
-
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on top
</button>
+<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
+ Popover on right
+</button>
+
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on bottom
</button>
-<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
- Popover on right
+<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
+ Popover on left
</button>
{% endhighlight %}
@@ -249,7 +249,7 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
<td>trigger</td>
<td>string</td>
<td>'click'</td>
- <td>How popover is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space.</td>
+ <td>How popover is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space. `manual` cannot be combined with any other trigger.</td>
</tr>
<tr>
<td>viewport</td>
diff --git a/docs/components/scrollspy.md b/docs/components/scrollspy.md
index 6469612c0..b39de56d5 100644
--- a/docs/components/scrollspy.md
+++ b/docs/components/scrollspy.md
@@ -29,12 +29,14 @@ The ScrollSpy plugin is for automatically updating nav targets based on scroll p
<li><a href="#fat">@fat</a></li>
<li><a href="#mdo">@mdo</a></li>
<li class="dropdown">
- <a href="#" id="navbarDrop1" class="dropdown-toggle" data-toggle="dropdown">Dropdown</a>
- <ul class="dropdown-menu" role="menu" aria-labelledby="navbarDrop1">
- <li><a href="#one" tabindex="-1">one</a></li>
- <li><a href="#two" tabindex="-1">two</a></li>
- <li class="divider"></li>
- <li><a href="#three" tabindex="-1">three</a></li>
+ <a href="#" id="navbarDrop1" class="dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+ Dropdown
+ </a>
+ <ul class="dropdown-menu" aria-labelledby="navbarDrop1">
+ <li><a href="#one">one</a></li>
+ <li><a href="#two">two</a></li>
+ <li role="separator" class="divider"></li>
+ <li><a href="#three">three</a></li>
</ul>
</li>
</ul>
@@ -66,7 +68,7 @@ Scrollspy currently requires the use of a [Bootstrap nav component](/components/
### Requires relative positioning
-No matter the implementation method, scrollspy requires the use of `position: relative;` on the element you're spying on. In most cases this is the `<body>`.
+No matter the implementation method, scrollspy requires the use of `position: relative;` on the element you're spying on. In most cases this is the `<body>`. When scrollspying on elements other than the `<body>`, be sure to have a `height` set and `overflow-y: scroll;` applied.
### Via data attributes
diff --git a/docs/components/tables.md b/docs/components/tables.md
index 0bcddf21b..2ec988f08 100644
--- a/docs/components/tables.md
+++ b/docs/components/tables.md
@@ -458,7 +458,7 @@ Firefox has some awkward fieldset styling involving `width` that interferes with
}
{% endhighlight %}
-For more information, read [this Stack Overflow answer](http://stackoverflow.com/questions/17408815/fieldset-resizes-wrong-appears-to-have-unremovable-min-width-min-content/17863685#17863685).
+For more information, read [this Stack Overflow answer](https://stackoverflow.com/questions/17408815/fieldset-resizes-wrong-appears-to-have-unremovable-min-width-min-content/17863685#17863685).
{% endcallout %}
<div class="bd-example">
diff --git a/docs/components/tooltips.md b/docs/components/tooltips.md
index d59b330ff..8e41c2805 100644
--- a/docs/components/tooltips.md
+++ b/docs/components/tooltips.md
@@ -45,16 +45,16 @@ Hover over the links below to see tooltips:
Four options are available: top, right, bottom, and left aligned.
<div class="bd-example bd-example-tooltip">
- <div class="tooltip left" role="tooltip">
+ <div class="tooltip top" role="tooltip">
<div class="tooltip-arrow"></div>
<div class="tooltip-inner">
- Tooltip on the left
+ Tooltip on the top
</div>
</div>
- <div class="tooltip top" role="tooltip">
+ <div class="tooltip right" role="tooltip">
<div class="tooltip-arrow"></div>
<div class="tooltip-inner">
- Tooltip on the top
+ Tooltip on the right
</div>
</div>
<div class="tooltip bottom" role="tooltip">
@@ -63,10 +63,10 @@ Four options are available: top, right, bottom, and left aligned.
Tooltip on the bottom
</div>
</div>
- <div class="tooltip right" role="tooltip">
+ <div class="tooltip left" role="tooltip">
<div class="tooltip-arrow"></div>
<div class="tooltip-inner">
- Tooltip on the right
+ Tooltip on the left
</div>
</div>
</div>
@@ -77,25 +77,25 @@ Hover over the buttons below to see their tooltips.
<div class="bd-example tooltip-demo">
<div class="bd-example-tooltips">
- <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>
- <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>
+ <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
+ <button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>
</div>
</div>
{% highlight html %}
-<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
- Tooltip on left
-</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="top" title="Tooltip on top">
Tooltip on top
</button>
+<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
+ Tooltip on right
+</button>
<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">
Tooltip on bottom
</button>
-<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="right" title="Tooltip on right">
- Tooltip on right
+<button type="button" class="btn btn-secondary" data-toggle="tooltip" data-placement="left" title="Tooltip on left">
+ Tooltip on left
</button>
{% endhighlight %}
@@ -210,7 +210,7 @@ Options can be passed via data attributes or JavaScript. For data attributes, ap
<td>trigger</td>
<td>string</td>
<td>'hover focus'</td>
- <td>How tooltip is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space.</td>
+ <td>How tooltip is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space. `manual` cannot be combined with any other trigger.</td>
</tr>
<tr>
<td>viewport</td>
generated by cgit v1.2.3 (git 2.25.1) at 2026-06-06 11:48:02 +0000