Difference between Bootstrap 3 and Bootstrap 4

by SpeedySense Editorial | Last Updated: July 20, 2019

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 px to 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 (*, sm, md, lg, xl). While bootstrap 3 has 4 grid system (xs, sm, md, lg).

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 col-*-offset-* classes to offset columns.
e.g. col-md-offset-4 		Uses offset-*-* classes to offset columns.
e.g. offset-md-4

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 .col-xs- .col-sm- .col-md- .col-lg-
# of columns 12

Bootstrap 4 Grid Sizes

The following table shows how different Boostrap 4 grid options work with different viewport sizes.

Extra small
<576px 		Small
≥576px 		Medium
≥768px 		Large
≥992px 		Extra large
≥1200px
Max container width None (auto) 540px 720px 960px 1140px
Class prefix .col- .col-sm- .col-md- .col-lg- .col-xl-
# of columns 12

3. Navigation

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-link, nav-item. Also, navigation bar styles added in Bootstrap 4.

Navigation Bootstrap 3 Bootstrap 4
Inline Navs There is no .nav-inline class. Added .nav-inline class. You can used to specify navs to be displayed inline.
Navbar Colors Supports only navbar-inverse class.

Added .navbar-light and .navbar-dark classes.

Thus, you can use .bg-* classes on navbar.
Navbar Alignment Use .navbar-right, .navbar-left class to align components inside navbar.

Removed .navbar-right, .navbar-left classes.

float-right won’t work because the navbar is now flexbox.

Use flexbox alignment utilities .mr-auto (for auto right margin) and .ml-auto (for 2nd right margin).

Navbar Forms Use .navbar-form class to add forms within navbar. Removed the .navbar-form class.
Use .form-inline class.
Navbar Fixed Apply .navbar-fixed-top and .navbar-fixed-bottom class to fix navbar to the top or bottom. Apply .fixed-top and .fixed-bottom class to fix navbar to the top or bottom.
Affix Supported. Not Supported.

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 .img-responsive class. Use .img-fluid class.
Round Image Use .img-rounded class. Use .rounded class.
Responsive Image Use .img-responsive class. Use .img-fluid class.
Image Alignment For the alignment of image use .pull-right, .pull-left, and .center-block classes.

Use .pull-*-right, .pull-*-left and .m-x-auto classes.

Moreover, you can use .text-*-left, .text-*-right, and .text-*-center classes on the image parent element.
Media Objects Many different classes for media objects such as .media, .media-heading, .media-body, .media-object, .media-right, .media-left, and .media-list.

Use only .media class.

Media objects are flexbox enabled so you can use various flexbox classes.

5. Tables

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 .thead-default and .thead-inverse introduced.

Tables Bootstrap 3 Bootstrap 4
Responsive Tables Add .table-responsive class to a parent <div> element. Keep same .table-responsive class add to a parent <div> element.
Dark Tables Not supported. Added .table-dark class.
Table Header Not supported. The .thead-default and .thead-inverse table header modifiers classes added.
Tables Condensed Use .table-condensed class. Renamed to .table-sm class for consistency.
Other Contextual Classes

Doesn’t have a .table- prefix for its contextual classes.

For example, Bootstrap 3 uses .active, .success class.

Both versions are keep use 5 contextual keywords (active, success, info, warning, danger).

Added the .table- prefix for its contextual classes.

For example, Bootstrap 4 uses .table-active, .table-success class.

6. Buttons

Buttons Bootstrap 3 Bootstrap 4
Button Styles .btn-default

Renamed .btn-default to .btn-secondary class.

The .btn-light, and .btn-dark classes new added.
Button Sizes The .btn-xs class used for extra small device. Dropped the .btn-xs class entirely. Consider the .btn-sm class relatively smaller in v4.
Outline Buttons Not supported. Introduced the .btn-outline-* classes for adding outline buttons style along with an outline color.

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 .btn-group-xs class used to make button groups extra small sized. Dropped the .btn-group-xs class.
Button Group Justified The .btn-group-justified class used to justified button groups. Dropped the .btn-group-justified class.

8. Forms

There are no any significant changes in forms components except renamed few classes. Forms elements reset styles move into the _reboot.scss file.

Forms Bootstrap 3 Bootstrap 4
Horizontal Forms To make horizontal forms .form-horizontal class require to used.

Dropped the .form-horizontal class requirement. Because .row is now required for horizontal forms.

Added new .form-row class (or use .row class) for compact form layouts with the grid classes.
Checkboxes and Radio Buttons .radio
.checkbox
.radio-inline
.checkbox-inline

Renamed .checkbox and .radio into .form-check and various other .form-check-* classes.

For example, .form-check
.form-check-label
.form-check-input
.form-check-inline
Form Input Size

.input-lg
.input-sm

These both class used for increase and decrease the size of an input control.

 .form-control-lg
.form-control-sm
Form Label .control-label .col-form-label
Form Label Size No any specific classes. Available .col-form-label-sm and .col-form-label-lg to increase or decrease the size of a label.
Control label

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

The .control-label class is useful for validation states.

 Bootstrap 4 uses .col-form-label and .col-form-label-* when using grids for form layout.
Static Text The .form-control-static class used to set plain static text. The .form-control-plaintext class used to set plain static text.
Help Text The .help-block class used to display help text. The .form-text class used to display help text.

9. Input groups

The input group components are now specific to their placement relative to an Input.

Input groups Bootstrap 3 Bootstrap 4
Classes .input-group-addon and .input-group-btn classes used for input group.

Bootstrap 4 removed .input-group-addon and .input-group-btn class.

Introduce two new classes input-group-prepend and .input-group-append used to append or prepend to input text.

Furthermore, Bootstrap 4 also introduced .input-group-text class for wrap text within an input group.

10. List groups

Rewrite this component with flexbox.

List Groups Bootstrap 3 Bootstrap 4
Linked Items Add .list-group-item class to the <a> element. Add .list-group-item-action class to the <a> element.
Linked Items Not Supported. Introduced the .list-group-flush class use with cards.

11. Dropdowns

Dropdown components rebuilt with new styles and markup. Dropdowns can be built with <div> or <ul> element. Thus, dropdown provide easy built-in support for <a> and <button> based dropdown items.

Dropdowns Bootstrap 3 Bootstrap 4
Dropdown Structure Create dropdowns using <ul> and <li> list element.

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

The .dropdown-item class required to write in dropdown items.
Menu Headers The .dropdown-header class is used to add headers inside the dropdown menu (<li> element). The .dropdown-header class is used to add headers inside the dropdown menu (<div> element).
Disabled Menu Items The .disabled class used to the <li> element. The .disabled class used to the <a> element.
Item Dividers The .divider class used to the <li> element. The .dropdown-divider class used to the <div> element.

12. Typography

All .text- utilities styles are moved to the _utilities.scss file.

Typography Bootstrap 3 Bootstrap 4
Page Headers The .page-header class used to set page header.

Dropped .page-header class.

All its styles can be applied via utilities.
Description Lists The .dl-horizontal class used to display horizontal list.

Dropped .dl-horizontal class.

Use .row on <dl> element and use grid column classes (or mixins) on its <dt> and <dd> children.
Blockquotes Styles are directly apply to the <blockquote> element. Introduce .blockquote class to apply styles on <blockquote> element.
Blockquote Alignment Use .blockquote-reverse class to set blockquote on right align.

Dropped .blockquote-reverse class.

Use the text utilities to align blockquotes.

For example .text-center, .text-right.

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

.panel
.panel-default
.panel-group
.panel-heading
.panel-title
.panel-body
.panel-footer

.panel-primary, .panel-success, .panel-info, .panel-warning, and .panel-danger available to use in v3.

New .card class.
Removed .panel-default.
Removed .panel-group.
.card-header
.card-title
.card-body
.card-footer

.panel-primary, .panel-success, .panel-info, .panel-warning, and .panel-danger have been dropped. Instead, use .bg-, .text- utilities classes available in v4.

14. Pagination

This component are rewrite with flexbox.

Pagination Bootstrap 3 Bootstrap 4
Pagination Requires only .pagination class.

Requires .pagination class.

The .page-item class must be added on the descendants of .pagination.

For example, .page-item class add each <li> element and .page-link class add each <a> element.
Pagers Uses the .previous and .next class for aligning pagers. 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
Breadcrumbs

Uses the .breadcrumb class in <ul> element.

Not use any class on the descendants of .breadcrumbs.

Use the .breadcrumb same class in <ul> element.

Introduced .breadcrumb-item class and requires to applied all descendants of .breadcrumbs.
Jumbotron No need to required .jumbotron-fluid class for full-width jumbotrons. Introduced the .jumbotron-fluid class for full-width jumbotrons.
Glyphicons Icon Supported. Not supported.
Expand Content The .in class to expand the content. The .show class to expand the content.
Labels and badges You can use the .badge class to create badges.

Same, you can also use .badge class to create badges.

badges can use with .badge-pill class for rounded corners.
Carousel Item Use .item class. Use .carousel-item class.
Progress Bar

Create progress bar using nested <div> element.

The .progress-bar-* class used along with .progress-bar class.

For example, class="progress-bar progress-bar-danger".

Replaced .progress-bar-* classes with .bg-* utilities.

For example, class="progress-bar bg-danger".

Final Thoughts

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!

Support us on Buy me a coffee! Buy me a coffee!

Tags
Share
Tweet
Share
Pin
39 Shares

4 Responses Leave a Comment

  1. blank
    Shahbaz Ali July 30, 2019 at 11:04 PM

    Great cover everything!
    Thanks

    Reply
  2. blank
    Laurenism August 1, 2019 at 5:53 PM

    #Bootstrap4 is an ass-kicker! I like it;
    #flexbox is cool, #mobilefirst is cool, the new features are cool.

    🙂

    Reply
  3. blank
    Rémi Bèges August 2, 2019 at 1:55 PM

    Wow Nice Article.
    After using #bootstrap3 for a couple of years, #bootstrap4 feels like stepping into the 22nd century.

    Reply
  4. blank
    AR August 8, 2019 at 2:28 PM

    Thanks for sharing.

    Reply

Join the Discussion.