Bootstrap released v4 on Jan 19. It introduced important changes, added new components, and removed some. Here are the differences between Bootstrap 3 and 4.
![[Translation] Bootstrap 3 vs 4 - Fig 1](https://static.1991421.cn/2018-06-21-114624.png)
Original link: here
Component differences
| Component | Bootstrap 3 | Bootstrap 4 |
|---|---|---|
| Global | ||
| CSS source files | LESS | SCSS |
| Main CSS units | px | rem |
| Media query units | px | px |
| Base font size | 14px | 16px |
| Default font stack | Helvetica Neue, Helvetica, Arial, sans-serif | Uses a “native font stack” (user’s system fonts), with fallback to Helvetica Neue, Arial, and sans-serif |
| Grid | ||
| Grid breakpoints | 4 breakpoints (xs, sm, md, lg) | 5 breakpoints (xs, sm, md, lg, xl) Bootstrap 4 removed the smallest breakpoint xs, so col- applies to all devices and you no longer need to specify sizes for that case* |
| Offsets | Use col--offset- e.g. col-md-offset-4 | Use offset-- e.g. offset-md-4 |
| Tables | ||
| Dark tables | Not supported | Added dark table style with .table-dark |
| Table header styles | Not supported | .thead-light and .thead-dark |
| Condensed tables | .table-condensed | .table-sm |
| State classes | Bootstrap 3 uses .active without .table- prefix; Bootstrap 4 uses .table-active. State keywords: active, success, info, warning, danger | Adds .table- prefix for table state classes |
| Responsive tables | .table-responsive must be on parent div | Same, plus table-responsive-* for breakpoints .table-responsive-sm -md -lg -xl |
| Forms | ||
| Horizontal forms | Use form-horizontal | Removed form-horizontal. Use .row and .form-row for grid layout |
Form layout uses .control-label for grid | Use col-form-label-* for grid labels | |
| Checkbox/radio | .radio, .radio-inline, .checkbox, checkbox-inline | .form-check, .form-check-label, .form-check-input, .form-check-inline |
| Form control sizes | .input-lg, input-sm | form-control-lg, form-control-sm |
| Form label sizes | .col-form-label-sm, .col-form-label-lg | |
| Help text | .help-block | .form-text |
| Validation & feedback icons | Includes validation styles, icons via glyphicons | Validation icons removed |
| Legend titles | Not supported | Provides .col-form-label for legend |
| Static text | .form-control-static | .form-control-plaintext |
| Custom forms | Not supported | Supported |
| Buttons | ||
| Styles | .btn-secondary not available | Removed .btn-default; added btn-secondary, btn-light, btn-dark |
| Outline buttons | Not supported | btn-outline-* adds border styles |
| Button sizes | .btn-xs available | .btn-xs removed; .btn-sm, .btn-lg available |
| Input groups | ||
| Classes | Use .input-group-addon and .input-group-btn | Removed .input-group-addon/input-group-btn; added input-group-prepend, .input-group-append, and .input-group-text |
| Media object | ||
| Classes | .media, .media-body etc | Media object can use flex utilities directly |
| Dropdowns | ||
| Structure | <ul><li> | <ul><div> also allowed |
| Menu headers | .dropdown-header | .dropdown-header used on <h1>-<h2>, no longer in <li> |
| Dividers | .divider | .dropdown-divider |
| Disabled items | .disabled | .disabled |
| Button groups | ||
| Extra small | btn-group-xs | .btn-group-xs removed |
| Navigation | ||
| Inline nav | .nav-inline | |
| Navbar | ||
| Colors | .navbar-light, .navbar-dark, and .bg-* | |
| Alignment | .navbar-right, .navbar-left | Use spacing and flex utilities |
| Navbar forms | .navbar-form | Removed .navbar-form |
| Fixed navbar | .navbar-fixed-top and navbar-fixed-bottom | fixed-top, fixed-bottom |
| Pagination | ||
| Default | .pagination | Each <li>/<a> needs .page-item |
| Prev/Next | .previous and .next | Removed |
| Jumbotron | ||
| Full width | .jumbotron | .jumbotron-fluid |
| Glyphicons | ||
| Support | Supported | Not supported |
| Typography | ||
| Quotes | Default <blockquote> | Introduces .blockquote on <blockquote> |
| Alignment | .block-reverse for right | Use .text-center and .text-right |
| Page header | page-header supported | page-header not supported |
| Description lists | .dl-horizonal for horizontal lists | Use .row on <dl> and grid on <dt><dd> |
| Non-responsive usage | ||
| Support | Supported | Not supported |
| List Groups | ||
| Link/button lists | .list-group-item on <a> | .list-group-item-action on <a> |
| Collapse | ||
| Shown content | .in | .show |
| Cards | ||
| Support | Supported | Not supported |
| Panels | ||
| Support | Supported | Not supported |
| Wells | ||
| Support | Supported | Not supported |
| Thumbnails | ||
| Support | Supported | Not supported |
| Breadcrumbs | ||
| Class | Use .breadcrumb | Also require .breadcrumb-item on <li> |
| Carousel | ||
| Carousel item | .item | .carousel-item |
| Affix | ||
| Support | Supported | Not supported |
Browser support
![[Translation] Bootstrap 3 vs 4 - Fig 2](https://static.1991421.cn/2018-06-27-040213.png)
Final Thoughts
The above lists key differences; for full details, see the official docs.
