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
-
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.
-
-
-
-
<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