Definition
| Bootstrap 3 is an open source framework for designing responsive websites with HTML, JavaScript and CSS.
| Bootstrap 4 released in August 2017 and added new features of flex modal for grid system and even added new components
|
Form Label Size
| Bootstrap 3 do not have any CLASS for form label size.
| Bootstrap 4 came with .col-form-label-sm and .col-form-label-lg to increase or decrease the size of a label and match the size of the relevant form control.
|
Global Font Size
| Bootstrap 3 had Global Form Size of 14px.
| Bootstrap 4 introduced Global Form Size of 16px.
|
Checkboxes and Radio Buttons
| The classes for checkbox and radio buttons are .radio, .radio-inline, .checkbox, or .checkbox-inline. Here inline is for DISPLAYING them in a line.
| For the same purpose, Bootstrap use .form-check, .form-check-label, .form-check-input, and .form-check-inline.
|
Source CSS file
| The source CSS file for Bootstrap 3 is LESS.
| The source CSS file for Bootstrap 3 is SCSS.
|
Offset Columns
| For offset columns, Bootstrap 3 use col-*-offset-* classes.
| For offset columns, Bootstrap 4 use offset-*-* classes.
|
Dark Tables
| You cannot add dark tables with Bootstrap 3.
| Add dark tables with the .table-dark class in Bootstrap 4
|
Form Control Size
| For increasing or decreasing the input control size, Bootstrap 3 has .input-lg and .input-sm.
| For increasing or decreasing the input control size, Bootstrap 4 has .form-control-lg and .form-control-sm classes.
|
Table Head Styles
| Classes for table head styles isn’t supported by Bootstrap 3.
| Create table head styles with.thead-light and .thead-dark classes.
|
Buttons with Outline
| You cannot style Button with outline color in Bootstrap 3.
| Bootstrap 4 introduced the .btn-outline-* classes for styling buttons with an outline color.
|
Button Sizes
| Classes are available for resize buttons.
| Bootstrap 4 only deprecated the .btn-xs class. Rest, .btn-sm and .btn-lg are still available.
|
Responsive Images
| To create responsive images with Bootstrap 3, use the .img-responsive class.
| To create responsive images with Bootstrap 4, use .img-fluid class.
|
Media Objects
| Bootstrap 3 came with a lot of classes for Media Objects, such as .media, .media-body .media-object, .media-heading, etc.
| Bootstrap 4 only use .media class.
|
DISABLED Menu Items
| To disable Menu Items in Bootstrap 3, you need to use the .disabled class. Set the class to the <LI> to disable.
| To disable Menu Items in Bootstrap 4, you need to use the .disabled class . Set the class to the <a> to disable.
|
Justified ButtonGroups
| The .btn-group-justified class is used in Bootstrap 3 to justify button groups.
| The .btn-group-justified class is not supported in Bootstrap 4.
|
Extra Small ButtonGroups
| Bootstrap 3 supported a class for extra small button groups i.e. .btn-group-xs class.
| Bootstrap 4 do not support any class for extra small button groups..
|
Fixed Navbars (Top or Bottom)
| The .navbar-fixed-top and .navbar-fixed-bottom is used in Bootstrap 3 to fix navbars to the top or bottom.
| To fix navbars to the top and bottom, Bootstrap 4 introduced .fixed-top and .fixed-bottom classes..
|
Full-Width Jumbotron
| For full-width jumbotrons, the .jumbotron-fluid class is not supported in Bootstrap 3.
| Bootstrap 4 came with .jumbotron-fluid class for full-width jumbotrons.
|
Page Header class
| The .page-header class introduced with Bootstrap 3.
| The .page-header class wasn’t supported in Bootstrap 4.
|
Bootstrap Cards
| Cards weren’t introduced in Bootstrap 3.
| Bootstrap 4 introduced Cards to replace the functionality provided by panels and wells in Bootstrap 3.
|
Panels
| Panel introduced in Bootstrap 3.
| Introduction of cards in Bootstrap 4 replaced the functionality provided by Panels.
|
Wells
| The concept of Wells wasn’t supported in Bootstrap3.
| Bootstrap 4 introduced the concept of Wells. It is a container that adds a rounded border around an element and adds padding and gray background color.
|
Carousel Item
| For creating carousel item with Bootstrap 3, use the .item class.
| For creating carousel item with Bootstrap 4, use the .carousel-item class.
|
