--- layout: docs title: Migrating to v4 description: 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. group: migration toc: true --- {% callout info %} **Heads up!** This will be in flux as work on the v4 alphas progresses. Until then consider it incomplete, and we'd love pull requests to help keep it up to date. {% endcallout %} ## Summary Here are the big ticket items you'll want to be aware of when moving from v3 to v4. ### Browser support - Dropped IE8, IE9, and iOS 6 support. v4 is now only IE10+ and iOS 7+. For sites needing either of those, use v3. - Added official support for Android v5.0 Lollipop's Browser and WebView. Earlier versions of the Android Browser and WebView remain only unofficially supported. ### Global changes - **Flexbox is enabled by default.** In general this means a move away from floats and more across our components. - Switched from [Less](http://lesscss.org/) to [Sass](http://sass-lang.com/) for our source CSS files. - Switched from `px` to `rem` 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. - Global font-size increased from `14px` to `16px`. - Revamped grid tiers to add a fifth option (addressing smaller devices at `576px` and below) and removed the `-xs` infix from those classes. Example: `.col-6.col-sm-4.col-md-3`. - Replaced the separate optional theme with configurable options via SCSS variables (e.g., `$enable-gradients: true`). - Build system overhauled to use a series of npm scripts instead of Grunt. See `package.json` for all scripts, or our project readme for local development needs. - Non-responsive usage of Bootstrap is no longer supported. - Dropped the online Customizer in favor of more extensive setup documentation and customized builds. - Added dozens of new [utility classes]({{ site.baseurl }}/docs/{{ site.docs_version }}/utilities/) for common CSS property-value pairs and margin/padding spacing shortcuts. ### Grid system - **Moved to flexbox.** - Added support for flexbox in the grid mixins and predefined classes. - As part of flexbox, included support for vertical and horizontal alignment classes. - **Updated grid class names and a new grid tier.** - Added a new `sm` grid tier below `768px` for more granular control. We now have `xs`, `sm`, `md`, `lg`, and `xl`. This also means every tier has been bumped up one level (so `.col-md-6` in v3 is now `.col-lg-6` in v4). - `xs` grid classes have been modified to not require the infix to more accurately represent that they start applying styles at `min-width: 0` and not a set pixel value. Instead of `.col-xs-6`, it's now `.col-6`. All other grid tiers require the infix (e.g., `sm`). - **Updated grid sizes, mixins, and variables.** - Grid gutters now have a Sass map so you can specify specific gutter widths at each breakpoint. - Updated grid mixins to utilize a `make-col-ready` prep mixin and a `make-col` to set the `flex` and `max-width` for individual column sizing. - Changed grid system media query breakpoints and container widths to account for new grid tier and ensure columns are evenly divisible by `12` at their max width. - Grid breakpoints and container widths are now handled via Sass maps (`$grid-breakpoints` and `$container-max-widths`) instead of a handful of separate variables. These replace the `@screen-*` variables entirely and allow you to fully customize the grid tiers. - Media queries have also changed. Instead of repeating our media query declarations with the same value each time, we now have `@include media-breakpoint-up/down/only`. Now, instead of writing `@media (min-width: @screen-sm-min) { ... }`, you can write `@include media-breakpoint-up(sm) { ... }`. ### Components - **Dropped panels, thumbnails, and wells** for a new all-encompassing component, [cards]({{ site.baseurl }}/docs/{{ site.docs_version }}/components/cards/). - **Dropped the Glyphicons icon font.** If you need icons, some options are: - the upstream version of [Glyphicons](https://glyphicons.com/) - [Octicons](https://octicons.github.com/) - [Font Awesome](http://fontawesome.io/) - See the [Extend page]({{ site.baseurl }}/docs/{{ site.docs_version }}/extend) for a list of alternatives. Have additional suggestions? Please open an issue or PR. - Dropped the Affix jQuery plugin. - We recommend using `position: sticky` instead. [See the HTML5 Please entry](http://html5please.com/#sticky) for details and specific polyfill recommendations. One suggestion is to use an `@supports` rule for implementing it (e.g., `@supports (position: sticky) { ... }`)/ - If you were using Affix to apply additional, non-`position` styles, the polyfills might not support your use case. One option for such uses is the third-party [ScrollPos-Styler](https://github.com/acch/scrollpos-styler) library. - **Dropped the pager component** as it was essentially slightly customized buttons. - **Refactored nearly all components** to use more un-nested class selectors instead of over-specific children selectors. ## By component This list highlights key changes by component between v3.x.x and v4.0.0. ### Reboot New to Bootstrap 4 is the [Reboot]({{ site.baseurl }}/docs/{{ site.docs_version }}/content/reboot/), 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 `box-sizing: border-box` change, moving from `em` to `rem` units on many elements, link styles, and many form element resets. ### Typography - Moved all `.text-` utilities to the `_utilities.scss` file. - Dropped `.page-header` as, aside from the border, all its styles can be applied via utilities. - `.dl-horizontal` has been dropped. Instead, use `.row` on `
` and use grid column classes (or mixins) on its `
` and `
` children. - Custom `
` styling has moved to classes—`.blockquote` and the `.blockquote-reverse` modifier. - `.list-inline` now requires that its children list items have the new `.list-inline-item` class applied to them. ### Images - Renamed `.img-responsive` to `.img-fluid`. - Renamed `.img-rounded` to `.rounded` - Renamed `.img-circle` to `.rounded-circle` ### Tables - Nearly all instances of the `>` selector have been removed, meaning nested tables will now automatically inherit styles from their parents. This greatly simplifies our selectors and potential customizations. - Responsive tables no longer require a wrapping element. Instead, just put the `.table-responsive` right on the ``. - Renamed `.table-condensed` to `.table-sm` for consistency. - Added a new `.table-inverse` option. - Added table header modifiers: `.thead-default` and `.thead-inverse`. - Renamed contextual classes to have a `.table-`-prefix. Hence `.active`, `.success`, `.warning`, `.danger` and `.table-info` to `.table-active`, `.table-success`, `.table-warning`, `.table-danger` and `.table-info`. ### Forms - Moved element resets to the `_reboot.scss` file. - Renamed `.control-label` to `.form-control-label`. - Renamed `.input-lg` and `.input-sm` to `.form-control-lg` and `.form-control-sm`, respectively. - Dropped `.form-group-*` classes for simplicity's sake. Use `.form-control-*` classes instead now. - Dropped `.help-block` and replaced it with `.form-text` for block-level help text. For inline help text and other flexible options, use utility classes like `.text-muted`. - Horizontal forms overhauled: - Dropped the `.form-horizontal` class requirement. - `.form-group` no longer applies styles from the `.row` via mixin, so `.row` is now required for horizontal grid layouts (e.g., `
`). - Added new `.form-control-label` class to vertically center labels with `.form-control`s. - Added new `.form-row` for compact form layouts with the grid classes (swap your `.row` for a `.form-row` and go). - Added custom forms support (for checkboxes, radios, selects, and file inputs). - Added HTML5 form validation support via CSS's `:invalid` and `:valid` pseudo-classes. - Renamed `.has-error` to `.has-danger`. - Renamed `.form-control-static` to `.form-control-plaintext`. ### Buttons - Renamed `.btn-default` to `.btn-secondary`. - Dropped the `.btn-xs` class entirely as `.btn-sm` is proportionally much smaller than v3's. - The [stateful button](https://getbootstrap.com/javascript/#buttons-methods) feature of the `button.js` jQuery plugin has been dropped. This includes the `$().button(string)` and `$().button('reset')` 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. - Note that the other features of the plugin (button checkboxes, button radios, single-toggle buttons) have been retained in v4. - Change buttons' `[disabled]` to `:disabled` as IE9+ supports `:disabled`. However `fieldset[disabled]` is still necessary because [native disabled fieldsets are still buggy in IE11](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset#Browser_compatibility). ### Button group - Rewrote component with flexbox. - Removed `.btn-group-justified`. - Dropped the `.btn-group-xs` class entirely given removal of `.btn-xs`. - Removed explicit spacing between button groups in button toolbars; use margin utilities now. - Improved documentation for use with other components. ### Dropdowns - Switched from parent selectors to singular classes for all components, modifiers, etc. - Simplified dropdown styles to no longer ship with upward or downward facing arrows attached to the dropdown menu. - Dropdowns can be built with `
`s or `