diff --git a/404.html b/404.html index 7159522ef1..acda1f8cc5 100644 --- a/404.html +++ b/404.html @@ -5,7 +5,7 @@ - + @@ -20,7 +20,7 @@ - + @@ -273,21 +273,21 @@ -
+ +
html
+</div> +

To align left the dropdown menu with the given breakpoint or larger, add .dropdown-menu-end and .dropdown-menu{-sm|-md|-lg|-xl|-xxl}-start.

-
+
+
+
-
+ +
html
+</div>
+

Note that you don’t need to add a data-bs-display="static" attribute to dropdown buttons in navbars, since Popper isn’t used in navbars.

Alignment options

Taking most of the options shown above, here’s a small kitchen sink demo of various dropdown alignment options in one place.

-
+
+
+
-
+ +
html
+</div>
+

Menu content

Headers

Add a header to label sections of actions in any dropdown menu.

-
+
+
+ -
+ +
html
+</ul>
+

Dividers

Separate groups of related menu items with a divider.

-
+
+
+ -
+ +
html
+</ul>
+

Text

Place any freeform text within a dropdown menu with text and use spacing utilities. Note that you’ll likely need additional sizing styles to constrain the menu width.

-
+
+
+

Some example text that's free-flowing within the dropdown menu. @@ -1752,7 +1818,8 @@ And this is more example text.

-
+ +
html
+</div>
+

Forms

Put a form within a dropdown menu, or make it into a dropdown menu, and use margin or padding utilities to give it the negative space you require.

-
+
+
+
@@ -1798,7 +1868,8 @@ New around here? Sign up Forgot password?
-
+ +
html
+</div>
+
-
+
+
+
-
+ +
html
+</div>
+

Use data-bs-offset or data-bs-reference to change the location of the dropdown.

-
+
+
+
-
+ +
html
+</div>
+

Auto close behavior

By default, the dropdown menu is closed when clicking inside or outside the dropdown menu. You can use the autoClose option to change this behavior of the dropdown.

-
+
+
+
-
+ +
html
+</div>
+

CSS

Variables

@@ -2064,7 +2148,7 @@

As part of Bootstrap’s evolving CSS variables approach, dropdowns now use local CSS variables on .dropdown-menu for enhanced real-time customization. Values for the CSS variables are set via Sass, so Sass customization is still supported, too.

- scss/_dropdown.scss + scss/_dropdown.scss

Customization through CSS variables can be seen on the .dropdown-menu-dark class where we override specific values without adding duplicate CSS selectors.

- scss/_dropdown.scss + scss/_dropdown.scss
@@ -2507,7 +2590,7 @@ Dropdowns must have data-bs-toggle="dropdown" on their tr
- + @@ -2536,20 +2619,20 @@ Dropdowns must have data-bs-toggle="dropdown" on their tr - + Bootstrap Example - <${'script'} src="https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.2\/dist\/js\/bootstrap.bundle.min.js"> + <${'script'} src="https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.3\/dist\/js\/bootstrap.bundle.min.js"> - + \x3C!-- Example Code --> ${htmlSnippet.replace(/^/gm, ' ')} - + \x3C!-- End Example Code --> ` - const jsSnippetContent = jsSnippet ? '\/\/ NOTICE!!! Initially embedded in our docs this JavaScript\n\/\/ file contains elements that can help you create reproducible\n\/\/ use cases in StackBlitz for instance.\n\/\/ In a real project please adapt this content to your needs.\n\/\/ \u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\n\n\/*!\n * JavaScript for Bootstrap\u0027s docs (https:\/\/getbootstrap.com\/)\n * Copyright 2011-2023 The Bootstrap Authors\n * Licensed under the Creative Commons Attribution 3.0 Unported License.\n * For details, see https:\/\/creativecommons.org\/licenses\/by\/3.0\/.\n *\/\n\n\/* global bootstrap: false *\/\n\n(() =\u003e {\n \u0027use strict\u0027\n\n \/\/ --------\n \/\/ Tooltips\n \/\/ --------\n \/\/ Instantiate all tooltips in a docs or StackBlitz\n document.querySelectorAll(\u0027[data-bs-toggle=\u0022tooltip\u0022]\u0027)\n .forEach(tooltip =\u003e {\n new bootstrap.Tooltip(tooltip)\n })\n\n \/\/ --------\n \/\/ Popovers\n \/\/ --------\n \/\/ Instantiate all popovers in docs or StackBlitz\n document.querySelectorAll(\u0027[data-bs-toggle=\u0022popover\u0022]\u0027)\n .forEach(popover =\u003e {\n new bootstrap.Popover(popover)\n })\n\n \/\/ -------------------------------\n \/\/ Toasts\n \/\/ -------------------------------\n \/\/ Used by \u0027Placement\u0027 example in docs or StackBlitz\n const toastPlacement = document.getElementById(\u0027toastPlacement\u0027)\n if (toastPlacement) {\n document.getElementById(\u0027selectToastPlacement\u0027).addEventListener(\u0027change\u0027, function () {\n if (!toastPlacement.dataset.originalClass) {\n toastPlacement.dataset.originalClass = toastPlacement.className\n }\n\n toastPlacement.className = \u0060${toastPlacement.dataset.originalClass} ${this.value}\u0060\n })\n }\n\n \/\/ Instantiate all toasts in docs pages only\n document.querySelectorAll(\u0027.bd-example .toast\u0027)\n .forEach(toastNode =\u003e {\n const toast = new bootstrap.Toast(toastNode, {\n autohide: false\n })\n\n toast.show()\n })\n\n \/\/ Instantiate all toasts in docs pages only\n \/\/ js-docs-start live-toast\n const toastTrigger = document.getElementById(\u0027liveToastBtn\u0027)\n const toastLiveExample = document.getElementById(\u0027liveToast\u0027)\n\n if (toastTrigger) {\n const toastBootstrap = bootstrap.Toast.getOrCreateInstance(toastLiveExample)\n toastTrigger.addEventListener(\u0027click\u0027, () =\u003e {\n toastBootstrap.show()\n })\n }\n \/\/ js-docs-end live-toast\n\n \/\/ -------------------------------\n \/\/ Alerts\n \/\/ -------------------------------\n \/\/ Used in \u0027Show live alert\u0027 example in docs or StackBlitz\n\n \/\/ js-docs-start live-alert\n const alertPlaceholder = document.getElementById(\u0027liveAlertPlaceholder\u0027)\n const appendAlert = (message, type) =\u003e {\n const wrapper = document.createElement(\u0027div\u0027)\n wrapper.innerHTML = [\n \u0060\u003cdiv class=\u0022alert alert-${type} alert-dismissible\u0022 role=\u0022alert\u0022\u003e\u0060,\n \u0060 \u003cdiv\u003e${message}\u003c\/div\u003e\u0060,\n \u0027 \u003cbutton type=\u0022button\u0022 class=\u0022btn-close\u0022 data-bs-dismiss=\u0022alert\u0022 aria-label=\u0022Close\u0022\u003e\u003c\/button\u003e\u0027,\n \u0027\u003c\/div\u003e\u0027\n ].join(\u0027\u0027)\n\n alertPlaceholder.append(wrapper)\n }\n\n const alertTrigger = document.getElementById(\u0027liveAlertBtn\u0027)\n if (alertTrigger) {\n alertTrigger.addEventListener(\u0027click\u0027, () =\u003e {\n appendAlert(\u0027Nice, you triggered this alert message!\u0027, \u0027success\u0027)\n })\n }\n \/\/ js-docs-end live-alert\n\n \/\/ --------\n \/\/ Carousels\n \/\/ --------\n \/\/ Instantiate all non-autoplaying carousels in docs or StackBlitz\n document.querySelectorAll(\u0027.carousel:not([data-bs-ride=\u0022carousel\u0022])\u0027)\n .forEach(carousel =\u003e {\n bootstrap.Carousel.getOrCreateInstance(carousel)\n })\n\n \/\/ -------------------------------\n \/\/ Checks \u0026 Radios\n \/\/ -------------------------------\n \/\/ Indeterminate checkbox example in docs and StackBlitz\n document.querySelectorAll(\u0027.bd-example-indeterminate [type=\u0022checkbox\u0022]\u0027)\n .forEach(checkbox =\u003e {\n if (checkbox.id.includes(\u0027Indeterminate\u0027)) {\n checkbox.indeterminate = true\n }\n })\n\n \/\/ -------------------------------\n \/\/ Links\n \/\/ -------------------------------\n \/\/ Disable empty links in docs examples only\n document.querySelectorAll(\u0027.bd-content [href=\u0022#\u0022]\u0027)\n .forEach(link =\u003e {\n link.addEventListener(\u0027click\u0027, event =\u003e {\n event.preventDefault()\n })\n })\n\n \/\/ -------------------------------\n \/\/ Modal\n \/\/ -------------------------------\n \/\/ Modal \u0027Varying modal content\u0027 example in docs and StackBlitz\n \/\/ js-docs-start varying-modal-content\n const exampleModal = document.getElementById(\u0027exampleModal\u0027)\n if (exampleModal) {\n exampleModal.addEventListener(\u0027show.bs.modal\u0027, event =\u003e {\n \/\/ Button that triggered the modal\n const button = event.relatedTarget\n \/\/ Extract info from data-bs-* attributes\n const recipient = button.getAttribute(\u0027data-bs-whatever\u0027)\n \/\/ If necessary, you could initiate an Ajax request here\n \/\/ and then do the updating in a callback.\n\n \/\/ Update the modal\u0027s content.\n const modalTitle = exampleModal.querySelector(\u0027.modal-title\u0027)\n const modalBodyInput = exampleModal.querySelector(\u0027.modal-body input\u0027)\n\n modalTitle.textContent = \u0060New message to ${recipient}\u0060\n modalBodyInput.value = recipient\n })\n }\n \/\/ js-docs-end varying-modal-content\n\n \/\/ -------------------------------\n \/\/ Offcanvas\n \/\/ -------------------------------\n \/\/ \u0027Offcanvas components\u0027 example in docs only\n const myOffcanvas = document.querySelectorAll(\u0027.bd-example-offcanvas .offcanvas\u0027)\n if (myOffcanvas) {\n myOffcanvas.forEach(offcanvas =\u003e {\n offcanvas.addEventListener(\u0027show.bs.offcanvas\u0027, event =\u003e {\n event.preventDefault()\n }, false)\n })\n }\n})()\n' : null + const jsSnippetContent = jsSnippet ? '\/\/ NOTICE!!! Initially embedded in our docs this JavaScript\n\/\/ file contains elements that can help you create reproducible\n\/\/ use cases in StackBlitz for instance.\n\/\/ In a real project please adapt this content to your needs.\n\/\/ \u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\u002b\n\n\/*!\n * JavaScript for Bootstrap\u0027s docs (https:\/\/getbootstrap.com\/)\n * Copyright 2011-2024 The Bootstrap Authors\n * Licensed under the Creative Commons Attribution 3.0 Unported License.\n * For details, see https:\/\/creativecommons.org\/licenses\/by\/3.0\/.\n *\/\n\n\/* global bootstrap: false *\/\n\n(() =\u003e {\n \u0027use strict\u0027\n\n \/\/ --------\n \/\/ Tooltips\n \/\/ --------\n \/\/ Instantiate all tooltips in a docs or StackBlitz\n document.querySelectorAll(\u0027[data-bs-toggle=\u0022tooltip\u0022]\u0027)\n .forEach(tooltip =\u003e {\n new bootstrap.Tooltip(tooltip)\n })\n\n \/\/ --------\n \/\/ Popovers\n \/\/ --------\n \/\/ Instantiate all popovers in docs or StackBlitz\n document.querySelectorAll(\u0027[data-bs-toggle=\u0022popover\u0022]\u0027)\n .forEach(popover =\u003e {\n new bootstrap.Popover(popover)\n })\n\n \/\/ -------------------------------\n \/\/ Toasts\n \/\/ -------------------------------\n \/\/ Used by \u0027Placement\u0027 example in docs or StackBlitz\n const toastPlacement = document.getElementById(\u0027toastPlacement\u0027)\n if (toastPlacement) {\n document.getElementById(\u0027selectToastPlacement\u0027).addEventListener(\u0027change\u0027, function () {\n if (!toastPlacement.dataset.originalClass) {\n toastPlacement.dataset.originalClass = toastPlacement.className\n }\n\n toastPlacement.className = \u0060${toastPlacement.dataset.originalClass} ${this.value}\u0060\n })\n }\n\n \/\/ Instantiate all toasts in docs pages only\n document.querySelectorAll(\u0027.bd-example .toast\u0027)\n .forEach(toastNode =\u003e {\n const toast = new bootstrap.Toast(toastNode, {\n autohide: false\n })\n\n toast.show()\n })\n\n \/\/ Instantiate all toasts in docs pages only\n \/\/ js-docs-start live-toast\n const toastTrigger = document.getElementById(\u0027liveToastBtn\u0027)\n const toastLiveExample = document.getElementById(\u0027liveToast\u0027)\n\n if (toastTrigger) {\n const toastBootstrap = bootstrap.Toast.getOrCreateInstance(toastLiveExample)\n toastTrigger.addEventListener(\u0027click\u0027, () =\u003e {\n toastBootstrap.show()\n })\n }\n \/\/ js-docs-end live-toast\n\n \/\/ -------------------------------\n \/\/ Alerts\n \/\/ -------------------------------\n \/\/ Used in \u0027Show live alert\u0027 example in docs or StackBlitz\n\n \/\/ js-docs-start live-alert\n const alertPlaceholder = document.getElementById(\u0027liveAlertPlaceholder\u0027)\n const appendAlert = (message, type) =\u003e {\n const wrapper = document.createElement(\u0027div\u0027)\n wrapper.innerHTML = [\n \u0060\u003cdiv class=\u0022alert alert-${type} alert-dismissible\u0022 role=\u0022alert\u0022\u003e\u0060,\n \u0060 \u003cdiv\u003e${message}\u003c\/div\u003e\u0060,\n \u0027 \u003cbutton type=\u0022button\u0022 class=\u0022btn-close\u0022 data-bs-dismiss=\u0022alert\u0022 aria-label=\u0022Close\u0022\u003e\u003c\/button\u003e\u0027,\n \u0027\u003c\/div\u003e\u0027\n ].join(\u0027\u0027)\n\n alertPlaceholder.append(wrapper)\n }\n\n const alertTrigger = document.getElementById(\u0027liveAlertBtn\u0027)\n if (alertTrigger) {\n alertTrigger.addEventListener(\u0027click\u0027, () =\u003e {\n appendAlert(\u0027Nice, you triggered this alert message!\u0027, \u0027success\u0027)\n })\n }\n \/\/ js-docs-end live-alert\n\n \/\/ --------\n \/\/ Carousels\n \/\/ --------\n \/\/ Instantiate all non-autoplaying carousels in docs or StackBlitz\n document.querySelectorAll(\u0027.carousel:not([data-bs-ride=\u0022carousel\u0022])\u0027)\n .forEach(carousel =\u003e {\n bootstrap.Carousel.getOrCreateInstance(carousel)\n })\n\n \/\/ -------------------------------\n \/\/ Checks \u0026 Radios\n \/\/ -------------------------------\n \/\/ Indeterminate checkbox example in docs and StackBlitz\n document.querySelectorAll(\u0027.bd-example-indeterminate [type=\u0022checkbox\u0022]\u0027)\n .forEach(checkbox =\u003e {\n if (checkbox.id.includes(\u0027Indeterminate\u0027)) {\n checkbox.indeterminate = true\n }\n })\n\n \/\/ -------------------------------\n \/\/ Links\n \/\/ -------------------------------\n \/\/ Disable empty links in docs examples only\n document.querySelectorAll(\u0027.bd-content [href=\u0022#\u0022]\u0027)\n .forEach(link =\u003e {\n link.addEventListener(\u0027click\u0027, event =\u003e {\n event.preventDefault()\n })\n })\n\n \/\/ -------------------------------\n \/\/ Modal\n \/\/ -------------------------------\n \/\/ Modal \u0027Varying modal content\u0027 example in docs and StackBlitz\n \/\/ js-docs-start varying-modal-content\n const exampleModal = document.getElementById(\u0027exampleModal\u0027)\n if (exampleModal) {\n exampleModal.addEventListener(\u0027show.bs.modal\u0027, event =\u003e {\n \/\/ Button that triggered the modal\n const button = event.relatedTarget\n \/\/ Extract info from data-bs-* attributes\n const recipient = button.getAttribute(\u0027data-bs-whatever\u0027)\n \/\/ If necessary, you could initiate an Ajax request here\n \/\/ and then do the updating in a callback.\n\n \/\/ Update the modal\u0027s content.\n const modalTitle = exampleModal.querySelector(\u0027.modal-title\u0027)\n const modalBodyInput = exampleModal.querySelector(\u0027.modal-body input\u0027)\n\n modalTitle.textContent = \u0060New message to ${recipient}\u0060\n modalBodyInput.value = recipient\n })\n }\n \/\/ js-docs-end varying-modal-content\n\n \/\/ -------------------------------\n \/\/ Offcanvas\n \/\/ -------------------------------\n \/\/ \u0027Offcanvas components\u0027 example in docs only\n const myOffcanvas = document.querySelectorAll(\u0027.bd-example-offcanvas .offcanvas\u0027)\n if (myOffcanvas) {\n myOffcanvas.forEach(offcanvas =\u003e {\n offcanvas.addEventListener(\u0027show.bs.offcanvas\u0027, event =\u003e {\n event.preventDefault()\n }, false)\n })\n }\n})()\n' : null const project = { files: { 'index.html': markup, diff --git a/docs/5.3/components/list-group/index.html b/docs/5.3/components/list-group/index.html index 62cdda173f..b9dc5258f3 100644 --- a/docs/5.3/components/list-group/index.html +++ b/docs/5.3/components/list-group/index.html @@ -5,7 +5,7 @@ - + @@ -20,7 +20,7 @@ - + @@ -281,21 +281,21 @@
- + diff --git a/docs/5.3/examples/cover/index.html b/docs/5.3/examples/cover/index.html index a09ca51b80..4040b74cfd 100644 --- a/docs/5.3/examples/cover/index.html +++ b/docs/5.3/examples/cover/index.html @@ -6,7 +6,7 @@ - + Cover Template · Bootstrap v5.3 @@ -15,7 +15,7 @@ - + @@ -140,21 +140,21 @@
  • @@ -187,7 +187,7 @@

    Cover template for Bootstrap, by @mdo.

- + diff --git a/docs/5.3/examples/dashboard-rtl/index.html b/docs/5.3/examples/dashboard-rtl/index.html index aa5c5486ea..2128f03d7e 100644 --- a/docs/5.3/examples/dashboard-rtl/index.html +++ b/docs/5.3/examples/dashboard-rtl/index.html @@ -6,7 +6,7 @@ - + قالب لوحة القيادة · Bootstrap v5.3 @@ -15,7 +15,7 @@ - + @@ -142,21 +142,21 @@
  • @@ -485,7 +485,7 @@
- + diff --git a/docs/5.3/examples/dashboard/index.html b/docs/5.3/examples/dashboard/index.html index 1012403ced..5f7301e671 100644 --- a/docs/5.3/examples/dashboard/index.html +++ b/docs/5.3/examples/dashboard/index.html @@ -6,7 +6,7 @@ - + Dashboard Template · Bootstrap v5.3 @@ -15,7 +15,7 @@ - + @@ -142,21 +142,21 @@
  • @@ -485,7 +485,7 @@
- + diff --git a/docs/5.3/examples/dropdowns/index.html b/docs/5.3/examples/dropdowns/index.html index 962480e261..c1c0e75058 100644 --- a/docs/5.3/examples/dropdowns/index.html +++ b/docs/5.3/examples/dropdowns/index.html @@ -6,7 +6,7 @@ - + Dropdowns · Bootstrap v5.3 @@ -15,7 +15,7 @@ - + @@ -140,21 +140,21 @@
  • @@ -617,7 +617,7 @@
- + diff --git a/docs/5.3/examples/features/index.html b/docs/5.3/examples/features/index.html index d07d73e914..82408824a9 100644 --- a/docs/5.3/examples/features/index.html +++ b/docs/5.3/examples/features/index.html @@ -6,7 +6,7 @@ - + Features · Bootstrap v5.3 @@ -15,7 +15,7 @@ - + @@ -140,21 +140,21 @@
  • @@ -495,7 +495,7 @@
- + diff --git a/docs/5.3/examples/footers/index.html b/docs/5.3/examples/footers/index.html index 31e9151374..68d8e98c15 100644 --- a/docs/5.3/examples/footers/index.html +++ b/docs/5.3/examples/footers/index.html @@ -6,7 +6,7 @@ - + Footers · Bootstrap v5.3 @@ -15,7 +15,7 @@ - + @@ -138,21 +138,21 @@
  • @@ -179,7 +179,7 @@
    -

    © 2023 Company, Inc

    +

    © 2024 Company, Inc

    @@ -203,7 +203,7 @@ - © 2023 Company, Inc + © 2024 Company, Inc
    -

    © 2023 Company, Inc

    +

    © 2024 Company, Inc

@@ -237,7 +237,7 @@ -

© 2023

+

© 2024

@@ -332,7 +332,7 @@
-

© 2023 Company, Inc. All rights reserved.

+

© 2024 Company, Inc. All rights reserved.

- + diff --git a/docs/5.3/examples/grid/index.html b/docs/5.3/examples/grid/index.html index bc786a1cb1..cd4bac5535 100644 --- a/docs/5.3/examples/grid/index.html +++ b/docs/5.3/examples/grid/index.html @@ -6,7 +6,7 @@ - + Grid Template · Bootstrap v5.3 @@ -15,7 +15,7 @@ - + @@ -140,21 +140,21 @@