summaryrefslogtreecommitdiffstats
path: root/site/content
diff options
context:
space:
mode:
Diffstat (limited to 'site/content')
-rw-r--r--site/content/docs/5.3/components/popovers.md2
-rw-r--r--site/content/docs/5.3/examples/dashboard-rtl/index.html6
-rw-r--r--site/content/docs/5.3/examples/dashboard/index.html6
-rw-r--r--site/content/docs/5.3/examples/features/unsplash-photo-1.jpgbin10451 -> 10433 bytes
-rw-r--r--site/content/docs/5.3/examples/features/unsplash-photo-2.jpgbin113018 -> 113000 bytes
-rw-r--r--site/content/docs/5.3/examples/features/unsplash-photo-3.jpgbin40607 -> 40589 bytes
-rw-r--r--site/content/docs/5.3/examples/heroes/bootstrap-docs.pngbin371399 -> 369569 bytes
-rw-r--r--site/content/docs/5.3/examples/starter-template/index.html2
-rw-r--r--site/content/docs/5.3/getting-started/download.md18
-rw-r--r--site/content/docs/5.3/getting-started/introduction.md13
-rw-r--r--site/content/docs/5.3/getting-started/javascript.md3
-rw-r--r--site/content/docs/5.3/layout/gutters.md2
-rw-r--r--site/content/docs/5.3/migration.md71
13 files changed, 68 insertions, 55 deletions
diff --git a/site/content/docs/5.3/components/popovers.md b/site/content/docs/5.3/components/popovers.md
index 0a2138d..685d2c3 100644
--- a/site/content/docs/5.3/components/popovers.md
+++ b/site/content/docs/5.3/components/popovers.md
@@ -198,7 +198,7 @@ Note that for security reasons the `sanitize`, `sanitizeFn`, and `allowList` opt
| `sanitize` | boolean | `true` | Enable or disable the sanitization. If activated `'template'`, `'content'` and `'title'` options will be sanitized. |
| `sanitizeFn` | null, function | `null` | Here you can supply your own sanitize function. This can be useful if you prefer to use a dedicated library to perform sanitization. |
| `selector` | string, false | `false` | If a selector is provided, popover objects will be delegated to the specified targets. In practice, this is used to also apply popovers to dynamically added DOM elements (`jQuery.on` support). See [this issue]({{< param repo >}}/issues/4215) and [an informative example](https://codepen.io/Johann-S/pen/djJYPb). **Note**: `title` attribute must not be used as a selector. |
-| `template` | string | `'<div class="popover" role="popover"><div class="popover-arrow"></div><div class="popover-inner"></div></div>'` | Base HTML to use when creating the popover. The popover's `title` will be injected into the `.popover-inner`. `.popover-arrow` will become the popover's arrow. The outermost wrapper element should have the `.popover` class and `role="popover"`. |
+| `template` | string | `'<div class="popover" role="tooltip"><div class="popover-arrow"></div><div class="popover-inner"></div></div>'` | Base HTML to use when creating the popover. The popover's `title` will be injected into the `.popover-inner`. `.popover-arrow` will become the popover's arrow. The outermost wrapper element should have the `.popover` class and `role="tooltip"`. |
| `title` | string, element, function | `''` | The popover title. If a function is given, it will be called with its `this` reference set to the element that the popover is attached to. |
| `trigger` | string | `'hover focus'` | How popover is triggered: click, hover, focus, manual. You may pass multiple triggers; separate them with a space. `'manual'` indicates that the popover will be triggered programmatically via the `.popover('show')`, `.popover('hide')` and `.popover('toggle')` methods; this value cannot be combined with any other trigger. `'hover'` on its own will result in popovers that cannot be triggered via the keyboard, and should only be used if alternative methods for conveying the same information for keyboard users is present. |
{{< /bs-table >}}
diff --git a/site/content/docs/5.3/examples/dashboard-rtl/index.html b/site/content/docs/5.3/examples/dashboard-rtl/index.html
index 6fb4a63..ffdd9d1 100644
--- a/site/content/docs/5.3/examples/dashboard-rtl/index.html
+++ b/site/content/docs/5.3/examples/dashboard-rtl/index.html
@@ -3,11 +3,11 @@ layout: examples
title: قالب لوحة القيادة
direction: rtl
extra_css:
- - "https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css"
+ - "https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.min.css"
- "../dashboard/dashboard.rtl.css"
extra_js:
- - src: "https://cdn.jsdelivr.net/npm/chart.js@4.2.1/dist/chart.umd.min.js"
- integrity: "sha384-gdQErvCNWvHQZj6XZM0dNsAoY4v+j5P1XDpNkcM3HJG1Yx04ecqIHk7+4VBOCHOG"
+ - src: "https://cdn.jsdelivr.net/npm/chart.js@4.3.2/dist/chart.umd.js"
+ integrity: "sha384-eI7PSr3L1XLISH8JdDII5YN/njoSsxfbrkCTnJrzXt+ENP5MOVBxD+l6sEG4zoLp"
- src: "dashboard.js"
---
diff --git a/site/content/docs/5.3/examples/dashboard/index.html b/site/content/docs/5.3/examples/dashboard/index.html
index db84bd6..d060048 100644
--- a/site/content/docs/5.3/examples/dashboard/index.html
+++ b/site/content/docs/5.3/examples/dashboard/index.html
@@ -2,11 +2,11 @@
layout: examples
title: Dashboard Template
extra_css:
- - "https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css"
+ - "https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.min.css"
- "dashboard.css"
extra_js:
- - src: "https://cdn.jsdelivr.net/npm/chart.js@4.2.1/dist/chart.umd.min.js"
- integrity: "sha384-gdQErvCNWvHQZj6XZM0dNsAoY4v+j5P1XDpNkcM3HJG1Yx04ecqIHk7+4VBOCHOG"
+ - src: "https://cdn.jsdelivr.net/npm/chart.js@4.3.2/dist/chart.umd.js"
+ integrity: "sha384-eI7PSr3L1XLISH8JdDII5YN/njoSsxfbrkCTnJrzXt+ENP5MOVBxD+l6sEG4zoLp"
- src: "dashboard.js"
---
diff --git a/site/content/docs/5.3/examples/features/unsplash-photo-1.jpg b/site/content/docs/5.3/examples/features/unsplash-photo-1.jpg
index ed2e36a..283acd0 100644
--- a/site/content/docs/5.3/examples/features/unsplash-photo-1.jpg
+++ b/site/content/docs/5.3/examples/features/unsplash-photo-1.jpg
Binary files differ
diff --git a/site/content/docs/5.3/examples/features/unsplash-photo-2.jpg b/site/content/docs/5.3/examples/features/unsplash-photo-2.jpg
index b66864a..81eae64 100644
--- a/site/content/docs/5.3/examples/features/unsplash-photo-2.jpg
+++ b/site/content/docs/5.3/examples/features/unsplash-photo-2.jpg
Binary files differ
diff --git a/site/content/docs/5.3/examples/features/unsplash-photo-3.jpg b/site/content/docs/5.3/examples/features/unsplash-photo-3.jpg
index c411b17..0f401d1 100644
--- a/site/content/docs/5.3/examples/features/unsplash-photo-3.jpg
+++ b/site/content/docs/5.3/examples/features/unsplash-photo-3.jpg
Binary files differ
diff --git a/site/content/docs/5.3/examples/heroes/bootstrap-docs.png b/site/content/docs/5.3/examples/heroes/bootstrap-docs.png
index 471a9ed..daf9c62 100644
--- a/site/content/docs/5.3/examples/heroes/bootstrap-docs.png
+++ b/site/content/docs/5.3/examples/heroes/bootstrap-docs.png
Binary files differ
diff --git a/site/content/docs/5.3/examples/starter-template/index.html b/site/content/docs/5.3/examples/starter-template/index.html
index 51503f1..ec8e57d 100644
--- a/site/content/docs/5.3/examples/starter-template/index.html
+++ b/site/content/docs/5.3/examples/starter-template/index.html
@@ -34,7 +34,7 @@ title: Starter Template
<div class="row g-5">
<div class="col-md-6">
<h2 class="text-body-emphasis">Starter projects</h2>
- <p>Ready to beyond the starter template? Check out these open source projects that you can quickly duplicate to a new GitHub repository.</p>
+ <p>Ready to go beyond the starter template? Check out these open source projects that you can quickly duplicate to a new GitHub repository.</p>
<ul class="list-unstyled ps-0">
<li>
<a class="icon-link mb-1" href="https://github.com/twbs/examples/tree/main/icons-font" rel="noopener" target="_blank">
diff --git a/site/content/docs/5.3/getting-started/download.md b/site/content/docs/5.3/getting-started/download.md
index a1b8bfd..f813e48 100644
--- a/site/content/docs/5.3/getting-started/download.md
+++ b/site/content/docs/5.3/getting-started/download.md
@@ -50,6 +50,24 @@ If you're using our compiled JavaScript and prefer to include Popper separately,
<script src="{{< param "cdn.js" >}}" integrity="{{< param "cdn.js_hash" >}}" crossorigin="anonymous"></script>
```
+### Alternative CDNs
+
+We recommend [jsDelivr](https://www.jsdelivr.com/) and use it ourselves in our documentation. However, in some cases—like in some specific countries or environments—you may need to use other CDN providers like [cdnjs](https://cdnjs.com/) or [unpkg](https://unpkg.com/).
+
+You'll find the same files on these CDN providers, albeit with different URLs. With cdnjs, you can [use this direct Bootstrap package link](https://cdnjs.com/libraries/bootstrap) to copy and paste ready-to-use HTML snippets for each dist file from any version of Bootstrap.
+
+{{< callout warning>}}
+**If the SRI hashes differ for a given file, you shouldn't use the files from that CDN, because it means that the file was modified by someone else.**
+{{< /callout >}}
+
+Note that you should compare same length hashes, e.g. `sha384` with `sha384`, otherwise it's expected for them to be different.
+As such, you can use an online tool like [SRI Hash Generator](https://www.srihash.org/) to make sure that the hashes are the same for a given file.
+Alternatively, assuming you have OpenSSL installed, you can achieve the same from the CLI, for example:
+
+```sh
+openssl dgst -sha384 -binary bootstrap.min.js | openssl base64 -A
+```
+
## Package managers
Pull in Bootstrap's **source files** into nearly any project with some of the most popular package managers. No matter the package manager, Bootstrap will **require a [Sass compiler]({{< docsref "/getting-started/contribute#sass" >}}) and [Autoprefixer](https://github.com/postcss/autoprefixer)** for a setup that matches our official compiled versions.
diff --git a/site/content/docs/5.3/getting-started/introduction.md b/site/content/docs/5.3/getting-started/introduction.md
index d296d18..538d319 100644
--- a/site/content/docs/5.3/getting-started/introduction.md
+++ b/site/content/docs/5.3/getting-started/introduction.md
@@ -75,20 +75,14 @@ You can also use the CDN to fetch any of our [additional builds listed in the Co
## Next steps
- Read a bit more about some [important global environment settings](#important-globals) that Bootstrap utilizes.
-
- Read about what's included in Bootstrap in our [contents section]({{< docsref "/getting-started/contents/" >}}) and the list of [components that require JavaScript](#js-components) below.
-
- Need a little more power? Consider building with Bootstrap by [including the source files via package manager]({{< docsref "/getting-started/download#package-managers" >}}).
-
- Looking to use Bootstrap as a module with `<script type="module">`? Please refer to our [using Bootstrap as a module]({{< docsref "/getting-started/javascript#using-bootstrap-as-a-module" >}}) section.
## JS components
-Curious which components explicitly require our JavaScript and Popper? Click the show components link below. If you're at all unsure about the general page structure, keep reading for an example page template.
+Curious which components explicitly require our JavaScript and Popper? If you're at all unsure about the general page structure, keep reading for an example page template.
-<details>
-<summary class="bd-summary-link mb-3">Show components requiring JavaScript</summary>
-{{< markdown >}}
- Alerts for dismissing
- Buttons for toggling states and checkbox/radio functionality
- Carousel for all slide behaviors, controls, and indicators
@@ -101,8 +95,6 @@ Curious which components explicitly require our JavaScript and Popper? Click the
- Scrollspy for scroll behavior and navigation updates
- Toasts for displaying and dismissing
- Tooltips and popovers for displaying and positioning (also requires [Popper](https://popper.js.org/))
-{{< /markdown >}}
-</details>
## Important globals
@@ -154,7 +146,8 @@ For improved cross-browser rendering, we use [Reboot]({{< docsref "/content/rebo
Stay up-to-date on the development of Bootstrap and reach out to the community with these helpful resources.
- Read and subscribe to [The Official Bootstrap Blog]({{< param blog >}}).
-- Ask and explore [our GitHub Discussions](https://github.com/twbs/bootstrap/discussions).
+- Ask questions and explore [our GitHub Discussions](https://github.com/twbs/bootstrap/discussions).
+- Discuss, ask questions, and more on [the community Discord](https://discord.gg/bZUvakRU3M) or [Bootstrap subreddit](https://reddit.com/r/bootstrap).
- Chat with fellow Bootstrappers in IRC. On the `irc.libera.chat` server, in the `#bootstrap` channel.
- Implementation help may be found at Stack Overflow (tagged [`bootstrap-5`](https://stackoverflow.com/questions/tagged/bootstrap-5)).
- Developers should use the keyword `bootstrap` on packages that modify or add to the functionality of Bootstrap when distributing through [npm](https://www.npmjs.com/search?q=keywords:bootstrap) or similar delivery mechanisms for maximum discoverability.
diff --git a/site/content/docs/5.3/getting-started/javascript.md b/site/content/docs/5.3/getting-started/javascript.md
index 80c222f..afa4ccd 100644
--- a/site/content/docs/5.3/getting-started/javascript.md
+++ b/site/content/docs/5.3/getting-started/javascript.md
@@ -22,7 +22,8 @@ A better alternative for those using this type of frameworks is to use a framewo
{{< callout >}}
**Try it yourself!** Download the source code and working demo for using Bootstrap with React, Next.js, and React Bootstrap from the [twbs/examples repository](https://github.com/twbs/examples/tree/main/react-nextjs). You can also [open the example in StackBlitz](https://stackblitz.com/github/twbs/examples/tree/main/react-nextjs?file=src%2Fpages%2Findex.tsx).
{{< /callout >}}
-- Vue: [BootstrapVue](https://bootstrap-vue.org/) (currently only supports Vue 2 and Bootstrap 4)
+- Vue: [BootstrapVue](https://bootstrap-vue.org/) (Bootstrap 4)
+- Vue 3: [BootstrapVueNext](https://bootstrap-vue-next.github.io/bootstrap-vue-next/) (Bootstrap 5, currently in alpha)
- Angular: [ng-bootstrap](https://ng-bootstrap.github.io/)
## Using Bootstrap as a module
diff --git a/site/content/docs/5.3/layout/gutters.md b/site/content/docs/5.3/layout/gutters.md
index a5b0772..0cb35a9 100644
--- a/site/content/docs/5.3/layout/gutters.md
+++ b/site/content/docs/5.3/layout/gutters.md
@@ -139,7 +139,7 @@ The gutters between columns in our predefined grid classes can be removed with `
**Need an edge-to-edge design?** Drop the parent `.container` or `.container-fluid` and add `.mx-0` to the `.row` to prevent overflow.
-In practice, here's how it looks. Note you can continue to use this with all other predefined grid classes (including column widths, responsive tiers, reorders, and more).
+In practice, here's how it looks. Note that you can continue to use this with all other predefined grid classes (including column widths, responsive tiers, reorders, and more).
{{< example class="bd-example-row" >}}
<div class="row g-0 text-center">
diff --git a/site/content/docs/5.3/migration.md b/site/content/docs/5.3/migration.md
index ab486c6..27dff45 100644
--- a/site/content/docs/5.3/migration.md
+++ b/site/content/docs/5.3/migration.md
@@ -349,20 +349,22 @@ For a complete list of changes, [see the v5.2.0 project on GitHub](https://githu
Want more information? [Read the v5.1.0 blog post.](https://blog.getbootstrap.com/2021/08/04/bootstrap-5-1-0/)
-<hr class="my-5">
+## v5.0.0
+
+<hr class="mb-4">
{{< callout info >}}
**Hey there!** Changes to our first major release of Bootstrap 5, v5.0.0, are documented below. They don't reflect the additional changes shown above.
{{< /callout >}}
-## Dependencies
+### Dependencies
- Dropped jQuery.
- Upgraded from Popper v1.x to Popper v2.x.
- Replaced Libsass with Dart Sass as our Sass compiler given Libsass was deprecated.
- Migrated from Jekyll to Hugo for building our documentation
-## Browser support
+### Browser support
- Dropped Internet Explorer 10 and 11
- Dropped Microsoft Edge < 16 (Legacy Edge)
@@ -373,7 +375,7 @@ Want more information? [Read the v5.1.0 blog post.](https://blog.getbootstrap.co
<hr class="my-5">
-## Documentation changes
+### Documentation changes
- Redesigned homepage, docs layout, and footer.
- Added [new Parcel guide]({{< docsref "/getting-started/parcel" >}}).
@@ -385,7 +387,7 @@ Want more information? [Read the v5.1.0 blog post.](https://blog.getbootstrap.co
- Redesigned the navbar and added a new subnav to make it easier to get around our sites and docs versions.
- Added new keyboard shortcut for the search field: <kbd><kbd>Ctrl</kbd> + <kbd>/</kbd></kbd>.
-## Sass
+### Sass
- We've ditched the default Sass map merges to make it easier to remove redundant values. Keep in mind you now have to define all values in the Sass maps like `$theme-colors`. Check out how to deal with [Sass maps]({{< docsref "/customize/sass#maps-and-loops" >}}).
@@ -423,7 +425,7 @@ Want more information? [Read the v5.1.0 blog post.](https://blog.getbootstrap.co
- The `border-radius()` mixin now has a default value.
-## Color system
+### Color system
- The color system which worked with `color-level()` and `$theme-color-interval` was removed in favor of a new color system. All `lighten()` and `darken()` functions in our codebase are replaced by `tint-color()` and `shade-color()`. These functions will mix the color with either white or black instead of changing its lightness by a fixed amount. The `shift-color()` will either tint or shade a color depending on whether its weight parameter is positive or negative. [See #30622](https://github.com/twbs/bootstrap/pull/30622) for more details.
@@ -433,7 +435,7 @@ Want more information? [Read the v5.1.0 blog post.](https://blog.getbootstrap.co
- To support our color system, we've added new custom `tint-color()` and `shade-color()` functions to mix our colors appropriately.
-## Grid updates
+### Grid updates
- **New breakpoint!** Added new `xxl` breakpoint for `1400px` and up. No changes to all other breakpoints.
@@ -453,7 +455,7 @@ Want more information? [Read the v5.1.0 blog post.](https://blog.getbootstrap.co
- Updated the `make-col` mixin to default to equal columns without a specified size.
-## Content, Reboot, etc
+### Content, Reboot, etc
- **[RFS]({{< docsref "/getting-started/rfs" >}}) is now enabled by default.** Headings using the `font-size()` mixin will automatically adjust their `font-size` to scale with the viewport. _This feature was previously opt-in with v4._
@@ -485,11 +487,11 @@ Want more information? [Read the v5.1.0 blog post.](https://blog.getbootstrap.co
- Added `$enable-smooth-scroll`, which applies `scroll-behavior: smooth` globally—except for users asking for reduced motion through `prefers-reduced-motion` media query. [See #31877](https://github.com/twbs/bootstrap/pull/31877)
-## RTL
+### RTL
- Horizontal direction specific variables, utilities, and mixins have all been renamed to use logical properties like those found in flexbox layouts—e.g., `start` and `end` in lieu of `left` and `right`.
-## Forms
+### Forms
- **Added new floating forms!** We've promoted the Floating labels example to fully supported form components. [See the new Floating labels page.]({{< docsref "/forms/floating-labels" >}})
@@ -520,21 +522,21 @@ Want more information? [Read the v5.1.0 blog post.](https://blog.getbootstrap.co
<hr class="my-5">
-## Components
+### Components
- Unified `padding` values for alerts, breadcrumbs, cards, dropdowns, list groups, modals, popovers, and tooltips to be based on our `$spacer` variable. [See #30564](https://github.com/twbs/bootstrap/pull/30564).
-### Accordion
+#### Accordion
- Added [new accordion component]({{< docsref "/components/accordion" >}}).
-### Alerts
+#### Alerts
- Alerts now have [examples with icons]({{< docsref "/components/alerts#icons" >}}).
- Removed custom styles for `<hr>`s in each alert since they already use `currentColor`.
-### Badges
+#### Badges
- <span class="badge bg-danger">Breaking</span> Dropped all `.badge-*` color classes for background utilities (e.g., use `.bg-primary` instead of `.badge-primary`).
@@ -544,13 +546,13 @@ Want more information? [Read the v5.1.0 blog post.](https://blog.getbootstrap.co
- Increased default padding for badges from `.25em`/`.5em` to `.35em`/`.65em`.
-### Breadcrumbs
+#### Breadcrumbs
- Simplified the default appearance of breadcrumbs by removing `padding`, `background-color`, and `border-radius`.
- Added new CSS custom property `--bs-breadcrumb-divider` for easy customization without needing to recompile CSS.
-### Buttons
+#### Buttons
- <span class="badge bg-danger">Breaking</span> **[Toggle buttons]({{< docsref "/forms/checks-radios#toggle-buttons" >}}), with checkboxes or radios, no longer require JavaScript and have new markup.** We no longer require a wrapping element, add `.btn-check` to the `<input>`, and pair it with any `.btn` classes on the `<label>`. [See #30650](https://github.com/twbs/bootstrap/pull/30650). _The docs for this has moved from our Buttons page to the new Forms section._
@@ -562,7 +564,7 @@ Want more information? [Read the v5.1.0 blog post.](https://blog.getbootstrap.co
- Disabled buttons now have `pointer-events: none;`.
-### Card
+#### Card
- <span class="badge bg-danger">Breaking</span> Dropped `.card-deck` in favor of our grid. Wrap your cards in column classes and add a parent `.row-cols-*` container to recreate card decks (but with more control over responsive alignment).
@@ -570,13 +572,13 @@ Want more information? [Read the v5.1.0 blog post.](https://blog.getbootstrap.co
- <span class="badge bg-danger">Breaking</span> Replaced the `.card` based accordion with a [new Accordion component]({{< docsref "/components/accordion" >}}).
-### Carousel
+#### Carousel
- Added new [`.carousel-dark` variant]({{< docsref "/components/carousel#dark-variant" >}}) for dark text, controls, and indicators (great for lighter backgrounds).
- Replaced chevron icons for carousel controls with new SVGs from [Bootstrap Icons]({{< param "icons" >}}).
-### Close button
+#### Close button
- <span class="badge bg-danger">Breaking</span> Renamed `.close` to `.btn-close` for a less generic name.
@@ -584,11 +586,11 @@ Want more information? [Read the v5.1.0 blog post.](https://blog.getbootstrap.co
- Added new `.btn-close-white` variant that uses `filter: invert(1)` to enable higher contrast dismiss icons against darker backgrounds.
-### Collapse
+#### Collapse
- Removed scroll anchoring for accordions.
-### Dropdowns
+#### Dropdowns
- Added new `.dropdown-menu-dark` variant and associated variables for on-demand dark dropdowns.
@@ -606,46 +608,46 @@ Want more information? [Read the v5.1.0 blog post.](https://blog.getbootstrap.co
- Dropdowns now support `.dropdown-item`s wrapped in `<li>`s.
-### Jumbotron
+#### Jumbotron
- <span class="badge bg-danger">Breaking</span> Dropped the jumbotron component as it can be replicated with utilities. [See our new Jumbotron example for a demo.]({{< docsref "/examples/jumbotron" >}})
-### List group
+#### List group
- Added new [`.list-group-numbered` modifier]({{< docsref "/components/list-group#numbered" >}}) to list groups.
-### Navs and tabs
+#### Navs and tabs
- Added new `null` variables for `font-size`, `font-weight`, `color`, and `:hover` `color` to the `.nav-link` class.
-### Navbars
+#### Navbars
- <span class="badge bg-danger">Breaking</span> Navbars now require a container within (to drastically simplify spacing requirements and CSS required).
- <span class="badge bg-danger">Breaking</span> The `.active` class can no longer be applied to `.nav-item`s, it must be applied directly on `.nav-link`s.
-### Offcanvas
+#### Offcanvas
- Added the new [offcanvas component]({{< docsref "/components/offcanvas" >}}).
-### Pagination
+#### Pagination
- Pagination links now have customizable `margin-left` that are dynamically rounded on all corners when separated from one another.
- Added `transition`s to pagination links.
-### Popovers
+#### Popovers
- <span class="badge bg-danger">Breaking</span> Renamed `.arrow` to `.popover-arrow` in our default popover template.
- Renamed `whiteList` option to `allowList`.
-### Spinners
+#### Spinners
- Spinners now honor `prefers-reduced-motion: reduce` by slowing down animations. [See #31882](https://github.com/twbs/bootstrap/pull/31882).
- Improved spinner vertical alignment.
-### Toasts
+#### Toasts
- Toasts can now be [positioned]({{< docsref "/components/toasts#placement" >}}) in a `.toast-container` with the help of [positioning utilities]({{< docsref "/utilities/position" >}}).
@@ -653,7 +655,7 @@ Want more information? [Read the v5.1.0 blog post.](https://blog.getbootstrap.co
- Removed `overflow: hidden` from toasts and replaced with proper `border-radius`s with `calc()` functions.
-### Tooltips
+#### Tooltips
- <span class="badge bg-danger">Breaking</span> Renamed `.arrow` to `.tooltip-arrow` in our default tooltip template.
@@ -661,10 +663,9 @@ Want more information? [Read the v5.1.0 blog post.](https://blog.getbootstrap.co
- <span class="badge bg-danger">Breaking</span> Renamed `whiteList` option to `allowList`.
-## Utilities
+### Utilities
- <span class="badge bg-danger">Breaking</span> Renamed several utilities to use logical property names instead of directional names with the addition of RTL support:
- - Renamed `.left-*` and `.right-*` to `.start-*` and `.end-*`.
- Renamed `.float-left` and `.float-right` to `.float-start` and `.float-end`.
- Renamed `.border-left` and `.border-right` to `.border-start` and `.border-end`.
- Renamed `.rounded-left` and `.rounded-right` to `.rounded-start` and `.rounded-end`.
@@ -702,7 +703,7 @@ Want more information? [Read the v5.1.0 blog post.](https://blog.getbootstrap.co
- Extended the `.visually-hidden-focusable` helper to also work on containers, using `:focus-within`.
-## Helpers
+### Helpers
- <span class="badge bg-danger">Breaking</span> **Responsive embed helpers have been renamed to [ratio helpers]({{< docsref "/helpers/ratio" >}})** with new class names and improved behaviors, as well as a helpful CSS variable.
- Classes have been renamed to change `by` to `x` in the aspect ratio. For example, `.ratio-16by9` is now `.ratio-16x9`.
@@ -717,7 +718,7 @@ Want more information? [Read the v5.1.0 blog post.](https://blog.getbootstrap.co
- `bootstrap-utilities.css` now also includes our helpers. Helpers don't need to be imported in custom builds anymore.
-## JavaScript
+### JavaScript
- **Dropped jQuery dependency** and rewrote plugins to be in regular JavaScript.