<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 new <ahref="/docs/5.0/components/list-group/#numbered"><code>.list-group-numbered</code> modifier</a> to list groups.</li>
</ul>
<h3id="javascript">JavaScript</h3>
<ul>
<li>
<p>All plugins can now accept a CSS selector as the first argument. You can either pass a DOM element or any valid CSS selector to create a new instance of the plugin:</p>
<p>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>
</ul>
<h3id="utilities">Utilities</h3>
<ul>
<li>Dropped the <code>0</code> entry in <code>$border-widths</code> map to remove the duplicated <code>.border-0</code> class.</li>
<li>Renamed <code>--aspect-ratio</code> to <code>--bs-aspect-ratio</code> to be consistent with other custom properties.</li>
<li>Extended the <code>.visually-hidden-focusable</code> helper to also work on containers, using <code>:focus-within</code>.</li>
<li><code>bootstrap-utilities.css</code> now also includes our helpers. Helpers don’t need to be imported in custom builds anymore.</li>
<li>Extended form validation states customization capabilities. Added three new optional parameters to the <code>form-validation-state</code> mixin: <code>tooltip-color</code>, <code>tooltip-bg-color</code>, <code>focus-box-shadow</code>. These parameters can be set in the <code>$form-validation-states</code> map. <ahref="https://github.com/twbs/bootstrap/pull/31757">See #31757</a>.</li>
<li>Restored <code>offset</code> option for Dropdown, Popover and Tooltip plugins.</li>
<li>The default value for the <code>fallbackPlacements</code> is changed to <code>['top', 'right', 'bottom', 'left']</code> for better placement of popper elements.</li>
<li>All the events for the dropdown are now triggered on the dropdown toggle button and then bubbled up to the parent element.</li>
<li>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.</li>
<li><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.</li>
<p><strong>The RTL feature is still experimental and will probably evolve according to user feedback.</strong> Spotted something or have an improvement to suggest? <ahref="https://github.com/twbs/bootstrap/issues/new">Open an issue</a>, we’d love to get your insights.</p>
<p>Horizontal direction sensitive variables, utilities and mixins are renamed with more logical names — <code>start</code> and <code>end</code> in lieu of <code>left</code> and <code>right</code>.</p>
<li>Renamed <code>.dropdown-menu-*-left</code> and <code>.dropdown-menu-*-right</code> to <code>.dropdown-menu-*-start</code> and <code>.dropdown-menu-*-end</code>.</li>
<li>Renamed <code>.bs-popover-left</code> and <code>.bs-popover-right</code> to <code>.bs-popover-start</code> and <code>.bs-popover-end</code>.</li>
<li>Renamed <code>.bs-tooltip-left</code> and <code>.bs-tooltip-right</code> to <code>.bs-tooltip-start</code> and <code>.bs-tooltip-end</code>.</li>
<li>Renamed <code>.carousel-item-left</code> and <code>.carousel-item-right</code> to <code>.carousel-item-start</code> and <code>.carousel-item-end</code>.</li>
<p>Breakpoints specific variants are consequently renamed too (e.g. <code>.text-md-start</code> replaces <code>.text-md-left</code>).</p>
<p><strong>Note</strong>: if you used v4 to make RTL pages, ensure to reverse changes mentioned above: e.g. use <code>.*-start</code> were you used <code>.*-right</code>.</p>
<li>Renamed <code>border-left-radius()</code> and <code>border-right-radius()</code> to <code>border-start-radius()</code> and <code>border-end-radius()</code> — as well as their corner relative variants (eg. <code>.border-bottom-left-radius</code> became <code>.border-bottom-start-radius</code>).</li>
<li>Renamed <code>caret-left()</code> and <code>caret-right()</code> to <code>caret-start()</code> and <code>caret-end()</code> — subsequently, the <code>caret()</code> mixin now takes <code>start</code> and <code>end</code> as arguments instead of <code>left</code> and <code>right</code>.</li>
</ul>
<h5id="variables">Variables</h5>
<ul>
<li>New <code>$breadcrumb-divider-flipped</code> if a different breadcrumb separator is needed in RTL.</li>
<li>Renamed <code>$navbar-brand-margin-right</code> to <code>$navbar-brand-margin-end</code>.</li>
<li>Renamed <code>$pagination-margin-left</code> to <code>$pagination-margin-start</code>.</li>
<li>Renamed <code>$form-check-padding-left</code> to <code>$form-check-padding-start</code>.</li>
<li>Renamed <code>$form-switch-padding-left</code> to <code>$form-switch-padding-start</code>.</li>
<li>Renamed <code>$form-check-inline-margin-right</code> to <code>$form-check-inline-margin-end</code>.</li>
<li>Renamed <code>$form-select-feedback-icon-padding-right</code> to <code>$form-select-feedback-icon-padding-end</code>.</li>
<li>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>.</li>
<li>Updated Popper to v2.x:
<ul>
<li>Removed <code>offset</code> option from our Tooltip/Popover and Dropdown plugins; this can still be achieved using the <code>popperConfig</code> parameter.</li>
<li>The <code>fallbackPlacement</code> option has become <code>fallbackPlacements</code>.</li>
<li>Added new <code>.translate-middle-x</code>&<code>.translate-middle-y</code> utilities to horizontally or vertically center absolute/fixed positioned elements.</li>
<li>Simplified the default appearance of breadcrumbs by removing <code>padding</code>, <code>background-color</code>, and <code>border-radius</code>.</li>
<li>Added new CSS custom property <code>--bs-breadcrumb-divider</code> for easy customization without needing to recompile CSS.</li>
</ul>
<h4id="toasts">Toasts</h4>
<ul>
<li>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>.</li>
</ul>
<h2id="v500-alpha3">v5.0.0-alpha3</h2>
<h3id="browser-support">Browser support</h3>
<ul>
<li>Dropped support for Microsoft Edge Legacy. See <ahref="#browser-support-1">here</a> for the previous browser support changes.</li>
<li>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>scale-color()</code> (changed to <code>shift-color()</code> in Beta 1) 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.</li>
<li>Spinners now honor <code>prefers-reduced-motion: reduce</code> by slowing down animations. <ahref="https://github.com/twbs/bootstrap/pull/31882">See #31882</a>.</li>
</ul>
<h3id="reboot">Reboot</h3>
<ul>
<li>Introduce <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></li>
</ul>
<h3id="buttons">Buttons</h3>
<ul>
<li><ahref="/docs/5.0/components/buttons/#block-buttons">Dropped <code>.btn-block</code> in favor of CSS grid utility classes.</a> Instead of applying <code>.btn-block</code> to individual buttons, a group of buttons now get wrapped in a parent <code>.d-grid</code> class and can use <code>.gap-*</code> utilities for spacing. For individual “block buttons”, add <code>.w-100</code>.</li>
</ul>
<h3id="forms">Forms</h3>
<ul>
<li>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.</li>
<li>Promoted the Floating labels example to fully supported form component. <ahref="/docs/5.0/forms/floating-labels/">See the new Floating labels page.</a></li>
<li>File inputs now use the <code>.form-control</code> class and don’t require JavaScript, additional HTML, or additional classes. <ahref="https://github.com/twbs/bootstrap/pull/31955">See #31955</a>.</li>
<li>Added <code>cursor:pointer</code> to <code>.form-control-color</code> color inputs.</li>
<li>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.</li>
<li>Renamed <code>.font-weight-*</code> utilities as <code>.fw-*</code> for brevity and consistency.</li>
<li>Renamed <code>.font-style-*</code> utilities as <code>.fst-*</code> for brevity and consistency.</li>
</ul>
</li>
<li>Added <code>.d-grid</code> to display utilities</li>
<li>Added new <code>gap</code> utilities (<code>.gap</code>) for CSS Grid layouts</li>
<li>Removed <code>.rounded-sm</code> and <code>rounded-lg</code>, and introduced <code>.rounded-0</code> to <code>.rounded-3</code>. <ahref="https://github.com/twbs/bootstrap/pull/31687">See #31687</a>.</li>
<li>Added default parameters to each <code>border-radius</code> mixin. <ahref="https://github.com/twbs/bootstrap/pull/31571">See #31571</a>.</li>
<li>Updated the next breakpoint when targeting only the <code>xs</code> breakpoint. <ahref="https://github.com/twbs/bootstrap/pull/31500">See #31500</a>.</li>
<li><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>.</li>
</ul>
<h3id="docs">Docs</h3>
<ul>
<li>Renamed “Navs” page to “Navs & Tabs”</li>
<li>Renamed “Screen readers” helper page to “Visually hidden”, and filename to <code>visually-hidden</code></li>
<li>Renamed “Checks” page to “Checks & radios”, and filename to <code>checks-radios</code></li>
<li>Improved documentation of check/radio powered button groups</li>
<li>Improved skip links in our docs.</li>
<li>Redesigned docs navigation for larger tap targets on mobile and a streamlined subnav.</li>
<li><ahref="https://github.com/twbs/bootstrap/pull/31114">#31114</a>: Improved form documentation with regards to accessibility.</li>
</ul>
<h3id="layout">Layout</h3>
<ul>
<li>Container horizontal padding updated to match the gutter size of <code>.row</code>s.</li>
<li><ahref="https://github.com/twbs/bootstrap/pull/31439">#31439</a>: Removed <code>flex: 1 0 100%</code> from rows due to regressions in grid behavior.</li>
</ul>
<h3id="reboot-1">Reboot</h3>
<ul>
<li>Updated <code>th</code> styling to use a default <code>null</code> value for <code>font-weight</code> and inherit <code>text-align</code> instead of setting explicitly.</li>
</ul>
<h3id="colors">Colors</h3>
<ul>
<li>Bumped color contrast ratio from 3:1 to 4.5:1.</li>
<li>Set <code>$black</code> as color contrast color instead of <code>$gray-900</code>.</li>
<li>Improved <code>$green</code> (and its theme alias <code>$success</code>) color to reach a new minimum color contrast (moving from <code>#28a745</code> to <code>#198754</code>).</li>
<li>Improved <code>$cyan</code> (and its theme alias <code>$info</code>) color to be more vibrant (moving from <code>#17a2b8</code> to <code>#0dcaf0</code>).</li>
</ul>
<h3id="forms-1">Forms</h3>
<ul>
<li><ahref="https://github.com/twbs/bootstrap/pull/31383">#31383</a>: Resized checks and radios to be <code>1em</code> instead of <code>1.25em</code> in an effort to make them scale better with custom <code>$font-size-base</code> values and more.</li>
<li><ahref="https://github.com/twbs/bootstrap/pull/31132">#31132</a>: Increased default padding for badges from <code>.25em</code>/<code>.5em</code> to <code>.35em</code>/<code>.65em</code>.</li>
</ul>
<h4id="buttons-1">Buttons</h4>
<ul>
<li><ahref="https://github.com/twbs/bootstrap/pull/30639">#30639</a>: Disabled states of buttons are easier to customize thanks to additional arguments in the <code>button-variant()</code> mixin.</li>
<li><ahref="https://github.com/twbs/bootstrap/pull/30989">#30989</a>: Updated buttons to ensure increased contrast on hover and active states.</li>
</ul>
<h4id="carousel">Carousel</h4>
<ul>
<li>Replaced chevron icons for carousel controls with new SVGs from <ahref="https://icons.getbootstrap.com/">Bootstrap Icons</a>.</li>
<li>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).</li>
</ul>
<h4id="close-button">Close button</h4>
<ul>
<li>Renamed <code>.close</code> to <code>.btn-close</code> for a less generic name.</li>
<li>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.</li>
<li>Added new variables to better control the customization.</li>
<li>Added new <code>.btn-close-white</code> variant that uses <code>filter: invert(1)</code> to enable higher contrast dismiss icons against darker backgrounds.</li>
</ul>
<h4id="collapse">Collapse</h4>
<ul>
<li><ahref="https://github.com/twbs/bootstrap/pull/31346">#31346</a>: Removed scroll anchoring for accordions.</li>
</ul>
<h4id="dropdowns">Dropdowns</h4>
<ul>
<li>Added new <code>.dropdown-menu-dark</code> variant and associated variables for on-demand dark dropdowns.</li>
<li>Added new variable for <code>$dropdown-padding-x</code>.</li>
<li>Darkened the dropdown divider for improved contrast.</li>
</ul>
<h4id="navs">Navs</h4>
<ul>
<li><ahref="https://github.com/twbs/bootstrap/pull/31035">#31035</a>: 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>
</ul>
<h4id="pagination">Pagination</h4>
<ul>
<li>Added <code>transition</code>s to pagination links. <ahref="https://github.com/twbs/bootstrap/pull/31396">See #31396</a>.</li>
</ul>
<h4id="popovers">Popovers</h4>
<ul>
<li>Renamed <code>whiteList</code> option to <code>allowList</code>.</li>
</ul>
<h4id="toasts-1">Toasts</h4>
<ul>
<li><ahref="https://github.com/twbs/bootstrap/pull/31109">#31109</a>: Made default toast duration 5 seconds.</li>
<li><ahref="https://github.com/twbs/bootstrap/pull/31155">#31155</a>: Clear <code>timeout</code> before showing toasts.</li>
<li><ahref="https://github.com/twbs/bootstrap/pull/31381">#31381</a>: Removed <code>overflow: hidden</code> from toasts and replaced with proper <code>border-radius</code>s with <code>calc()</code> functions.</li>
<li>Updated docs to include additional examples for how to customize and theme toasts.</li>
</ul>
<h4id="tooltips">Tooltips</h4>
<ul>
<li>Renamed <code>whiteList</code> option to <code>allowList</code>.</li>
</ul>
<h3id="helpers">Helpers</h3>
<ul>
<li>Responsive embed helpers have been renamed to <ahref="/docs/5.0/helpers/ratio/">ratio helpers</a> with new class names and improved behaviors, as well as a helpful CSS variable.
<ul>
<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>--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>
</ul>
</li>
<li>“Screen reader” classes are now <ahref="/docs/5.0/helpers/visually-hidden/">“visually hidden” classes</a>.
<ul>
<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>
<li><ahref="https://github.com/twbs/bootstrap/pull/31280">#31280</a>: 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.
<ul>
<li>We also added new <code>translate</code> utilities to accompany those position utilities for centering elements when they’re being positioned.</li>
<li>Some great examples have been added to the docs to show these off.</li>
</ul>
</li>
<li><ahref="https://github.com/twbs/bootstrap/pull/31484">#31484</a>: Added new <ahref="/docs/5.0/utilities/borders/#border-width"><code>border-width</code> utility</a>.</li>
<li><ahref="https://github.com/twbs/bootstrap/pull/31473">#31473</a>: The <code>.d-none</code> utility was moved in our CSS to give it more weight over other display utilities.</li>
<li>Renamed <code>.text-monospace</code> to <code>.font-monospace</code>.</li>
<li>Removed <code>.text-hide</code> as it’s an antiquated method for hiding text that shouldn’t be used anymore.</li>
<li>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>.</li>
</ul>
<hr>
<h2id="v500-alpha1">v5.0.0-alpha1</h2>
<h3id="browser-support-1">Browser support</h3>
<p>See the browser and devices page for details on what is currently supported in Bootstrap 5. Since v4, here’s what’s changed to our browser support:</p>
<ul>
<li>Dropped support for Internet Explorer 10 and 11</li>
<li>Dropped support for Microsoft Edge < 16</li>
<p>Changes to our source Sass files and compiled CSS.</p>
<ul>
<li>Removed <code>hover</code>, <code>hover-focus</code>, <code>plain-hover-focus</code>, and <code>hover-focus-active</code> mixins. Use regular CSS syntax for these moving forward. <ahref="https://github.com/twbs/bootstrap/pull/28267">See #28267</a>.</li>
<li>Remove previously deprecated mixins
<ul>
<li><code>float()</code></li>
<li><code>form-control-mixin()</code></li>
<li><code>nav-divider()</code></li>
<li><code>retina-img()</code></li>
<li><code>text-hide()</code> (also dropped the associated utility class, <code>.text-hide</code>)</li>
<li><code>visibility()</code></li>
<li><code>form-control-focus()</code></li>
</ul>
</li>
<li>Rearranged forms source files under <code>scss/forms/</code>. <ahref="#forms">See Forms section for more details.</a></li>
<li>Removed print styles and <code>$enable-print-styles</code> variable. Print display classes, however, have remained intact. <ahref="https://github.com/twbs/bootstrap/pull/28339">See #28339</a>.</li>
<li>Dropped <code>color()</code>, <code>theme-color()</code>&<code>gray()</code> functions in favor of variables. <ahref="https://github.com/twbs/bootstrap/pull/29083">See #29083</a></li>
<li>The <code>theme-color-level()</code> function is renamed 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>.</li>
<li><code>$enable-grid-classes</code> doesn’t disable the generation of container classes anymore <ahref="https://github.com/twbs/bootstrap/pull/29146">See #29146</a></li>
<li>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.</li>
<li>Line heights are dropped from several components to simplify our codebase. The <code>button-size()</code> and <code>pagination-size()</code> do not accept line height parameters anymore. <ahref="https://github.com/twbs/bootstrap/pull/29271">See #29271</a></li>
<li>The <code>button-variant()</code> mixin now accepts 3 optional color parameters, for each button state, to override the color provided by <code>color-contrast()</code>. By default, these parameters will find which color provides more contrast against the button state’s background color with <code>color-contrast()</code>.</li>
<li>The <code>button-outline-variant()</code> mixin now accepts an additional argument, <code>$active-color</code>, for setting the button’s active state text color. By default, this parameter will find which color provides more contrast against the button’s active background color with <code>color-contrast()</code>.</li>
<li>Ditch the Sass map merges, which makes 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>.</li>
<li><code>color-yiq()</code> function and related variables are renamed to <code>color-contrast()</code> since it’s not related to YIQ colorspace anymore. <ahref="https://github.com/twbs/bootstrap/pull/30168/">See #30168.</a>
<ul>
<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>
</ul>
</li>
<li>Linear gradients are simplified when gradients are enabled and therefore, <code>gradient-bg()</code> now only accepts an optional <code>$color</code> parameter.</li>
<li>The <code>bg-gradient-variant()</code> mixin is removed since the <code>.bg-gradient</code> class can now be used to add gradients to elements instead of the <code>.bg-gradient-*</code> classes.</li>
<li>The <code>media-breakpoint-down()</code> uses the breakpoint itself instead of the next breakpoint. Use <code>media-breakpoint-down(lg)</code> instead of <code>media-breakpoint-down(md)</code> to target viewports smaller than the <code>lg</code> breakpoint.</li>
<li>The <code>media-breakpoint-between()</code> mixin’s second parameter also uses the breakpoint itself instead of the next breakpoint. Use <code>media-between(sm, lg)</code> instead of <code>media-breakpoint-between(sm, md)</code> to target viewports between the <code>sm</code> and <code>lg</code> breakpoints.</li>
<li>The <code>box-shadow()</code> mixin now better supports <code>none</code> and <code>null</code> with multiple arguments. Now you can pass multiple arguments with either value and get the expected output. <ahref="https://github.com/twbs/bootstrap/pull/30394">See #30394</a>.</li>
<li>Each <code>border-radius()</code> mixin now has a default value. You can now call these mixins without specifying a border radius value and the <code>$border-radius</code> variable will be used. <ahref="https://github.com/twbs/bootstrap/pull/31571">See #31571</a></li>
<p>Changes to our source and compiled JavaScript files.</p>
<ul>
<li>Dropped jQuery dependency and rewrote plugins to be in regular JavaScript.</li>
<li>Removed underscore from public static methods like <code>_getInstance()</code> → <code>getInstance()</code>.</li>
</ul>
<h3id="color-system">Color system</h3>
<p>We’ve updated the color system that powers Bootstrap to improve color contrast and provide a much more extensive set of colors.</p>
<ul>
<li>Updated blue and pink base colors (<code>-500</code>) to ensure WCAG 2.1 AA contrast.</li>
<li>Added new tints and shades for every color, providing nine separate colors for each base color, as new Sass variables.</li>
<li>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.</li>
</ul>
<h3id="grid-and-layout">Grid and layout</h3>
<p>Changes to any layout tools and our grid system.</p>
<li>Dropped the <code>.media</code> component as it can be built with utility classes. <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>.</li>
<li>Remove <code>position: relative</code> from grid columns.</li>
<li>The horizontal padding is added to the direct children in a row instead of the columns themselves.
<ul>
<li>This simplifies our codebase.</li>
<li>The column classes can now be used stand-alone. Whenever they are used outside a <code>.row</code>, horizontal padding won’t be added.</li>
</ul>
</li>
<li>The responsive gutter classes can be used to control the gutter width in horizontal, vertical or both directions.</li>
<li>The gutter width is now set in <code>rem</code> and decreased from <code>30px</code> to <code>1.5rem</code> (24px).</li>
<li><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 the grid system can be used, even if <code>box-sizing: border-box</code> is not applied to each element.</li>
<li>Removed <code>.no-gutters</code> in favor of new gutter spacing classes. Use <code>.g-0</code> instead. <ahref="/docs/5.0/layout/gutters/">Read the gutter docs for more details.</a></li>
<p>Changes to Reboot, typography, tables, and more.</p>
<ul>
<li><ahref="/docs/5.0/getting-started/rfs/">RFS</a> enabled for automated font size rescaling. <ahref="https://github.com/twbs/bootstrap/pull/29152">See #29152</a></li>
<li>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>.</li>
<li>Simplified table styles (no more odd top border) and tightened cell padding.</li>
<li>Nested tables do not inherit styles anymore.</li>
<li><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>).</li>
<li>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.</li>
<li>Split table cell padding variables into <code>-y</code> and <code>-x</code>.</li>
<li><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></li>
<li>Removed <code>$display-*</code> variables for a new <code>$display-font-sizes</code> Sass map.</li>
<li>Removed individual <code>$display-*-weight</code> variables for a single <code>$display-font-weight</code>.</li>
<li>Added two new <code>.display-*</code> heading styles, <code>.display-5</code> and <code>.display-6</code>.</li>
<li>Resized existing display headings for a slightly more consistent set of <code>font-size</code>s.</li>
<li>Links are underlined by default (not just on hover), unless they’re part of specific components.</li>
</ul>
<h3id="forms-2">Forms</h3>
<ul>
<li>Rearranged form documentation under its own top-level section.
<ul>
<li>Split out old Forms page into several subpages</li>
<li>Moved input groups docs under the new Forms section</li>
</ul>
</li>
<li>Rearranged source Sass files under <code>scss/forms/</code>, including moving over input group styles.</li>
<li>Combined native and custom checkboxes and radios into a single <code>.form-check</code> class.
<ul>
<li>New checks support sizing via <code>em</code>/<code>font-size</code> or explicit modifier classes now.</li>
<li>New checks now appear larger by default for improved usability.</li>
<li>Dropped <code>.custom-control</code> and associated classes.</li>
<li>Renamed most <code>$custom-control</code> variables to <code>$form-control</code> ones.</li>
</ul>
</li>
<li>Combined native and custom selects into <code>.form-select</code>.
<ul>
<li>Dropped <code>.custom-select</code> and associated classes.</li>
<li>Renamed most <code>$custom-select</code> variables to <code>$form-select</code> ones.</li>
</ul>
</li>
<li>Updated file input component with the same overall design, but improved HTML.
<ul>
<li>Refactored <code>.form-file</code> markup to resolve some visual bugs while allowing translation and button text changes via HTML instead of CSS.</li>
<li>Dropped native <code>.form-control-file</code> and <code>.form-control-range</code> components entirely.</li>
<li>Renamed <code>.custom-file</code> to <code>.form-file</code> (including variables). <strong>Watch out:</strong><code>.form-file</code> was later on dropped in <code>v5.0.0-alpha3</code>, now you can use <code>.form-control</code>.</li>
<li>Added support for <code>:focus</code> and <code>:disabled</code> styles.</li>
</ul>
</li>
<li>Renamed <code>.custom-range</code> to <code>.form-range</code> (including variables).</li>
<li>Dropped <code>.form-group</code> for margin utilities (we’ve replaced our docs examples with <code>.mb-3</code>).</li>
<li>Dropped <code>.form-row</code> for the more flexible grid gutters.</li>
<li>Dropped <code>.form-inline</code> for the more flexible grid.</li>
<li>Dropped support for <code>.form-control-plaintext</code> inside <code>.input-group</code>s.</li>
<li>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.</li>
<li>Form labels now require the <code>.form-label</code> class. Sass variables are now available to style form labels to your needs. <ahref="https://github.com/twbs/bootstrap/pull/30476">See #30476</a></li>
<li><code>.form-text</code> no longer sets <code>display</code>, but does set <code>color</code> and <code>font-size</code>. So instead of <code><small class="form-text text-muted"></code> you should now use <code><div class="form-text"></code>.</li>
<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>
</ul>
<h4id="disabled-states">Disabled states</h4>
<ul>
<li>Disabled states of the buttons, close button, pagination link & form range now have <code>pointer-events: none</code> added. This simplifies our codebase and makes it easier to override active states in CSS. <ahref="https://github.com/twbs/bootstrap/pull/29296">#29296</a>.</li>
</ul>
<h4id="alerts">Alerts</h4>
<ul>
<li>Removed auto-darkening of <code><hr></code> elements in <code>.alert-*</code> class variants. <code><hr></code>s use <code>rgba()</code> for their color, so these should naturally blend anyway.</li>
</ul>
<h4id="badges-1">Badges</h4>
<p>Badges were overhauled to better differentiate themselves from buttons and to better utilize utility classes.</p>
<ul>
<li>Removed and replaced <code>.badge</code> modifier classes with background utility classes (e.g., use <code>.bg-primary</code> instead of <code>.badge-primary</code>)</li>
<li>Removed <code>.badge-pill</code> for the <code>.rounded-pill</code> utility class</li>
<li>Removed badge’s hover and focus styles for <code>a.badge</code> and <code>button.badge</code>.</li>
</ul>
<h4id="buttons-2">Buttons</h4>
<ul>
<li>The checkbox/radio toggle is removed from the button plugin in favor of a CSS only solution, which is documented in the <ahref="/docs/5.0/forms/checks-radios/#toggle-buttons">form checks and radios</a> docs. The <code>.btn-check</code> class can be added to inputs, any label with <code>.btn</code> and modifier class can be used to theme the labels. <ahref="https://github.com/twbs/bootstrap/pull/30650">See #30650</a>.</li>
</ul>
<h4id="cards">Cards</h4>
<ul>
<li>Removed the card columns in favor of a Masonry grid <ahref="https://github.com/twbs/bootstrap/pull/28922">See #28922</a>.</li>
<li>Removed card decks in favor of the grid which adds more flexibility over responsive behavior.</li>
</ul>
<h4id="jumbotron">Jumbotron</h4>
<ul>
<li>The jumbotron component is removed in favor of utility classes like <code>.bg-light</code> for the background color and <code>.p-*</code> classes to control padding.</li>
</ul>
<h4id="navbars">Navbars</h4>
<ul>
<li>All navbars now require a container within. This drastically simplifies spacing requirements and removes the need for extensive CSS overrides we added for responsive containers in v4.</li>
</ul>
<h4id="pagination-1">Pagination</h4>
<ul>
<li>Pagination links now have customizable <code>margin-left</code> that are dynamically rounded on all corners when separated from one another.</li>
</ul>
<h4id="popovers-1">Popovers</h4>
<ul>
<li>Renamed <code>.arrow</code> to <code>.popover-arrow</code></li>
</ul>
<h4id="tooltips-1">Tooltips</h4>
<ul>
<li>Renamed <code>.arrow</code> to <code>.tooltip-arrow</code></li>
</ul>
<h3id="accessibility">Accessibility</h3>
<ul>
<li>Unlike the old <code>.sr-only-focusable</code>, which only worked in combination with <code>.sr-only</code>, <code>.sr-only-focusable</code> can be used as a standalone class without <code>.sr-only</code>. <ahref="https://github.com/twbs/bootstrap/pull/28720">See #28720</a>.</li>
<li>Decreased the number of responsive order utilities per breakpoint. The highest order utility with a number now is <code>.order-5</code> instead of <code>.order-12</code>. <ahref="https://github.com/twbs/bootstrap/pull/28874">See #28874</a>.</li>
</ul>
<h3id="misc">Misc</h3>
<ul>
<li>Added <code>.bg-body</code> for quickly setting the <code><body></code>’s background to additional elements.</li>
<li>Negative margin utilities are disabled by default. You can re-enable them by setting <code>$enable-negative-margins: true</code>, but keep in mind this can increase the file size quite a lot.</li>
</ul>
<h3id="docs-1">Docs</h3>
<ul>
<li>Removed “Wall of browser bugs” page because it has become obsolete</li>
<li>Switched from Jekyll to Hugo</li>
</ul>
<h3id="build-tools">Build tools</h3>
<ul>
<li>Updated all devDependencies</li>
<li>We support only the latest Node.js LTS releases which are 10 and 12 at the time of writing</li>
<pclass="mb-0">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>.</p>
