The full Bootstrap license is located in the project repository for more information.
+The full Bootstrap license is located in the project repository for more information.
@@ -446,7 +446,7 @@With Bootstrap 4, we once again rewrote the project to account for two key architectural changes: a migration to Sass and the move to CSS’s flexbox. Our intention is to help in a small way to move the web development community forward by pushing for newer CSS properties, fewer dependencies, and new technologies across more modern browsers.
Our latest release, Bootstrap 5, focuses on improving v4’s codebase with as few major breaking changes as possible. We improved existing features and components, removed support for older browsers, dropped jQuery for regular JavaScript, and embraced more future-friendly technologies like CSS custom properties as part of our tooling.
Get involved with Bootstrap development by opening an issue or submitting a pull request. Read our contributing guidelines for information on how we develop.
+Get involved with Bootstrap development by opening an issue or submitting a pull request. Read our contributing guidelines for information on how we develop.
@@ -430,7 +430,7 @@Get involved with Bootstrap development by opening an issue or submitting a pull request. Read our contributing guidelines for information on how we develop.
+Get involved with Bootstrap development by opening an issue or submitting a pull request. Read our contributing guidelines for information on how we develop.
@@ -502,7 +502,7 @@prefers-reduced
- Designed and built with all the love in the world by the Bootstrap team with the help of our contributors.
- Code licensed MIT, docs CC BY 3.0.
- - Currently v5.1.0.
+ - Currently v5.1.1.
@@ -755,7 +755,7 @@ The animation effect of this component is dependent on the prefers-reduced
-
+
diff --git a/docs/5.1/components/alerts/index.html b/docs/5.1/components/alerts/index.html
index 69d877b247..3e7e435739 100644
--- a/docs/5.1/components/alerts/index.html
+++ b/docs/5.1/components/alerts/index.html
@@ -5,7 +5,7 @@
-
+
@@ -17,7 +17,7 @@
-
+
@@ -149,7 +149,7 @@
Bootstrap v5.1
- - Latest (5.0.x)
+ - Latest (5.1.x)
- v4.6.x
- v3.4.1
@@ -494,17 +494,12 @@
Live example
Click the button below to show an alert (hidden with inline styles to start), then dismiss (and destroy) it with the built-in close button.
-
-
-
-<button type="button" class="btn btn-primary" id="liveAlertBtn">Show live alert</button>
-
-<div class="alert alert-primary alert-dismissible" role="alert" id="liveAlert">
- <strong>Nice!</strong> You've triggered this alert.
- <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
-</div>
-
We use the following JavaScript to trigger our live alert demo:
+
+
+<div id="liveAlertPlaceholder"></div>
+<button type="button" class="btn btn-primary" id="liveAlertBtn">Show live alert</button>
+We use the following JavaScript to trigger our live alert demo:
var alertPlaceholder = document.getElementById('liveAlertPlaceholder')
var alertTrigger = document.getElementById('liveAlertBtn')
@@ -800,7 +795,7 @@ When an alert is dismissed, the element is completely removed from the page stru
getOrCreateInstance
- Static method which returns an alert instance associated to a DOM element or create a new one in case it wasn't initialised.
+ Static method which returns an alert instance associated to a DOM element or create a new one in case it wasn't initialized.
You can use it like this: bootstrap.Alert.getOrCreateInstance(element)
@@ -856,7 +851,7 @@ When an alert is dismissed, the element is completely removed from the page stru
- Designed and built with all the love in the world by the Bootstrap team with the help of our contributors.
- Code licensed MIT, docs CC BY 3.0.
- - Currently v5.1.0.
+ - Currently v5.1.1.
@@ -903,7 +898,7 @@ When an alert is dismissed, the element is completely removed from the page stru
-
+
diff --git a/docs/5.1/components/badge/index.html b/docs/5.1/components/badge/index.html
index b0be39c7be..b3c1e8281c 100644
--- a/docs/5.1/components/badge/index.html
+++ b/docs/5.1/components/badge/index.html
@@ -5,7 +5,7 @@
-
+
@@ -17,7 +17,7 @@
-
+
@@ -149,7 +149,7 @@
Bootstrap v5.1
- - Latest (5.0.x)
+ - Latest (5.1.x)
- v4.6.x
- v3.4.1
@@ -554,7 +554,7 @@
- Designed and built with all the love in the world by the Bootstrap team with the help of our contributors.
- Code licensed MIT, docs CC BY 3.0.
- - Currently v5.1.0.
+ - Currently v5.1.1.
@@ -601,7 +601,7 @@
-
+
diff --git a/docs/5.1/components/breadcrumb/index.html b/docs/5.1/components/breadcrumb/index.html
index 421dc3cd0d..5963c8f7c4 100644
--- a/docs/5.1/components/breadcrumb/index.html
+++ b/docs/5.1/components/breadcrumb/index.html
@@ -5,7 +5,7 @@
-
+
@@ -17,7 +17,7 @@
-
+
@@ -149,7 +149,7 @@
Bootstrap v5.1
- - Latest (5.0.x)
+ - Latest (5.1.x)
- v4.6.x
- v3.4.1
@@ -543,7 +543,7 @@
- Designed and built with all the love in the world by the Bootstrap team with the help of our contributors.
- Code licensed MIT, docs CC BY 3.0.
- - Currently v5.1.0.
+ - Currently v5.1.1.
@@ -590,7 +590,7 @@
-
+
diff --git a/docs/5.1/components/button-group/index.html b/docs/5.1/components/button-group/index.html
index 1f52b46bad..ad63ac9538 100644
--- a/docs/5.1/components/button-group/index.html
+++ b/docs/5.1/components/button-group/index.html
@@ -5,7 +5,7 @@
-
+
@@ -17,7 +17,7 @@
-
+
@@ -149,7 +149,7 @@
Bootstrap v5.1
- - Latest (5.0.x)
+ - Latest (5.1.x)
- v4.6.x
- v3.4.1
@@ -747,7 +747,7 @@
- Designed and built with all the love in the world by the Bootstrap team with the help of our contributors.
- Code licensed MIT, docs CC BY 3.0.
- - Currently v5.1.0.
+ - Currently v5.1.1.
@@ -794,7 +794,7 @@
-
+
diff --git a/docs/5.1/components/buttons/index.html b/docs/5.1/components/buttons/index.html
index f2c0559d3c..6591a873d6 100644
--- a/docs/5.1/components/buttons/index.html
+++ b/docs/5.1/components/buttons/index.html
@@ -5,7 +5,7 @@
-
+
@@ -17,7 +17,7 @@
-
+
@@ -149,7 +149,7 @@
Bootstrap v5.1
- - Latest (5.0.x)
+ - Latest (5.1.x)
- v4.6.x
- v3.4.1
@@ -408,7 +408,11 @@
- Button tags
- Outline buttons
- Sizes
- - Disabled state
+ - Disabled state
+
+
- Block buttons
- Button plugin
@@ -523,18 +527,21 @@ Some of the button styles use a relatively light foreground color, and should on
<a>s don’t support the disabled attribute, so you must add the .disabled class to make it visually appear disabled.- Some future-friendly styles are included to disable all
pointer-events on anchor buttons.
-- Disabled buttons should include the
aria-disabled="true" attribute to indicate the state of the element to assistive technologies.
+- Disabled buttons using
<a> should include the aria-disabled="true" attribute to indicate the state of the element to assistive technologies.
+- Disabled buttons using
<a> should not include the href attribute.
+Primary link
+Link
+<a class="btn btn-primary btn-lg disabled" role="button" aria-disabled="true">Primary link</a>
+<a class="btn btn-secondary btn-lg disabled" role="button" aria-disabled="true">Link</a>
+Link functionality caveat
+To cover cases where you have to keep the href attribute on a disabled link, the .disabled class uses pointer-events: none to try to disable the link functionality of <a>s. Note that this CSS property is not yet standardized for HTML, but all modern browsers support it. In addition, even in browsers that do support pointer-events: none, keyboard navigation remains unaffected, meaning that sighted keyboard users and users of assistive technologies will still be able to activate these links. So to be safe, in addition to aria-disabled="true", also include a tabindex="-1" attribute on these links to prevent them from receiving keyboard focus, and use custom JavaScript to disable their functionality altogether.
+<a href="#" class="btn btn-primary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Primary link</a>
<a href="#" class="btn btn-secondary btn-lg disabled" tabindex="-1" role="button" aria-disabled="true">Link</a>
-
-Link functionality caveat
-The .disabled class uses pointer-events: none to try to disable the link functionality of <a>s, but that CSS property is not yet standardized. In addition, even in browsers that do support pointer-events: none, keyboard navigation remains unaffected, meaning that sighted keyboard users and users of assistive technologies will still be able to activate these links. So to be safe, in addition to aria-disabled="true", also include a tabindex="-1" attribute on these links to prevent them from receiving keyboard focus, and use custom JavaScript to disable their functionality altogether.
-
-
Block buttons
Create responsive stacks of full-width, “block buttons” like those in Bootstrap 4 with a mix of our display and gap utilities. By using utilities instead of button specific classes, we have much greater control over spacing, alignment, and responsive behaviors.
@@ -594,10 +601,10 @@ Visually, these toggle buttons are identical to the
Toggle link
Active toggle link
-Disabled toggle link
+Disabled toggle link
<a href="#" class="btn btn-primary" role="button" data-bs-toggle="button">Toggle link</a>
<a href="#" class="btn btn-primary active" role="button" data-bs-toggle="button" aria-pressed="true">Active toggle link</a>
-<a href="#" class="btn btn-primary disabled" tabindex="-1" aria-disabled="true" role="button" data-bs-toggle="button">Disabled toggle link</a>
+<a class="btn btn-primary disabled" aria-disabled="true" role="button" data-bs-toggle="button">Disabled toggle link</a>
You can create a button instance with the button constructor, for example:
var button = document.getElementById('myButton')
@@ -639,7 +646,7 @@ Visually, these toggle buttons are identical to the
- Designed and built with all the love in the world by the Bootstrap team with the help of our contributors.
- Code licensed MIT, docs CC BY 3.0.
- - Currently v5.1.0.
+ - Currently v5.1.1.
prefers-reduced
getOrCreateInstance
- Static method which returns a carousel instance associated to a DOM element or create a new one in case it wasn't initialised.
+ Static method which returns a carousel instance associated to a DOM element or create a new one in case it wasn't initialized.
You can use it like this: bootstrap.Carousel.getOrCreateInstance(element)
@@ -1109,7 +1109,7 @@ The animation effect of this component is dependent on the prefers-reduced
- Designed and built with all the love in the world by the Bootstrap team with the help of our contributors.
- Code licensed MIT, docs CC BY 3.0.
- - Currently v5.1.0.
+ - Currently v5.1.1.
@@ -1156,7 +1156,7 @@ The animation effect of this component is dependent on the prefers-reduced
-
+
diff --git a/docs/5.1/components/close-button/index.html b/docs/5.1/components/close-button/index.html
index 25619605eb..8daae0c612 100644
--- a/docs/5.1/components/close-button/index.html
+++ b/docs/5.1/components/close-button/index.html
@@ -5,7 +5,7 @@
-
+
@@ -17,7 +17,7 @@
-
+
@@ -149,7 +149,7 @@
Bootstrap v5.1
- - Latest (5.0.x)
+ - Latest (5.1.x)
- v4.6.x
- v3.4.1
@@ -468,7 +468,7 @@
- Designed and built with all the love in the world by the Bootstrap team with the help of our contributors.
- Code licensed MIT, docs CC BY 3.0.
- - Currently v5.1.0.
+ - Currently v5.1.1.
@@ -515,7 +515,7 @@
-
+
diff --git a/docs/5.1/components/collapse/index.html b/docs/5.1/components/collapse/index.html
index 3f6e79901a..3d5430a17f 100644
--- a/docs/5.1/components/collapse/index.html
+++ b/docs/5.1/components/collapse/index.html
@@ -5,7 +5,7 @@
-
+
@@ -17,7 +17,7 @@
-
+
@@ -149,7 +149,7 @@
Bootstrap v5.1
- - Latest (5.0.x)
+ - Latest (5.1.x)
- v4.6.x
- v3.4.1
@@ -672,7 +672,7 @@ Multiple <button> or <a> can show and hide
getOrCreateInstance
- Static method which returns a collapse instance associated to a DOM element or create a new one in case it wasn't initialised.
+ Static method which returns a collapse instance associated to a DOM element or create a new one in case it wasn't initialized.
You can use it like this: bootstrap.Collapse.getOrCreateInstance(element)
@@ -727,7 +727,7 @@ Multiple <button> or <a> can show and hide
- Designed and built with all the love in the world by the Bootstrap team with the help of our contributors.
- Code licensed MIT, docs CC BY 3.0.
- - Currently v5.1.0.
+ - Currently v5.1.1.
@@ -774,7 +774,7 @@ Multiple <button> or <a> can show and hide
-
+
diff --git a/docs/5.1/components/dropdowns/index.html b/docs/5.1/components/dropdowns/index.html
index 2ef15eb336..60dec3cb06 100644
--- a/docs/5.1/components/dropdowns/index.html
+++ b/docs/5.1/components/dropdowns/index.html
@@ -5,7 +5,7 @@
-
+
@@ -17,7 +17,7 @@
-
+
@@ -149,7 +149,7 @@
Bootstrap v5.1
- - Latest (5.0.x)
+ - Latest (5.1.x)
- v4.6.x
- v3.4.1
@@ -1093,12 +1093,12 @@
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Regular link</a></li>
- <li><a class="dropdown-item disabled" href="#" tabindex="-1" aria-disabled="true">Disabled link</a></li>
+ <li><a class="dropdown-item disabled">Disabled link</a></li>
<li><a class="dropdown-item" href="#">Another link</a></li>
</ul>
Menu alignment
@@ -1632,7 +1632,7 @@
$dropdown-box-shadow: $box-shadow;
$dropdown-link-color: $gray-900;
-$dropdown-link-hover-color: shade-color($gray-900, 10%);
+$dropdown-link-hover-color: shade-color($dropdown-link-color, 10%);
$dropdown-link-hover-bg: $gray-200;
$dropdown-link-active-color: $component-active-color;
@@ -1882,7 +1882,7 @@ On touch-enabled devices, opening a dropdown adds empty mouseover h
getOrCreateInstance
- Static method which returns a dropdown instance associated to a DOM element or create a new one in case it wasn't initialised.
+ Static method which returns a dropdown instance associated to a DOM element or create a new one in case it wasn't initialized.
You can use it like this: bootstrap.Dropdown.getOrCreateInstance(element)
@@ -1953,7 +1953,7 @@ On touch-enabled devices, opening a dropdown adds empty mouseover h
- Designed and built with all the love in the world by the Bootstrap team with the help of our contributors.
- Code licensed MIT, docs CC BY 3.0.
- - Currently v5.1.0.
+ - Currently v5.1.1.
@@ -2000,7 +2000,7 @@ On touch-enabled devices, opening a dropdown adds empty mouseover h
-
+
diff --git a/docs/5.1/components/list-group/index.html b/docs/5.1/components/list-group/index.html
index c0e641f4bf..95de6084a6 100644
--- a/docs/5.1/components/list-group/index.html
+++ b/docs/5.1/components/list-group/index.html
@@ -5,7 +5,7 @@
-
+
@@ -17,7 +17,7 @@
-
+
@@ -149,7 +149,7 @@
Bootstrap v5.1
- - Latest (5.0.x)
+ - Latest (5.1.x)
- v4.6.x
- v3.4.1
@@ -508,7 +508,7 @@
A second link item
A third link item
A fourth link item
- A disabled link item
+ A disabled link item
<div class="list-group">
<a href="#" class="list-group-item list-group-item-action active" aria-current="true">
@@ -517,7 +517,7 @@
<a href="#" class="list-group-item list-group-item-action">A second link item</a>
<a href="#" class="list-group-item list-group-item-action">A third link item</a>
<a href="#" class="list-group-item list-group-item-action">A fourth link item</a>
- <a href="#" class="list-group-item list-group-item-action disabled" tabindex="-1" aria-disabled="true">A disabled link item</a>
+ <a class="list-group-item list-group-item-action disabled">A disabled link item</a>
</div>
With <button>s, you can also make use of the disabled attribute instead of the .disabled class. Sadly, <a>s don’t support the disabled attribute.
@@ -1115,7 +1115,7 @@
var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getInstance(triggerEl) // Returns a Bootstrap tab instance
getOrCreateInstance
-Static method which allows you to get the tab instance associated with a DOM element, or create a new one in case it wasn’t initialised
+Static method which allows you to get the tab instance associated with a DOM element, or create a new one in case it wasn’t initialized
var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getOrCreateInstance(triggerEl) // Returns a Bootstrap tab instance
Events
@@ -1177,7 +1177,7 @@
- Designed and built with all the love in the world by the Bootstrap team with the help of our contributors.
- Code licensed MIT, docs CC BY 3.0.
- - Currently v5.1.0.
+ - Currently v5.1.1.
@@ -1224,7 +1224,7 @@
-
+
diff --git a/docs/5.1/components/modal/index.html b/docs/5.1/components/modal/index.html
index b117594574..ae502f0e46 100644
--- a/docs/5.1/components/modal/index.html
+++ b/docs/5.1/components/modal/index.html
@@ -5,7 +5,7 @@
-
+
@@ -17,7 +17,7 @@
-
+
@@ -149,7 +149,7 @@
Bootstrap v5.1
- - Latest (5.0.x)
+ - Latest (5.1.x)
- v4.6.x
- v3.4.1
@@ -947,7 +947,7 @@ The animation effect of this component is dependent on the prefers-reduced
Hide this modal and show the first with the button below.
-
+
@@ -980,7 +980,7 @@ The animation effect of this component is dependent on the prefers-reduced
Hide this modal and show the first with the button below.
</div>
<div class="modal-footer">
- <button class="btn btn-primary" data-bs-target="#exampleModalToggle" data-bs-toggle="modal" data-bs-dismiss="modal">Back to first</button>
+ <button class="btn btn-primary" data-bs-target="#exampleModalToggle" data-bs-toggle="modal">Back to first</button>
</div>
</div>
</div>
@@ -1385,7 +1385,7 @@ While both ways to dismiss a modal are supported, keep in mind that dismissing f
var myModalEl = document.getElementById('myModal')
var modal = bootstrap.Modal.getInstance(myModalEl) // Returns a Bootstrap modal instance
getOrCreateInstance
-Static method which allows you to get the modal instance associated with a DOM element, or create a new one in case it wasn’t initialised
+Static method which allows you to get the modal instance associated with a DOM element, or create a new one in case it wasn’t initialized
var myModalEl = document.querySelector('#myModal')
var modal = bootstrap.Modal.getOrCreateInstance(myModalEl) // Returns a Bootstrap modal instance
Events
@@ -1441,7 +1441,7 @@ While both ways to dismiss a modal are supported, keep in mind that dismissing f
- Designed and built with all the love in the world by the Bootstrap team with the help of our contributors.
- Code licensed MIT, docs CC BY 3.0.
- - Currently v5.1.0.
+ - Currently v5.1.1.
@@ -1488,7 +1488,7 @@ While both ways to dismiss a modal are supported, keep in mind that dismissing f
-
+
diff --git a/docs/5.1/components/navbar/index.html b/docs/5.1/components/navbar/index.html
index d8dc037ec6..53572510b8 100644
--- a/docs/5.1/components/navbar/index.html
+++ b/docs/5.1/components/navbar/index.html
@@ -5,7 +5,7 @@
-
+
@@ -17,7 +17,7 @@
-
+
@@ -149,7 +149,7 @@
Bootstrap v5.1
- - Latest (5.0.x)
+ - Latest (5.1.x)
- v4.6.x
- v3.4.1
@@ -496,7 +496,7 @@ The animation effect of this component is dependent on the prefers-reduced
-
- Disabled
+ Disabled
prefers-reduced
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item">
- <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
+ <a class="nav-link disabled">Disabled</a>
</li>
</ul>
</div>
@@ -676,7 +676,7 @@ The animation effect of this component is dependent on the prefers-reduced
Home
Features
Pricing
- Disabled
+ Disabled
@@ -692,7 +692,7 @@ The animation effect of this component is dependent on the prefers-reduced
<a class="nav-link active" aria-current="page" href="#">Home</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>
+ <a class="nav-link disabled">Disabled</a>
</div>
</div>
</div>
@@ -1105,7 +1105,7 @@ The animation effect of this component is dependent on the prefers-reduced