Differences Between Bootstrap 3 and Bootstrap 4

Bootstrap 4 brought some major changes. Adding new components, scrapping others. Here's the difference between Bootstrap v3 and v4 (alpha).

Note that Bootstrap 4 is currently in alpha release. This list will be reviewed as the development progresses.

Component Bootstrap 3 Bootstrap 4
Global
Source CSS Files

LESS

SCSS

Primary CSS Unit

px

rem

Media Queries Unit

px

em

Global Font Size

14px

16px

Grids
Grid Tiers

4 tier grid system (xs, sm, md, lg)

5 tier grid system (xs, sm, md, lg, xl).

Offsetting Columns

Uses col-*-offset-* classes to offset columns. For example, col-md-offset-4.

Uses offset-*-* classes to offset columns. For example, offset-md-4.

Tables
Inverse Tables

Not supported.

Added inverse tables with the .table-inverse class.

Table Head Styles

Not supported.

Added table head styles with the .thead-default and .thead-inverse classes.

Condensed Tables

.table-condensed

.table-sm

Contextual Classes

Bootstrap 3 doesn't use the .table- prefix for its contextual classes.

For example, Bootstrap 3 uses .active whereas Bootstrap 4 uses .table-active. Other than that, both versions use the same 5 contextual keywords (active, success, info, warning, danger).

Added the .table- prefix for its contextual classes.

Responsive Tables

The .table-responsive class must be added to a parent <div> element.

Can add .table-responsive to the actual <table> element.

Reflow Tables

Not supported.

Added reflow tables with the .table-reflow class.

Forms
Horizontal Forms

Horizontal forms require the .form-horizontal class.

Forms don't require .row when using grids (although this class is still a requirement on Bootstrap 3 grids in general).

Bootstrap 4 dropped the .form-horizontal class — it is no longer needed to display horizontal forms.

Forms require the .row class when using grids.

Use .control-label when using grids for form layout.

Bootstrap 4 uses .col-form-label * when using grids for form layout.

* Note that Bootstrap 4 initially used .form-control-label but subesquently changed this to .col-form-label.

Checkboxes and Radio Buttons

Uses .radio, .radio-inline, .checkbox, or .checkbox-inline to display checkboxes and radio buttons.

Uses .form-check, .form-check-label, .form-check-input, and .form-check-inline.

Form Control Size

Use .input-lg and .input-sm to increase or decrease the size of an input control.

Use .form-control-lg and .form-control-sm to increase or decrease the size of an input control.

Help Text

Use the .help-block class to display help text.

Bootstrap 4 uses the .form-text class to display help text.

Bootstrap 4 forms don't have an official class for help text. Instead, the .text-muted class was introduced for more flexibility.

Validation and Feedback Icons

The .form-control-* classes are not available in Bootstrap 3. To present icons on the input fields using Bootstrap 3, you need to use glyphicons.

Dropped the .has-feedback class. It is no longer required with the introduction of the .form-control-* classes.

Legends

No classes for styling the form legends.

Provides the option of using .col-form-legend on <legend> elements to style it more like a label.

Custom Forms

Not supported.

Bootstrap 4 introduced custom forms — completely custom form elements that replace the browser defaults.

Buttons
Semantic Styles

Includes the .btn-default and .btn-info classes.

The .btn-secondary class isn't available in Bootstrap 3.

Introduced the .btn-secondary class.

Dropped the .btn-default class.

Note that the .btn-info class was initially dropped in Bootstrap 4 but it has reappeared again.

Outline Buttons

Not supported.

Introduced the .btn-outline-* classes for styling buttons with an outline color.

Introduced the .btn-*-outline classes for styling buttons with an outline color.

(The .btn-*-outline classes became .btn-outline-* in Alpha 3).

Button Sizes

The .btn-xs class is available.

Dropped the .btn-xs class (only .btn-sm and .btn-lg are available now).

Images
Responsive Images

Use .img-responsive class.

Use .img-fluid class.

Image Alignment

Use .pull-right, .pull-left, and .center-block helper classes.

Uses .m-x-auto instead of .center-block to align block-level images.

Can also use the various .pull-*-right and .pull-*-left responsive helper classes, as well as the .text-*-left, .text-*-center, and .text-*-right helper classes on the image's parent.

Can use the various .pull-*-none classes to disable floating.

Dropdowns
Structure

Apply dropdowns to lists (i.e. using <ul> and <li>).

Dropdowns can be built with <ul> or <div>s.

Apply the .dropdown-item to a <a> or <button> element and wrap them all in a <div> (or <ul>) with a .dropdown-menu class applied.

Menu Headers

Apply .dropdown-header to the <li> tag.

Apply .dropdown-header to <h1> - <h2> tags (as Bootstrap no longer uses <li> tags to build dropdowns).

Dividers

Apply the .divider class to the <li> element (because it used lists to build dropdowns).

Apply the .dropdown-divider to the <div> element.

Disabled Menu Items

Apply the .disabled class to the <li> element.

Apply the .disabled class to the <a> element.

Button Groups
Justified?

Supports justified button groups (via the .btn-group-justified class).

Not supported.

Extra Small?

Supports extra small button groups (via the .btn-group-xs class).

Not supported (dropped the .btn-group-xs class).

Navs
Inline Navs

There is no .nav-inline class.

Can use the .nav-inline class to explicitly specify navs to be displayed inline.

Navbars
Colors

Limited (preset) color options. Supports inverse navbars but not the other classes.

New (preset) color options. Introduced the .bg-* class, as well as the .navbar-light and .navbar-dark classes.

Navbar Alignment

Use .navbar-right, .navbar-left to align components within the navbar.

Use the various .pull-*-right and .pull-*-left responsive helper classes.

Can also use the various .pull-*-none classes to disable floating.

Navbar Forms

Add the .navbar-form class to forms within navbars.

Bootstrap 4 dropped the .navbar-form class. It's no longer necessary.

Pagination
Default Pagination

Only requires .pagination to be added (to the <ul> element that represents the list of pages).

Must also add .page-item to each <li> element and .page-link to each <a> element.

Pagers

Uses .previous and .next for aligning pagers.

Pagers have been dropped in Bootstrap 4 (Alpha 3).

Uses .pager-prev and .pager-next for aligning pagers.

Labels
Pill Labels

The .label-pill class is not available. However, Bootstrap 3 does have badges (which achieves a similar visual effect). Badges were dropped in Bootstrap 4.

Labels have been replaced by tags in Bootstrap 4 (Alpha 3).

Tags can use the .tag-pill for rounded corners.

Introduced the .label-pill class for making the corners more rounded.

Tags
Supported?

No.

"Tags" are called "Labels" in Bootstrap 3 (i.e. they use the .label class).

Yes.

The .tag class was introduced in Bootstrap 4 (Alpha 3) to replace the .label class.

This was done to disambiguate from the <label> element.

Jumbotron
Full-Width

The .jumbotron-fluid class is not required on full-width jumbotrons.

Introduced the .jumbotron-fluid class for full-width jumbotrons.

Progress Bars
Uses <progress>?

Doesn't use the <progress> for progress bars. Instead, applies progress bar classes to nested <div> elements.

Uses the HTML5 <progress> element when working with progress bars.

Glyphicons
Supported?

Supported.

Not supported.

Typography
Blockquotes

Bootstrap styles are applied to the <blockquote> element by default.

Introduced the .blockquote class for styling the <blockquote> element (i.e. styling this element is now opt-in).

Page Headers

The .page-header class is supported.

The .page-header class is not supported.

Description Lists

The .dl-horizontal class does not require grid classes.

The .dl-horizontal class requires grid classes.

Non-Responsive Usage
Supported?

Supported. You can specify a layout to be non-responsive.

Not supported.

List Groups
Linked List Items / Button List Items

Apply .list-group-item to the <a> element.

Apply .list-group-item-action to the <a> element.

Cards
Supported?

Not supported.

Introduced in Bootstrap 4. Cards replace functionality that was previously provided by panels, wells, and thumbnails.

Panels
Supported?

Supported.

Not supported. Use cards instead.

Wells
Supported?

Supported.

Not supported. Use cards instead.

Thumbnails
Supported?

Supported.

Not supported. Use cards instead.

Breadcrumbs
Classes

Uses the .breadcrumb class against the <ul> tag.

Also requires .breadcrumb-item to be applied against all <li> elements that make up the breadcrumb.

Carousels
Carousel Item

Use .item class.

Use .carousel-item class.

Affix
Supported?

Yes.

No.