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.
-
-
-
-
<buttontype="button"class="btn btn-primary"id="liveAlertBtn">Show live alert</button>
-
-<divclass="alert alert-primary alert-dismissible"role="alert"id="liveAlert">
- <strong>Nice!</strong> You've triggered this alert.
- <buttontype="button"class="btn-close"data-bs-dismiss="alert"aria-label="Close"></button>
-</div>
-
We use the following JavaScript to trigger our live alert demo:
+
+
+
<divid="liveAlertPlaceholder"></div>
+<buttontype="button"class="btn btn-primary"id="liveAlertBtn">Show live alert</button>
+
We use the following JavaScript to trigger our live alert demo:
varalertPlaceholder=document.getElementById('liveAlertPlaceholder')varalertTrigger=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
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.
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.
@@ -938,7 +938,7 @@
<aclass="nav-link"href="#">Link</a></li><liclass="nav-item">
- <aclass="nav-link disabled"href="#"tabindex="-1"aria-disabled="true">Disabled</a>
+ <aclass="nav-link disabled">Disabled</a></li></ul></div>
@@ -1797,7 +1797,7 @@ Note that content should not be larger than the height of the image. If content
@@ -1054,7 +1054,7 @@ The animation effect of this component is dependent on the 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
@@ -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
@@ -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
<divclass="list-group"><ahref="#"class="list-group-item list-group-item-action active"aria-current="true">
@@ -517,7 +517,7 @@
<ahref="#"class="list-group-item list-group-item-action">A second link item</a><ahref="#"class="list-group-item list-group-item-action">A third link item</a><ahref="#"class="list-group-item list-group-item-action">A fourth link item</a>
- <ahref="#"class="list-group-item list-group-item-action disabled"tabindex="-1"aria-disabled="true">A disabled link item</a>
+ <aclass="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 @@
vartriggerEl=document.querySelector('#trigger')vartab=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
vartriggerEl=document.querySelector('#trigger')vartab=bootstrap.Tab.getOrCreateInstance(triggerEl)// Returns a Bootstrap tab instance
@@ -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><divclass="modal-footer">
- <buttonclass="btn btn-primary"data-bs-target="#exampleModalToggle"data-bs-toggle="modal"data-bs-dismiss="modal">Back to first</button>
+ <buttonclass="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
varmyModalEl=document.getElementById('myModal')varmodal=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
varmyModalEl=document.querySelector('#myModal')varmodal=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
@@ -657,7 +657,7 @@ The animation effect of this component is dependent on the prefers-reduced
<aclass="nav-link"href="#">Pricing</a></li><liclass="nav-item">
- <aclass="nav-link disabled"href="#"tabindex="-1"aria-disabled="true">Disabled</a>
+ <aclass="nav-link disabled">Disabled</a></li></ul></div>
@@ -676,7 +676,7 @@ The animation effect of this component is dependent on the prefers-reduced
HomeFeaturesPricing
- Disabled
+ Disabled
@@ -692,7 +692,7 @@ The animation effect of this component is dependent on the prefers-reduced
<aclass="nav-link active"aria-current="page"href="#">Home</a><aclass="nav-link"href="#">Features</a><aclass="nav-link"href="#">Pricing</a>
- <aclass="nav-link disabled"href="#"tabindex="-1"aria-disabled="true">Disabled</a>
+ <aclass="nav-link disabled">Disabled</a></div></div></div>
@@ -1105,7 +1105,7 @@ The animation effect of this component is dependent on the prefers-reduced