Difference between Bootstrap 3 and Bootstrap 4
In this article, we’ll discuss What the Difference between Bootstrap 3 and Bootstrap 4. Currently, Bootstrap 4 is the latest version of Bootstrap. Bootstrap new version has come up with some significant changes, adding new components, eliminate others.
Probably Bootstrap is the first choice of front-end developers. As we know Bootstrap is a trusted open-source framework to develop a modern website and applications quickly. A most popular HTML, CSS, and JS framework for developing responsive websites.
Bootstrap provides the basic structure of HTML and CSS with predefined classes, which help you to build functionality quickly and easily with device responsiveness. Thus, It saves plenty of times. For example, no need to start developing from scratch.
Main Differences between Bootstrap 3 vs Bootstrap 4
1. Global Changes
Switched from LESS to SASS for source CSS files. Because SASS is more potent than LESS. For example, SASS has functionality like logical operators, loops, nested media queries, mixin, class extend, and many others. Thus, SASS gives better comfort.
SASS help you to keep large stylesheets well-organized and makes it easy to share design within the project. You can also read about the SASS official tutorial.
Bootstrap 4 are switched from
rem as Bootstrap primary CSS unit. However,
px are still used for media queries.
Global font-size increased from 14px to 16px.
|Global Component||Bootstrap 3||Bootstrap 4|
|Source CSS Files||LESS||SCSS|
|Primary CSS Unit||px||rem|
|Media Queries Unit||px||px|
|Global Font Size||14px||16px|
|Default font-family||Helvetica Neue, Helvetica, Arial, sans-serif||Use a system fonts, 2nd priority with a fallback to Helvetica Neue, Arial, and sans-serif|
2. Grid Systems
Bootstrap 4 presence of up to 5 grid system (
xl). While bootstrap 3 has 4 grid system (
Bootstrap 4 has removed the
xs because it is the lowest breakpoint. However, Bootstrap 4 introduced
col-* covers all devices starting from lower breakpoint.
|Grid||Bootstrap 3||Bootstrap 4|
|Grid Tiers||4 grid system (xs, sm, md, lg)||5 grid system (*, sm, md, lg, xl)|
|Offsetting Columns||Uses |
Bootstrap 3 Grid Sizes
The following table shows how different Boostrap 3 grid options work with different viewport sizes.
|Extra small devices Phones (<768px)||Small devices Tablets (≥768px)||Medium devices Desktops (≥992px)||Large devices Desktops (≥1200px)|
|Container width||None (auto)||750px||970px||1170px|
|Class prefix|| || || || |
|# of columns||12|
Bootstrap 4 Grid Sizes
The following table shows how different Boostrap 4 grid options work with different viewport sizes.
| Extra small |
| Small |
| Medium |
| Large |
| Extra large |
|Max container width||None (auto)||540px||720px||960px||1140px|
|Class prefix|| || || || || |
|# of columns||12|
Bootstrap 4 navigation component rewrite with flexbox. Thus, it has been simplified in Bootstrap 4 to a great extent. Moreover, introduced a few additions class like
nav-item. Also, navigation bar styles added in Bootstrap 4.
|Navigation||Bootstrap 3||Bootstrap 4|
|Inline Navs||There is no ||Added |
|Navbar Colors||Supports only || |
Thus, you can use
|Navbar Alignment||Use || |
Use flexbox alignment utilities
|Navbar Forms||Use ||Removed the |
|Navbar Fixed||Apply ||Apply |
4. Images and Media Objects
In Bootstrap 4, renamed image classes. Media objects are used flexbox so you can use other flexbox classes.
|Images||Bootstrap 3||Bootstrap 4|
|Responsive Image||Use ||Use |
|Round Image||Use ||Use |
|Responsive Image||Use ||Use |
|Image Alignment||For the alignment of image use || |
Moreover, you can use
|Media Objects||Many different classes for media objects such as || |
Media objects are flexbox enabled so you can use various flexbox classes.
You can keep use
.table-responsive class on parent
<div> element of the table to make responsive tables. Bootstrap 4 added a new
.table-dark class. Also table header modifiers classes
|Tables||Bootstrap 3||Bootstrap 4|
|Responsive Tables||Add ||Keep same |
|Dark Tables||Not supported.||Added |
|Table Header||Not supported.||The |
|Tables Condensed||Use ||Renamed to |
|Other Contextual Classes|| |
Doesn’t have a
For example, Bootstrap 3 uses
Both versions are keep use 5 contextual keywords (
For example, Bootstrap 4 uses
|Buttons||Bootstrap 3||Bootstrap 4|
|Button Styles|| || |
|Button Sizes||The ||Dropped the |
|Outline Buttons||Not supported.||Introduced the |
7. Button Groups
Button groups component has rewritten with flexbox. Removed spacing between button groups in button toolbars. However, you can use margin utilities for spacing.
|Button Groups||Bootstrap 3||Bootstrap 4|
|Extra Small Button Group||The ||Dropped the |
|Button Group Justified||The ||Dropped the |
There are no any significant changes in forms components except renamed few classes. Forms elements reset styles move into the
|Forms||Bootstrap 3||Bootstrap 4|
|Horizontal Forms||To make horizontal forms || |
|Checkboxes and Radio Buttons|| || |
|Form Input Size|| |
These both class used for increase and decrease the size of an input control.
|Form Label|| || |
|Form Label Size||No any specific classes.||Available |
|Control label|| |
|Bootstrap 4 uses |
|Static Text||The ||The |
|Help Text||The ||The |
9. Input groups
The input group components are now specific to their placement relative to an Input.
|Input groups||Bootstrap 3||Bootstrap 4|
|Classes|| || |
Bootstrap 4 removed
Introduce two new classes
Furthermore, Bootstrap 4 also introduced
10. List groups
Rewrite this component with flexbox.
|List Groups||Bootstrap 3||Bootstrap 4|
|Linked Items||Add ||Add |
|Linked Items||Not Supported.||Introduced the |
Dropdown components rebuilt with new styles and markup. Dropdowns can be built with
<ul> element. Thus, dropdown provide easy built-in support for
<button> based dropdown items.
|Dropdowns||Bootstrap 3||Bootstrap 4|
|Dropdown Structure||Create dropdowns using || |
Dropdowns can be built with
|Menu Headers||The ||The |
|Disabled Menu Items||The ||The |
|Item Dividers||The ||The |
.text- utilities styles are moved to the
|Typography||Bootstrap 3||Bootstrap 4|
|Page Headers||The || |
All its styles can be applied via utilities.
|Description Lists||The || |
|Blockquotes||Styles are directly apply to the || Introduce |
|Blockquote Alignment||Use || |
Use the text utilities to align blockquotes.
13. Panels, thumbnails, and wells
Panels, wells, and thumbnails components are dropped entirely and add new card component. Moreover, these components has built with flexbox.
|Cards||Bootstrap 3||Bootstrap 4|
|Panels, wells, and thumbnails|| || |
This component are rewrite with flexbox.
|Pagination||Bootstrap 3||Bootstrap 4|
|Pagination||Requires only || |
|Pagers||Uses the ||Removed in Bootstrap 4.|
15. Other Components
Following are a few other components that represent the difference between Bootstrap 3 and Bootstrap 4.
|Component||Bootstrap 3||Bootstrap 4|
Not use any class on the descendants of
|Jumbotron||No need to required ||Introduced the |
|Glyphicons Icon||Supported.||Not supported.|
|Expand Content||The ||The |
|Labels and badges||You can use the || |
Same, you can also use
badges can use with
|Carousel Item||Use ||Use |
|Progress Bar|| |
Create progress bar using nested
Continuously, Bootstrap has many changes and improvements to create a beautiful framework that will be compatible with all devices. Moreover, many new enhancements in grid systems, typography, styles, and layout of components. Thus, you need to understand all the changes that have in Bootstrap 3 to Bootstrap 4. That we discussed in this article, it will definitely improve your development and user experience skills.
We hope you have found this article helpful. Let us know your questions or feedback if any through the comment section in below. You can subscribe to our newsletter and get notified when we publish new articles. Moreover, you can explore here other interesting articles.
If you like our article, please consider buying a coffee for us.
Thanks for your support!
Buy me a coffee!