2014-12-17 05:31:36 +01:00
---
layout: page
title: Migrating to v4.x.x
---
2014-12-19 07:35:37 +01:00
## Summary
2014-12-17 05:31:36 +01:00
2014-12-19 07:35:37 +01:00
For a broader overview, see [what's new ](http://blog.getbootstrap.com/DEAD-LINK-FIX-ME-PLEASE ) in the v4.0.0 release announcement.
2014-12-19 05:19:45 +01:00
- Dropped IE8 support—v4 is now only IE9+. For sites needing IE8, use v3.
2014-12-20 04:52:57 +01:00
- Added official support for Android v5.0 Lollipop's Browser and WebView. Earlier versions of the Android Browser and WebView remain only unofficially supported.
2014-12-19 05:19:45 +01:00
- Switched from `px` to `rem` as our primary unit in CSS.
- Media queries are now in `em` s.
- Global font-size increased from `14px` to `16px` .
- Dropped panels, thumbnails, and wells for a new component, cards.
- Switched from LESS to SCSS for our source CSS files.
- Added a new grid tier for ~`480px` and below.
- Dropped Glyphicons icon font.
- Refactored nearly all components to use more unnested classes instead of children selectors.
2014-12-20 04:54:45 +01:00
- Non-responsive usage of Bootstrap is no longer supported.
2014-12-20 05:14:56 +01:00
- Dropped the online Customizer in favor of more extensive setup documentation.
2014-12-20 05:28:12 +01:00
- Replaced the separate optional theme with...
2014-12-19 05:19:45 +01:00
2014-12-17 05:31:36 +01:00
## Major class changes
2014-12-19 05:19:45 +01:00
2014-12-17 05:31:36 +01:00
This table shows the style changes between v3.x.x and v4.0.0.
2014-12-19 05:19:45 +01:00
| Bootstrap 3.x.x | Bootstrap 4.0.0 |
| --- | --- |
2014-12-20 05:01:18 +01:00
| Pager's `.previous` | `.pager-prev` |
| Pager's `.next` | `.pager-next` |
| Carousel's `.item` | `.carousel-item` |
2014-12-20 05:30:16 +01:00
| Tabs | |
| Pills | |
2014-12-20 05:31:47 +01:00
| Buttons | |
2014-12-17 05:31:36 +01:00
## What's new
We've added new components and changed some existing ones. Here are the new or updated styles.
2014-12-19 05:19:45 +01:00
| Component | Description |
| --- | --- |
| Cards | New, more flexible component to replace v3's panels, thumbnails, and wells. |
| New navbar | Replaces the previous navbar with a new, simpler component. |
2014-12-20 05:08:43 +01:00
| New progress bars | Replaces the old `.progress` `<div>` with a real `<progress>` element. |
2014-12-20 05:11:31 +01:00
| New table variants | |
2014-12-20 05:11:49 +01:00
| New utility classes | |
2014-12-17 05:31:36 +01:00
2014-12-20 05:35:46 +01:00
TODO: audit new classes that didn't exist in v3
2014-12-17 05:31:36 +01:00
## What's removed
The following components have been removed in v4.0.0.
2014-12-19 05:19:45 +01:00
| Component | Removed from 3.x.x | 4.0.0 Equivalent |
| --- | --- | --- |
2014-12-20 05:02:55 +01:00
| Panels | | Cards |
| Thumbnails | | Cards |
| Wells | | Cards |
2014-12-20 05:07:58 +01:00
| Justified navs | | |
2014-12-17 05:31:36 +01:00
2014-12-20 05:35:46 +01:00
TODO: audit classes in v4 that aren't present in v4
2014-12-20 05:25:26 +01:00
The following deprecated Less/SCSS variables have been removed in v4.0.0:
* `@screen-phone` , `@screen-tablet` , `@screen-desktop` , `@screen-lg-desktop` . Use the more abstract `$screen-{xs,sm,md,lg,xl}-*` variables instead.
* `@screen-sm` , `@screen-md` , `@screen-lg` . Use the more clearly named `$screen-{xs,sm,md,lg,xl}-min` variables instead.
* `@screen-xs` , `@screen-xs-min` . The extra small breakpoint has no lower bound, so these variables were logically absurd. Reformulate your expression in terms of `$screen-xs-max` instead.
* `@grid-float-breakpoint`
2014-12-20 05:35:46 +01:00
TODO: audit list of stuff in v3 that was marked as deprecated
2014-12-17 05:31:36 +01:00
## Additional notes
2014-12-20 05:30:50 +01:00
- Removed support for styled nested tables (for now)
