From: XhmikosR 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. 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. 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. 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. We use the following JavaScript to trigger our live alert demo: We use the following JavaScript to trigger our live alert demo: To cover cases where you have to keep the The 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. You can create a button instance with the button constructor, for example: With 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 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
-
-
-
-
Get involved
-
-
-
-
@@ -938,7 +938,7 @@
<a class="nav-link" href="#">Link</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>
@@ -1797,7 +1797,7 @@ Note that content should not be larger than the height of the image. If content
prefers-reduced
prefers-reduced
-
Live example
<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>
-
<div id="liveAlertPlaceholder"></div>
+<button type="button" class="btn btn-primary" id="liveAlertBtn">Show live alert</button>
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:
@@ -856,7 +851,7 @@ When an alert is dismissed, the element is completely removed from the page stru
bootstrap.Alert.getOrCreateInstance(element)
-
-
-
-
@@ -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.pointer-events
on anchor buttons.aria-disabled="true"
attribute to indicate the state of the element to assistive technologies.<a>
should include the aria-disabled="true"
attribute to indicate the state of the element to assistive technologies.<a>
should not include the href
attribute.<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
+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
-.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
<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>
Methods
var button = document.getElementById('myButton')
@@ -639,7 +646,7 @@ Visually, these toggle buttons are identical to the
-
-
@@ -657,7 +657,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:
@@ -1109,7 +1109,7 @@ The animation effect of this component is dependent on the bootstrap.Carousel.getOrCreateInstance(element)
prefers-reduced
prefers-reduced
-
-
<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:
@@ -727,7 +727,7 @@ Multiple bootstrap.Collapse.getOrCreateInstance(element)
<button>
or <a>
can show and hide
<button>
or <a>
can show and hide
-
<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:
@@ -1953,7 +1953,7 @@ On touch-enabled devices, opening a dropdown adds empty bootstrap.Dropdown.getOrCreateInstance(element)
mouseover
h
mouseover
h
-
<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>
<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.var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getInstance(triggerEl) // Returns a Bootstrap tab instance
getOrCreateInstance
-var triggerEl = document.querySelector('#trigger')
var tab = bootstrap.Tab.getOrCreateInstance(triggerEl) // Returns a Bootstrap tab instance
Events
@@ -1177,7 +1177,7 @@
-
prefers-reduced
Hide this modal and show the first with the button below.
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
-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
-
prefers-reduced
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
var myToastEl = document.getElementById('myToastEl')
var myToast = bootstrap.Toast.getInstance(myToastEl) // Returns a Bootstrap toast instance
Static method which allows you to get the toast 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 toast instance associated with a DOM element, or create a new one in case it wasn’t initialized
var myToastEl = document.getElementById('myToastEl')
var myToast = bootstrap.Toast.getOrCreateInstance(myToastEl) // Returns a Bootstrap toast instance
sanitize
, sanitizeFn
var exampleTriggerEl = document.getElementById('example')
var tooltip = bootstrap.Tooltip.getInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance
Static method which allows you to get the tooltip 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 tooltip instance associated with a DOM element, or create a new one in case it wasn’t initialized
var exampleTriggerEl = document.getElementById('example')
var tooltip = bootstrap.Tooltip.getOrCreateInstance(exampleTriggerEl) // Returns a Bootstrap tooltip instance
sanitize
, sanitizeFn
sanitize
, sanitizeFn
-
+
diff --git a/docs/5.1/content/figures/index.html b/docs/5.1/content/figures/index.html
index d706c001db..2deaee145a 100644
--- a/docs/5.1/content/figures/index.html
+++ b/docs/5.1/content/figures/index.html
@@ -5,7 +5,7 @@
-
+
@@ -17,7 +17,7 @@
-
+
@@ -149,7 +149,7 @@
Bootstrap v5.1