<metaname="description"content="Track and review changes to the Bootstrap source files, documentation, and components to help you migrate from v4 to v5.">
<metaname="author"content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<metaname="twitter:title"content="Migrating to v5">
<metaname="twitter:description"content="Track and review changes to the Bootstrap source files, documentation, and components to help you migrate from v4 to v5.">
<metaproperty="og:title"content="Migrating to v5">
<metaproperty="og:description"content="Track and review changes to the Bootstrap source files, documentation, and components to help you migrate from v4 to v5.">
<aclass="btn btn-sm btn-bd-light mb-2 mb-md-0"href="https://github.com/twbs/bootstrap/blob/main/site/content/docs/5.0/migration.md"title="View and edit this file on GitHub"target="_blank"rel="noopener">View on GitHub</a>
<h1class="bd-title"id="content">Migrating to v5</h1>
</div>
<pclass="bd-lead">Track and review changes to the Bootstrap source files, documentation, and components to help you migrate from v4 to v5.</p>
<li>Added <ahref="https://getbootstrap.com/docs/5.0/customize/overview/">new Customize section</a>, replacing <ahref="https://getbootstrap.com/docs/4.6/getting-started/theming/">v4’s Theming page</a>, with new details on Sass, global configuration options, color schemes, CSS variables, and more.</li>
<li>Reorganized all form documentation into <ahref="https://getbootstrap.com/docs/5.0/forms/overview/">new Forms section</a>, breaking apart the content into more focused pages.</li>
<li>Similarly, updated <ahref="https://getbootstrap.com/docs/5.0/layout/breakpoints/">the Layout section</a>, to flesh out grid content more clearly.</li>
<li>Renamed “Navs” component page to “Navs & Tabs”.</li>
<li>Renamed “Checks” page to “Checks & radios”.</li>
<li>Redesigned the navbar and added a new subnav to make it easier to get around our sites and docs versions.</li>
<li>Added new keyboard shortcut for the search field: <kbd>Ctrl + /</kbd>.</li>
<p>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 <code>$theme-colors</code>. Check out how to deal with <ahref="/docs/5.0/customize/sass/#maps-and-loops">Sass maps</a>.</p>
</li>
<li>
<p><spanclass="badge bg-danger">Breaking</span> Renamed <code>color-yiq()</code> function and related variables to <code>color-contrast()</code> as it’s no longer related to YIQ colorspace. <ahref="https://github.com/twbs/bootstrap/pull/30168/">See #30168.</a></p>
<li><code>$yiq-contrasted-threshold</code> is renamed to <code>$min-contrast-ratio</code>.</li>
<li><code>$yiq-text-dark</code> and <code>$yiq-text-light</code> are respectively renamed to <code>$color-contrast-dark</code> and <code>$color-contrast-light</code>.</li>
<p><spanclass="badge bg-danger">Breaking</span> Dropped <code>color()</code>, <code>theme-color()</code>, and <code>gray()</code> functions in favor of variables. <ahref="https://github.com/twbs/bootstrap/pull/29083">See #29083</a>.</p>
<p><spanclass="badge bg-danger">Breaking</span> Renamed <code>theme-color-level()</code> function to <code>color-level()</code> and now accepts any color you want instead of only <code>$theme-color</code> colors. <ahref="https://github.com/twbs/bootstrap/pull/29083">See #29083</a><strong>Watch out:</strong><code>color-level()</code> was later on dropped in <code>v5.0.0-alpha3</code>.</p>
</li>
<li>
<p><spanclass="badge bg-danger">Breaking</span> Renamed <code>$enable-prefers-reduced-motion-media-query</code> and <code>$enable-pointer-cursor-for-buttons</code> to <code>$enable-reduced-motion</code> and <code>$enable-button-pointers</code> for brevity.</p>
</li>
<li>
<p><spanclass="badge bg-danger">Breaking</span> Removed the <code>bg-gradient-variant()</code> mixin. Use the <code>.bg-gradient</code> class to add gradients to elements instead of the generated <code>.bg-gradient-*</code> classes.</p>
<p><spanclass="badge bg-danger">Breaking</span> Renamed <code>scale-color()</code> function to <code>shift-color()</code> to avoid collision with Sass’s own color scaling function.</p>
</li>
<li>
<p><code>box-shadow</code> mixins now allow <code>null</code> values and drop <code>none</code> from multiple arguments. <ahref="https://github.com/twbs/bootstrap/pull/30394">See #30394</a>.</p>
</li>
<li>
<p>The <code>border-radius()</code> mixin now has a default value.</p>
<p>The color system which worked with <code>color-level()</code> and <code>$theme-color-interval</code> was removed in favor of a new color system. All <code>lighten()</code> and <code>darken()</code> functions in our codebase are replaced by <code>tint-color()</code> and <code>shade-color()</code>. These functions will mix the color with either white or black instead of changing its lightness by a fixed amount. The <code>shift-color()</code> will either tint or shade a color depending on whether its weight parameter is positive or negative. <ahref="https://github.com/twbs/bootstrap/pull/30622">See #30622</a> for more details.</p>
</li>
<li>
<p>Added new tints and shades for every color, providing nine separate colors for each base color, as new Sass variables.</p>
</li>
<li>
<p>Improved color contrast. Bumped color contrast ratio from 3:1 to 4.5:1 and updated blue, green, cyan, and pink colors to ensure WCAG 2.1 AA contrast. Also changed our color contrast color from <code>$gray-900</code> to <code>$black</code>.</p>
</li>
<li>
<p>To support our color system, we’ve added new custom <code>tint-color()</code> and <code>shade-color()</code> functions to mix our colors appropriately.</p>
<p><strong>New breakpoint!</strong> Added new <code>xxl</code> breakpoint for <code>1400px</code> and up. No changes to all other breakpoints.</p>
</li>
<li>
<p><strong>Improved gutters.</strong> Gutters are now set in rems, and are narrower than v4 (<code>1.5rem</code>, or about <code>24px</code>, down from <code>30px</code>). This aligns our grid system’s gutters with our spacing utilities.</p>
<li>Added new <ahref="https://getbootstrap.com/docs/5.0/layout/gutters/">gutter class</a> (<code>.g-*</code>, <code>.gx-*</code>, and <code>.gy-*</code>) to control horizontal/vertical gutters, horizontal gutters, and vertical gutters.</li>
<li><spanclass="badge bg-danger">Breaking</span> Renamed <code>.no-gutters</code> to <code>.g-0</code> to match new gutter utilities.</li>
<p>Columns no longer have <code>position: relative</code> applied, so you may have to add <code>.position-relative</code> to some elements to restore that behavior.</p>
</li>
<li>
<p><spanclass="badge bg-danger">Breaking</span> Dropped several <code>.order-*</code> classes that often went unused. We now only provide <code>.order-1</code> to <code>.order-5</code> out of the box.</p>
</li>
<li>
<p><spanclass="badge bg-danger">Breaking</span> Dropped the <code>.media</code> component as it can be easily replicated with utilities. <ahref="https://github.com/twbs/bootstrap/pull/28265">See #28265</a> and the <ahref="/docs/5.0/utilities/flex/#media-object">flex utilities page for an example</a>.</p>
</li>
<li>
<p><spanclass="badge bg-danger">Breaking</span><code>bootstrap-grid.css</code> now only applies <code>box-sizing: border-box</code> to the column instead of resetting the global box-sizing. This way, our grid styles can be used in more places without interference.</p>
</li>
<li>
<p><code>$enable-grid-classes</code> no longer disables the generation of container classes anymore. <ahref="https://github.com/twbs/bootstrap/pull/29146">See #29146.</a></p>
</li>
<li>
<p>Updated the <code>make-col</code> mixin to default to equal columns without a specified size.</p>
<p><strong><ahref="/docs/5.0/getting-started/rfs/">RFS</a> is now enabled by default.</strong> Headings using the <code>font-size()</code> mixin will automatically adjust their <code>font-size</code> to scale with the viewport. <em>This feature was previously opt-in with v4.</em></p>
</li>
<li>
<p><spanclass="badge bg-danger">Breaking</span> Overhauled our display typography to replace our <code>$display-*</code> variables and with a <code>$display-font-sizes</code> Sass map. Also removed the individual <code>$display-*-weight</code> variables for a single <code>$display-font-weight</code> and adjusted <code>font-size</code>s.</p>
</li>
<li>
<p>Added two new <code>.display-*</code> heading sizes, <code>.display-5</code> and <code>.display-6</code>.</p>
</li>
<li>
<p><strong>Links are underlined by default</strong> (not just on hover), unless they’re part of specific components.</p>
</li>
<li>
<p><strong>Redesigned tables</strong> to refresh their styles and rebuild them with CSS variables for more control over styling.</p>
</li>
<li>
<p><spanclass="badge bg-danger">Breaking</span> Nested tables do not inherit styles anymore.</p>
</li>
<li>
<p><spanclass="badge bg-danger">Breaking</span><code>.thead-light</code> and <code>.thead-dark</code> are dropped in favor of the <code>.table-*</code> variant classes which can be used for all table elements (<code>thead</code>, <code>tbody</code>, <code>tfoot</code>, <code>tr</code>, <code>th</code> and <code>td</code>).</p>
</li>
<li>
<p><spanclass="badge bg-danger">Breaking</span> The <code>table-row-variant()</code> mixin is renamed to <code>table-variant()</code> and accepts only 2 parameters: <code>$color</code> (colon name) and <code>$value</code> (color code). The border color and accent colors are automatically calculated based on the table factor variables.</p>
</li>
<li>
<p>Split table cell padding variables into <code>-y</code> and <code>-x</code>.</p>
<p><spanclass="badge bg-danger">Breaking</span><code>.text-*</code> utilities do not add hover and focus states to links anymore. <code>.link-*</code> helper classes can be used instead. <ahref="https://github.com/twbs/bootstrap/pull/29267">See #29267</a></p>
<p>Reset default horizontal <code>padding-left</code> on <code><ul></code> and <code><ol></code> elements from browser default <code>40px</code> to <code>2rem</code>.</p>
</li>
<li>
<p>Added <code>$enable-smooth-scroll</code>, which applies <code>scroll-behavior: smooth</code> globally—except for users asking for reduced motion through <code>prefers-reduced-motion</code> media query. <ahref="https://github.com/twbs/bootstrap/pull/31877">See #31877</a></p>
<li>Horizontal direction specific variables, utilities, and mixins have all been renamed to use logical properties like those found in flexbox layouts—e.g., <code>start</code> and <code>end</code> in lieu of <code>left</code> and <code>right</code>.</li>
<p><strong>Added new floating forms!</strong> We’ve promoted the Floating labels example to fully supported form components. <ahref="/docs/5.0/forms/floating-labels/">See the new Floating labels page.</a></p>
<p><spanclass="badge bg-danger">Breaking</span><strong>Consolidated native and custom form elements.</strong> Checkboxes, radios, selects, and other inputs that had native and custom classes in v4 have been consolidated. Now nearly all our form elements are entirely custom, most without the need for custom HTML.</p>
<p><spanclass="badge bg-danger">Breaking</span> Dropped <code>.input-group-append</code> and <code>.input-group-prepend</code>. You can now just add buttons and <code>.input-group-text</code> as direct children of the input groups.</p>
</li>
<li>
<p>The longstanding <ahref="https://github.com/twbs/bootstrap/issues/25110">Missing border radius on input group with validation feedback bug</a> is finally fixed by adding an additional <code>.has-validation</code> class to input groups with validation.</p>
</li>
<li>
<p><spanclass="badge bg-danger">Breaking</span><strong>Dropped form-specific layout classes for our grid system.</strong> Use our grid and utilities instead of <code>.form-group</code>, <code>.form-row</code>, or <code>.form-inline</code>.</p>
</li>
<li>
<p><spanclass="badge bg-danger">Breaking</span> Form labels now require <code>.form-label</code>.</p>
</li>
<li>
<p><spanclass="badge bg-danger">Breaking</span><code>.form-text</code> no longer sets <code>display</code>, allowing you to create inline or block help text as you wish just by changing the HTML element.</p>
</li>
<li>
<p>Validation icons are no longer applied to <code><select></code>s with <code>multiple</code>.</p>
</li>
<li>
<p>Rearranged source Sass files under <code>scss/forms/</code>, including input group styles.</p>
<li>Unified <code>padding</code> values for alerts, breadcrumbs, cards, dropdowns, list groups, modals, popovers, and tooltips to be based on our <code>$spacer</code> variable. <ahref="https://github.com/twbs/bootstrap/pull/30564">See #30564</a>.</li>
<p><spanclass="badge bg-danger">Breaking</span> Dropped all <code>.badge-*</code> color classes for background utilities (e.g., use <code>.bg-primary</code> instead of <code>.badge-primary</code>).</p>
</li>
<li>
<p><spanclass="badge bg-danger">Breaking</span> Dropped <code>.badge-pill</code>—use the <code>.rounded-pill</code> utility instead.</p>
</li>
<li>
<p><spanclass="badge bg-danger">Breaking</span> Removed hover and focus styles for <code><a></code> and <code><button></code> elements.</p>
</li>
<li>
<p>Increased default padding for badges from <code>.25em</code>/<code>.5em</code> to <code>.35em</code>/<code>.65em</code>.</p>
<p>Simplified the default appearance of breadcrumbs by removing <code>padding</code>, <code>background-color</code>, and <code>border-radius</code>.</p>
</li>
<li>
<p>Added new CSS custom property <code>--bs-breadcrumb-divider</code> for easy customization without needing to recompile CSS.</p>
<p><spanclass="badge bg-danger">Breaking</span><strong><ahref="http://getbootstrap.com/docs/5.0/forms/checks-radios/#toggle-buttons">Toggle buttons</a>, with checkboxes or radios, no longer require JavaScript and have new markup.</strong> We no long require a wrapping element, add <code>.btn-check</code> to the <code><input></code>, and pair it with any <code>.btn</code> classes on the <code><label></code>. <ahref="https://github.com/twbs/bootstrap/pull/30650">See #30650</a>. <em>The docs for this has moved from our Buttons page to the new Forms section.</em></p>
</li>
<li>
<p><spanclass="badge bg-danger">Breaking</span><strong>Dropped <code>.btn-block</code> for utilities.</strong> Instead of using <code>.btn-block</code> on the <code>.btn</code>, wrap your buttons with <code>.d-grid</code> and a <code>.gap-*</code> utility to space them as needed. Switch to responsive classes for even more control over them. <ahref="http://getbootstrap.com/docs/5.0/components/buttons/#block-buttons">Read the docs for some examples.</a></p>
</li>
<li>
<p>Updated our <code>button-variant()</code> and <code>button-outline-variant()</code> mixins to support additional parameters.</p>
</li>
<li>
<p>Updated buttons to ensure increased contrast on hover and active states.</p>
</li>
<li>
<p>Disabled buttons now have <code>pointer-events: none;</code>.</p>
<p><spanclass="badge bg-danger">Breaking</span> Dropped <code>.card-deck</code> in favor of our grid. Wrap your cards in column classes and add a parent <code>.row-cols-*</code> container to recreate card decks (but with more control over responsive alignment).</p>
</li>
<li>
<p><spanclass="badge bg-danger">Breaking</span> Dropped <code>.card-columns</code> in favor of Masonry. <ahref="https://github.com/twbs/bootstrap/pull/28922">See #28922</a>.</p>
</li>
<li>
<p><spanclass="badge bg-danger">Breaking</span> Replaced the <code>.card</code> based accordion with a <ahref="/docs/5.0/components/accordion/">new Accordion component</a>.</p>
<p>Added new <ahref="/docs/5.0/components/carousel/#dark-variant"><code>.carousel-dark</code> variant</a> for dark text, controls, and indicators (great for lighter backgrounds).</p>
</li>
<li>
<p>Replaced chevron icons for carousel controls with new SVGs from <ahref="https://icons.getbootstrap.com/">Bootstrap Icons</a>.</p>
<p><spanclass="badge bg-danger">Breaking</span> Renamed <code>.close</code> to <code>.btn-close</code> for a less generic name.</p>
</li>
<li>
<p>Close buttons now use a <code>background-image</code> (embedded SVG) instead of a <code>&times;</code> in the HTML, allowing for easier customization without the need to touch your markup.</p>
</li>
<li>
<p>Added new <code>.btn-close-white</code> variant that uses <code>filter: invert(1)</code> to enable higher contrast dismiss icons against darker backgrounds.</p>
<p>Added new <code>.dropdown-menu-dark</code> variant and associated variables for on-demand dark dropdowns.</p>
</li>
<li>
<p>Added new variable for <code>$dropdown-padding-x</code>.</p>
</li>
<li>
<p>Darkened the dropdown divider for improved contrast.</p>
</li>
<li>
<p><spanclass="badge bg-danger">Breaking</span> All the events for the dropdown are now triggered on the dropdown toggle button and then bubbled up to the parent element.</p>
</li>
<li>
<p>Dropdown menus now have a <code>data-bs-popper="static"</code> attribute set when the positioning of the dropdown is static and <code>data-bs-popper="none"</code> when dropdown is in the navbar. This is added by our JavaScript and helps us use custom position styles without interfering with Popper’s positioning.</p>
</li>
<li>
<p><spanclass="badge bg-danger">Breaking</span> Dropped <code>flip</code> option for dropdown plugin in favor of native Popper configuration. You can now disable the flipping behavior by passing an empty array for <ahref="https://popper.js.org/docs/v2/modifiers/flip/#fallbackplacements"><code>fallbackPlacements</code></a> option in <ahref="https://popper.js.org/docs/v2/modifiers/flip/">flip</a> modifier.</p>
</li>
<li>
<p>Dropdown menus can now be clickable with a new <code>autoClose</code> option to handle the <ahref="/docs/5.0/components/dropdowns/#auto-close-behavior">auto close behavior</a>. You can use this option to accept the click inside or outside the dropdown menu to make it interactive.</p>
</li>
<li>
<p>Dropdowns now support <code>.dropdown-item</code>s wrapped in <code><li></code>s.</p>
<li><spanclass="badge bg-danger">Breaking</span> Dropped the jumbotron component as it can be replicated with utilities. <ahref="https://getbootstrap.com/docs/5.0/examples/jumbotron/">See our new Jumbotron example for a demo.</a></li>
<li>Added new <code>null</code> variables for <code>font-size</code>, <code>font-weight</code>, <code>color</code>, and <code>:hover</code><code>color</code> to the <code>.nav-link</code> class.</li>
<li><spanclass="badge bg-danger">Breaking</span> Navbars now require a container within (to drastically simplify spacing requirements and CSS required).</li>
<p>Spinners now honor <code>prefers-reduced-motion: reduce</code> by slowing down animations. <ahref="https://github.com/twbs/bootstrap/pull/31882">See #31882</a>.</p>
<p>Toasts can now be <ahref="/docs/5.0/components/toasts/#placement">positioned</a> in a <code>.toast-container</code> with the help of <ahref="/docs/5.0/utilities/position/">positioning utilities</a>.</p>
</li>
<li>
<p>Changed default toast duration to 5 seconds.</p>
</li>
<li>
<p>Removed <code>overflow: hidden</code> from toasts and replaced with proper <code>border-radius</code>s with <code>calc()</code> functions.</p>
<p><spanclass="badge bg-danger">Breaking</span> Renamed <code>.arrow</code> to <code>.tooltip-arrow</code> in our default tooltip template.</p>
</li>
<li>
<p><spanclass="badge bg-danger">Breaking</span> The default value for the <code>fallbackPlacements</code> is changed to <code>['top', 'right', 'bottom', 'left']</code> for better placement of popper elements.</p>
</li>
<li>
<p><spanclass="badge bg-danger">Breaking</span> Renamed <code>whiteList</code> option to <code>allowList</code>.</p>
<p><spanclass="badge bg-danger">Breaking</span> Renamed several utilities to use logical property names instead of directoinal names with the addition of RTL support:</p>
<p><spanclass="badge bg-danger">Breaking</span> Disabled negative margins by default.</p>
</li>
<li>
<p>Added new <code>.bg-body</code> class for quickly setting the <code><body></code>’s background to additional elements.</p>
</li>
<li>
<p>Added new <ahref="/docs/5.0/utilities/position/#arrange-elements">position utilities</a> for <code>top</code>, <code>right</code>, <code>bottom</code>, and <code>left</code>. Values include <code>0</code>, <code>50%</code>, and <code>100%</code> for each property.</p>
</li>
<li>
<p>Added new <code>.translate-middle-x</code>&<code>.translate-middle-y</code> utilities to horizontally or vertically center absolute/fixed positioned elements.</p>
</li>
<li>
<p>Added new <ahref="/docs/5.0/utilities/borders/#border-width"><code>border-width</code> utilities</a>.</p>
</li>
<li>
<p><spanclass="badge bg-danger">Breaking</span> Renamed <code>.text-monospace</code> to <code>.font-monospace</code>.</p>
</li>
<li>
<p><spanclass="badge bg-danger">Breaking</span> Removed <code>.text-hide</code> as it’s an antiquated method for hiding text that shouldn’t be used anymore.</p>
</li>
<li>
<p>Added <code>.fs-*</code> utilities for <code>font-size</code> utilities (with RFS enabled). These use the same scale as HTML’s default headings (1-6, large to small), and can be modified via Sass map.</p>
</li>
<li>
<p><spanclass="badge bg-danger">Breaking</span> Renamed <code>.font-weight-*</code> utilities as <code>.fw-*</code> for brevity and consistency.</p>
</li>
<li>
<p><spanclass="badge bg-danger">Breaking</span> Renamed <code>.font-style-*</code> utilities as <code>.fst-*</code> for brevity and consistency.</p>
</li>
<li>
<p>Added <code>.d-grid</code> to display utilities and new <code>gap</code> utilities (<code>.gap</code>) for CSS Grid and flexbox layouts.</p>
</li>
<li>
<p><spanclass="badge bg-danger">Breaking</span> Removed <code>.rounded-sm</code> and <code>rounded-lg</code>, and introduced a new scale of classes, <code>.rounded-0</code> to <code>.rounded-3</code>. <ahref="https://github.com/twbs/bootstrap/pull/31687">See #31687</a>.</p>
</li>
<li>
<p>Added new <code>line-height</code> utilities: <code>.lh-1</code>, <code>.lh-sm</code>, <code>.lh-base</code> and <code>.lh-lg</code>. See <ahref="/docs/5.0/utilities/text/#line-height">here</a>.</p>
</li>
<li>
<p>Moved the <code>.d-none</code> utility in our CSS to give it more weight over other display utilities.</p>
</li>
<li>
<p>Extended the <code>.visually-hidden-focusable</code> helper to also work on containers, using <code>:focus-within</code>.</p>
<p><spanclass="badge bg-danger">Breaking</span><strong>Responsive embed helpers have been renamed to <ahref="/docs/5.0/helpers/ratio/">ratio helpers</a></strong> with new class names and improved behaviors, as well as a helpful CSS variable.</p>
<li>Classes have been renamed to change <code>by</code> to <code>x</code> in the aspect ratio. For example, <code>.ratio-16by9</code> is now <code>.ratio-16x9</code>.</li>
<li>We’ve dropped the <code>.embed-responsive-item</code> and element group selector in favor of a simpler <code>.ratio > *</code> selector. No more class is needed, and the ratio helper now works with any HTML element.</li>
<li>The <code>$embed-responsive-aspect-ratios</code> Sass map has been renamed to <code>$aspect-ratios</code> and its values have been simplified to include the class name and the percentage as the <code>key: value</code> pair.</li>
<li>CSS variables are now generated and included for each value in the Sass map. Modify the <code>--bs-aspect-ratio</code> variable on the <code>.ratio</code> to create any <ahref="/docs/5.0/helpers/ratio/#custom-ratios">custom aspect ratio</a>.</li>
<p><spanclass="badge bg-danger">Breaking</span><strong>“Screen reader” classes are now <ahref="/docs/5.0/helpers/visually-hidden/">“visually hidden” classes</a>.</strong></p>
<li>Changed the Sass file from <code>scss/helpers/_screenreaders.scss</code> to <code>scss/helpers/_visually-hidden.scss</code></li>
<li>Renamed <code>.sr-only</code> and <code>.sr-only-focusable</code> to <code>.visually-hidden</code> and <code>.visually-hidden-focusable</code></li>
<li>Renamed <code>sr-only()</code> and <code>sr-only-focusable()</code> mixins to <code>visually-hidden()</code> and <code>visually-hidden-focusable()</code>.</li>
<p><spanclass="badge bg-danger">Breaking</span> Data attributes for all JavaScript plugins are now namespaced to help distinguish Bootstrap functionality from third parties and your own code. For example, we use <code>data-bs-toggle</code> instead of <code>data-toggle</code>.</p>
<p><strong>All plugins can now accept a CSS selector as the first argument.</strong> You can either pass a DOM element or any valid CSS selector to create a new instance of the plugin:</p>
<p><code>popperConfig</code> can be passed as a function that accepts the Bootstrap’s default Popper config as an argument, so that you can merge this default configuration in your way. <strong>Applies to dropdowns, popovers, and tooltips.</strong></p>
<p>The default value for the <code>fallbackPlacements</code> is changed to <code>['top', 'right', 'bottom', 'left']</code> for better placement of Popper elements. <strong>Applies to dropdowns, popovers, and tooltips.</strong></p>
<liclass="mb-2">Designed and built with all the love in the world by the <ahref="/docs/5.0/about/team/">Bootstrap team</a> with the help of <ahref="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</li>
<liclass="mb-2">Code licensed <ahref="https://github.com/twbs/bootstrap/blob/main/LICENSE"target="_blank"rel="license noopener">MIT</a>, docs <ahref="https://creativecommons.org/licenses/by/3.0/"target="_blank"rel="license noopener">CC BY 3.0</a>.</li>
