<metaname="description"content="Bootstrap 4 is a major rewrite of the entire project. The most notable changes are summarized below, followed by more specific changes to relevant components.">
<metaname="author"content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<metaname="twitter:title"content="Migrating to v4">
<metaname="twitter:description"content="Bootstrap 4 is a major rewrite of the entire project. The most notable changes are summarized below, followed by more specific changes to relevant components.">
<metaproperty="og:title"content="Migrating to v4">
<metaproperty="og:description"content="Bootstrap 4 is a major rewrite of the entire project. The most notable changes are summarized below, followed by more specific changes to relevant components.">
<aclass="btn btn-sm btn-bd-light my-2 my-md-0"href="https://github.com/twbs/bootstrap/blob/v4-dev/site/docs/4.5/migration.md"title="View and edit this file on GitHub"target="_blank"rel="noopener">View on GitHub</a>
<pclass="bd-lead">Bootstrap 4 is a major rewrite of the entire project. The most notable changes are summarized below, followed by more specific changes to relevant components.</p>
<p>Fixed broken print utilities. Previously, using a <codeclass="language-plaintext highlighter-rouge">.d-print-*</code> class would unexpectedly overrule any other <codeclass="language-plaintext highlighter-rouge">.d-*</code> class. Now, they match our other display utilities and only apply to that media (<codeclass="language-plaintext highlighter-rouge">@media print</code>).</p>
<p>Expanded available print display utilities to match other utilities. Beta 3 and older only had <codeclass="language-plaintext highlighter-rouge">block</code>, <codeclass="language-plaintext highlighter-rouge">inline-block</code>, <codeclass="language-plaintext highlighter-rouge">inline</code>, and <codeclass="language-plaintext highlighter-rouge">none</code>. Stable v4 added <codeclass="language-plaintext highlighter-rouge">flex</code>, <codeclass="language-plaintext highlighter-rouge">inline-flex</code>, <codeclass="language-plaintext highlighter-rouge">table</code>, <codeclass="language-plaintext highlighter-rouge">table-row</code>, and <codeclass="language-plaintext highlighter-rouge">table-cell</code>.</p>
<p>Fixed print preview rendering across browsers with new print styles that specify <codeclass="language-plaintext highlighter-rouge">@page</code><codeclass="language-plaintext highlighter-rouge">size</code>.</p>
<p>While Beta 2 saw the bulk of our breaking changes during the beta phase, but we still have a few that needed to be addressed in the Beta 3 release. These changes apply if you’re updating to Beta 3 from Beta 2 or any older version of Bootstrap.</p>
<li>Removed the unused <codeclass="language-plaintext highlighter-rouge">$thumbnail-transition</code> variable. We weren’t transitioning anything, so it was just extra code.</li>
<li>The npm package no longer includes any files other than our source and dist files; if you relied on them and were running our scripts via the <codeclass="language-plaintext highlighter-rouge">node_modules</code> folder, you should adapt your workflow.</li>
<p>Rewrote both custom and default checkboxes and radios. Now, both have matching HTML structure (outer <codeclass="language-plaintext highlighter-rouge"><div></code> with sibling <codeclass="language-plaintext highlighter-rouge"><input></code> and <codeclass="language-plaintext highlighter-rouge"><label></code>) and the same layout styles (stacked default, inline with modifier class). This allows us to style the label based on the input’s state, simplifying support for the <codeclass="language-plaintext highlighter-rouge">disabled</code> attribute (previously requiring a parent class) and better supporting our form validation.</p>
<p>As part of this, we’ve changed the CSS for managing multiple <codeclass="language-plaintext highlighter-rouge">background-image</code>s on custom form checkboxes and radios. Previously, the now removed <codeclass="language-plaintext highlighter-rouge">.custom-control-indicator</code> element had the background color, gradient, and SVG icon. Customizing the background gradient meant replacing all of those every time you needed to change just one. Now, we have <codeclass="language-plaintext highlighter-rouge">.custom-control-label::before</code> for the fill and gradient and <codeclass="language-plaintext highlighter-rouge">.custom-control-label::after</code> handles the icon.</p>
<p>Updated selector for input-based button groups. Instead of <codeclass="language-plaintext highlighter-rouge">[data-toggle="buttons"] { }</code> for style and behavior, we use the <codeclass="language-plaintext highlighter-rouge">data</code> attribute just for JS behaviors and rely on a new <codeclass="language-plaintext highlighter-rouge">.btn-group-toggle</code> class for styling.</p>
<p>Removed <codeclass="language-plaintext highlighter-rouge">.col-form-legend</code> in favor of a slightly improved <codeclass="language-plaintext highlighter-rouge">.col-form-label</code>. This way <codeclass="language-plaintext highlighter-rouge">.col-form-label-sm</code> and <codeclass="language-plaintext highlighter-rouge">.col-form-label-lg</code> can be used on <codeclass="language-plaintext highlighter-rouge"><legend></code> elements with ease.</p>
<p>Custom file inputs received a change to their <codeclass="language-plaintext highlighter-rouge">$custom-file-text</code> Sass variable. It’s no longer a nested Sass map and now only powers one string—the <codeclass="language-plaintext highlighter-rouge">Browse</code> button as that is now the only pseudo-element generated from our Sass. The <codeclass="language-plaintext highlighter-rouge">Choose file</code> text now comes from the <codeclass="language-plaintext highlighter-rouge">.custom-file-label</code>.</p>
<p>Input group addons are now specific to their placement relative to an input. We’ve dropped <codeclass="language-plaintext highlighter-rouge">.input-group-addon</code> and <codeclass="language-plaintext highlighter-rouge">.input-group-btn</code> for two new classes, <codeclass="language-plaintext highlighter-rouge">.input-group-prepend</code> and <codeclass="language-plaintext highlighter-rouge">.input-group-append</code>. You must explicitly use an append or a prepend now, simplifying much of our CSS. Within an append or prepend, place your buttons as they would exist anywhere else, but wrap text in <codeclass="language-plaintext highlighter-rouge">.input-group-text</code>.</p>
<p>Sizing classes must be on the parent <codeclass="language-plaintext highlighter-rouge">.input-group</code> and not the individual form elements.</p>
<p>While in beta, we aim to have no breaking changes. However, things don’t always go as planned. Below are the breaking changes to bear in mind when moving from Beta 1 to Beta 2.</p>
<li>Removed <codeclass="language-plaintext highlighter-rouge">$badge-color</code> variable and its usage on <codeclass="language-plaintext highlighter-rouge">.badge</code>. We use a color contrast function to pick a <codeclass="language-plaintext highlighter-rouge">color</code> based on the <codeclass="language-plaintext highlighter-rouge">background-color</code>, so the variable is unnecessary.</li>
<li>Renamed <codeclass="language-plaintext highlighter-rouge">grayscale()</code> function to <codeclass="language-plaintext highlighter-rouge">gray()</code> to avoid breaking conflict with the CSS native <codeclass="language-plaintext highlighter-rouge">grayscale</code> filter.</li>
<li>Renamed <codeclass="language-plaintext highlighter-rouge">.table-inverse</code>, <codeclass="language-plaintext highlighter-rouge">.thead-inverse</code>, and <codeclass="language-plaintext highlighter-rouge">.thead-default</code> to <codeclass="language-plaintext highlighter-rouge">.*-dark</code> and <codeclass="language-plaintext highlighter-rouge">.*-light</code>, matching our color schemes used elsewhere.</li>
<li>Responsive tables now generate classes for each grid breakpoint. This breaks from Beta 1 in that the <codeclass="language-plaintext highlighter-rouge">.table-responsive</code> you’ve been using is more like <codeclass="language-plaintext highlighter-rouge">.table-responsive-md</code>. You may now use <codeclass="language-plaintext highlighter-rouge">.table-responsive</code> or <codeclass="language-plaintext highlighter-rouge">.table-responsive-{sm,md,lg,xl}</code> as needed.</li>
<li>Dropped Bower support as the package manager has been deprecated for alternatives (e.g., Yarn or npm). <ahref="https://github.com/bower/bower/issues/2298">See bower/bower#2298</a> for details.</li>
<li>Bootstrap still requires jQuery 1.9.1 or higher, but you’re advised to use version 3.x since v3.x’s supported browsers are the ones Bootstrap supports plus v3.x has some security fixes.</li>
<li>Removed the unused <codeclass="language-plaintext highlighter-rouge">.form-control-label</code> class. If you did make use of this class, it was duplicate of the <codeclass="language-plaintext highlighter-rouge">.col-form-label</code> class that vertically centered a <codeclass="language-plaintext highlighter-rouge"><label></code> with it’s associated input in horizontal form layouts.</li>
<li>Changed the <codeclass="language-plaintext highlighter-rouge">color-yiq</code> from a mixin that included the <codeclass="language-plaintext highlighter-rouge">color</code> property to a function that returns a value, allowing you to use it for any CSS property. For example, instead of <codeclass="language-plaintext highlighter-rouge">color-yiq(#000)</code>, you’d write <codeclass="language-plaintext highlighter-rouge">color: color-yiq(#000);</code>.</li>
<li>Introduced new <codeclass="language-plaintext highlighter-rouge">pointer-events</code> usage on modals. The outer <codeclass="language-plaintext highlighter-rouge">.modal-dialog</code> passes through events with <codeclass="language-plaintext highlighter-rouge">pointer-events: none</code> for custom click handling (making it possible to just listen on the <codeclass="language-plaintext highlighter-rouge">.modal-backdrop</code> for any clicks), and then counteracts it for the actual <codeclass="language-plaintext highlighter-rouge">.modal-content</code> with <codeclass="language-plaintext highlighter-rouge">pointer-events: auto</code>.</li>
<p>Here are the big ticket items you’ll want to be aware of when moving from v3 to v4.</p>
<h3id="browser-support">Browser support</h3>
<ul>
<li>Dropped IE8, IE9, and iOS 6 support. v4 is now only IE10+ and iOS 7+. For sites needing either of those, use v3.</li>
<li>Added official support for Android v5.0 Lollipop’s Browser and WebView. Earlier versions of the Android Browser and WebView remain only unofficially supported.</li>
</ul>
<h3id="global-changes">Global changes</h3>
<ul>
<li><strong>Flexbox is enabled by default.</strong> In general this means a move away from floats and more across our components.</li>
<li>Switched from <ahref="http://lesscss.org/">Less</a> to <ahref="https://sass-lang.com/">Sass</a> for our source CSS files.</li>
<li>Switched from <codeclass="language-plaintext highlighter-rouge">px</code> to <codeclass="language-plaintext highlighter-rouge">rem</code> as our primary CSS unit, though pixels are still used for media queries and grid behavior as device viewports are not affected by type size.</li>
<li>Global font-size increased from <codeclass="language-plaintext highlighter-rouge">14px</code> to <codeclass="language-plaintext highlighter-rouge">16px</code>.</li>
<li>Revamped grid tiers to add a fifth option (addressing smaller devices at <codeclass="language-plaintext highlighter-rouge">576px</code> and below) and removed the <codeclass="language-plaintext highlighter-rouge">-xs</code> infix from those classes. Example: <codeclass="language-plaintext highlighter-rouge">.col-6.col-sm-4.col-md-3</code>.</li>
<li>Replaced the separate optional theme with configurable options via SCSS variables (e.g., <codeclass="language-plaintext highlighter-rouge">$enable-gradients: true</code>).</li>
<li>Build system overhauled to use a series of npm scripts instead of Grunt. See <codeclass="language-plaintext highlighter-rouge">package.json</code> for all scripts, or our project readme for local development needs.</li>
<li>Non-responsive usage of Bootstrap is no longer supported.</li>
<li>Dropped the online Customizer in favor of more extensive setup documentation and customized builds.</li>
<li>Added dozens of new <ahref="/docs/4.5/utilities/">utility classes</a> for common CSS property-value pairs and margin/padding spacing shortcuts.</li>
</ul>
<h3id="grid-system">Grid system</h3>
<ul>
<li><strong>Moved to flexbox.</strong>
<ul>
<li>Added support for flexbox in the grid mixins and predefined classes.</li>
<li>As part of flexbox, included support for vertical and horizontal alignment classes.</li>
</ul>
</li>
<li><strong>Updated grid class names and a new grid tier.</strong>
<li>Added a new <codeclass="language-plaintext highlighter-rouge">sm</code> grid tier below <codeclass="language-plaintext highlighter-rouge">768px</code> for more granular control. We now have <codeclass="language-plaintext highlighter-rouge">xs</code>, <codeclass="language-plaintext highlighter-rouge">sm</code>, <codeclass="language-plaintext highlighter-rouge">md</code>, <codeclass="language-plaintext highlighter-rouge">lg</code>, and <codeclass="language-plaintext highlighter-rouge">xl</code>. This also means every tier has been bumped up one level (so <codeclass="language-plaintext highlighter-rouge">.col-md-6</code> in v3 is now <codeclass="language-plaintext highlighter-rouge">.col-lg-6</code> in v4).</li>
<li><codeclass="language-plaintext highlighter-rouge">xs</code> grid classes have been modified to not require the infix to more accurately represent that they start applying styles at <codeclass="language-plaintext highlighter-rouge">min-width: 0</code> and not a set pixel value. Instead of <codeclass="language-plaintext highlighter-rouge">.col-xs-6</code>, it’s now <codeclass="language-plaintext highlighter-rouge">.col-6</code>. All other grid tiers require the infix (e.g., <codeclass="language-plaintext highlighter-rouge">sm</code>).</li>
<li>Updated grid mixins to utilize a <codeclass="language-plaintext highlighter-rouge">make-col-ready</code> prep mixin and a <codeclass="language-plaintext highlighter-rouge">make-col</code> to set the <codeclass="language-plaintext highlighter-rouge">flex</code> and <codeclass="language-plaintext highlighter-rouge">max-width</code> for individual column sizing.</li>
<li>Changed grid system media query breakpoints and container widths to account for new grid tier and ensure columns are evenly divisible by <codeclass="language-plaintext highlighter-rouge">12</code> at their max width.</li>
<li>Grid breakpoints and container widths are now handled via Sass maps (<codeclass="language-plaintext highlighter-rouge">$grid-breakpoints</code> and <codeclass="language-plaintext highlighter-rouge">$container-max-widths</code>) instead of a handful of separate variables. These replace the <codeclass="language-plaintext highlighter-rouge">@screen-*</code> variables entirely and allow you to fully customize the grid tiers.</li>
<li>Media queries have also changed. Instead of repeating our media query declarations with the same value each time, we now have <codeclass="language-plaintext highlighter-rouge">@include media-breakpoint-up/down/only</code>. Now, instead of writing <codeclass="language-plaintext highlighter-rouge">@media (min-width: @screen-sm-min) { ... }</code>, you can write <codeclass="language-plaintext highlighter-rouge">@include media-breakpoint-up(sm) { ... }</code>.</li>
<li>We recommend using <codeclass="language-plaintext highlighter-rouge">position: sticky</code> instead. <ahref="https://html5please.com/#sticky">See the HTML5 Please entry</a> for details and specific polyfill recommendations. One suggestion is to use an <codeclass="language-plaintext highlighter-rouge">@supports</code> rule for implementing it (e.g., <codeclass="language-plaintext highlighter-rouge">@supports (position: sticky) { ... }</code>)</li>
<li>If you were using Affix to apply additional, non-<codeclass="language-plaintext highlighter-rouge">position</code> styles, the polyfills might not support your use case. One option for such uses is the third-party <ahref="https://github.com/acch/scrollpos-styler">ScrollPos-Styler</a> library.</li>
<p>New to Bootstrap 4 is the <ahref="/docs/4.5/content/reboot/">Reboot</a>, a new stylesheet that builds on Normalize with our own somewhat opinionated reset styles. Selectors appearing in this file only use elements—there are no classes here. This isolates our reset styles from our component styles for a more modular approach. Some of the most important resets this includes are the <codeclass="language-plaintext highlighter-rouge">box-sizing: border-box</code> change, moving from <codeclass="language-plaintext highlighter-rouge">em</code> to <codeclass="language-plaintext highlighter-rouge">rem</code> units on many elements, link styles, and many form element resets.</p>
<li>Moved all <codeclass="language-plaintext highlighter-rouge">.text-</code> utilities to the <codeclass="language-plaintext highlighter-rouge">_utilities.scss</code> file.</li>
<li>Dropped <codeclass="language-plaintext highlighter-rouge">.page-header</code> as its styles can be applied via utilities.</li>
<li><codeclass="language-plaintext highlighter-rouge">.dl-horizontal</code> has been dropped. Instead, use <codeclass="language-plaintext highlighter-rouge">.row</code> on <codeclass="language-plaintext highlighter-rouge"><dl></code> and use grid column classes (or mixins) on its <codeclass="language-plaintext highlighter-rouge"><dt></code> and <codeclass="language-plaintext highlighter-rouge"><dd></code> children.</li>
<li>Redesigned blockquotes, moving their styles from the <codeclass="language-plaintext highlighter-rouge"><blockquote></code> element to a single class, <codeclass="language-plaintext highlighter-rouge">.blockquote</code>. Dropped the <codeclass="language-plaintext highlighter-rouge">.blockquote-reverse</code> modifier for text utilities.</li>
<li><codeclass="language-plaintext highlighter-rouge">.list-inline</code> now requires that its children list items have the new <codeclass="language-plaintext highlighter-rouge">.list-inline-item</code> class applied to them.</li>
<li>Nearly all instances of the <codeclass="language-plaintext highlighter-rouge">></code> selector have been removed, meaning nested tables will now automatically inherit styles from their parents. This greatly simplifies our selectors and potential customizations.</li>
<li>Renamed <codeclass="language-plaintext highlighter-rouge">.table-condensed</code> to <codeclass="language-plaintext highlighter-rouge">.table-sm</code> for consistency.</li>
<li>Added a new <codeclass="language-plaintext highlighter-rouge">.table-inverse</code> option.</li>
<li>Added table header modifiers: <codeclass="language-plaintext highlighter-rouge">.thead-default</code> and <codeclass="language-plaintext highlighter-rouge">.thead-inverse</code>.</li>
<li>Renamed contextual classes to have a <codeclass="language-plaintext highlighter-rouge">.table-</code>-prefix. Hence <codeclass="language-plaintext highlighter-rouge">.active</code>, <codeclass="language-plaintext highlighter-rouge">.success</code>, <codeclass="language-plaintext highlighter-rouge">.warning</code>, <codeclass="language-plaintext highlighter-rouge">.danger</code> and <codeclass="language-plaintext highlighter-rouge">.info</code> to <codeclass="language-plaintext highlighter-rouge">.table-active</code>, <codeclass="language-plaintext highlighter-rouge">.table-success</code>, <codeclass="language-plaintext highlighter-rouge">.table-warning</code>, <codeclass="language-plaintext highlighter-rouge">.table-danger</code> and <codeclass="language-plaintext highlighter-rouge">.table-info</code>.</li>
<li>Moved element resets to the <codeclass="language-plaintext highlighter-rouge">_reboot.scss</code> file.</li>
<li>Renamed <codeclass="language-plaintext highlighter-rouge">.control-label</code> to <codeclass="language-plaintext highlighter-rouge">.col-form-label</code>.</li>
<li>Renamed <codeclass="language-plaintext highlighter-rouge">.input-lg</code> and <codeclass="language-plaintext highlighter-rouge">.input-sm</code> to <codeclass="language-plaintext highlighter-rouge">.form-control-lg</code> and <codeclass="language-plaintext highlighter-rouge">.form-control-sm</code>, respectively.</li>
<li>Dropped <codeclass="language-plaintext highlighter-rouge">.form-group-*</code> classes for simplicity’s sake. Use <codeclass="language-plaintext highlighter-rouge">.form-control-*</code> classes instead now.</li>
<li>Dropped <codeclass="language-plaintext highlighter-rouge">.help-block</code> and replaced it with <codeclass="language-plaintext highlighter-rouge">.form-text</code> for block-level help text. For inline help text and other flexible options, use utility classes like <codeclass="language-plaintext highlighter-rouge">.text-muted</code>.</li>
<li>Dropped <codeclass="language-plaintext highlighter-rouge">.radio-inline</code> and <codeclass="language-plaintext highlighter-rouge">.checkbox-inline</code>.</li>
<li>Consolidated <codeclass="language-plaintext highlighter-rouge">.checkbox</code> and <codeclass="language-plaintext highlighter-rouge">.radio</code> into <codeclass="language-plaintext highlighter-rouge">.form-check</code> and the various <codeclass="language-plaintext highlighter-rouge">.form-check-*</code> classes.</li>
<li>Dropped the <codeclass="language-plaintext highlighter-rouge">.form-horizontal</code> class requirement.</li>
<li><codeclass="language-plaintext highlighter-rouge">.form-group</code> no longer applies styles from the <codeclass="language-plaintext highlighter-rouge">.row</code> via mixin, so <codeclass="language-plaintext highlighter-rouge">.row</code> is now required for horizontal grid layouts (e.g., <codeclass="language-plaintext highlighter-rouge"><div class="form-group row"></code>).</li>
<li>Added new <codeclass="language-plaintext highlighter-rouge">.col-form-label</code> class to vertically center labels with <codeclass="language-plaintext highlighter-rouge">.form-control</code>s.</li>
<li>Added new <codeclass="language-plaintext highlighter-rouge">.form-row</code> for compact form layouts with the grid classes (swap your <codeclass="language-plaintext highlighter-rouge">.row</code> for a <codeclass="language-plaintext highlighter-rouge">.form-row</code> and go).</li>
<li>Replaced <codeclass="language-plaintext highlighter-rouge">.has-error</code>, <codeclass="language-plaintext highlighter-rouge">.has-warning</code>, and <codeclass="language-plaintext highlighter-rouge">.has-success</code> classes with HTML5 form validation via CSS’s <codeclass="language-plaintext highlighter-rouge">:invalid</code> and <codeclass="language-plaintext highlighter-rouge">:valid</code> pseudo-classes.</li>
<li>Renamed <codeclass="language-plaintext highlighter-rouge">.form-control-static</code> to <codeclass="language-plaintext highlighter-rouge">.form-control-plaintext</code>.</li>
<li>Renamed <codeclass="language-plaintext highlighter-rouge">.btn-default</code> to <codeclass="language-plaintext highlighter-rouge">.btn-secondary</code>.</li>
<li>Dropped the <codeclass="language-plaintext highlighter-rouge">.btn-xs</code> class entirely as <codeclass="language-plaintext highlighter-rouge">.btn-sm</code> is proportionally much smaller than v3’s.</li>
<li>The <ahref="https://getbootstrap.com/docs/3.3/javascript/#buttons-stateful">stateful button</a> feature of the <codeclass="language-plaintext highlighter-rouge">button.js</code> jQuery plugin has been dropped. This includes the <codeclass="language-plaintext highlighter-rouge">$().button(string)</code> and <codeclass="language-plaintext highlighter-rouge">$().button('reset')</code> methods. We advise using a tiny bit of custom JavaScript instead, which will have the benefit of behaving exactly the way you want it to.
<li>Change buttons’<codeclass="language-plaintext highlighter-rouge">[disabled]</code> to <codeclass="language-plaintext highlighter-rouge">:disabled</code> as IE9+ supports <codeclass="language-plaintext highlighter-rouge">:disabled</code>. However <codeclass="language-plaintext highlighter-rouge">fieldset[disabled]</code> is still necessary because <ahref="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset#Browser_compatibility">native disabled fieldsets are still buggy in IE11</a>.</li>
<li>Removed <codeclass="language-plaintext highlighter-rouge">.btn-group-justified</code>. As a replacement you can use <codeclass="language-plaintext highlighter-rouge"><div class="btn-group d-flex" role="group"></div></code> as a wrapper around elements with <codeclass="language-plaintext highlighter-rouge">.w-100</code>.</li>
<li>Dropped the <codeclass="language-plaintext highlighter-rouge">.btn-group-xs</code> class entirely given removal of <codeclass="language-plaintext highlighter-rouge">.btn-xs</code>.</li>
<li>Dropdowns can be built with <codeclass="language-plaintext highlighter-rouge"><div></code>s or <codeclass="language-plaintext highlighter-rouge"><ul></code>s now.</li>
<li>Rebuilt dropdown styles and markup to provide easy, built-in support for <codeclass="language-plaintext highlighter-rouge"><a></code> and <codeclass="language-plaintext highlighter-rouge"><button></code> based dropdown items.</li>
<li>Renamed <codeclass="language-plaintext highlighter-rouge">.divider</code> to <codeclass="language-plaintext highlighter-rouge">.dropdown-divider</code>.</li>
<li>Dropdown items now require <codeclass="language-plaintext highlighter-rouge">.dropdown-item</code>.</li>
<li>Dropdown toggles no longer require an explicit <codeclass="language-plaintext highlighter-rouge"><span class="caret"></span></code>; this is now provided automatically via CSS’s <codeclass="language-plaintext highlighter-rouge">::after</code> on <codeclass="language-plaintext highlighter-rouge">.dropdown-toggle</code>.</li>
<li>Added a new <codeclass="language-plaintext highlighter-rouge">576px</code> grid breakpoint as <codeclass="language-plaintext highlighter-rouge">sm</code>, meaning there are now five total tiers (<codeclass="language-plaintext highlighter-rouge">xs</code>, <codeclass="language-plaintext highlighter-rouge">sm</code>, <codeclass="language-plaintext highlighter-rouge">md</code>, <codeclass="language-plaintext highlighter-rouge">lg</code>, and <codeclass="language-plaintext highlighter-rouge">xl</code>).</li>
<li>Renamed the responsive grid modifier classes from <codeclass="language-plaintext highlighter-rouge">.col-{breakpoint}-{modifier}-{size}</code> to <codeclass="language-plaintext highlighter-rouge">.{modifier}-{breakpoint}-{size}</code> for simpler grid classes.</li>
<li>Dropped push and pull modifier classes for the new flexbox-powered <codeclass="language-plaintext highlighter-rouge">order</code> classes. For example, instead of <codeclass="language-plaintext highlighter-rouge">.col-8.push-4</code> and <codeclass="language-plaintext highlighter-rouge">.col-4.pull-8</code>, you’d use <codeclass="language-plaintext highlighter-rouge">.col-8.order-2</code> and <codeclass="language-plaintext highlighter-rouge">.col-4.order-1</code>.</li>
<li>Replaced <codeclass="language-plaintext highlighter-rouge">a.list-group-item</code> with an explicit class, <codeclass="language-plaintext highlighter-rouge">.list-group-item-action</code>, for styling link and button versions of list group items.</li>
<li>Added <codeclass="language-plaintext highlighter-rouge">.list-group-flush</code> class for use with cards.</li>
<li>Given the move to flexbox, alignment of dismiss icons in the header is likely broken as we’re no longer using floats. Floated content comes first, but with flexbox that’s no longer the case. Update your dismiss icons to come after modal titles to fix.</li>
<li>The <codeclass="language-plaintext highlighter-rouge">remote</code> option (which could be used to automatically load and inject external content into a modal) and the corresponding <codeclass="language-plaintext highlighter-rouge">loaded.bs.modal</code> event were removed. We recommend instead using client-side templating or a data binding framework, or calling <ahref="https://api.jquery.com/load/">jQuery.load</a> yourself.</li>
<li>Dropped nearly all <codeclass="language-plaintext highlighter-rouge">></code> selectors for simpler styling via un-nested classes.</li>
<li>Instead of HTML-specific selectors like <codeclass="language-plaintext highlighter-rouge">.nav > li > a</code>, we use separate classes for <codeclass="language-plaintext highlighter-rouge">.nav</code>s, <codeclass="language-plaintext highlighter-rouge">.nav-item</code>s, and <codeclass="language-plaintext highlighter-rouge">.nav-link</code>s. This makes your HTML more flexible while bringing along increased extensibility.</li>
<li>Responsive navbar behaviors are now applied to the <codeclass="language-plaintext highlighter-rouge">.navbar</code> class via the <strong>required</strong><codeclass="language-plaintext highlighter-rouge">.navbar-expand-{breakpoint}</code> where you choose where to collapse the navbar. Previously this was a Less variable modification and required recompiling.</li>
<li><codeclass="language-plaintext highlighter-rouge">.navbar-default</code> is now <codeclass="language-plaintext highlighter-rouge">.navbar-light</code>, though <codeclass="language-plaintext highlighter-rouge">.navbar-dark</code> remains the same. <strong>One of these is required on each navbar.</strong> However, these classes no longer set <codeclass="language-plaintext highlighter-rouge">background-color</code>s; instead they essentially only affect <codeclass="language-plaintext highlighter-rouge">color</code>.</li>
<li>Navbars now require a background declaration of some kind. Choose from our background utilities (<codeclass="language-plaintext highlighter-rouge">.bg-*</code>) or set your own with the light/inverse classes above <ahref="/docs/4.5/components/navbar/#color-schemes">for mad customization</a>.</li>
<li><codeclass="language-plaintext highlighter-rouge">.navbar-toggle</code> is now <codeclass="language-plaintext highlighter-rouge">.navbar-toggler</code> and has different styles and inner markup (no more three <codeclass="language-plaintext highlighter-rouge"><span></code>s).</li>
<li>Dropped the <codeclass="language-plaintext highlighter-rouge">.navbar-form</code> class entirely. It’s no longer necessary; instead, just use <codeclass="language-plaintext highlighter-rouge">.form-inline</code> and apply margin utilities as necessary.</li>
<li>Navbars no longer include <codeclass="language-plaintext highlighter-rouge">margin-bottom</code> or <codeclass="language-plaintext highlighter-rouge">border-radius</code> by default. Use utilities as necessary.</li>
<li>Explicit classes (<codeclass="language-plaintext highlighter-rouge">.page-item</code>, <codeclass="language-plaintext highlighter-rouge">.page-link</code>) are now required on the descendants of <codeclass="language-plaintext highlighter-rouge">.pagination</code>s</li>
<li>Dropped the <codeclass="language-plaintext highlighter-rouge">.pager</code> component entirely as it was little more than customized outline buttons.</li>
<li>An explicit class, <codeclass="language-plaintext highlighter-rouge">.breadcrumb-item</code>, is now required on the descendants of <codeclass="language-plaintext highlighter-rouge">.breadcrumb</code>s</li>
<li>Consolidated <codeclass="language-plaintext highlighter-rouge">.label</code> and <codeclass="language-plaintext highlighter-rouge">.badge</code> to disambiguate from the <codeclass="language-plaintext highlighter-rouge"><label></code> element and simplify related components.</li>
<li>Added <codeclass="language-plaintext highlighter-rouge">.badge-pill</code> as modifier for rounded “pill” look.</li>
<li><codeclass="language-plaintext highlighter-rouge">.badge-default</code> has been dropped and <codeclass="language-plaintext highlighter-rouge">.badge-secondary</code> added to match component modifier classes used elsewhere.</li>
<li><codeclass="language-plaintext highlighter-rouge">.panel</code> to <codeclass="language-plaintext highlighter-rouge">.card</code>, now built with flexbox.</li>
<li><codeclass="language-plaintext highlighter-rouge">.panel-default</code> removed and no replacement.</li>
<li><codeclass="language-plaintext highlighter-rouge">.panel-group</code> removed and no replacement. <codeclass="language-plaintext highlighter-rouge">.card-group</code> is not a replacement, it is different.</li>
<li><codeclass="language-plaintext highlighter-rouge">.panel-heading</code> to <codeclass="language-plaintext highlighter-rouge">.card-header</code></li>
<li><codeclass="language-plaintext highlighter-rouge">.panel-title</code> to <codeclass="language-plaintext highlighter-rouge">.card-title</code>. Depending on the desired look, you may also want to use <ahref="/docs/4.5/content/typography/#headings">heading elements or classes</a> (e.g. <codeclass="language-plaintext highlighter-rouge"><h3></code>, <codeclass="language-plaintext highlighter-rouge">.h3</code>) or bold elements or classes (e.g. <codeclass="language-plaintext highlighter-rouge"><strong></code>, <codeclass="language-plaintext highlighter-rouge"><b></code>, <ahref="/docs/4.5/utilities/text/#font-weight-and-italics"><codeclass="language-plaintext highlighter-rouge">.font-weight-bold</code></a>). Note that <codeclass="language-plaintext highlighter-rouge">.card-title</code>, while similarly named, produces a different look than <codeclass="language-plaintext highlighter-rouge">.panel-title</code>.</li>
<li><codeclass="language-plaintext highlighter-rouge">.panel-body</code> to <codeclass="language-plaintext highlighter-rouge">.card-body</code></li>
<li><codeclass="language-plaintext highlighter-rouge">.panel-footer</code> to <codeclass="language-plaintext highlighter-rouge">.card-footer</code></li>
<li><codeclass="language-plaintext highlighter-rouge">.panel-primary</code>, <codeclass="language-plaintext highlighter-rouge">.panel-success</code>, <codeclass="language-plaintext highlighter-rouge">.panel-info</code>, <codeclass="language-plaintext highlighter-rouge">.panel-warning</code>, and <codeclass="language-plaintext highlighter-rouge">.panel-danger</code> have been dropped for <codeclass="language-plaintext highlighter-rouge">.bg-</code>, <codeclass="language-plaintext highlighter-rouge">.text-</code>, and <codeclass="language-plaintext highlighter-rouge">.border</code> utilities generated from our <codeclass="language-plaintext highlighter-rouge">$theme-colors</code> Sass map.</li>
<li>Replaced contextual <codeclass="language-plaintext highlighter-rouge">.progress-bar-*</code> classes with <codeclass="language-plaintext highlighter-rouge">.bg-*</code> utilities. For example, <codeclass="language-plaintext highlighter-rouge">class="progress-bar progress-bar-danger"</code> becomes <codeclass="language-plaintext highlighter-rouge">class="progress-bar bg-danger"</code>.</li>
<li>Replaced <codeclass="language-plaintext highlighter-rouge">.active</code> for animated progress bars with <codeclass="language-plaintext highlighter-rouge">.progress-bar-animated</code>.</li>
<li>For carousel items, <codeclass="language-plaintext highlighter-rouge">.next</code>, <codeclass="language-plaintext highlighter-rouge">.prev</code>, <codeclass="language-plaintext highlighter-rouge">.left</code>, and <codeclass="language-plaintext highlighter-rouge">.right</code> are now <codeclass="language-plaintext highlighter-rouge">.carousel-item-next</code>, <codeclass="language-plaintext highlighter-rouge">.carousel-item-prev</code>, <codeclass="language-plaintext highlighter-rouge">.carousel-item-left</code>, and <codeclass="language-plaintext highlighter-rouge">.carousel-item-right</code>.</li>
<li><codeclass="language-plaintext highlighter-rouge">.item</code> is also now <codeclass="language-plaintext highlighter-rouge">.carousel-item</code>.</li>
<li>For prev/next controls, <codeclass="language-plaintext highlighter-rouge">.carousel-control.right</code> and <codeclass="language-plaintext highlighter-rouge">.carousel-control.left</code> are now <codeclass="language-plaintext highlighter-rouge">.carousel-control-next</code> and <codeclass="language-plaintext highlighter-rouge">.carousel-control-prev</code>, meaning they no longer require a specific base class.</li>
<li>Made display utilities responsive (e.g., <codeclass="language-plaintext highlighter-rouge">.d-none</code> and <codeclass="language-plaintext highlighter-rouge">d-{sm,md,lg,xl}-none</code>).</li>
<li>Dropped the bulk of <codeclass="language-plaintext highlighter-rouge">.hidden-*</code> utilities for new <ahref="/docs/4.5/utilities/display/">display utilities</a>. For example, instead of <codeclass="language-plaintext highlighter-rouge">.hidden-sm-up</code>, use <codeclass="language-plaintext highlighter-rouge">.d-sm-none</code>. Renamed the <codeclass="language-plaintext highlighter-rouge">.hidden-print</code> utilities to use the display utility naming scheme. More info under the <ahref="#responsive-utilities">Responsive utilities</a> section of this page.</li>
<li>Added <codeclass="language-plaintext highlighter-rouge">.float-{sm,md,lg,xl}-{left,right,none}</code> classes for responsive floats and removed <codeclass="language-plaintext highlighter-rouge">.pull-left</code> and <codeclass="language-plaintext highlighter-rouge">.pull-right</code> since they’re redundant to <codeclass="language-plaintext highlighter-rouge">.float-left</code> and <codeclass="language-plaintext highlighter-rouge">.float-right</code>.</li>
<li>Added responsive variations to our text alignment classes <codeclass="language-plaintext highlighter-rouge">.text-{sm,md,lg,xl}-{left,center,right}</code>.</li>
<li>Added new <ahref="/docs/4.5/utilities/spacing/">responsive margin and padding utilities</a> for all sides, plus vertical and horizontal shorthands.</li>
<li>Added boatload of <ahref="/docs/4.5/utilities/flex/">flexbox utilities</a>.</li>
<li>Dropped <codeclass="language-plaintext highlighter-rouge">.center-block</code> for the new <codeclass="language-plaintext highlighter-rouge">.mx-auto</code> class.</li>
<p>Bootstrap 3’s <ahref="https://www.lifewire.com/css-vendor-prefixes-3466867">vendor prefix</a> mixins, which were deprecated in v3.2.0, have been removed in Bootstrap 4. Since we use <ahref="https://github.com/postcss/autoprefixer">Autoprefixer</a>, they’re no longer necessary.</p>
<li><codeclass="language-plaintext highlighter-rouge">bugify.rb</code> is used to efficiently list out the entries on our <ahref="/docs/4.5/browser-bugs/">browser bugs</a> page.</li>
<li><codeclass="language-plaintext highlighter-rouge">example.rb</code> is a custom fork of the default <codeclass="language-plaintext highlighter-rouge">highlight.rb</code> plugin, allowing for easier example-code handling.</li>
<li><codeclass="language-plaintext highlighter-rouge">callout.rb</code> is a similar custom fork of that, but designed for our special docs callouts.</li>
<p>All <codeclass="language-plaintext highlighter-rouge">@screen-</code> variables have been removed in v4.0.0. Use the <codeclass="language-plaintext highlighter-rouge">media-breakpoint-up()</code>, <codeclass="language-plaintext highlighter-rouge">media-breakpoint-down()</code>, or <codeclass="language-plaintext highlighter-rouge">media-breakpoint-only()</code> Sass mixins or the <codeclass="language-plaintext highlighter-rouge">$grid-breakpoints</code> Sass map instead.</p>
<p>Our responsive utility classes have largely been removed in favor of explicit <codeclass="language-plaintext highlighter-rouge">display</code> utilities.</p>
<li>The <codeclass="language-plaintext highlighter-rouge">.hidden</code> and <codeclass="language-plaintext highlighter-rouge">.show</code> classes have been removed because they conflicted with jQuery’s <codeclass="language-plaintext highlighter-rouge">$(...).hide()</code> and <codeclass="language-plaintext highlighter-rouge">$(...).show()</code> methods. Instead, try toggling the <codeclass="language-plaintext highlighter-rouge">[hidden]</code> attribute or use inline styles like <codeclass="language-plaintext highlighter-rouge">style="display: none;"</code> and <codeclass="language-plaintext highlighter-rouge">style="display: block;"</code>.</li>
<li>All <codeclass="language-plaintext highlighter-rouge">.hidden-</code> classes have been removed, save for the print utilities which have been renamed.
<li>Print utilities no longer start with <codeclass="language-plaintext highlighter-rouge">.hidden-</code> or <codeclass="language-plaintext highlighter-rouge">.visible-</code>, but with <codeclass="language-plaintext highlighter-rouge">.d-print-</code>.
<p>Rather than using explicit <codeclass="language-plaintext highlighter-rouge">.visible-*</code> classes, you make an element visible by simply not hiding it at that screen size. You can combine one <codeclass="language-plaintext highlighter-rouge">.d-*-none</code> class with one <codeclass="language-plaintext highlighter-rouge">.d-*-block</code> class to show an element only on a given interval of screen sizes (e.g. <codeclass="language-plaintext highlighter-rouge">.d-none.d-md-block.d-xl-none</code> shows the element only on medium and large devices).</p>
<p>Note that the changes to the grid breakpoints in v4 means that you’ll need to go one breakpoint larger to achieve the same results. The new responsive utility classes don’t attempt to accommodate less common cases where an element’s visibility can’t be expressed as a single contiguous range of viewport sizes; you will instead need to use custom CSS in such cases.</p>
