<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.">
<h1class="bd-title"id="content">Migrating to v4</h1>
<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>Moving from Beta 3 to our stable v4.0 release, there are no breaking changes, but there are some notable changes.</p>
<h3id="printing">Printing</h3>
<ul>
<li>
<p>Fixed broken print utilities. Previously, using a <codeclass="highlighter-rouge">.d-print-*</code> class would unexpectedly overrule any other <codeclass="highlighter-rouge">.d-*</code> class. Now, they match our other display utilities and only apply to that media (<codeclass="highlighter-rouge">@media print</code>).</p>
</li>
<li>
<p>Expanded available print display utilities to match other utilities. Beta 3 and older only had <codeclass="highlighter-rouge">block</code>, <codeclass="highlighter-rouge">inline-block</code>, <codeclass="highlighter-rouge">inline</code>, and <codeclass="highlighter-rouge">none</code>. Stable v4 added <codeclass="highlighter-rouge">flex</code>, <codeclass="highlighter-rouge">inline-flex</code>, <codeclass="highlighter-rouge">table</code>, <codeclass="highlighter-rouge">table-row</code>, and <codeclass="highlighter-rouge">table-cell</code>.</p>
</li>
<li>
<p>Fixed print preview rendering across browsers with new print styles that specify <codeclass="highlighter-rouge">@page</code><codeclass="highlighter-rouge">size</code>.</p>
</li>
</ul>
<h2id="beta-3-changes">Beta 3 changes</h2>
<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>
<h3id="miscellaneous">Miscellaneous</h3>
<ul>
<li>Removed the unused <codeclass="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="highlighter-rouge">node_modules</code> folder, you should adapt your workflow.</li>
</ul>
<h3id="forms">Forms</h3>
<ul>
<li>
<p>Rewrote both custom and default checkboxes and radios. Now, both have matching HTML structure (outer <codeclass="highlighter-rouge"><div></code> with sibling <codeclass="highlighter-rouge"><input></code> and <codeclass="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="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="highlighter-rouge">background-image</code>s on custom form checkboxes and radios. Previously, the now removed <codeclass="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="highlighter-rouge">.custom-control-label::before</code> for the fill and gradient and <codeclass="highlighter-rouge">.custom-control-label::after</code> handles the icon.</p>
<p>To make a custom check inline, add <codeclass="highlighter-rouge">.custom-control-inline</code>.</p>
</li>
<li>
<p>Updated selector for input-based button groups. Instead of <codeclass="highlighter-rouge">[data-toggle="buttons"] { }</code> for style and behavior, we use the <codeclass="highlighter-rouge">data</code> attribute just for JS behaviors and rely on a new <codeclass="highlighter-rouge">.btn-group-toggle</code> class for styling.</p>
</li>
<li>
<p>Removed <codeclass="highlighter-rouge">.col-form-legend</code> in favor of a slightly improved <codeclass="highlighter-rouge">.col-form-label</code>. This way <codeclass="highlighter-rouge">.col-form-label-sm</code> and <codeclass="highlighter-rouge">.col-form-label-lg</code> can be used on <codeclass="highlighter-rouge"><legend></code> elements with ease.</p>
</li>
<li>
<p>Custom file inputs received a change to their <codeclass="highlighter-rouge">$custom-file-text</code> Sass variable. It’s no longer a nested Sass map and now only powers one string—the <codeclass="highlighter-rouge">Browse</code> button as that is now the only pseudo-element generated from our Sass. The <codeclass="highlighter-rouge">Choose file</code> text now comes from the <codeclass="highlighter-rouge">.custom-file-label</code>.</p>
</li>
</ul>
<h3id="input-groups">Input groups</h3>
<ul>
<li>
<p>Input group addons are now specific to their placement relative to an input. We’ve dropped <codeclass="highlighter-rouge">.input-group-addon</code> and <codeclass="highlighter-rouge">.input-group-btn</code> for two new classes, <codeclass="highlighter-rouge">.input-group-prepend</code> and <codeclass="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="highlighter-rouge">.input-group-text</code>.</p>
</li>
<li>
<p>Validation styles are now supported, as are multiple inputs (though you can only validate one input per group).</p>
</li>
<li>
<p>Sizing classes must be on the parent <codeclass="highlighter-rouge">.input-group</code> and not the individual form elements.</p>
</li>
</ul>
<h2id="beta-2-changes">Beta 2 changes</h2>
<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>
<h3id="breaking">Breaking</h3>
<ul>
<li>Removed <codeclass="highlighter-rouge">$badge-color</code> variable and its usage on <codeclass="highlighter-rouge">.badge</code>. We use a color contrast function to pick a <codeclass="highlighter-rouge">color</code> based on the <codeclass="highlighter-rouge">background-color</code>, so the variable is unnecessary.</li>
<li>Renamed <codeclass="highlighter-rouge">grayscale()</code> function to <codeclass="highlighter-rouge">gray()</code> to avoid breaking conflict with the CSS native <codeclass="highlighter-rouge">grayscale</code> filter.</li>
<li>Renamed <codeclass="highlighter-rouge">.table-inverse</code>, <codeclass="highlighter-rouge">.thead-inverse</code>, and <codeclass="highlighter-rouge">.thead-default</code> to <codeclass="highlighter-rouge">.*-dark</code> and <codeclass="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="highlighter-rouge">.table-responsive</code> you’ve been using is more like <codeclass="highlighter-rouge">.table-responsive-md</code>. You may now use <codeclass="highlighter-rouge">.table-responsive</code> or <codeclass="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="highlighter-rouge">.form-control-label</code> class. If you did make use of this class, it was duplicate of the <codeclass="highlighter-rouge">.col-form-label</code> class that vertically centered a <codeclass="highlighter-rouge"><label></code> with it’s associated input in horizontal form layouts.</li>
<li>Changed the <codeclass="highlighter-rouge">color-yiq</code> from a mixin that included the <codeclass="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="highlighter-rouge">color-yiq(#000)</code>, you’d write <codeclass="highlighter-rouge">color: color-yiq(#000);</code>.</li>
</ul>
<h3id="highlights">Highlights</h3>
<ul>
<li>Introduced new <codeclass="highlighter-rouge">pointer-events</code> usage on modals. The outer <codeclass="highlighter-rouge">.modal-dialog</code> passes through events with <codeclass="highlighter-rouge">pointer-events: none</code> for custom click handling (making it possible to just listen on the <codeclass="highlighter-rouge">.modal-backdrop</code> for any clicks), and then counteracts it for the actual <codeclass="highlighter-rouge">.modal-content</code> with <codeclass="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="http://sass-lang.com/">Sass</a> for our source CSS files.</li>
<li>Switched from <codeclass="highlighter-rouge">px</code> to <codeclass="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="highlighter-rouge">14px</code> to <codeclass="highlighter-rouge">16px</code>.</li>
<li>Revamped grid tiers to add a fifth option (addressing smaller devices at <codeclass="highlighter-rouge">576px</code> and below) and removed the <codeclass="highlighter-rouge">-xs</code> infix from those classes. Example: <codeclass="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="highlighter-rouge">$enable-gradients: true</code>).</li>
<li>Build system overhauled to use a series of npm scripts instead of Grunt. See <codeclass="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="/bootstrap-material-design/docs/4.0/utilities/">utility classes</a> for common CSS property-value pairs and margin/padding spacing shortcuts.</li>
<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>
<ul>
<li>Added a new <codeclass="highlighter-rouge">sm</code> grid tier below <codeclass="highlighter-rouge">768px</code> for more granular control. We now have <codeclass="highlighter-rouge">xs</code>, <codeclass="highlighter-rouge">sm</code>, <codeclass="highlighter-rouge">md</code>, <codeclass="highlighter-rouge">lg</code>, and <codeclass="highlighter-rouge">xl</code>. This also means every tier has been bumped up one level (so <codeclass="highlighter-rouge">.col-md-6</code> in v3 is now <codeclass="highlighter-rouge">.col-lg-6</code> in v4).</li>
<li><codeclass="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="highlighter-rouge">min-width: 0</code> and not a set pixel value. Instead of <codeclass="highlighter-rouge">.col-xs-6</code>, it’s now <codeclass="highlighter-rouge">.col-6</code>. All other grid tiers require the infix (e.g., <codeclass="highlighter-rouge">sm</code>).</li>
</ul>
</li>
<li><strong>Updated grid sizes, mixins, and variables.</strong>
<ul>
<li>Grid gutters now have a Sass map so you can specify specific gutter widths at each breakpoint.</li>
<li>Updated grid mixins to utilize a <codeclass="highlighter-rouge">make-col-ready</code> prep mixin and a <codeclass="highlighter-rouge">make-col</code> to set the <codeclass="highlighter-rouge">flex</code> and <codeclass="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="highlighter-rouge">12</code> at their max width.</li>
<li>Grid breakpoints and container widths are now handled via Sass maps (<codeclass="highlighter-rouge">$grid-breakpoints</code> and <codeclass="highlighter-rouge">$container-max-widths</code>) instead of a handful of separate variables. These replace the <codeclass="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="highlighter-rouge">@include media-breakpoint-up/down/only</code>. Now, instead of writing <codeclass="highlighter-rouge">@media (min-width: @screen-sm-min) { ... }</code>, you can write <codeclass="highlighter-rouge">@include media-breakpoint-up(sm) { ... }</code>.</li>
<li><strong>Dropped panels, thumbnails, and wells</strong> for a new all-encompassing component, <ahref="/bootstrap-material-design/docs/4.0/components/card/">cards</a>.</li>
<li>See the <ahref="/bootstrap-material-design/docs/4.0/extend/icons/">Extend page</a> for a list of alternatives. Have additional suggestions? Please open an issue or PR.</li>
<li>We recommend using <codeclass="highlighter-rouge">position: sticky</code> instead. <ahref="http://html5please.com/#sticky">See the HTML5 Please entry</a> for details and specific polyfill recommendations. One suggestion is to use an <codeclass="highlighter-rouge">@supports</code> rule for implementing it (e.g., <codeclass="highlighter-rouge">@supports (position: sticky) { ... }</code>)/</li>
<li>If you were using Affix to apply additional, non-<codeclass="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>
</ul>
</li>
<li><strong>Dropped the pager component</strong> as it was essentially slightly customized buttons.</li>
<li><strong>Refactored nearly all components</strong> to use more un-nested class selectors instead of over-specific children selectors.</li>
</ul>
<h2id="by-component">By component</h2>
<p>This list highlights key changes by component between v3.x.x and v4.0.0.</p>
<p>New to Bootstrap 4 is the <ahref="/bootstrap-material-design/docs/4.0/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="highlighter-rouge">box-sizing: border-box</code> change, moving from <codeclass="highlighter-rouge">em</code> to <codeclass="highlighter-rouge">rem</code> units on many elements, link styles, and many form element resets.</p>
<li>Moved all <codeclass="highlighter-rouge">.text-</code> utilities to the <codeclass="highlighter-rouge">_utilities.scss</code> file.</li>
<li>Dropped <codeclass="highlighter-rouge">.page-header</code> as, aside from the border, all its styles can be applied via utilities.</li>
<li><codeclass="highlighter-rouge">.dl-horizontal</code> has been dropped. Instead, use <codeclass="highlighter-rouge">.row</code> on <codeclass="highlighter-rouge"><dl></code> and use grid column classes (or mixins) on its <codeclass="highlighter-rouge"><dt></code> and <codeclass="highlighter-rouge"><dd></code> children.</li>
<li>Custom <codeclass="highlighter-rouge"><blockquote></code> styling has moved to classes—<codeclass="highlighter-rouge">.blockquote</code> and the <codeclass="highlighter-rouge">.blockquote-reverse</code> modifier.</li>
<li><codeclass="highlighter-rouge">.list-inline</code> now requires that its children list items have the new <codeclass="highlighter-rouge">.list-inline-item</code> class applied to them.</li>
</ul>
<h3id="images">Images</h3>
<ul>
<li>Renamed <codeclass="highlighter-rouge">.img-responsive</code> to <codeclass="highlighter-rouge">.img-fluid</code>.</li>
<li>Renamed <codeclass="highlighter-rouge">.img-rounded</code> to <codeclass="highlighter-rouge">.rounded</code></li>
<li>Renamed <codeclass="highlighter-rouge">.img-circle</code> to <codeclass="highlighter-rouge">.rounded-circle</code></li>
</ul>
<h3id="tables">Tables</h3>
<ul>
<li>Nearly all instances of the <codeclass="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>Responsive tables no longer require a wrapping element. Instead, just put the <codeclass="highlighter-rouge">.table-responsive</code> right on the <codeclass="highlighter-rouge"><table></code>.</li>
<li>Renamed <codeclass="highlighter-rouge">.table-condensed</code> to <codeclass="highlighter-rouge">.table-sm</code> for consistency.</li>
<li>Added a new <codeclass="highlighter-rouge">.table-inverse</code> option.</li>
<li>Added table header modifiers: <codeclass="highlighter-rouge">.thead-default</code> and <codeclass="highlighter-rouge">.thead-inverse</code>.</li>
<li>Renamed contextual classes to have a <codeclass="highlighter-rouge">.table-</code>-prefix. Hence <codeclass="highlighter-rouge">.active</code>, <codeclass="highlighter-rouge">.success</code>, <codeclass="highlighter-rouge">.warning</code>, <codeclass="highlighter-rouge">.danger</code> and <codeclass="highlighter-rouge">.info</code> to <codeclass="highlighter-rouge">.table-active</code>, <codeclass="highlighter-rouge">.table-success</code>, <codeclass="highlighter-rouge">.table-warning</code>, <codeclass="highlighter-rouge">.table-danger</code> and <codeclass="highlighter-rouge">.table-info</code>.</li>
<li>Renamed <codeclass="highlighter-rouge">.input-lg</code> and <codeclass="highlighter-rouge">.input-sm</code> to <codeclass="highlighter-rouge">.form-control-lg</code> and <codeclass="highlighter-rouge">.form-control-sm</code>, respectively.</li>
<li>Dropped <codeclass="highlighter-rouge">.form-group-*</code> classes for simplicity’s sake. Use <codeclass="highlighter-rouge">.form-control-*</code> classes instead now.</li>
<li>Dropped <codeclass="highlighter-rouge">.help-block</code> and replaced it with <codeclass="highlighter-rouge">.form-text</code> for block-level help text. For inline help text and other flexible options, use utility classes like <codeclass="highlighter-rouge">.text-muted</code>.</li>
<li>Dropped <codeclass="highlighter-rouge">.radio-inline</code> and <codeclass="highlighter-rouge">.checkbox-inline</code>.</li>
<li>Consolidated <codeclass="highlighter-rouge">.checkbox</code> and <codeclass="highlighter-rouge">.radio</code> into <codeclass="highlighter-rouge">.form-check</code> and the various <codeclass="highlighter-rouge">.form-check-*</code> classes.</li>
<li>Dropped the <codeclass="highlighter-rouge">.form-horizontal</code> class requirement.</li>
<li><codeclass="highlighter-rouge">.form-group</code> no longer applies styles from the <codeclass="highlighter-rouge">.row</code> via mixin, so <codeclass="highlighter-rouge">.row</code> is now required for horizontal grid layouts (e.g., <codeclass="highlighter-rouge"><div class="form-group row"></code>).</li>
<li>Added new <codeclass="highlighter-rouge">.col-form-label</code> class to vertically center labels with <codeclass="highlighter-rouge">.form-control</code>s.</li>
<li>Added new <codeclass="highlighter-rouge">.form-row</code> for compact form layouts with the grid classes (swap your <codeclass="highlighter-rouge">.row</code> for a <codeclass="highlighter-rouge">.form-row</code> and go).</li>
</ul>
</li>
<li>Added custom forms support (for checkboxes, radios, selects, and file inputs).</li>
<li>Replaced <codeclass="highlighter-rouge">.has-error</code>, <codeclass="highlighter-rouge">.has-warning</code>, and <codeclass="highlighter-rouge">.has-success</code> classes with HTML5 form validation via CSS’s <codeclass="highlighter-rouge">:invalid</code> and <codeclass="highlighter-rouge">:valid</code> pseudo-classes.</li>
<li>Renamed <codeclass="highlighter-rouge">.form-control-static</code> to <codeclass="highlighter-rouge">.form-control-plaintext</code>.</li>
</ul>
<h3id="buttons">Buttons</h3>
<ul>
<li>Renamed <codeclass="highlighter-rouge">.btn-default</code> to <codeclass="highlighter-rouge">.btn-secondary</code>.</li>
<li>Dropped the <codeclass="highlighter-rouge">.btn-xs</code> class entirely as <codeclass="highlighter-rouge">.btn-sm</code> is proportionally much smaller than v3’s.</li>
<li>The <ahref="https://fezvrasta.github.io/docs/3.3/javascript/#buttons-stateful">stateful button</a> feature of the <codeclass="highlighter-rouge">button.js</code> jQuery plugin has been dropped. This includes the <codeclass="highlighter-rouge">$().button(string)</code> and <codeclass="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>Note that the other features of the plugin (button checkboxes, button radios, single-toggle buttons) have been retained in v4.</li>
</ul>
</li>
<li>Change buttons’<codeclass="highlighter-rouge">[disabled]</code> to <codeclass="highlighter-rouge">:disabled</code> as IE9+ supports <codeclass="highlighter-rouge">:disabled</code>. However <codeclass="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="highlighter-rouge">.btn-group-justified</code>. As a replacement you can use <codeclass="highlighter-rouge"><div class="btn-group d-flex" role="group"></div></code> as a wrapper around elements with <codeclass="highlighter-rouge">.w-100</code>.</li>
<li>Dropped the <codeclass="highlighter-rouge">.btn-group-xs</code> class entirely given removal of <codeclass="highlighter-rouge">.btn-xs</code>.</li>
<li>Removed explicit spacing between button groups in button toolbars; use margin utilities now.</li>
<li>Improved documentation for use with other components.</li>
</ul>
<h3id="dropdowns">Dropdowns</h3>
<ul>
<li>Switched from parent selectors to singular classes for all components, modifiers, etc.</li>
<li>Simplified dropdown styles to no longer ship with upward or downward facing arrows attached to the dropdown menu.</li>
<li>Dropdowns can be built with <codeclass="highlighter-rouge"><div></code>s or <codeclass="highlighter-rouge"><ul></code>s now.</li>
<li>Rebuilt dropdown styles and markup to provide easy, built-in support for <codeclass="highlighter-rouge"><a></code> and <codeclass="highlighter-rouge"><button></code> based dropdown items.</li>
<li>Renamed <codeclass="highlighter-rouge">.divider</code> to <codeclass="highlighter-rouge">.dropdown-divider</code>.</li>
<li>Dropdown items now require <codeclass="highlighter-rouge">.dropdown-item</code>.</li>
<li>Dropdown toggles no longer require an explicit <codeclass="highlighter-rouge"><span class="caret"></span></code>; this is now provided automatically via CSS’s <codeclass="highlighter-rouge">::after</code> on <codeclass="highlighter-rouge">.dropdown-toggle</code>.</li>
</ul>
<h3id="grid-system-1">Grid system</h3>
<ul>
<li>Added a new <codeclass="highlighter-rouge">576px</code> grid breakpoint as <codeclass="highlighter-rouge">sm</code>, meaning there are now five total tiers (<codeclass="highlighter-rouge">xs</code>, <codeclass="highlighter-rouge">sm</code>, <codeclass="highlighter-rouge">md</code>, <codeclass="highlighter-rouge">lg</code>, and <codeclass="highlighter-rouge">xl</code>).</li>
<li>Renamed the responsive grid modifier classes from <codeclass="highlighter-rouge">.col-{breakpoint}-{modifier}-{size}</code> to <codeclass="highlighter-rouge">.{modifier}-{breakpoint}-{size}</code> for simpler grid classes.</li>
<li>Dropped push and pull modifier classes for the new flexbox-powered <codeclass="highlighter-rouge">order</code> classes. For example, instead of <codeclass="highlighter-rouge">.col-8.push-4</code> and <codeclass="highlighter-rouge">.col-4.pull-8</code>, you’d use <codeclass="highlighter-rouge">.col-8.order-2</code> and <codeclass="highlighter-rouge">.col-4.order-1</code>.</li>
<li>Added flexbox utility classes for grid system and components.</li>
</ul>
<h3id="list-groups">List groups</h3>
<ul>
<li>Rewrote component with flexbox.</li>
<li>Replaced <codeclass="highlighter-rouge">a.list-group-item</code> with an explicit class, <codeclass="highlighter-rouge">.list-group-item-action</code>, for styling link and button versions of list group items.</li>
<li>Added <codeclass="highlighter-rouge">.list-group-flush</code> class for use with cards.</li>
</ul>
<h3id="modal">Modal</h3>
<ul>
<li>Rewrote component with flexbox.</li>
<li>Given 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="highlighter-rouge">remote</code> option (which could be used to automatically load and inject external content into a modal) and the corresponding <codeclass="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>
</ul>
<h3id="navs">Navs</h3>
<ul>
<li>Rewrote component with flexbox.</li>
<li>Dropped nearly all <codeclass="highlighter-rouge">></code> selectors for simpler styling via un-nested classes.</li>
<li>Instead of HTML-specific selectors like <codeclass="highlighter-rouge">.nav > li > a</code>, we use separate classes for <codeclass="highlighter-rouge">.nav</code>s, <codeclass="highlighter-rouge">.nav-item</code>s, and <codeclass="highlighter-rouge">.nav-link</code>s. This makes your HTML more flexible while bringing along increased extensibility.</li>
</ul>
<h3id="navbar">Navbar</h3>
<p>The navbar has been entirely rewritten in flexbox with improved support for alignment, responsiveness, and customization.</p>
<ul>
<li>Responsive navbar behaviors are now applied to the <codeclass="highlighter-rouge">.navbar</code> class via the <strong>required</strong><codeclass="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="highlighter-rouge">.navbar-default</code> is now <codeclass="highlighter-rouge">.navbar-light</code>, though <codeclass="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="highlighter-rouge">background-color</code>s; instead they essentially only affect <codeclass="highlighter-rouge">color</code>.</li>
<li>Navbars now require a background declaration of some kind. Choose from our background utilities (<codeclass="highlighter-rouge">.bg-*</code>) or set your own with the light/inverse classes above <ahref="/bootstrap-material-design/docs/4.0/components/navbar/#color-schemes">for mad customization</a>.</li>
<li>Given flexbox styles, navbars can now use flexbox utilities for easy alignment options.</li>
<li><codeclass="highlighter-rouge">.navbar-toggle</code> is now <codeclass="highlighter-rouge">.navbar-toggler</code> and has different styles and inner markup (no more three <codeclass="highlighter-rouge"><span></code>s).</li>
<li>Dropped the <codeclass="highlighter-rouge">.navbar-form</code> class entirely. It’s no longer necessary; instead, just use <codeclass="highlighter-rouge">.form-inline</code> and apply margin utilities as necessary.</li>
<li>Navbars no longer include <codeclass="highlighter-rouge">margin-bottom</code> or <codeclass="highlighter-rouge">border-radius</code> by default. Use utilities as necessary.</li>
<li>All examples featuring navbars have been updated to include new markup.</li>
</ul>
<h3id="pagination">Pagination</h3>
<ul>
<li>Rewrote component with flexbox.</li>
<li>Explicit classes (<codeclass="highlighter-rouge">.page-item</code>, <codeclass="highlighter-rouge">.page-link</code>) are now required on the descendants of <codeclass="highlighter-rouge">.pagination</code>s</li>
<li>Dropped the <codeclass="highlighter-rouge">.pager</code> component entirely as it was little more than customized outline buttons.</li>
</ul>
<h3id="breadcrumbs">Breadcrumbs</h3>
<ul>
<li>An explicit class, <codeclass="highlighter-rouge">.breadcrumb-item</code>, is now required on the descendants of <codeclass="highlighter-rouge">.breadcrumb</code>s</li>
</ul>
<h3id="labels-and-badges">Labels and badges</h3>
<ul>
<li>Renamed <codeclass="highlighter-rouge">.label</code> to <codeclass="highlighter-rouge">.badge</code> to disambiguate from the <codeclass="highlighter-rouge"><label></code> element.</li>
<li>Dropped the <codeclass="highlighter-rouge">.badge</code> component as it was nearly identical to labels. Use the <codeclass="highlighter-rouge">.badge-pill</code> modifier together with the label component instead for that rounded look.</li>
<li>Badges are no longer floated automatically in list groups and other components. Utility classes are now required for that.</li>
<li><codeclass="highlighter-rouge">.badge-default</code> has been dropped and <codeclass="highlighter-rouge">.badge-secondary</code> added to match component modifier classes used elsewhere.</li>
<h3id="panels-thumbnails-and-wells">Panels, thumbnails, and wells</h3>
<p>Dropped entirely for the new card component.</p>
<h3id="panels">Panels</h3>
<ul>
<li><codeclass="highlighter-rouge">.panel</code> to <codeclass="highlighter-rouge">.card</code>, now built with flexbox.</li>
<li><codeclass="highlighter-rouge">.panel-default</code> removed and no replacement.</li>
<li><codeclass="highlighter-rouge">.panel-group</code> removed and no replacement. <codeclass="highlighter-rouge">.card-group</code> is not a replacement, it is different.</li>
<li><codeclass="highlighter-rouge">.panel-heading</code> to <codeclass="highlighter-rouge">.card-header</code></li>
<li><codeclass="highlighter-rouge">.panel-title</code> to <codeclass="highlighter-rouge">.card-title</code>. Depending on the desired look, you may also want to use <ahref="/bootstrap-material-design/docs/4.0/content/typography/#headings">heading elements or classes</a> (e.g. <codeclass="highlighter-rouge"><h3></code>, <codeclass="highlighter-rouge">.h3</code>) or bold elements or classes (e.g. <codeclass="highlighter-rouge"><strong></code>, <codeclass="highlighter-rouge"><b></code>, <ahref="/bootstrap-material-design/docs/4.0/utilities/text/#font-weight-and-italics"><codeclass="highlighter-rouge">.font-weight-bold</code></a>). Note that <codeclass="highlighter-rouge">.card-title</code>, while similarly named, produces a different look than <codeclass="highlighter-rouge">.panel-title</code>.</li>
<li><codeclass="highlighter-rouge">.panel-body</code> to <codeclass="highlighter-rouge">.card-body</code></li>
<li><codeclass="highlighter-rouge">.panel-footer</code> to <codeclass="highlighter-rouge">.card-footer</code></li>
<li><codeclass="highlighter-rouge">.panel-primary</code>, <codeclass="highlighter-rouge">.panel-success</code>, <codeclass="highlighter-rouge">.panel-info</code>, <codeclass="highlighter-rouge">.panel-warning</code>, and <codeclass="highlighter-rouge">.panel-danger</code> have been dropped for <codeclass="highlighter-rouge">.bg-</code>, <codeclass="highlighter-rouge">.text-</code>, and <codeclass="highlighter-rouge">.border</code> utilities generated from our <codeclass="highlighter-rouge">$theme-colors</code> Sass map.</li>
<li>Replaced contextual <codeclass="highlighter-rouge">.progress-bar-*</code> classes with <codeclass="highlighter-rouge">.bg-*</code> utilities. For example, <codeclass="highlighter-rouge">class="progress-bar progress-bar-danger"</code> becomes <codeclass="highlighter-rouge">class="progress-bar bg-danger"</code>.</li>
<li>Replaced <codeclass="highlighter-rouge">.active</code> for animated progress bars with <codeclass="highlighter-rouge">.progress-bar-animated</code>.</li>
<li>Overhauled the entire component to simplify design and styling. We have fewer styles for you to override, new indicators, and new icons.</li>
<li>All CSS has been un-nested and renamed, ensuring each class is prefixed with <codeclass="highlighter-rouge">.carousel-</code>.
<ul>
<li>For carousel items, <codeclass="highlighter-rouge">.next</code>, <codeclass="highlighter-rouge">.prev</code>, <codeclass="highlighter-rouge">.left</code>, and <codeclass="highlighter-rouge">.right</code> are now <codeclass="highlighter-rouge">.carousel-item-next</code>, <codeclass="highlighter-rouge">.carousel-item-prev</code>, <codeclass="highlighter-rouge">.carousel-item-left</code>, and <codeclass="highlighter-rouge">.carousel-item-right</code>.</li>
<li><codeclass="highlighter-rouge">.item</code> is also now <codeclass="highlighter-rouge">.carousel-item</code>.</li>
<li>For prev/next controls, <codeclass="highlighter-rouge">.carousel-control.right</code> and <codeclass="highlighter-rouge">.carousel-control.left</code> are now <codeclass="highlighter-rouge">.carousel-control-next</code> and <codeclass="highlighter-rouge">.carousel-control-prev</code>, meaning they no longer require a specific base class.</li>
<li>Dropped the bulk of <codeclass="highlighter-rouge">.hidden-*</code> utilities for new <ahref="/bootstrap-material-design/docs/4.0/utilities/display/">display utilities</a>. For example, instead of <codeclass="highlighter-rouge">.hidden-sm-up</code>, use <codeclass="highlighter-rouge">.d-sm-none</code>. Renamed the <codeclass="highlighter-rouge">.hidden-print</code> utilities to use the display utility naming scheme. <ahref="#responsive-utilities">More info under the Responsive utilities section of this page.</a></li>
<li>Added <codeclass="highlighter-rouge">.float-{sm,md,lg,xl}-{left,right,none}</code> classes for responsive floats and removed <codeclass="highlighter-rouge">.pull-left</code> and <codeclass="highlighter-rouge">.pull-right</code> since they’re redundant to <codeclass="highlighter-rouge">.float-left</code> and <codeclass="highlighter-rouge">.float-right</code>.</li>
</ul>
</li>
<li><strong>Type:</strong>
<ul>
<li>Added responsive variations to our text alignment classes <codeclass="highlighter-rouge">.text-{sm,md,lg,xl}-{left,center,right}</code>.</li>
<li>Added new <ahref="/bootstrap-material-design/docs/4.0/utilities/spacing/">responsive margin and padding utilities</a> for all sides, plus vertical and horizontal shorthands.</li>
<li>Added boatload of <ahref="/bootstrap-material-design/docs/4.0/utilities/flex/">flexbox utilities</a>.</li>
<p>Bootstrap 3’s <ahref="https://www.thoughtco.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="highlighter-rouge">bugify.rb</code> is used to efficiently list out the entries on our <ahref="/bootstrap-material-design/docs/4.0/browser-bugs/">browser bugs</a> page.</li>
<li><codeclass="highlighter-rouge">example.rb</code> is a custom fork of the default <codeclass="highlighter-rouge">highlight.rb</code> plugin, allowing for easier example-code handling.</li>
<li><codeclass="highlighter-rouge">callout.rb</code> is a similar custom fork of that, but designed for our special docs callouts.</li>
<li><ahref="https://github.com/toshimaru/jekyll-toc">jekyll-toc</a> is used to generate our table of contents.</li>
</ul>
</li>
<li>All docs content has been rewritten in Markdown (instead of HTML) for easier editing.</li>
<li>Pages have been reorganized for simpler content and a more approachable hierarchy.</li>
<li>We moved from regular CSS to SCSS to take full advantage of Bootstrap’s variables, mixins, and more.</li>
<p>All <codeclass="highlighter-rouge">@screen-</code> variables have been removed in v4.0.0. Use the <codeclass="highlighter-rouge">media-breakpoint-up()</code>, <codeclass="highlighter-rouge">media-breakpoint-down()</code>, or <codeclass="highlighter-rouge">media-breakpoint-only()</code> Sass mixins or the <codeclass="highlighter-rouge">$grid-breakpoints</code> Sass map instead.</p>
<p>Our responsive utility classes have largely been removed in favor of explicit <codeclass="highlighter-rouge">display</code> utilities.</p>
<ul>
<li>The <codeclass="highlighter-rouge">.hidden</code> and <codeclass="highlighter-rouge">.show</code> classes have been removed because they conflicted with jQuery’s <codeclass="highlighter-rouge">$(...).hide()</code> and <codeclass="highlighter-rouge">$(...).show()</code> methods. Instead, try toggling the <codeclass="highlighter-rouge">[hidden]</code> attribute or use inline styles like <codeclass="highlighter-rouge">style="display: none;"</code> and <codeclass="highlighter-rouge">style="display: block;"</code>.</li>
<li>All <codeclass="highlighter-rouge">.hidden-</code> classes have been removed, save for the print utilities which have been renamed.
<ul>
<li>Removed from v3: <codeclass="highlighter-rouge">.hidden-xs</code><codeclass="highlighter-rouge">.hidden-sm</code><codeclass="highlighter-rouge">.hidden-md</code><codeclass="highlighter-rouge">.hidden-lg</code><codeclass="highlighter-rouge">.visible-xs-block</code><codeclass="highlighter-rouge">.visible-xs-inline</code><codeclass="highlighter-rouge">.visible-xs-inline-block</code><codeclass="highlighter-rouge">.visible-sm-block</code><codeclass="highlighter-rouge">.visible-sm-inline</code><codeclass="highlighter-rouge">.visible-sm-inline-block</code><codeclass="highlighter-rouge">.visible-md-block</code><codeclass="highlighter-rouge">.visible-md-inline</code><codeclass="highlighter-rouge">.visible-md-inline-block</code><codeclass="highlighter-rouge">.visible-lg-block</code><codeclass="highlighter-rouge">.visible-lg-inline</code><codeclass="highlighter-rouge">.visible-lg-inline-block</code></li>
<li>Removed from v4 alphas: <codeclass="highlighter-rouge">.hidden-xs-up</code><codeclass="highlighter-rouge">.hidden-xs-down</code><codeclass="highlighter-rouge">.hidden-sm-up</code><codeclass="highlighter-rouge">.hidden-sm-down</code><codeclass="highlighter-rouge">.hidden-md-up</code><codeclass="highlighter-rouge">.hidden-md-down</code><codeclass="highlighter-rouge">.hidden-lg-up</code><codeclass="highlighter-rouge">.hidden-lg-down</code></li>
</ul>
</li>
<li>Print utilities no longer start with <codeclass="highlighter-rouge">.hidden-</code> or <codeclass="highlighter-rouge">.visible-</code>, but with <codeclass="highlighter-rouge">.d-print-</code>.
<p>Rather than using explicit <codeclass="highlighter-rouge">.visible-*</code> classes, you make an element visible by simply not hiding it at that screen size. You can combine one <codeclass="highlighter-rouge">.d-*-none</code> class with one <codeclass="highlighter-rouge">.d-*-block</code> class to show an element only on a given interval of screen sizes (e.g. <codeclass="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>
