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
Dark/inverse Tables
Not supported.
Added dark/inverse tables with the .table-dark class.
Note: Prior to the Beta 2 release, these required the .table-inverse class. This class has been replaced with .table-dark in Beta 2.
Table Head Styles
Not supported.
Added table head styles with the .thead-light and .thead-dark classes.
Note: Prior to the Beta 2 release, these required the .table-default class and the .table-dark class. These classes have been replaced with .table-light and .table-dark in Beta 2.
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.
The .table-responsive class must be added to a parent div element.
Can add .table-responsive to the actual table element.
Beta 2 has also introduced the .table-responsive-* classes that can be used to specify a particular breakpoint. These are .table-responsive-sm, .table-responsive-md, .table-responsive-lg, and .table-responsive-xl.
Reflow Tables
Not supported.
Added reflow tables with the .table-reflow class.
Reflow tables have now been dropped.
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 either the .row class when using grids, or the .form-row class (introduced in Bootstrap 4), which makes the form more compact.
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.
Form Label Size
No specific classes for adjusting form label size.
Bootstrap 4 introduced .col-form-label-sm and .col-form-label-lg to increase or decrease the size of a label to match the size of the relevant form control.
Help Text
Use the .help-block class to display help text.
Bootstrap 4 uses the .form-text class to display help text.
Validation and Feedback Icons
Includes validation styles for error, warning, and success states on form controls (for example, .has-warning). To present icons on the input fields using Bootstrap 3, use glyphicons.
Validation styles are not available for Bootstrap 4 forms. Use custom Bootstrap form validation messages instead.
Legends
No classes for styling the form legends.
Provides the option of using .col-form-label on legend elements to style it more like a label.
Static text
Uses .form-control-static to render static text instead of a control.
In Bootstrap 4, .form-control-static has been renamed to .form-control-plaintext.
Custom Forms
Not supported.
Bootstrap 4 introduced custom forms — completely custom form elements that replace the browser defaults.
Buttons
Styles
Includes the .btn-default and .btn-info classes.
The .btn-secondary class isn't available in Bootstrap 3.
Introduced the .btn-secondary, .btn-light, and .btn-dark classes.
Dropped the .btn-default class.
Note that the .btn-info class was initially dropped in Bootstrap 4 but then 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).
Input groups
Classes
Bootstrap 3 uses the .input-group-addon and .input-group-btn classes.
Bootstrap 4 dropped .input-group-addon and .input-group-btn for two new classes: .input-group-prepend and .input-group-append.
Bootstrap 4 also introduced .input-group-text for text within an input group.
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.
Media Objects
Classes
Includes many different classes for media objects, including .media, .media-body.media-object, .media-heading, .media-right, .media-left, and .media-list and .media-body.
Uses just .media class. Margins can be applied using spacer utilities. Media objects are flexbox enabled in Bootstrap 4, so the various flexbox classes can also be applied (such as reordering, etc).
Also requires .breadcrumb-item to be applied against all li elements that make up the breadcrumb.
Breadcrumbs can also be used outside of lists. For example, the .breadcrumb-item could be applied to a bunch of a elements that are wrapped in a .breadcrumb element.